import { mergeTheme, CLOSE_SVG_ICON, createTheme } from 'flowbite-angular/utils'; import * as i0 from '@angular/core'; import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; import { twMerge } from 'tailwind-merge'; import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular'; import { IconRegistry, IconComponent } from 'flowbite-angular/icon'; import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link'; import { DomSanitizer } from '@angular/platform-browser'; /** * `InjectionToken` used to import `BadgeTheme` value * * @example * ``` * var theme = inject(FLOWBITE_BADGE_THEME_TOKEN) * ``` */ const FLOWBITE_BADGE_THEME_TOKEN = new InjectionToken('FLOWBITE_BADGE_THEME_TOKEN'); class BadgeThemeService { constructor() { this.baseTheme = inject(FLOWBITE_BADGE_THEME_TOKEN); } getClasses(properties) { const theme = mergeTheme(this.baseTheme, properties.customStyle); const output = { 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' ? 'enabled' : properties.isPill], theme.root.isIconOnly[properties.isIconOnly], theme.root.link[properties.link ? 'enabled' : 'disabled']), closeButtonClass: twMerge(theme.closeButton.base, theme.closeButton.color[properties.color]), }; return output; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeThemeService, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeThemeService, decorators: [{ type: Injectable, args: [{ providedIn: 'root', }] }] }); const FLOWBITE_BADGE_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_COLOR_DEFAULT_VALUE'); const FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE'); const FLOWBITE_BADGE_SIZE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_SIZE_DEFAULT_VALUE'); const FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE'); const FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE'); const FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE'); const FLOWBITE_BADGE_IS_DISMISSABLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_IS_DISMISSABLE_DEFAULT_VALUE'); const FLOWBITE_BADGE_ON_DISMISS_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BADGE_ON_DISMISS_DEFAULT_VALUE'); 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', }, { provide: FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE, useValue: false, }, { provide: FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE, useValue: false, }, { provide: FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE, useValue: {}, }, { provide: FLOWBITE_BADGE_IS_DISMISSABLE_DEFAULT_VALUE, useValue: false, }, { provide: FLOWBITE_BADGE_ON_DISMISS_DEFAULT_VALUE, useValue: undefined, }, ]); /** * @see https://flowbite.com/docs/components/badge/ */ class BadgeComponent extends BaseComponent { constructor() { super(...arguments); /** * Optional `FlowbiteRouterLinkDirective` injected */ this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true }); /** * Service injected used to generate class */ this.themeService = inject(BadgeThemeService); /** * `IcoRegistry` service */ this.iconRegistry = inject(IconRegistry); /** * `DomSanitizer` service */ this.domSanitizer = inject(DomSanitizer); //#region properties /** * Set the badge color * * @default primary */ this.color = model(inject(FLOWBITE_BADGE_COLOR_DEFAULT_VALUE)); /** * Set if the badge has border * * @default false */ this.hasBorder = model(inject(FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE)); /** * Set the badge size * * @default xs */ this.size = model(inject(FLOWBITE_BADGE_SIZE_DEFAULT_VALUE)); /** * Set if the badge is icon only * * @default false */ this.isIconOnly = model(inject(FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE)); /** * Set if the badge is pill * * @default false */ this.isPill = model(inject(FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE)); /** * Set the custom style for this badge */ this.customStyle = model(inject(FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE)); /** * Set if the badge is dismissable * * @default false */ this.isDismissable = model(inject(FLOWBITE_BADGE_IS_DISMISSABLE_DEFAULT_VALUE)); /** * Set the function called when the badge is dismissed * * @default undefined */ this.onDismiss = model(inject(FLOWBITE_BADGE_ON_DISMISS_DEFAULT_VALUE)); } //#endregion //#region BaseComponent implementation fetchClass() { return this.themeService.getClasses({ color: this.color(), hasBorder: booleanToFlowbiteBoolean(this.hasBorder()), size: this.size(), isIconOnly: booleanToFlowbiteBoolean(this.isIconOnly()), isPill: booleanToFlowbiteBoolean(this.isPill()), link: this.flowbiteRouterLink?.routerLink.urlTree ?? null, customStyle: this.customStyle(), }); } init() { this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'close', this.domSanitizer.bypassSecurityTrustHtml(CLOSE_SVG_ICON)); } //#endregion /** * Call the onDismiss function if it's not undefined */ onDismissClick() { const func = this.onDismiss(); if (func) func(); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: BadgeComponent, isStandalone: true, selector: "flowbite-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isIconOnly: { classPropertyName: "isIconOnly", publicName: "isIconOnly", isSignal: true, isRequired: false, transformFunction: null }, isPill: { classPropertyName: "isPill", publicName: "isPill", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, isDismissable: { classPropertyName: "isDismissable", publicName: "isDismissable", isSignal: true, isRequired: false, transformFunction: null }, onDismiss: { classPropertyName: "onDismiss", publicName: "onDismiss", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", hasBorder: "hasBorderChange", size: "sizeChange", isIconOnly: "isIconOnlyChange", isPill: "isPillChange", customStyle: "customStyleChange", isDismissable: "isDismissableChange", onDismiss: "onDismissChange" }, usesInheritance: true, ngImport: i0, template: ` <ng-content /> @if (isDismissable()) { <button type="button" [class]="contentClasses()!.closeButtonClass" aria-label="Close" (click)="onDismissClick()"> <span class="sr-only">Close</span> <flowbite-icon svgIcon="flowbite-angular:close" class="h-3 w-3" /> </button> } `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BadgeComponent, decorators: [{ type: Component, args: [{ standalone: true, imports: [IconComponent], selector: 'flowbite-badge', template: ` <ng-content /> @if (isDismissable()) { <button type="button" [class]="contentClasses()!.closeButtonClass" aria-label="Close" (click)="onDismissClick()"> <span class="sr-only">Close</span> <flowbite-icon svgIcon="flowbite-angular:close" class="h-3 w-3" /> </button> } `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }] }] }); /** * Default theme for `BadgeComponent` */ const badgeTheme = createTheme({ root: { 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 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 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 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 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 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', sm: 'text-sm p-1.5', }, isPill: { enabled: 'rounded-full', disabled: 'rounded', }, link: { enabled: 'group cursor-pointer', disabled: '', }, isIconOnly: { enabled: '', disabled: 'px-2 py-0.5', }, }, closeButton: { base: 'ms-1 inline-flex items-center rounded-sm p-1 focus:ring-2', color: { primary: 'text-primary-500 dark:text-primary-600 hover:bg-primary-200 dark:hover:bg-primary-300', dark: 'text-gray-500 dark:text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-300', blue: 'text-blue-500 dark:text-blue-600 hover:bg-blue-200 dark:hover:bg-blue-300', red: 'text-red-500 dark:text-red-600 hover:bg-red-200 dark:hover:bg-red-300', green: 'text-green-500 dark:text-green-600 hover:bg-green-200 dark:hover:bg-green-300', yellow: 'text-yellow-500 dark:text-yellow-600 hover:bg-yellow-200 dark:hover:bg-yellow-300', indigo: 'text-indigo-500 dark:text-indigo-600 hover:bg-indigo-200 dark:hover:bg-indigo-300', purple: 'text-purple-500 dark:text-purple-600 hover:bg-purple-200 dark:hover:bg-purple-300', pink: 'text-pink-500 dark:text-pink-600 hover:bg-pink-200 dark:hover:bg-pink-300', }, }, }); /** * Generated bundle index. Do not edit. */ export { BadgeComponent, BadgeThemeService, FLOWBITE_BADGE_COLOR_DEFAULT_VALUE, FLOWBITE_BADGE_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_BADGE_IS_ICON_ONLY_DEFAULT_VALUE, FLOWBITE_BADGE_IS_PILL_DEFAULT_VALUE, FLOWBITE_BADGE_SIZE_DEFAULT_VALUE, FLOWBITE_BADGE_THEME_TOKEN, badgeDefaultValueProvider, badgeTheme }; //# sourceMappingURL=flowbite-angular-badge.mjs.map