feat(badge): add bordered badge

Author: MGREMY

apps/docs/docs/components/badge/_bordered.component.html

@@ -0,0 +1,41 @@
+<flowbite-badge [hasBorder]="true">Default</flowbite-badge>
+<flowbite-badge
+  [hasBorder]="true"
+  color="primary">
+  Primary
+</flowbite-badge>
+<flowbite-badge
+  [hasBorder]="true"
+  color="blue">
+  Blue
+</flowbite-badge>
+<flowbite-badge
+  [hasBorder]="true"
+  color="red">
+  Red
+</flowbite-badge>
+<flowbite-badge
+  [hasBorder]="true"
+  color="green">
+  Green
+</flowbite-badge>
+<flowbite-badge
+  [hasBorder]="true"
+  color="yellow">
+  Yellow
+</flowbite-badge>
+<flowbite-badge
+  [hasBorder]="true"
+  color="indigo">
+  Indigo
+</flowbite-badge>
+<flowbite-badge
+  [hasBorder]="true"
+  color="purple">
+  Purple
+</flowbite-badge>
+<flowbite-badge
+  [hasBorder]="true"
+  color="pink">
+  Pink
+</flowbite-badge>

apps/docs/docs/components/badge/_bordered.component.ts

@@ -0,0 +1,13 @@
+import { BadgeComponent } from 'flowbite-angular/badge';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-badge-bordered',
+  imports: [BadgeComponent],
+  templateUrl: './_bordered.component.html',
+  host: {
+    class: 'flex flex wrap flex-row gap-3',
+  },
+})
+export class FlowbiteBorderedComponent {}

apps/docs/docs/components/badge/index.md

@@ -26,6 +26,18 @@ keyword: BadgePage
 
 ```
 
+## Bordered badge
+
+{{ NgDocActions.demo('flowbiteBorderedComponent', {container: false}) }}
+
+```angular-html file="./_bordered.component.html" group="bordered" name="html"
+
+```
+
+```angular-ts file="./_bordered.component.ts" group="bordered" name="typescript"
+
+```
+
 ## Badge as link
 
 {{ NgDocActions.demo('flowbiteLinkComponent', {container: false}) }}

apps/docs/docs/components/badge/ng-doc.page.ts

@@ -1,4 +1,5 @@
 import ComponentCategory from '../ng-doc.category';
+import { FlowbiteBorderedComponent } from './_bordered.component';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteIconOnlyComponent } from './_icon-only.component';
 import { FlowbiteIconComponent } from './_icon.component';
@@ -19,6 +20,7 @@ const badge: NgDocPage = {
   order: 3,
   demos: {
     flowbiteDefaultComponent: FlowbiteDefaultComponent,
+    flowbiteBorderedComponent: FlowbiteBorderedComponent,
     flowbiteIconOnlyComponent: FlowbiteIconOnlyComponent,
     flowbiteIconComponent: FlowbiteIconComponent,
     flowbiteLargeComponent: FlowbiteLargeComponent,

libs/flowbite-angular/badge/badge.component.ts

@@ -19,6 +19,10 @@ export const FLOWBITE_BADGE_COLOR_DEFAULT_VALUE = new InjectionToken<keyof Badge
   'FLOWBITE_BADGE_COLOR_DEFAULT_VALUE'
 );
 
+export const FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE = new InjectionToken<boolean>(
+  'FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE'
+);
+
 export const FLOWBITE_BADGE_SIZE_DEFAULT_VALUE = new InjectionToken<keyof BadgeSizes>(
   'FLOWBITE_BADGE_SIZE_DEFAULT_VALUE'
 );
@@ -40,6 +44,10 @@ export const badgeDefaultValueProvider = makeEnvironmentProviders([
     provide: FLOWBITE_BADGE_COLOR_DEFAULT_VALUE,
     useValue: 'primary',
   },
+  {
+    provide: FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE,
+    useValue: false,
+  },
   {
     provide: FLOWBITE_BADGE_SIZE_DEFAULT_VALUE,
     useValue: 'xs',
@@ -85,6 +93,10 @@ export class BadgeComponent extends BaseComponent<BadgeClass> {
    * @default primary
    */
   public color = model(inject(FLOWBITE_BADGE_COLOR_DEFAULT_VALUE));
+  /**
+   * Set if the badge has border
+   */
+  public hasBorder = model(inject(FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE));
   /**
    * Set the badge size
    *
@@ -113,6 +125,7 @@ export class BadgeComponent extends BaseComponent<BadgeClass> {
   public override fetchClass(): BadgeClass {
     return this.themeService.getClasses({
       color: this.color(),
+      hasBorder: booleanToFlowbiteBoolean(this.hasBorder()),
       size: this.size(),
       isIconOnly: booleanToFlowbiteBoolean(this.isIconOnly()),
       isPill: booleanToFlowbiteBoolean(this.isPill()),

libs/flowbite-angular/badge/badge.theme.service.ts

@@ -31,6 +31,7 @@ export class BadgeThemeService implements FlowbiteThemeService<BadgeProperties>
       rootClass: twMerge(
         theme.root.base,
         theme.root.color[properties.color],
+        theme.root.hasBorder[properties.hasBorder],
         theme.root.size[properties.size],
         theme.root.isPill[
           properties.isPill == 'enabled' || properties.isIconOnly == 'enabled'

libs/flowbite-angular/badge/badge.theme.ts

@@ -33,6 +33,7 @@ export interface BadgeSizes extends Pick<FlowbiteSizes, 'xs' | 'sm'> {
  */
 export interface BadgeProperties {
   color: keyof BadgeColors;
+  hasBorder: keyof FlowbiteBoolean;
   size: keyof BadgeSizes;
   isIconOnly: keyof FlowbiteBoolean;
   isPill: keyof FlowbiteBoolean;
@@ -46,6 +47,7 @@ export interface BadgeProperties {
 export interface BadgeTheme {
   root: {
     base: string;
+    hasBorder: FlowbiteBoolean;
     color: BadgeColors;
     size: BadgeSizes;
     isPill: FlowbiteBoolean;
@@ -62,19 +64,23 @@ export const badgeTheme: BadgeTheme = createTheme({
     base: 'flex h-fit items-center gap-1 font-semibold',
     color: {
       primary:
-        'bg-primary-100 dark:bg-primary-700 text-primary-800 dark:text-primary-300 group-hover:bg-primary-200 dark:group-hover:bg-primary-600',
-      dark: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600',
-      blue: 'bg-blue-100 dark:bg-blue-200 text-blue-800 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300',
-      red: 'bg-red-100 dark:bg-red-200 text-red-800 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300',
+        'bg-primary-100 dark:bg-primary-700 text-primary-800 dark:text-primary-300 group-hover:bg-primary-200 dark:group-hover:bg-primary-600 border-primary-300 dark:border-primary-800',
+      dark: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 group-hover:bg-gray-200 dark:group-hover:bg-gray-600 border-gray-300 dark:border-gray-600',
+      blue: 'bg-blue-100 dark:bg-blue-200 text-blue-800 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300 border-blue-300 dark:border-blue-800',
+      red: 'bg-red-100 dark:bg-red-200 text-red-800 dark:text-red-900 group-hover:bg-red-200 dark:group-hover:bg-red-300 border-red-300 dark:border-red-800',
       green:
-        'bg-green-100 dark:bg-green-200 text-green-800 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300',
+        'bg-green-100 dark:bg-green-200 text-green-800 dark:text-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-300 border-green-300 dark:border-green-800',
       yellow:
-        'bg-yellow-100 dark:bg-yellow-200 text-yellow-800 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300',
+        'bg-yellow-100 dark:bg-yellow-200 text-yellow-800 dark:text-yellow-900 group-hover:bg-yellow-200 dark:group-hover:bg-yellow-300 border-yellow-300 dark:border-yellow-800',
       indigo:
-        'bg-indigo-100 dark:bg-indigo-200 text-indigo-800 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300',
+        'bg-indigo-100 dark:bg-indigo-200 text-indigo-800 dark:text-indigo-900 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-300 border-indigo-300 dark:border-indigo-800',
       purple:
-        'bg-purple-100 dark:bg-purple-200 text-purple-800 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300',
-      pink: 'bg-pink-100 dark:bg-pink-200 text-pink-800 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300',
+        'bg-purple-100 dark:bg-purple-200 text-purple-800 dark:text-purple-900 group-hover:bg-purple-200 dark:group-hover:bg-purple-300 border-purple-300 dark:border-purple-800',
+      pink: 'bg-pink-100 dark:bg-pink-200 text-pink-800 dark:text-pink-900 group-hover:bg-pink-200 dark:group-hover:bg-pink-300 border-pink-300 dark:border-pink-800',
+    },
+    hasBorder: {
+      enabled: 'border',
+      disabled: 'border-0',
     },
     size: {
       xs: 'text-xs p-1',