flowbite-angular 0.0.2 → 1.0.0-alpha.1

package/fesm2022/flowbite-angular.mjs

@@ -0,0 +1,4326 @@
+import * as i0 from '@angular/core';
+import { inject, Injector, signal, computed, afterNextRender, Directive, InjectionToken, model, Component, PLATFORM_ID, SecurityContext, Injectable, ElementRef, effect, contentChild, untracked, contentChildren, ViewChild, input, viewChild, TemplateRef, ViewContainerRef, Pipe, makeEnvironmentProviders } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { NgIf, NgClass, DOCUMENT, isPlatformBrowser, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { DomSanitizer } from '@angular/platform-browser';
+import { of, throwError, map, tap, finalize, share, take, Subject, takeUntil, filter } from 'rxjs';
+import * as i1 from '@angular/router';
+import { Router, RouterLink, NavigationStart, RouterLinkActive } from '@angular/router';
+import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
+
+/**
+ * This function cast a boolean to the internal flowbute-angular boolean type.
+ *
+ * @param value The input to be cast.
+ * @returns enabled if value is true ; disabled if value is false.
+ */
+function booleanToFlowbiteBoolean(value) {
+    return value ? 'enabled' : 'disabled';
+}
+
+/**
+ * This class provide an implementation of Guid used as id for flowbite-angular components.
+ *
+ * @see https://gist.github.com/emptyother/1fd97db034ef848f38eca3354fa9ee90
+ */
+class Guid {
+    /**
+     * If value is given and if the value is a valid Guid, then return a Guid from the string ; Otherwise or if no value is given, create a Guid class without value.
+     *
+     * @param value Guid as string if you want to get a Guid type from string
+     */
+    constructor(value) {
+        this.value = this.empty;
+        if (value) {
+            if (Guid.isValid(value)) {
+                this.value = value;
+            }
+        }
+    }
+    /**
+     * Function that generate new Guid.
+     *
+     * @returns New Guid.
+     */
+    static newGuid() {
+        return new Guid(crypto.randomUUID());
+    }
+    /**
+     * Function that generate an empty Guid.
+     *
+     * @return "00000000-0000-0000-0000-000000000000".
+     */
+    static get empty() {
+        return '00000000-0000-0000-0000-000000000000';
+    }
+    /**
+     * Function that generate an empty Guid.
+     *
+     * @return "00000000-0000-0000-0000-000000000000".
+     */
+    get empty() {
+        return Guid.empty;
+    }
+    /**
+     * Check if the provided Guid is valid.
+     *
+     * @param str The Guid to check.
+     * @returns true if the Guid is valid ; false otherwise.
+     */
+    static isValid(str) {
+        const validRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+        return validRegex.test(str);
+    }
+    /**
+     * ToString base method.
+     *
+     * @returns Value as string.
+     */
+    toString() {
+        return this.value;
+    }
+    /**
+     * ToJson base method.
+     *
+     * @returns Value as Json compatible string.
+     */
+    toJSON() {
+        return this.value;
+    }
+}
+/**
+ * Function that return a new Guid.
+ *
+ * @returns New {@link Guid}.
+ *
+ * @see `Guid`
+ */
+function generateId() {
+    return Guid.newGuid();
+}
+
+class BaseComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.flowbiteId = signal(new Guid(Guid.empty));
+        this.contentClasses = computed(() => this.fetchClass());
+    }
+    ngOnInit() {
+        this.verify();
+        this.init();
+        afterNextRender(() => {
+            this.flowbiteId.set(generateId());
+        }, { injector: this.injector });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    init() { }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    verify() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BaseComponent, isStandalone: true, host: { properties: { "class": "this.contentClasses().rootClass", "attr.flowbite-id": "this.flowbiteId()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    host: {
+                        '[class]': 'this.contentClasses().rootClass',
+                        '[attr.flowbite-id]': 'this.flowbiteId()',
+                    },
+                }]
+        }] });
+
+/**
+ * Check if the provided parameter is an object or not.
+ *
+ * @param item The unknown type parameter.
+ * @returns true if it's an ibject ; false otherwise.
+ */
+function isObject(item) {
+    return item !== null && typeof item === 'object' && item.constructor === Object;
+}
+
+/**
+ * Function that return the cloned type of the provided generic type.
+ *
+ * @param source Generic object to be cloned.
+ * @returns The clone type of th eprovided type.
+ */
+function cloneDeep(source) {
+    if (!isObject(source)) {
+        return source;
+    }
+    const output = {};
+    for (const key in source) {
+        output[key] = cloneDeep(source[key]);
+    }
+    return output;
+}
+
+/**
+ * Merge two objects into one.
+ *
+ * @param target Object to be merged.
+ * @param source Object to be merged.
+ * @returns The merged object.
+ */
+function mergeTheme(target, source) {
+    if (isObject(source) && Object.keys(source).length === 0) {
+        return cloneDeep({ ...target, ...source });
+    }
+    const output = { ...target, ...source };
+    if (isObject(source) && isObject(target)) {
+        for (const key in source) {
+            if (isObject(source[key]) && key in target && isObject(target[key])) {
+                output[key] = mergeTheme(target[key], source[key]);
+            }
+            else {
+                output[key] = isObject(source[key]) ? cloneDeep(source[key]) : source[key];
+            }
+        }
+    }
+    return output;
+}
+
+const FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN = new InjectionToken('FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN');
+class AccordionContentThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_ACCORDION_CONTENT_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.isOpen[properties.isOpen]),
+        };
+        return output;
+    }
+}
+
+class AccordionContentComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(AccordionContentThemeService);
+        this.accordionPanelComponent = inject(AccordionPanelComponent);
+        //#region properties
+        this.color = model(this.accordionPanelComponent.color());
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.accordionPanelComponent.accordionComponent.color(),
+            isOpen: booleanToFlowbiteBoolean(this.accordionPanelComponent.isOpen()),
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AccordionContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: AccordionContentComponent, isStandalone: true, selector: "flowbite-accordion-content", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `
+    <ng-container *ngIf="accordionPanelComponent.isOpen()">
+      <ng-content />
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AccordionContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgIf, NgClass],
+                    selector: 'flowbite-accordion-content',
+                    template: `
+    <ng-container *ngIf="accordionPanelComponent.isOpen()">
+      <ng-content />
+    </ng-container>
+  `,
+                }]
+        }] });
+
+const FLOWBITE_ACCORDION_PANEL_THEME_TOKEN = new InjectionToken('FLOWBITE_ACCORDION_PANEL_THEME_TOKEN');
+class AccordionPanelThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_ACCORDION_PANEL_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+        };
+        return output;
+    }
+}
+
+const CLOSE_SVG_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="M6 18 17.94 6M18 18 6.06 6" />
+</svg>
+`;
+const CHEVRON_UP_SVG_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 14-4-4-4 4" />
+</svg>
+`;
+const CHEVRON_DOWN_SVG_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 10 4 4 4-4" />
+</svg>
+`;
+const CHEVRON_RIGHT_SVG_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4" />
+</svg>
+`;
+const SUN_SVG_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="M12 5V3m0 18v-2M7.05 7.05 5.636 5.636m12.728 12.728L16.95 16.95M5 12H3m18 0h-2M7.05 16.95l-1.414 1.414M18.364 5.636 16.95 7.05M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" />
+</svg>
+`;
+const MOON_SVG_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="M12 21a9 9 0 0 1-.5-17.986V3c-.354.966-.5 1.911-.5 3a9 9 0 0 0 9 9c.239 0 .254.018.488 0A9.004 9.004 0 0 1 12 21Z" />
+</svg>
+`;
+const BARS_SVG_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 7h14M5 12h14M5 17h14" />
+</svg>
+`;
+
+/**
+ * Thanks to Angular Material for Icon part of this library : https://github.com/angular/components
+ */
+let policy;
+function getPolicy() {
+    if (!policy) {
+        if (typeof window !== 'undefined') {
+            const tWindow = window;
+            if (tWindow.trustedTypes !== undefined) {
+                policy = tWindow.trustedTypes.createPolicy('angular#components', {
+                    createHTML: (s) => s,
+                });
+            }
+        }
+    }
+    return policy;
+}
+function trustedHTMLFromString(raw) {
+    return getPolicy()?.createHTML(raw) || raw;
+}
+
+/**
+ * Thanks to Angular Material for Icon part of this library : https://github.com/angular/components
+ */
+function getSvgIconFromNamedError(iconName) {
+    return Error(`Unable to find icon with name ${iconName}`);
+}
+function getSvgIconFailedToSanitizeRawError(raw) {
+    return Error(`The raw provided to IconRegistry was not trusted as safe HTML by ANGULAR's DOMSanitizer. Attempted raw was : ${raw}`);
+}
+function getSvgIconFailedToSanitizeUrlError(url) {
+    return Error(`The URL provided to IconRegistry was not trusted as a resource URL via Angular's DOMSanitizer. Attempted URL was : ${url}`);
+}
+function getSvgIconNoHttpClientProvidedError() {
+    return Error(`Could not fid HttpClient provider for use with flowbite-angular icons. Please include the HttpClientModule from @angular/common/http in your app imports`);
+}
+class SvgIconConfig {
+    constructor(url, svgText, options) {
+        this.url = url;
+        this.svgText = svgText;
+        this.options = options;
+        this.svgElement = null;
+    }
+}
+class IconRegistry {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this._httpClient = inject(HttpClient, { optional: true });
+        this._sanitizer = inject(DomSanitizer);
+        this._document = inject(DOCUMENT);
+        this._svgIconConfig = new Map();
+        this._cachedSvgIconByUrl = new Map();
+        this._inProgressSvgIconFetch = new Map();
+    }
+    addSvgIcon(iconName, url, options) {
+        return this.addSvgIconInNamespace('', iconName, url, options);
+    }
+    addRawSvgIcon(iconName, raw, options) {
+        return this.addRawSvgIconInNamepsace('', iconName, raw, options);
+    }
+    addSvgIconInNamespace(namespace, iconName, url, options) {
+        return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig(url, undefined, options));
+    }
+    addRawSvgIconInNamepsace(namespace, iconName, raw, options) {
+        const cleanRaw = this._sanitizer.sanitize(SecurityContext.HTML, raw);
+        if (!cleanRaw) {
+            throw getSvgIconFailedToSanitizeRawError(raw);
+        }
+        const trustedRaw = trustedHTMLFromString(cleanRaw);
+        return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig('', trustedRaw, options));
+    }
+    getSvgIconFromUrl(safeUrl) {
+        const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl);
+        if (!url) {
+            throw getSvgIconFailedToSanitizeUrlError(safeUrl);
+        }
+        const cachedIcon = this._cachedSvgIconByUrl.get(url);
+        if (cachedIcon) {
+            return of(cloneSvg(cachedIcon));
+        }
+        return this._loadSvgIconFromConfig(new SvgIconConfig(safeUrl, undefined));
+    }
+    getSvgIconFromName(iconName, namespace) {
+        const key = iconKey(namespace, iconName);
+        const config = this._svgIconConfig.get(key);
+        if (config) {
+            return this._getSvgIconFromConfig(config);
+        }
+        return throwError(() => getSvgIconFromNamedError(key));
+    }
+    ngOnDestroy() {
+        this._svgIconConfig.clear();
+        this._cachedSvgIconByUrl.clear();
+    }
+    _addSvgIconConfig(namespace, iconName, config) {
+        this._svgIconConfig.set(iconKey(namespace, iconName), config);
+        return this;
+    }
+    _getSvgIconFromConfig(config) {
+        if (config.svgText) {
+            return of(cloneSvg(this._svgElementFromConfig(config)));
+        }
+        else {
+            return this._loadSvgIconFromConfig(config).pipe(map((svg) => cloneSvg(svg)));
+        }
+    }
+    _loadSvgIconFromConfig(config) {
+        return this._fetchIcon(config).pipe(tap((svgText) => (config.svgText = svgText)), map(() => this._svgElementFromConfig(config)));
+    }
+    _setSvgAttributes(svg, options) {
+        svg.setAttribute('fit', '');
+        svg.setAttribute('height', '100%');
+        svg.setAttribute('width', '100%');
+        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+        svg.setAttribute('focusable', 'false');
+        if (options?.viewBox) {
+            svg.setAttribute('viewBox', options.viewBox);
+        }
+        return svg;
+    }
+    _svgElementFromConfig(config) {
+        if (!config.svgElement) {
+            const svg = this._svgElementFromString(config.svgText);
+            this._setSvgAttributes(svg, config.options);
+            config.svgElement = svg;
+        }
+        return config.svgElement;
+    }
+    _svgElementFromString(str) {
+        const div = this._document.createElement('div');
+        div.innerHTML = str;
+        const svg = div.querySelector('svg');
+        return svg;
+    }
+    _fetchIcon(iconConfig) {
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this._httpClient) {
+                throw getSvgIconNoHttpClientProvidedError();
+            }
+            const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, iconConfig.url);
+            if (!url) {
+                throw getSvgIconFailedToSanitizeUrlError(iconConfig.url);
+            }
+            const inProgressFetch = this._inProgressSvgIconFetch.get(url);
+            if (inProgressFetch) {
+                return inProgressFetch;
+            }
+            const req = this._httpClient.get(url, { responseType: 'text' }).pipe(map((svg) => {
+                return trustedHTMLFromString(svg);
+            }), finalize(() => this._inProgressSvgIconFetch.delete(url)), share());
+            this._inProgressSvgIconFetch.set(url, req);
+            return req;
+        }
+        else {
+            return of(trustedHTMLFromString('<svg></svg>'));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconRegistry, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+function cloneSvg(svg) {
+    return svg.cloneNode(true);
+}
+function iconKey(namespace, iconName) {
+    return `${namespace}:${iconName}`;
+}
+
+class IconComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this._elementRef = inject((ElementRef));
+        this._iconRegistry = inject(IconRegistry);
+        this.svgIcon = model.required();
+    }
+    init() {
+        effect(() => {
+            this._updateSvgIcon();
+        }, { injector: this.injector });
+    }
+    fetchClass() {
+        return { rootClass: '' };
+    }
+    _splitIconName(iconName) {
+        if (!iconName) {
+            return ['', ''];
+        }
+        const parts = iconName.split(':');
+        switch (parts.length) {
+            case 1:
+                return ['', parts[0]];
+            case 2:
+                return parts;
+            default:
+                throw Error(`Invalid icon name: "${iconName}"`);
+        }
+    }
+    _updateSvgIcon() {
+        const [namespace, iconName] = this._splitIconName(this.svgIcon());
+        this._iconRegistry
+            .getSvgIconFromName(iconName, namespace)
+            .pipe(take(1))
+            .subscribe((svg) => this._setSvgElement(svg));
+    }
+    _setSvgElement(svg) {
+        this._clearSvgElements();
+        this._elementRef.nativeElement.appendChild(svg);
+    }
+    _clearSvgElements() {
+        const layoutElement = this._elementRef.nativeElement;
+        let childCount = layoutElement.childNodes.length;
+        while (childCount--) {
+            const child = layoutElement.childNodes[childCount];
+            if (child.nodeType !== 1 || child.nodeName.toLowerCase() === 'svg') {
+                child.remove();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: IconComponent, isStandalone: true, selector: "flowbite-icon", inputs: { svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { svgIcon: "svgIconChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flowbite-icon',
+                    standalone: true,
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const FLOWBITE_ACCORDION_TITLE_THEME_TOKEN = new InjectionToken('FLOWBITE_ACCORDION_TITLE_THEME_TOKEN');
+class AccordionTitleThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_ACCORDION_TITLE_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.isFlush[properties.isFlush], theme.root.isOpen[properties.isOpen]),
+            textClass: twMerge(theme.text.base),
+        };
+        return output;
+    }
+}
+
+class AccordionTitleComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(AccordionTitleThemeService);
+        this.accordionPanelComponent = inject(AccordionPanelComponent);
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        //#region properties
+        this.color = model(this.accordionPanelComponent.color());
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.accordionPanelComponent.accordionComponent.color(),
+            isFlush: booleanToFlowbiteBoolean(this.accordionPanelComponent.accordionComponent.isFlush()),
+            isOpen: booleanToFlowbiteBoolean(this.accordionPanelComponent.isOpen()),
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON));
+    }
+    //#endregion
+    onClick() {
+        this.accordionPanelComponent.toggleVisibility();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AccordionTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: AccordionTitleComponent, isStandalone: true, selector: "flowbite-accordion-title", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
+    <h2 [ngClass]="contentClasses().textClass">
+      <ng-content />
+    </h2>
+    <flowbite-icon
+      svgIcon="flowbite-angular:chevron-down"
+      class="h-6 w-6 shrink-0 duration-200"
+      [class.rotate-180]="accordionPanelComponent.isOpen()" />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AccordionTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass, IconComponent],
+                    selector: 'flowbite-accordion-title',
+                    template: `
+    <h2 [ngClass]="contentClasses().textClass">
+      <ng-content />
+    </h2>
+    <flowbite-icon
+      svgIcon="flowbite-angular:chevron-down"
+      class="h-6 w-6 shrink-0 duration-200"
+      [class.rotate-180]="accordionPanelComponent.isOpen()" />
+  `,
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+class AccordionPanelComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(AccordionPanelThemeService);
+        this.accordionComponent = inject(AccordionComponent);
+        this.accordionTitleChild = contentChild(AccordionTitleComponent);
+        this.accordionContentChild = contentChild(AccordionContentComponent);
+        //#region properties
+        this.color = model(this.accordionComponent.color());
+        this.isOpen = model(false);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    verify() {
+        if (this.accordionTitleChild() === undefined) {
+            throw new Error('No AccordionTitleComponent available');
+        }
+        if (this.accordionContentChild() == undefined) {
+            throw new Error('No AccordionContentComponent available');
+        }
+    }
+    //#endregion
+    toggleVisibility(isOpen) {
+        if (isOpen === undefined) {
+            isOpen = untracked(() => !this.isOpen());
+        }
+        if (isOpen && untracked(() => !this.accordionComponent.isAlwaysOpen())) {
+            this.accordionComponent.closeAll();
+        }
+        this.isOpen.set(isOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AccordionPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: AccordionPanelComponent, isStandalone: true, selector: "flowbite-accordion-panel", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", isOpen: "isOpenChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "accordionTitleChild", first: true, predicate: AccordionTitleComponent, descendants: true, isSignal: true }, { propertyName: "accordionContentChild", first: true, predicate: AccordionContentComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AccordionPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [],
+                    selector: 'flowbite-accordion-panel',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const FLOWBITE_ACCORDION_THEME_TOKEN = new InjectionToken('FLOWBITE_ACCORDION_THEME_TOKEN');
+class AccordionThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_ACCORDION_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.isFlush[properties.isFlush], theme.root.color[properties.color]),
+        };
+        return output;
+    }
+}
+
+class AccordionComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(AccordionThemeService);
+        this.accordionPanelChildren = contentChildren(AccordionPanelComponent);
+        //#region properties
+        this.isAlwaysOpen = model(false);
+        this.color = model('primary');
+        this.isFlush = model(false);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            isFlush: booleanToFlowbiteBoolean(this.isFlush()),
+            customStyle: this.customStyle(),
+        });
+    }
+    verify() {
+        if (this.accordionPanelChildren().length === 0) {
+            throw new Error('No AccordionPanelComponent available');
+        }
+    }
+    //#endregion
+    closeAll() {
+        this.accordionPanelChildren().forEach((child) => child.toggleVisibility(false));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: AccordionComponent, isStandalone: true, selector: "flowbite-accordion", inputs: { isAlwaysOpen: { classPropertyName: "isAlwaysOpen", publicName: "isAlwaysOpen", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isFlush: { classPropertyName: "isFlush", publicName: "isFlush", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isAlwaysOpen: "isAlwaysOpenChange", color: "colorChange", isFlush: "isFlushChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "accordionPanelChildren", predicate: AccordionPanelComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-accordion',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+/**
+ * This function is used to create themes for component's while keeping the intellisens up for TailwindCSS and other extensions.
+ *
+ * @param input Generic type to be created.
+ * @returns The generic type's definition.
+ */
+function createTheme(input) {
+    return input;
+}
+
+const accordionTheme = createTheme({
+    root: {
+        base: '',
+        color: {
+            primary: 'border-primary-200 dark:border-primary-700 divide-primary-200 dark:divide-primary-700',
+            light: 'border-gray-300 dark:border-gray-700 divide-gray-200 dark:divide-gray-700',
+            blue: 'border-blue-200 dark:border-blue-700 divide-blue-200 dark:divide-blue-700',
+            red: 'border-red-200 dark:border-red-700 divide-red-200 dark:divide-red-700',
+            green: 'border-green-200 dark:border-green-700 divide-green-200 dark:divide-green-700',
+            yellow: 'border-yellow-200 dark:border-yellow-700 divide-yellow-200 dark:divide-yellow-700',
+        },
+        isFlush: {
+            enabled: '',
+            disabled: 'rounded-lg border shadow-sm',
+        },
+    },
+});
+
+/**
+ * Register every inputs of RouterLink used in FlowbiteRouterLinkDirective.
+ *
+ * @see `RouterLink`
+ * @see `FlowbiteRouterLinkDirective`
+ */
+var routerLinkInputs = [
+    'target',
+    'queryParams',
+    'fragment',
+    'queryParamsHandling',
+    'state',
+    'info',
+    'relativeTo',
+    'preserveFragment',
+    'skipLocationChange',
+    'replaceUrl',
+    'routerLink',
+];
+
+/**
+ * Register every inputs of RouterLinkActive used in FlowbiteRouterLinkActiveDirective.
+ *
+ * @see `RouterLinkActive`
+ * @see `FlowbiteRouterLinkActiveDirective`
+ */
+var routerLinkActiveInputs = ['routerLinkActiveOptions', 'ariaCurrentWhenActive', 'routerLinkActive'];
+
+/**
+ * Register every outputs of RouterLink used in FlowbiteRouterLinkDirective.
+ *
+ * @see `RouterLink`
+ * @see `FlowbiteRouterLinkDirective`
+ */
+var routerLinkOutputs = [];
+
+/**
+ * Register every outputs of RouterLinkActive used in FlowbiteRouterLinkActiveDirective.
+ *
+ * @see `RouterLinkActive`
+ * @see `FlowbiteRouterLinkActiveDirective`
+ */
+var routerLinkActiveOutputs = ['isActiveChange'];
+
+/**
+ * This function is used to create classes for component's while keeping the intellisens up for TailwindCSS and other extensions.
+ *
+ * @param input Generic type to be created.
+ * @returns The generic type's definition.
+ */
+function createClass(input) {
+    return input;
+}
+
+/**
+ * Return theme value to an indented string.
+ *
+ * @param value The theme to be stringify.
+ * @returns The theme as string.
+ */
+function themeToString(value) {
+    return JSON.stringify(value, undefined, 2);
+}
+
+const accordionContentTheme = createTheme({
+    root: {
+        base: 'flex flex-col gap-2',
+        color: {
+            primary: 'border-primary-200 dark:border-primary-700',
+            light: 'border-gray-200 dark:border-gray-700',
+            blue: 'border-blue-200 dark:border-blue-700',
+            red: 'border-red-200 dark:border-red-700',
+            green: 'border-green-200 dark:border-green-700',
+            yellow: 'border-yellow-200 dark:border-yellow-700',
+        },
+        isOpen: {
+            enabled: 'p-5',
+            disabled: '',
+        },
+    },
+});
+
+const accordionPanelTheme = createTheme({
+    root: {
+        base: 'group',
+    },
+});
+
+const accordionTitleTheme = createTheme({
+    root: {
+        base: 'cursor-pointer flex items-center p-5 justify-between group-first:rounded-t-lg',
+        color: {
+            primary: 'text-primary-900 dark:text-primary-50 border-primary-200 dark:border-primary-700 bg-primary-100 hover:bg-primary-100 dark:bg-primary-800 dark:hover:bg-primary-800',
+            light: 'text-gray-900 dark:text-gray-50 border-gray-200 dark:border-gray-700 bg-gray-100 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-800',
+            blue: 'text-blue-900 dark:text-blue-50 border-blue-200 dark:border-blue-700 bg-blue-100 hover:bg-blue-100 dark:bg-blue-800 dark:hover:bg-blue-800',
+            red: 'text-red-900 dark:text-red-50 border-red-200 dark:border-red-700 bg-red-100 hover:bg-red-100 dark:bg-red-800 dark:hover:bg-red-800',
+            green: 'text-green-900 dark:text-green-50 border-green-200 dark:border-green-700 bg-green-100 hover:bg-green-100 dark:bg-green-800 dark:hover:bg-green-800',
+            yellow: 'text-yellow-900 dark:text-yellow-50 border-yellow-200 dark:border-yellow-700 bg-yellow-100 hover:bg-yellow-100 dark:bg-yellow-800 dark:hover:bg-yellow-800',
+        },
+        isFlush: {
+            enabled: 'border-b bg-transparent hover:bg-transparent',
+            disabled: '',
+        },
+        isOpen: {
+            enabled: '',
+            disabled: 'bg-transparent dark:bg-transparent text-gray-500 ',
+        },
+    },
+    text: {
+        base: 'font-semibold text-base',
+    },
+});
+
+const FLOWBITE_BUTTON_THEME_TOKEN = new InjectionToken('FLOWBITE_BUTTON_THEME_TOKEN');
+class ButtonThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_BUTTON_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(properties.gradientDuoTone && properties.fill == 'outline'
+                ? theme.root.base['span']
+                : `${theme.root.base['default']} ${theme.root.size[properties.size]}`, properties.gradientDuoTone
+                ? theme.root.gradientDuoTone[properties.gradientDuoTone][properties.fill]
+                : properties.gradientMonochrome
+                    ? theme.root.gradientMonochrome[properties.gradientMonochrome]
+                    : theme.root.color[properties.color][properties.fill], theme.root.isPill[properties.isPill], theme.root.isDisabled[properties.isDisabled]),
+            spanClass: twMerge(theme.span.base, theme.span.isPill[properties.isPill], theme.span.size[properties.size]),
+        };
+        return output;
+    }
+}
+
+/**
+ * @see https://flowbite.com/docs/components/buttons/
+ */
+class ButtonComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(ButtonThemeService);
+        //#region properties
+        this.color = model('primary');
+        this.size = model('md');
+        this.isPill = model(false);
+        this.fill = model('solid');
+        this.isDisabled = model(false);
+        this.gradientMonochrome = model(undefined);
+        this.gradientDuoTone = model(undefined);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            isDisabled: booleanToFlowbiteBoolean(this.isDisabled()),
+            fill: this.fill(),
+            isPill: booleanToFlowbiteBoolean(this.isPill()),
+            size: this.size(),
+            gradientMonochrome: this.gradientMonochrome(),
+            gradientDuoTone: this.gradientDuoTone(),
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ButtonComponent, isStandalone: true, selector: "flowbite-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isPill: { classPropertyName: "isPill", publicName: "isPill", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, gradientMonochrome: { classPropertyName: "gradientMonochrome", publicName: "gradientMonochrome", isSignal: true, isRequired: false, transformFunction: null }, gradientDuoTone: { classPropertyName: "gradientDuoTone", publicName: "gradientDuoTone", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", size: "sizeChange", isPill: "isPillChange", fill: "fillChange", isDisabled: "isDisabledChange", gradientMonochrome: "gradientMonochromeChange", gradientDuoTone: "gradientDuoToneChange", customStyle: "customStyleChange" }, host: { properties: { "attr.type": "button" } }, usesInheritance: true, ngImport: i0, template: `
+    <span
+      *ngIf="gradientDuoTone() && fill() === 'outline'; else default"
+      [ngClass]="contentClasses().spanClass">
+      <ng-container *ngTemplateOutlet="contentOutlet"></ng-container>
+    </span>
+
+    <ng-template #default>
+      <ng-container *ngTemplateOutlet="contentOutlet"></ng-container>
+    </ng-template>
+
+    <ng-template #contentOutlet>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgIf, NgClass, NgTemplateOutlet],
+                    selector: 'flowbite-button',
+                    template: `
+    <span
+      *ngIf="gradientDuoTone() && fill() === 'outline'; else default"
+      [ngClass]="contentClasses().spanClass">
+      <ng-container *ngTemplateOutlet="contentOutlet"></ng-container>
+    </span>
+
+    <ng-template #default>
+      <ng-container *ngTemplateOutlet="contentOutlet"></ng-container>
+    </ng-template>
+
+    <ng-template #contentOutlet>
+      <ng-content />
+    </ng-template>
+  `,
+                    host: {
+                        '[attr.type]': 'button',
+                    },
+                }]
+        }] });
+
+const FLOWBITE_ALERT_THEME_TOKEN = new InjectionToken('FLOWBITE_ALERT_THEME_TOKEN');
+class AlertThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_ALERT_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.hasBorderAccent[properties.hasBorderAccent]),
+            closeButtonClass: twMerge(theme.closeButton.base, theme.closeButton.color[properties.color]),
+        };
+        return output;
+    }
+}
+
+class AlertComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(AlertThemeService);
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        //#region properties
+        this.color = model('primary');
+        this.hasBorder = model(false);
+        this.hasBorderAccent = model(false);
+        this.customStyle = model({});
+        this.icon = model(null);
+        this.additionalContent = model(null);
+        this.isDismissable = model(false);
+        this.onDismiss = model();
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            hasBorder: booleanToFlowbiteBoolean(this.hasBorder()),
+            hasBorderAccent: booleanToFlowbiteBoolean(this.hasBorderAccent()),
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'close', this.domSanitizer.bypassSecurityTrustHtml(CLOSE_SVG_ICON));
+    }
+    //#endregion
+    onDismissClick() {
+        const func = this.onDismiss();
+        if (func)
+            func();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: AlertComponent, isStandalone: true, selector: "flowbite-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, hasBorderAccent: { classPropertyName: "hasBorderAccent", publicName: "hasBorderAccent", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, additionalContent: { classPropertyName: "additionalContent", publicName: "additionalContent", 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", hasBorderAccent: "hasBorderAccentChange", customStyle: "customStyleChange", icon: "iconChange", additionalContent: "additionalContentChange", isDismissable: "isDismissableChange", onDismiss: "onDismissChange" }, host: { properties: { "attr.role": "alert" } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="flex items-center">
+      <ng-container [ngTemplateOutlet]="icon()"></ng-container>
+      <div>
+        <ng-content />
+      </div>
+      <button
+        type="button"
+        [ngClass]="contentClasses()!.closeButtonClass"
+        *ngIf="isDismissable()"
+        aria-label="Close"
+        (click)="onDismissClick()">
+        <span class="sr-only">Close</span>
+        <flowbite-icon
+          svgIcon="flowbite-angular:close"
+          class="h-5 w-5" />
+      </button>
+    </div>
+    <ng-container [ngTemplateOutlet]="additionalContent()"></ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgIf, NgClass, NgTemplateOutlet, IconComponent, ButtonComponent],
+                    selector: 'flowbite-alert',
+                    template: `
+    <div class="flex items-center">
+      <ng-container [ngTemplateOutlet]="icon()"></ng-container>
+      <div>
+        <ng-content />
+      </div>
+      <button
+        type="button"
+        [ngClass]="contentClasses()!.closeButtonClass"
+        *ngIf="isDismissable()"
+        aria-label="Close"
+        (click)="onDismissClick()">
+        <span class="sr-only">Close</span>
+        <flowbite-icon
+          svgIcon="flowbite-angular:close"
+          class="h-5 w-5" />
+      </button>
+    </div>
+    <ng-container [ngTemplateOutlet]="additionalContent()"></ng-container>
+  `,
+                    host: {
+                        '[attr.role]': 'alert',
+                    },
+                }]
+        }] });
+
+const alertTheme = createTheme({
+    root: {
+        base: 'flex flex-col gap-2 p-4 text-sm rounded-lg',
+        color: {
+            primary: 'text-primary-800 dark:text-primary-400 bg-primary-50 dark:bg-gray-800 border-primary-300 dark:border-primary-800',
+            dark: 'text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600',
+            blue: 'text-blue-800 dark:text-blue-400 bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-800',
+            red: 'text-red-800 dark:text-red-400 bg-red-100 dark:bg-gray-800 border-red-300 dark:border-red-800',
+            green: 'text-green-800 dark:text-green-400 bg-green-100 dark:bg-gray-800 border-green-300 dark:border-green-800',
+            yellow: 'text-yellow-800 dark:text-yellow-300 bg-yellow-100 dark:bg-gray-800 border-yellow-300 dark:border-yellow-800',
+        },
+        hasBorder: {
+            enabled: 'border',
+            disabled: 'border-0',
+        },
+        hasBorderAccent: {
+            enabled: 'border-t-4',
+            disabled: '',
+        },
+    },
+    closeButton: {
+        base: '-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg p-1.5 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',
+        },
+    },
+});
+
+/**
+ * Wrapping directive over RouterLink.
+ *
+ * @see `RouterLink`
+ */
+class FlowbiteRouterLinkDirective {
+    constructor() {
+        this.router = inject(Router);
+        this.routerLink = inject(RouterLink);
+        this.href = model();
+    }
+    onClick() {
+        const hrefValue = this.href();
+        if (hrefValue) {
+            this.router.navigateByUrl(hrefValue);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FlowbiteRouterLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: FlowbiteRouterLinkDirective, isStandalone: true, selector: "[flowbiteRouterLink]", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { href: "hrefChange" }, host: { listeners: { "click": "onClick()" } }, hostDirectives: [{ directive: i1.RouterLink, inputs: ["target", "target", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "state", "state", "info", "info", "relativeTo", "relativeTo", "preserveFragment", "preserveFragment", "skipLocationChange", "skipLocationChange", "replaceUrl", "replaceUrl", "routerLink", "routerLink"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FlowbiteRouterLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[flowbiteRouterLink]',
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                    hostDirectives: [
+                        {
+                            directive: RouterLink,
+                            inputs: routerLinkInputs,
+                            outputs: routerLinkOutputs,
+                        },
+                    ],
+                }]
+        }] });
+
+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.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']),
+        };
+        return output;
+    }
+}
+
+/**
+ * @see https://flowbite.com/docs/components/badge/
+ */
+class BadgeComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true });
+        this.themeService = inject(BadgeThemeService);
+        //#region properties
+        this.color = model('primary');
+        this.size = model('xs');
+        this.isIconOnly = model(false);
+        this.isPill = model(false);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            size: this.size(),
+            isIconOnly: booleanToFlowbiteBoolean(this.isIconOnly()),
+            isPill: booleanToFlowbiteBoolean(this.isPill()),
+            link: this.flowbiteRouterLink?.routerLink.urlTree ?? null,
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: BadgeComponent, isStandalone: true, selector: "flowbite-badge", inputs: { color: { classPropertyName: "color", publicName: "color", 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 } }, outputs: { color: "colorChange", size: "sizeChange", isIconOnly: "isIconOnlyChange", isPill: "isPillChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-badge',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+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',
+            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',
+            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',
+            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',
+            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',
+            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',
+        },
+        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',
+        },
+    },
+});
+
+const FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN');
+class BreadcrumbItemThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
+            breadcrumbIconClass: twMerge(theme.icon.base),
+        };
+        return output;
+    }
+}
+
+class BreadcrumbItemComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(BreadcrumbItemThemeService);
+        this.breadcrumbComponent = inject(BreadcrumbComponent);
+        this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true });
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        //#region properties
+        this.color = model(this.breadcrumbComponent.color());
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            link: this.flowbiteRouterLink?.routerLink.urlTree ?? null,
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-right', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_RIGHT_SVG_ICON));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: BreadcrumbItemComponent, isStandalone: true, selector: "flowbite-breadcrumb-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `
+    <flowbite-icon
+      [ngClass]="contentClasses().breadcrumbIconClass"
+      svgIcon="flowbite-angular:chevron-right" />
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgIf, NgClass, NgTemplateOutlet, IconComponent],
+                    selector: 'flowbite-breadcrumb-item',
+                    template: `
+    <flowbite-icon
+      [ngClass]="contentClasses().breadcrumbIconClass"
+      svgIcon="flowbite-angular:chevron-right" />
+    <ng-content />
+  `,
+                }]
+        }] });
+
+const FLOWBITE_BREADCRUMB_THEME_TOKEN = new InjectionToken('FLOWBITE_BREADCRUMB_THEME_TOKEN');
+class BreadcrumbThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_BREADCRUMB_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+        };
+        return output;
+    }
+}
+
+/**
+ * @see https://flowbite.com/docs/components/breadcrumb/
+ */
+class BreadcrumbComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(BreadcrumbThemeService);
+        this.breadcrumbItemChildren = contentChildren(BreadcrumbItemComponent);
+        //#region properties
+        this.color = model('primary');
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    verify() {
+        if (this.breadcrumbItemChildren().length === 0) {
+            throw new Error('No BreadcrumbItemComponent available');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: BreadcrumbComponent, isStandalone: true, selector: "flowbite-breadcrumb", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, host: { properties: { "attr.aria-label": "breadcrumb" } }, queries: [{ propertyName: "breadcrumbItemChildren", predicate: BreadcrumbItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-breadcrumb',
+                    template: `<ng-content />`,
+                    host: {
+                        '[attr.aria-label]': 'breadcrumb',
+                    },
+                }]
+        }] });
+
+const breadcrumbTheme = createTheme({
+    root: {
+        base: 'flex items-center',
+    },
+});
+
+const breadcrumbItemTheme = createTheme({
+    root: {
+        base: 'group flex items-center text-sm font-medium cursor-pointer',
+        color: {
+            primary: 'text-primary-700 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-500',
+            dark: 'text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
+            blue: 'text-blue-700 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-500',
+            red: 'text-red-700 dark:text-red-400 hover:text-red-900 dark:hover:text-red-500',
+            green: 'text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-500',
+            yellow: 'text-yellow-700 dark:text-yellow-400 hover:text-yellow-900 dark:hover:text-yellow-500',
+        },
+    },
+    icon: {
+        base: 'mx-1 h-6 w-6 md:mx-2 group-first:hidden',
+    },
+});
+
+const buttonTheme = createTheme({
+    root: {
+        base: {
+            default: 'cursor-pointer group flex h-min w-fit items-center justify-center p-0.5 text-center font-medium focus:z-10',
+            span: 'cursor-pointer group inline-flex relative items-center justify-center p-0.5 font-medium overflow-hidden',
+        },
+        color: {
+            dark: {
+                solid: 'text-white bg-gray-800 dark:bg-gray-800 border border-transparent dark:border-gray-700 hover:bg-gray-900 dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-800 disabled:hover:bg-gray-800 dark:disabled:hover:bg-gray-800',
+                outline: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 dark:hover:bg-gray-600 dark:focus:ring-gray-800',
+            },
+            primary: {
+                solid: 'text-white bg-primary-700 border border-transparent hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-700 dark:hover:bg-primary-800 dark:focus:ring-primary-900',
+                outline: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600 dark:focus:ring-primary-900',
+            },
+            red: {
+                solid: 'text-white bg-red-700 border border-transparent hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
+                outline: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
+            },
+            blue: {
+                solid: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
+                outline: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
+            },
+            light: {
+                solid: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700',
+                outline: 'text-gray-900 bg-transparent border border-gray-200 hover:bg-white focus:ring-4 focus:ring-blue-300 dark:bg-transparent dark:text-white dark:border-white dark:hover:text-gray-900 dark:hover:bg-white dark:hover:border-gray-700 dark:focus:ring-gray-700',
+            },
+            purple: {
+                solid: 'text-white bg-purple-700 border border-transparent hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900',
+                outline: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900',
+            },
+            green: {
+                solid: 'text-white bg-green-700 border border-transparent hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
+                outline: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
+            },
+            yellow: {
+                solid: 'text-white bg-yellow-400 border border-transparent hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900',
+                outline: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
+            },
+        },
+        isDisabled: {
+            enabled: 'cursor-not-allowed opacity-50',
+            disabled: '',
+        },
+        gradientMonochrome: {
+            cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
+            red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800',
+            blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800',
+            lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800',
+            pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800',
+            purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800',
+            green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800',
+            teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800',
+        },
+        gradientDuoTone: {
+            purpleToBlue: {
+                solid: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800',
+                outline: 'text-gray-900 bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800',
+            },
+            cyanToBlue: {
+                solid: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800',
+                outline: 'text-gray-900 bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800',
+            },
+            greenToBlue: {
+                solid: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800',
+                outline: 'text-gray-900 bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800',
+            },
+            purpleToPink: {
+                solid: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800',
+                outline: 'text-gray-900 bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800',
+            },
+            pinkToOrange: {
+                solid: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800',
+                outline: 'text-gray-900 bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800',
+            },
+            tealToLime: {
+                solid: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700',
+                outline: 'text-gray-900 bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800',
+            },
+            redToYellow: {
+                solid: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400',
+                outline: 'text-gray-900 bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400',
+            },
+        },
+        size: {
+            xs: 'text-xs py-2 px-3',
+            sm: 'text-sm py-2 px-3',
+            md: 'text-sm px-5 py-2.5',
+            lg: 'text-base py-3 px-5',
+            xl: 'text-base px-6 py-3.5',
+        },
+        isPill: {
+            enabled: 'rounded-full',
+            disabled: 'rounded-lg',
+        },
+    },
+    span: {
+        base: 'cursor-pointer relative inline-flex items-center bg-white transition-all duration-75 ease-in group-hover:bg-opacity-0 dark:bg-gray-900',
+        isPill: {
+            enabled: 'rounded-full',
+            disabled: 'rounded-md',
+        },
+        size: {
+            xs: 'text-xs py-2 px-3',
+            sm: 'text-sm py-2 px-3',
+            md: 'text-sm px-5 py-2.5',
+            lg: 'text-base py-3 px-5',
+            xl: 'text-base px-6 py-3.5',
+        },
+    },
+});
+
+/**
+ * Signal based store service used in several flowbite-angular components.
+ *
+ * @usageNotes
+ * You can't use SignalStoreService as it is, you must inherite another class from it with its generic type T.
+ *
+ * @example
+ * export class ComponentStateService extends SignalStoreService<{isOpen: boolean;}> {}
+ */
+class SignalStoreService {
+    constructor() {
+        this._state = signal({});
+    }
+    /**
+     * Accessor for the data.
+     */
+    get state() {
+        return this._state.asReadonly();
+    }
+    /**
+     * Get the value for the provided key.
+     *
+     * @param key Keyof T type.
+     * @returns The value for the provided key.
+     */
+    select(key) {
+        return computed(() => this._state()[key]);
+    }
+    /**
+     * Set the value for the provided key.
+     *
+     * @param key Keyof T type.
+     * @param data Data for the key.
+     */
+    set(key, data) {
+        this._state.update((currentValue) => ({ ...currentValue, [key]: data }));
+    }
+    /**
+     * Set the value for the entire type.
+     *
+     * @param state The value to be set.
+     */
+    setState(state) {
+        this._state.set(state);
+    }
+}
+/**
+ * @usageNotes
+ * You can use SignalStoreService as it isSince it is provided in 'root'.
+ */
+class GlobalSignalStoreService extends SignalStoreService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: GlobalSignalStoreService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: GlobalSignalStoreService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: GlobalSignalStoreService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Provide an abstract class used in themeing system of flowbite-angular.
+ */
+class FlowbiteThemeService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FlowbiteThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FlowbiteThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FlowbiteThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN = new InjectionToken('FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN');
+class DarkThemeToggleThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+        };
+        return output;
+    }
+}
+
+class DarkThemeToggleComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(DarkThemeToggleThemeService);
+        this.themeStateService = inject((GlobalSignalStoreService));
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        afterNextRender(() => {
+            const localStorageTheme = localStorage.getItem('color-theme');
+            if (localStorageTheme === 'dark' ||
+                (!localStorageTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                this.themeStateService.set('theme', 'dark');
+                document.documentElement.classList.add('dark');
+            }
+            else {
+                this.themeStateService.set('theme', 'light');
+                document.documentElement.classList.remove('dark');
+            }
+            effect(() => {
+                const theme = this.themeStateService.select('theme')();
+                localStorage.setItem('color-theme', theme);
+                theme === 'dark'
+                    ? document.documentElement.classList.add('dark')
+                    : document.documentElement.classList.remove('dark');
+            }, { injector: this.injector });
+        }, { injector: this.injector });
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'sun', this.domSanitizer.bypassSecurityTrustHtml(SUN_SVG_ICON));
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'moon', this.domSanitizer.bypassSecurityTrustHtml(MOON_SVG_ICON));
+    }
+    //#endregion
+    onClick() {
+        if (this.themeStateService.select('theme')() === 'light')
+            this.themeStateService.set('theme', 'dark');
+        else
+            this.themeStateService.set('theme', 'light');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DarkThemeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: DarkThemeToggleComponent, isStandalone: true, selector: "flowbite-dark-theme-toggle", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
+    <flowbite-icon
+      svgIcon="flowbite-angular:moon"
+      class="h-5 w-5 block dark:hidden" />
+    <flowbite-icon
+      svgIcon="flowbite-angular:sun"
+      class="h-5 w-5 hidden dark:block" />
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DarkThemeToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgIf, NgClass, IconComponent],
+                    selector: 'flowbite-dark-theme-toggle',
+                    template: `
+    <flowbite-icon
+      svgIcon="flowbite-angular:moon"
+      class="h-5 w-5 block dark:hidden" />
+    <flowbite-icon
+      svgIcon="flowbite-angular:sun"
+      class="h-5 w-5 hidden dark:block" />
+  `,
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+const darkThemeToggleTheme = createTheme({
+    root: {
+        base: 'cursor-pointer rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+    },
+});
+
+const FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN');
+class DropdownDividerThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+        };
+        return output;
+    }
+}
+
+class DropdownDividerComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(DropdownDividerThemeService);
+        this.dropdownComponent = inject(DropdownComponent);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropdownDividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: DropdownDividerComponent, isStandalone: true, selector: "flowbite-dropdown-divider", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropdownDividerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-dropdown-divider',
+                    template: ``,
+                }]
+        }] });
+
+const FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN');
+class DropdownHeaderThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+            root: twMerge(theme.content.base),
+        };
+        return output;
+    }
+}
+
+class DropdownHeaderComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(DropdownHeaderThemeService);
+        this.dropdownComponent = inject(DropdownComponent);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropdownHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: DropdownHeaderComponent, isStandalone: true, selector: "flowbite-dropdown-header", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `
+    <div [ngClass]="contentClasses().root">
+      <ng-content />
+    </div>
+    <div class="my-1 h-px bg-gray-100 dark:bg-gray-600"></div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropdownHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-dropdown-header',
+                    template: `
+    <div [ngClass]="contentClasses().root">
+      <ng-content />
+    </div>
+    <div class="my-1 h-px bg-gray-100 dark:bg-gray-600"></div>
+  `,
+                }]
+        }] });
+
+const FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN');
+class DropdownItemThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+        };
+        return output;
+    }
+}
+
+class DropdownItemComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(DropdownItemThemeService);
+        this.dropdownComponent = inject(DropdownComponent);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: DropdownItemComponent, isStandalone: true, selector: "flowbite-dropdown-item", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-dropdown-item',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const FLOWBITE_DROPDOWN_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_THEME_TOKEN');
+class DropdownThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DROPDOWN_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+            dropdownClass: twMerge(theme.dropdown.base),
+            spanClass: twMerge(theme.span.base),
+            containerClass: twMerge(theme.container.base, theme.container.isOpen[properties.isOpen], theme.container.placement[properties.placement]),
+            contentClass: twMerge(theme.content.base),
+            subContentClass: twMerge(theme.subContent.base),
+        };
+        return output;
+    }
+}
+
+/**
+ * @see https://flowbite.com/docs/components/dropdowns/
+ */
+class DropdownComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(DropdownThemeService);
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        this.dropdownItemChildren = contentChildren(DropdownItemComponent);
+        this.dropdownHeaderChildren = contentChildren(DropdownHeaderComponent);
+        this.dropdownDividerChildren = contentChildren(DropdownDividerComponent);
+        //#region properties
+        this.label = model('Dropdown');
+        this.isOpen = model(false);
+        this.position = model('bottom-center');
+        this.customStyle = model({});
+        //#endregion
+        this.x = 0;
+        this.y = 0;
+        this.width = 0;
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            label: this.label(),
+            isOpen: booleanToFlowbiteBoolean(this.isOpen()),
+            placement: this.position(),
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON));
+    }
+    verify() {
+        if (this.dropdownItemChildren().length === 0) {
+            throw new Error('No DropdownItemComponent available');
+        }
+    }
+    toggle() {
+        this.isOpen.set(!this.isOpen());
+    }
+    calculatePosition() {
+        computePosition(this.button.nativeElement, this.dropdown.nativeElement, {
+            placement: this.convertPosition(this.position()),
+            middleware: [offset(8), flip(), shift()],
+        }).then(({ x, y }) => {
+            this.dropdown.nativeElement.style.left = x + 'px';
+            this.dropdown.nativeElement.style.top = y + 'px';
+            this.width = this.button.nativeElement.offsetWidth;
+        });
+    }
+    ngAfterViewInit() {
+        autoUpdate(this.button.nativeElement, this.dropdown.nativeElement, () => {
+            if (!this.isOpen())
+                return;
+            this.calculatePosition();
+        });
+    }
+    // Onclick outside the dropdown, close it
+    clickout(event) {
+        if (!this.dropdown.nativeElement.contains(event.target) &&
+            this.isOpen() &&
+            !this.button.nativeElement.contains(event.target)) {
+            this.isOpen.set(false);
+        }
+    }
+    convertPosition(pos) {
+        switch (pos) {
+            case 'top-center':
+                return 'top';
+            case 'bottom-center':
+                return 'bottom';
+            case 'left-center':
+                return 'left';
+            case 'right-center':
+                return 'right';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: DropdownComponent, isStandalone: true, selector: "flowbite-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { label: "labelChange", isOpen: "isOpenChange", position: "positionChange", customStyle: "customStyleChange" }, host: { listeners: { "document:click": "clickout($event)" } }, queries: [{ propertyName: "dropdownItemChildren", predicate: DropdownItemComponent, isSignal: true }, { propertyName: "dropdownHeaderChildren", predicate: DropdownHeaderComponent, isSignal: true }, { propertyName: "dropdownDividerChildren", predicate: DropdownDividerComponent, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <button
+      type="button"
+      [ngClass]="contentClasses().dropdownClass"
+      (click)="toggle()"
+      #button>
+      <span [ngClass]="contentClasses().spanClass">
+        {{ label() }}
+        <flowbite-icon
+          svgIcon="flowbite-angular:chevron-down"
+          class="ml-2 h-4 w-4" />
+      </span>
+    </button>
+    <div
+      [ngClass]="contentClasses().containerClass"
+      #dropdown
+      [style.display]="isOpen() ? 'block' : 'none'">
+      <div [ngClass]="contentClasses().contentClass">
+        <ul [ngClass]="contentClasses().subContentClass">
+          <ng-content />
+        </ul>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass, IconComponent],
+                    selector: 'flowbite-dropdown',
+                    template: `
+    <button
+      type="button"
+      [ngClass]="contentClasses().dropdownClass"
+      (click)="toggle()"
+      #button>
+      <span [ngClass]="contentClasses().spanClass">
+        {{ label() }}
+        <flowbite-icon
+          svgIcon="flowbite-angular:chevron-down"
+          class="ml-2 h-4 w-4" />
+      </span>
+    </button>
+    <div
+      [ngClass]="contentClasses().containerClass"
+      #dropdown
+      [style.display]="isOpen() ? 'block' : 'none'">
+      <div [ngClass]="contentClasses().contentClass">
+        <ul [ngClass]="contentClasses().subContentClass">
+          <ng-content />
+        </ul>
+      </div>
+    </div>
+  `,
+                    host: {
+                        '(document:click)': 'clickout($event)',
+                    },
+                }]
+        }], propDecorators: { dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }], button: [{
+                type: ViewChild,
+                args: ['button']
+            }] } });
+
+const dropdownTheme = createTheme({
+    root: {
+        base: '',
+    },
+    dropdown: {
+        base: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 dark:disabled:hover:bg-blue-600 group flex h-min items-center justify-center p-0.5 text-center font-medium focus:z-10 rounded-lg',
+    },
+    span: {
+        base: 'flex items-center rounded-md text-sm px-4 py-2',
+    },
+    container: {
+        base: 'z-10 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 min-w-fit absolute',
+        isOpen: {
+            enabled: 'block',
+            disabled: 'hidden',
+        },
+        placement: {
+            'top-center': '',
+            'bottom-center': '',
+            'left-center': '',
+            'right-center': '',
+        },
+    },
+    content: {
+        base: 'py-1 text-sm text-gray-700 dark:text-gray-200 shadow-md',
+    },
+    subContent: {
+        base: 'py-1',
+    },
+});
+
+const dropdownItemTheme = {
+    root: {
+        base: 'flex items-center justify-start py-2 px-4 text-sm text-gray-700 cursor-pointer hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white',
+    },
+};
+
+const dropdownDividerTheme = createTheme({
+    root: {
+        base: 'block my-1 h-px bg-gray-100 dark:bg-gray-600',
+    },
+});
+
+const dropdownHeaderTheme = createTheme({
+    root: {
+        base: '',
+    },
+    content: {
+        base: 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200',
+    },
+});
+
+const addonDirectiveTheme = createTheme({
+    base: 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-r-0 border-gray-300 rounded-l-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600',
+});
+const addonDirectiveClassInstance = {
+    rootClass: '',
+};
+
+const FLOWBITE_DIRECTIVE_ADDON_THEME_TOKEN = new InjectionToken('FLOWBITE_DIRECTIVE_ADDON_THEME_TOKEN');
+class AddonDirectiveThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DIRECTIVE_ADDON_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.base),
+        };
+        return output;
+    }
+}
+
+const FLOWBITE_FORM_FIELD_THEME_TOKEN = new InjectionToken('FLOWBITE_FORM_FIELD_THEME_TOKEN');
+class FormFieldThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_FORM_FIELD_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.base),
+        };
+        return output;
+    }
+}
+
+class FormFieldComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(FormFieldThemeService);
+        //#region properties
+        this.type = model('text');
+        this.size = model('md');
+        this.isDisabled = model(false);
+        this.validate = model(undefined);
+        this.floatingLabelType = model(undefined);
+        this.prefix = model(undefined);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            type: this.type(),
+            floatingLabelType: this.floatingLabelType(),
+            size: this.size(),
+            disabled: booleanToFlowbiteBoolean(this.isDisabled()),
+            validate: this.validate(),
+            prefix: this.prefix(),
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: FormFieldComponent, isStandalone: true, selector: "flowbite-form-field", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, floatingLabelType: { classPropertyName: "floatingLabelType", publicName: "floatingLabelType", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { type: "typeChange", size: "sizeChange", isDisabled: "isDisabledChange", validate: "validateChange", floatingLabelType: "floatingLabelTypeChange", prefix: "prefixChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"floatingLabelType(); else nonFloatingTemplate\">\n  <div\n    [ngClass]=\"{\n      relative: floatingLabelType(),\n      'z-0': floatingLabelType() === 'standard',\n    }\">\n    <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n</ng-container>\n<ng-template #nonFloatingTemplate>\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngIf=\"prefix(); else inputTemplate\">\n    <ng-container *ngIf=\"prefix() === 'icon'; else inputWithAddon\">\n      <div class=\"relative\">\n        <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n          <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #inputWithAddon>\n  <div class=\"flex\">\n    <ng-container *ngTemplateOutlet=\"addonTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content select=\"input[flowbiteInput]\"></ng-content>\n</ng-template>\n<ng-template #labelTemplate>\n  <ng-content select=\"label[flowbiteLabel]\"></ng-content>\n</ng-template>\n<ng-template #hintTemplate>\n  <ng-content select=\"[flowbiteHelper]\"></ng-content>\n</ng-template>\n<ng-template #iconTemplate>\n  <ng-content select=\"[flowbiteIcon]\"></ng-content>\n</ng-template>\n<ng-template #addonTemplate>\n  <ng-content select=\"[flowbiteAddon]\"></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgIf, NgClass, AsyncPipe, NgTemplateOutlet], selector: 'flowbite-form-field', template: "<ng-container *ngIf=\"floatingLabelType(); else nonFloatingTemplate\">\n  <div\n    [ngClass]=\"{\n      relative: floatingLabelType(),\n      'z-0': floatingLabelType() === 'standard',\n    }\">\n    <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n</ng-container>\n<ng-template #nonFloatingTemplate>\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngIf=\"prefix(); else inputTemplate\">\n    <ng-container *ngIf=\"prefix() === 'icon'; else inputWithAddon\">\n      <div class=\"relative\">\n        <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n          <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #inputWithAddon>\n  <div class=\"flex\">\n    <ng-container *ngTemplateOutlet=\"addonTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content select=\"input[flowbiteInput]\"></ng-content>\n</ng-template>\n<ng-template #labelTemplate>\n  <ng-content select=\"label[flowbiteLabel]\"></ng-content>\n</ng-template>\n<ng-template #hintTemplate>\n  <ng-content select=\"[flowbiteHelper]\"></ng-content>\n</ng-template>\n<ng-template #iconTemplate>\n  <ng-content select=\"[flowbiteIcon]\"></ng-content>\n</ng-template>\n<ng-template #addonTemplate>\n  <ng-content select=\"[flowbiteAddon]\"></ng-content>\n</ng-template>\n" }]
+        }] });
+
+class BaseInputDirective {
+    constructor() {
+        this.contentClasses = signal({ rootClass: '' });
+        this.injector = inject(Injector);
+        this.formFieldComponent = inject(FormFieldComponent);
+    }
+    ngOnInit() {
+        effect(() => {
+            this.fetchClass();
+        }, { injector: this.injector, allowSignalWrites: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BaseInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BaseInputDirective, isStandalone: true, host: { properties: { "class": "contentClasses()?.rootClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BaseInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: { '[class]': 'contentClasses()?.rootClass' },
+                }]
+        }] });
+
+class AddonDirective extends BaseInputDirective {
+    constructor() {
+        super(...arguments);
+        this.contentClasses = signal(addonDirectiveClassInstance);
+        this.themeService = inject(AddonDirectiveThemeService);
+        //#region properties
+        this.customStyle = input({});
+    }
+    //#endregion
+    //#region BaseInputDirective implementation
+    fetchClass() {
+        const propertyClass = this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+        this.contentClasses.set(propertyClass);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AddonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: AddonDirective, isStandalone: true, selector: "[flowbiteAddon]", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AddonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[flowbiteAddon]',
+                }]
+        }] });
+
+const helperDirectiveTheme = createTheme({
+    base: 'mt-2 text-xs text-gray-500 dark:text-gray-400',
+    validation: {
+        success: 'text-green-600 dark:text-green-400',
+        error: 'text-red-600 dark:text-red-400',
+    },
+});
+const helperDirectiveClassInstance = {
+    rootClass: '',
+};
+
+const FLOWBITE_DIRECTIVE_HELPER_THEME_TOKEN = new InjectionToken('FLOWBITE_DIRECTIVE_HELPER_THEME_TOKEN');
+class HelperDirectiveThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DIRECTIVE_HELPER_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.base, properties.validate && theme.validation[properties.validate]),
+        };
+        return output;
+    }
+}
+
+class HelperDirective extends BaseInputDirective {
+    constructor() {
+        super(...arguments);
+        this.contentClasses = signal(helperDirectiveClassInstance);
+        this.themeService = inject(HelperDirectiveThemeService);
+        //#region properties
+        this.customStyle = input({});
+    }
+    //#endregion
+    //#region BaseInputDirective implementation
+    fetchClass() {
+        const propertyClass = this.themeService.getClasses({
+            validate: this.formFieldComponent.validate(),
+            customStyle: this.customStyle(),
+        });
+        this.contentClasses.set(propertyClass);
+        return { rootClass: '' };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: HelperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: HelperDirective, isStandalone: true, selector: "[flowbiteHelper]", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: HelperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[flowbiteHelper]',
+                }]
+        }] });
+
+const iconDirectiveTheme = createTheme({
+    base: 'w-5 h-5 text-gray-500 dark:text-gray-400',
+});
+const iconDirectiveClassInstance = {
+    rootClass: '',
+};
+
+const FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN = new InjectionToken('FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN');
+class IconDirectiveThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.base),
+        };
+        return output;
+    }
+}
+
+class IconDirective extends BaseInputDirective {
+    constructor() {
+        super(...arguments);
+        this.contentClasses = signal(iconDirectiveClassInstance);
+        this.themeService = inject(IconDirectiveThemeService);
+        //#region properties
+        this.customStyle = input({});
+    }
+    //#endregion
+    //#region BaseInputDirective implementation
+    fetchClass() {
+        const propertyClass = this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+        this.contentClasses.set(propertyClass);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: IconDirective, isStandalone: true, selector: "[flowbiteIcon]", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[flowbiteIcon]',
+                }]
+        }] });
+
+const inputDirectiveTheme = createTheme({
+    base: 'border rounded-lg block w-full focus:outline-none',
+    default: 'focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white',
+    disabled: {
+        enabled: 'cursor-not-allowed bg-gray-100 border-gray-300 text-gray-900 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:placeholder-gray-400',
+        disabled: '',
+    },
+    prefix: {
+        addon: 'rounded-none rounded-r-lg flex-1 min-w-0',
+        icon: 'pl-10',
+    },
+    size: {
+        sm: 'text-xs p-2',
+        md: 'text-sm p-2.5',
+        lg: 'text-md p-4',
+    },
+    validation: {
+        success: 'text-gray-900 border-green-600 dark:text-white dark:border-green-500 dark:focus:border-green-500 focus:border-green-600 bg-green-50 dark:bg-gray-700',
+        error: 'text-gray-900 border-red-600 dark:text-white dark:border-red-500 dark:focus:border-red-500 focus:border-red-600 bg-red-50 dark:bg-gray-700',
+    },
+    floatingLabel: {
+        standard: {
+            base: 'block w-full text-sm bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 peer',
+            default: 'text-gray-900 border-gray-300 dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+            disabled: {
+                enabled: 'text-gray-900 border-gray-300 dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+                disabled: '',
+            },
+            size: {
+                sm: 'py-2 px-0',
+                md: 'py-2.5 px-0',
+                lg: '',
+            },
+            validation: {
+                success: 'text-gray-900 border-green-600 dark:text-white dark:border-green-500 dark:focus:border-green-500 focus:border-green-600',
+                error: 'text-gray-900 border-red-600 dark:text-white dark:border-red-500 dark:focus:border-red-500 focus:border-red-600',
+            },
+        },
+        outline: {
+            base: 'block w-full text-sm bg-transparent rounded-lg border-2 appearance-none focus:outline-none focus:ring-0 peer',
+            default: 'text-gray-900 border-gray-300 dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+            disabled: {
+                enabled: 'text-gray-900 border-gray-300 dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+                disabled: '',
+            },
+            size: {
+                sm: 'px-2.5 pb-1.5 pt-3',
+                md: 'px-2.5 pb-2.5 pt-4',
+                lg: '',
+            },
+            validation: {
+                success: 'text-gray-900 border-green-600 dark:text-white dark:border-green-500 dark:focus:border-green-500 focus:border-green-600',
+                error: 'text-gray-900 border-red-600 dark:text-white dark:border-red-500 dark:focus:border-red-500 focus:border-red-600',
+            },
+        },
+        fill: {
+            base: 'block rounded-t-lg w-full text-sm border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 peer',
+            default: 'text-gray-900 bg-gray-50 dark:bg-gray-700 border-gray-300 dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+            disabled: {
+                enabled: 'text-gray-900 bg-gray-50 dark:bg-gray-700 border-gray-300 dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+                disabled: '',
+            },
+            size: {
+                sm: 'px-2.5 pb-1.5 pt-4',
+                md: 'px-2.5 pb-2.5 pt-5',
+                lg: '',
+            },
+            validation: {
+                success: 'text-gray-900 bg-gray-50 dark:bg-gray-700 border-green-600 dark:border-green-500 dark:text-white dark:focus:border-green-500 focus:border-green-600',
+                error: 'text-gray-900 bg-gray-50 dark:bg-gray-700 dark:text-white dark:border-red-500 border-red-600 focus:border-red-600 dark:focus-border-red-500',
+            },
+        },
+    },
+});
+const inputDirectiveClassInstance = {
+    rootClass: '',
+};
+
+const FLOWBITE_DIRECTIVE_INPUT_THEME_TOKEN = new InjectionToken('FLOWBITE_DIRECTIVE_INPUT_THEME_TOKEN');
+class InputDirectiveThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DIRECTIVE_INPUT_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(properties.floatingLabelType && theme.floatingLabel[properties.floatingLabelType].base, properties.floatingLabelType &&
+                properties.validate &&
+                theme.floatingLabel[properties.floatingLabelType].validation[properties.validate], properties.floatingLabelType &&
+                !properties.validate &&
+                theme.floatingLabel[properties.floatingLabelType].disabled[properties.disabled], properties.floatingLabelType &&
+                !properties.validate &&
+                properties.disabled === 'disabled' &&
+                theme.floatingLabel[properties.floatingLabelType].default, properties.floatingLabelType && theme.floatingLabel[properties.floatingLabelType].size[properties.size], !properties.floatingLabelType && theme.base, !properties.floatingLabelType && properties.validate && theme.validation[properties.validate], !properties.floatingLabelType && !properties.validate && theme.disabled[properties.disabled], !properties.floatingLabelType && !properties.validate && properties.disabled === 'disabled' && theme.default, !properties.floatingLabelType && properties.prefix && theme.prefix?.[properties.prefix], !properties.floatingLabelType && theme.size[properties.size]),
+        };
+        return output;
+    }
+}
+
+class InputDirective extends BaseInputDirective {
+    constructor() {
+        super(...arguments);
+        this.contentClasses = signal(inputDirectiveClassInstance);
+        this.themeService = inject(InputDirectiveThemeService);
+        //#region properties
+        this.customStyle = input({});
+    }
+    //#endregion
+    //#region BaseInputDirective implementation
+    fetchClass() {
+        const propertyClass = this.themeService.getClasses({
+            disabled: booleanToFlowbiteBoolean(this.formFieldComponent.isDisabled()),
+            size: this.formFieldComponent.size(),
+            validate: this.formFieldComponent.validate(),
+            prefix: this.formFieldComponent.prefix(),
+            floatingLabelType: this.formFieldComponent.floatingLabelType(),
+            customStyle: this.customStyle(),
+        });
+        this.contentClasses.set(propertyClass);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: InputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: InputDirective, isStandalone: true, selector: "input[flowbiteInput]", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "formFieldComponent.isDisabled() || null" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: InputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'input[flowbiteInput]',
+                    host: {
+                        '[attr.disabled]': 'formFieldComponent.isDisabled() || null',
+                    },
+                }]
+        }] });
+
+const labelDirectiveTheme = createTheme({
+    base: 'block mb-2 text-sm font-medium',
+    default: 'text-gray-900 dark:text-white',
+    validation: {
+        success: 'text-green-700 dark:text-green-500',
+        error: 'text-red-700 dark:text-red-500',
+    },
+    floatingLabel: {
+        standard: {
+            base: 'absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6',
+            default: 'text-gray-500 dark:text-gray-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
+            disabled: {
+                enabled: 'text-gray-400 dark:text-gray-500 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
+                disabled: '',
+            },
+            validation: {
+                success: 'text-green-600 dark:text-green-500',
+                error: 'text-red-600 dark:text-red-500',
+            },
+        },
+        outline: {
+            base: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] px-2 peer-focus:px-2 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1',
+            default: 'text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
+            disabled: {
+                enabled: 'text-gray-400 dark:text-gray-500 bg-white dark:bg-gray-900 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
+                disabled: '',
+            },
+            validation: {
+                success: 'text-green-600 dark:text-green-500 bg-white dark:bg-gray-900',
+                error: 'text-red-600 dark:text-red-500 bg-white dark:bg-gray-900',
+            },
+        },
+        fill: {
+            base: 'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4',
+            default: 'text-gray-500 dark:text-gray-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
+            disabled: {
+                enabled: 'text-gray-400 dark:text-gray-500 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
+                disabled: '',
+            },
+            validation: {
+                success: 'text-green-600 dark:text-green-500',
+                error: 'text-red-600 dark:text-red-500',
+            },
+        },
+    },
+});
+const labelDirectiveClassInstance = {
+    rootClass: '',
+};
+
+const FLOWBITE_DIRECTIVE_LABEL_THEME_TOKEN = new InjectionToken('FLOWBITE_DIRECTIVE_LABEL_THEME_TOKEN');
+class LabelDirectiveThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_DIRECTIVE_LABEL_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(properties.floatingLabelType && theme.floatingLabel[properties.floatingLabelType].base, properties.floatingLabelType &&
+                properties.validate &&
+                theme.floatingLabel[properties.floatingLabelType].validation[properties.validate], properties.floatingLabelType &&
+                !properties.validate &&
+                theme.floatingLabel[properties.floatingLabelType].default, !properties.floatingLabelType && theme.base, !properties.floatingLabelType && properties.validate && theme.validation[properties.validate], !properties.floatingLabelType && !properties.validate && theme.default),
+        };
+        return output;
+    }
+}
+
+class LabelDirective extends BaseInputDirective {
+    constructor() {
+        super(...arguments);
+        this.contentClasses = signal(labelDirectiveClassInstance);
+        this.themeService = inject(LabelDirectiveThemeService);
+        this.for = inject(FormFieldComponent);
+        //#region properties
+        this.customStyle = input({});
+    }
+    //#endregion
+    //#region BaseInputDirective implementation
+    fetchClass() {
+        const propertyClass = this.themeService.getClasses({
+            disabled: booleanToFlowbiteBoolean(this.formFieldComponent.isDisabled()),
+            validate: this.formFieldComponent.validate(),
+            floatingLabelType: this.formFieldComponent.floatingLabelType(),
+            customStyle: this.customStyle(),
+        });
+        this.contentClasses.set(propertyClass);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: LabelDirective, isStandalone: true, selector: "label[flowbiteLabel]", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.for": "for.flowbiteId()" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'label[flowbiteLabel]',
+                    host: {
+                        '[attr.for]': 'for.flowbiteId()',
+                    },
+                }]
+        }] });
+
+const formFieldTheme = createTheme({
+    base: '',
+});
+const FormFieldClassInstance = {
+    rootClass: '',
+};
+
+const FLOWBITE_INDICATOR_THEME_TOKEN = new InjectionToken('FLOWBITE_INDICATOR_THEME_TOKEN');
+class IndicatorThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_INDICATOR_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.hasBorder[properties.hasBorder], theme.root.color[properties.color], theme.root.isDisabled[properties.isDisabled], properties.placement && properties.hasOffset == 'enabled' && theme.root.hasOffset[properties.placement], theme.root.isOutline[properties.isOutline], theme.root.isPill[properties.isPill], properties.placement && 'absolute ' + theme.root.placement[properties.placement], theme.root.isRounded[properties.isRounded], theme.root.size[properties.size]),
+        };
+        return output;
+    }
+}
+
+/**
+ * @see https://flowbite.com/docs/components/indicators/
+ */
+class IndicatorComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(IndicatorThemeService);
+        //#region properties
+        this.isPill = model(false);
+        this.isOutline = model(false);
+        this.isDisabled = model(false);
+        this.hasOffset = model(false);
+        this.isRounded = model(false);
+        this.hasBorder = model(false);
+        this.color = model('primary');
+        this.size = model('md');
+        this.placement = model(undefined);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            hasBorder: booleanToFlowbiteBoolean(this.hasBorder()),
+            color: this.color(),
+            isDisabled: booleanToFlowbiteBoolean(this.isDisabled()),
+            hasOffset: booleanToFlowbiteBoolean(this.hasOffset()),
+            isOutline: booleanToFlowbiteBoolean(this.isOutline()),
+            isPill: booleanToFlowbiteBoolean(this.isPill()),
+            isRounded: booleanToFlowbiteBoolean(this.isRounded()),
+            size: this.size(),
+            placement: this.placement(),
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IndicatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: IndicatorComponent, isStandalone: true, selector: "flowbite-indicator", inputs: { isPill: { classPropertyName: "isPill", publicName: "isPill", isSignal: true, isRequired: false, transformFunction: null }, isOutline: { classPropertyName: "isOutline", publicName: "isOutline", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, hasOffset: { classPropertyName: "hasOffset", publicName: "hasOffset", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPill: "isPillChange", isOutline: "isOutlineChange", isDisabled: "isDisabledChange", hasOffset: "hasOffsetChange", isRounded: "isRoundedChange", hasBorder: "hasBorderChange", color: "colorChange", size: "sizeChange", placement: "placementChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IndicatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-indicator',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const indicatorTheme = createTheme({
+    root: {
+        base: 'inline-flex items-center justify-center shrink-0 font-bold',
+        hasBorder: {
+            enabled: 'border-2',
+            disabled: '',
+        },
+        color: {
+            dark: 'bg-gray-900 dark:bg-gray-700 border-white dark:border-gray-800 text-white',
+            primary: 'bg-primary-500 border-white dark:border-gray-800 text-white',
+            gray: 'bg-gray-200 border-white dark:border-gray-800 text-gray-900',
+            blue: 'bg-blue-600 border-white dark:border-gray-800 text-white',
+            green: 'bg-green-500 border-white dark:border-gray-800 text-white',
+            red: 'bg-red-500 border-white dark:border-gray-800 text-white',
+            purple: 'bg-purple-500 border-white dark:border-gray-800 text-white',
+            indigo: 'bg-indigo-500 border-white dark:border-gray-800 text-white',
+            yellow: 'bg-yellow-300 border-white dark:border-gray-800 text-gray-900',
+            teal: 'bg-teal-500 border-white dark:border-gray-800 text-white',
+        },
+        isDisabled: {
+            enabled: 'opacity-50',
+            disabled: '',
+        },
+        hasOffset: {
+            'top-left': '-translate-x-1/3 -translate-y-1/3',
+            'top-center': '-translate-y-1/3',
+            'top-right': 'translate-x-1/3 -translate-y-1/3',
+            'center-left': '-translate-x-1/3',
+            center: '',
+            'center-right': 'translate-x-1/3',
+            'bottom-left': '-translate-x-1/3 translate-y-1/3',
+            'bottom-center': 'translate-y-1/3',
+            'bottom-right': 'translate-x-1/3 translate-y-1/3',
+        },
+        placement: {
+            'top-left': 'top-0 left-0',
+            'top-center': 'top-0 left-1/2 -translate-x-1/2',
+            'top-right': 'top-0 right-0',
+            'center-left': 'top-1/2 -translate-y-1/2 left-0',
+            center: 'top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',
+            'center-right': 'top-1/2 -translate-y-1/2 right-0',
+            'bottom-left': 'bottom-0 left-0',
+            'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+            'bottom-right': 'bottom-0 right-0',
+        },
+        isOutline: {
+            enabled: '',
+            disabled: '',
+        },
+        isPill: {
+            enabled: '',
+            disabled: '',
+        },
+        isRounded: {
+            enabled: 'rounded',
+            disabled: 'rounded-full',
+        },
+        size: {
+            xs: 'w-2 h-2 text-xs',
+            sm: 'w-2.5 h-2.5 text-sm',
+            md: 'w-3 h-3 text-sm',
+            lg: 'w-3.5 h-3.5 text-sm',
+            xl: 'w-6 h-6 text-sm',
+        },
+    },
+});
+
+const FLOWBITE_MODAL_BODY_THEME_TOKEN = new InjectionToken('FLOWBITE_MODAL_BODY_THEME_TOKEN');
+class ModalBodyThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_MODAL_BODY_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+        };
+        return output;
+    }
+}
+
+class ModalBodyComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(ModalBodyThemeService);
+        this.modalComponent = inject(ModalComponent);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ModalBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ModalBodyComponent, isStandalone: true, selector: "flowbite-modal-body", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ModalBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-modal-body',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const FLOWBITE_MODAL_FOOTER_THEME_TOKEN = new InjectionToken('FLOWBITE_MODAL_FOOTER_THEME_TOKEN');
+class ModalFooterThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_MODAL_FOOTER_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+        };
+        return output;
+    }
+}
+
+class ModalFooterComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(ModalFooterThemeService);
+        this.modalComponent = inject(ModalComponent);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ModalFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ModalFooterComponent, isStandalone: true, selector: "flowbite-modal-footer", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-modal-footer',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const FLOWBITE_MODAL_HEADER_THEME_TOKEN = new InjectionToken('FLOWBITE_MODAL_HEADER_THEME_TOKEN');
+class ModalHeaderThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_MODAL_HEADER_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+            modalHeaderTitleClass: twMerge(theme.title.base),
+            modalHeaderButtonClass: twMerge(theme.button.base),
+        };
+        return output;
+    }
+}
+
+class ModalHeaderComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.stateService = inject(ModalHeaderThemeService);
+        this.modalComponent = inject(ModalComponent);
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.stateService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'close', this.domSanitizer.bypassSecurityTrustHtml(CLOSE_SVG_ICON));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ModalHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ModalHeaderComponent, isStandalone: true, selector: "flowbite-modal-header", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `
+    <h3 [ngClass]="contentClasses().modalHeaderTitleClass">
+      <ng-content />
+    </h3>
+    <button
+      type="button"
+      [ngClass]="contentClasses().modalHeaderButtonClass"
+      data-modal-hide="medium-modal"
+      (click)="modalComponent.close()">
+      <flowbite-icon
+        svgIcon="flowbite-angular:close"
+        class="w-5 h-5" />
+      <span class="sr-only">Close modal</span>
+    </button>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass, IconComponent],
+                    selector: 'flowbite-modal-header',
+                    template: `
+    <h3 [ngClass]="contentClasses().modalHeaderTitleClass">
+      <ng-content />
+    </h3>
+    <button
+      type="button"
+      [ngClass]="contentClasses().modalHeaderButtonClass"
+      data-modal-hide="medium-modal"
+      (click)="modalComponent.close()">
+      <flowbite-icon
+        svgIcon="flowbite-angular:close"
+        class="w-5 h-5" />
+      <span class="sr-only">Close modal</span>
+    </button>
+  `,
+                }]
+        }] });
+
+const FLOWBITE_MODAL_THEME_TOKEN = new InjectionToken('FLOWBITE_MODAL_THEME_TOKEN');
+class ModalThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_MODAL_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+            modalWrapperClass: twMerge(theme.wrapper.base, theme.wrapper.position[properties.position]),
+            modalContainerClass: twMerge(theme.container.base, theme.container.size[properties.size]),
+            modalContentClass: twMerge(theme.content.base),
+        };
+        return output;
+    }
+}
+
+/**
+ * @see https://flowbite.com/docs/components/modal/
+ */
+class ModalComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.destroyed = new Subject();
+        this.themeService = inject(ModalThemeService);
+        this.modalHeaderChild = contentChild(ModalHeaderComponent);
+        this.modalBodyChild = contentChild(ModalBodyComponent);
+        this.modalFooterChild = contentChild(ModalFooterComponent);
+        //#region template properties
+        this.template = viewChild.required('modal', { read: TemplateRef });
+        this.viewContainer = inject(ViewContainerRef);
+        this.router = inject(Router);
+        //#endregion
+        //#region properties
+        this.size = model('md');
+        this.position = model('center');
+        this.isDismissable = model(false);
+        this.isOpen = model(false);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            isOpen: booleanToFlowbiteBoolean(this.isOpen()),
+            size: this.size(),
+            position: this.position(),
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        // close modal if it's not destroyed on route change
+        this.router.events
+            .pipe(takeUntil(this.destroyed), filter(() => this.isOpen()), filter((event) => event instanceof NavigationStart))
+            .subscribe(() => this.close());
+    }
+    verify() {
+        if (this.modalBodyChild() === undefined) {
+            throw new Error('No ModalBodyComponent available');
+        }
+    }
+    //#endregion
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+    open() {
+        this.isOpen.set(true);
+        this.changeBackdrop();
+    }
+    close() {
+        this.isOpen.set(false);
+        this.changeBackdrop();
+    }
+    toggle() {
+        this.isOpen.set(!this.isOpen());
+        this.changeBackdrop();
+    }
+    // If isOpen changes, add or remove template
+    changeBackdrop() {
+        if (this.isOpen()) {
+            this.createTemplate();
+        }
+        else {
+            this.destroyTemplate();
+        }
+    }
+    createTemplate() {
+        if (this.embeddedView) {
+            this.destroyTemplate();
+        }
+        this.embeddedView = this.viewContainer.createEmbeddedView(this.template());
+    }
+    destroyTemplate() {
+        this.embeddedView?.destroy();
+    }
+    onKeydownHandler(event) {
+        console.log('hello');
+        if (event.key === 'Escape') {
+            this.close();
+        }
+    }
+    onBackdropClick(event) {
+        if (event.target == event.currentTarget && this.isDismissable()) {
+            this.close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: ModalComponent, isStandalone: true, selector: "flowbite-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isDismissable: { classPropertyName: "isDismissable", publicName: "isDismissable", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", position: "positionChange", isDismissable: "isDismissableChange", isOpen: "isOpenChange", customStyle: "customStyleChange" }, host: { attributes: { "tabindex": "-1" }, listeners: { "document:keydown": "onKeydownHandler($event)" } }, queries: [{ propertyName: "modalHeaderChild", first: true, predicate: ModalHeaderComponent, descendants: true, isSignal: true }, { propertyName: "modalBodyChild", first: true, predicate: ModalBodyComponent, descendants: true, isSignal: true }, { propertyName: "modalFooterChild", first: true, predicate: ModalFooterComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["modal"], descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-template #modal>
+      <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-[99]"></div>
+
+      <div
+        [ngClass]="contentClasses().modalWrapperClass"
+        (click)="onBackdropClick($event)">
+        <div [ngClass]="contentClasses().modalContainerClass">
+          <div [ngClass]="contentClasses().modalContentClass">
+            <ng-content />
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-modal',
+                    template: `
+    <ng-template #modal>
+      <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-[99]"></div>
+
+      <div
+        [ngClass]="contentClasses().modalWrapperClass"
+        (click)="onBackdropClick($event)">
+        <div [ngClass]="contentClasses().modalContainerClass">
+          <div [ngClass]="contentClasses().modalContentClass">
+            <ng-content />
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                    host: {
+                        tabindex: '-1',
+                        '(document:keydown)': 'onKeydownHandler($event)',
+                    },
+                }]
+        }] });
+
+const modalTheme = createTheme({
+    root: {
+        base: '',
+    },
+    wrapper: {
+        base: 'fixed top-0 left-0 right-0 z-[100] w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:h-full flex',
+        position: {
+            'top-left': 'items-start justify-start',
+            'top-center': 'items-start justify-center',
+            'top-right': 'items-start justify-end',
+            'center-left': 'items-center justify-start',
+            center: 'items-center justify-center',
+            'center-right': 'items-center justify-end',
+            'bottom-left': 'items-end justify-start',
+            'bottom-center': 'items-end justify-center',
+            'bottom-right': 'items-end justify-end',
+        },
+    },
+    container: {
+        base: 'relative w-full h-full md:h-auto',
+        size: {
+            sm: 'max-w-md',
+            md: 'max-w-lg',
+            lg: 'max-w-4xl',
+            xl: 'max-w-7xl',
+        },
+    },
+    content: {
+        base: 'relative bg-white rounded-lg shadow dark:bg-gray-700',
+    },
+});
+
+const modalHeaderTheme = createTheme({
+    root: {
+        base: 'flex items-center justify-between p-5 border-b rounded-t dark:border-gray-600',
+    },
+    title: {
+        base: 'text-xl font-medium text-gray-900 dark:text-white',
+    },
+    button: {
+        base: 'text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white',
+    },
+});
+
+const modalBodyTheme = createTheme({
+    root: {
+        base: 'block p-6 space-y-6',
+    },
+});
+
+const modalFooterTheme = createTheme({
+    root: {
+        base: 'flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600',
+    },
+});
+
+const FLOWBITE_NAVBAR_BRAND_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_BRAND_THEME_TOKEN');
+class NavbarBrandThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_NAVBAR_BRAND_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+        };
+        return output;
+    }
+}
+
+class NavbarBrandComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(NavbarBrandThemeService);
+        this.navbarComponent = inject(NavbarComponent);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarBrandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: NavbarBrandComponent, isStandalone: true, selector: "flowbite-navbar-brand", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarBrandComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flowbite-navbar-brand',
+                    standalone: true,
+                    imports: [NgClass],
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN');
+class NavbarContentThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.isOpen[properties.isOpen]),
+            navbarContentListClass: twMerge(theme.list.base),
+        };
+        return output;
+    }
+}
+
+class NavbarContentComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(NavbarContentThemeService);
+        this.navbarComponent = model(inject(NavbarComponent));
+        //#region properties
+        this.color = model(this.navbarComponent().color());
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            isOpen: booleanToFlowbiteBoolean(this.navbarComponent().isOpen()),
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: NavbarContentComponent, isStandalone: true, selector: "flowbite-navbar-content", inputs: { navbarComponent: { classPropertyName: "navbarComponent", publicName: "navbarComponent", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarComponent: "navbarComponentChange", color: "colorChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `
+    <div [ngClass]="contentClasses().navbarContentListClass">
+      <ng-content />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flowbite-navbar-content',
+                    standalone: true,
+                    imports: [NgClass],
+                    template: `
+    <div [ngClass]="contentClasses().navbarContentListClass">
+      <ng-content />
+    </div>
+  `,
+                }]
+        }] });
+
+const FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN');
+class NavbarToggleThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+        };
+        return output;
+    }
+}
+
+class NavbarToggleComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(NavbarToggleThemeService);
+        this.navbarComponent = model(inject(NavbarComponent));
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'bars', this.domSanitizer.bypassSecurityTrustHtml(BARS_SVG_ICON));
+    }
+    //#endregion
+    onClick() {
+        const isCollapsed = this.navbarComponent().isOpen();
+        this.navbarComponent().isOpen.set(!isCollapsed);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: NavbarToggleComponent, isStandalone: true, selector: "flowbite-navbar-toggle", inputs: { navbarComponent: { classPropertyName: "navbarComponent", publicName: "navbarComponent", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarComponent: "navbarComponentChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
+    <flowbite-icon
+      svgIcon="flowbite-angular:bars"
+      class="w-5 h-5" />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flowbite-navbar-toggle',
+                    standalone: true,
+                    imports: [CommonModule, IconComponent],
+                    template: `
+    <flowbite-icon
+      svgIcon="flowbite-angular:bars"
+      class="w-5 h-5" />
+  `,
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+const FLOWBITE_NAVBAR_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_THEME_TOKEN');
+class NavbarThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_NAVBAR_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.color['gray'], theme.root.isRounded[properties.isRounded], theme.root.hasBorder[properties.hasBorder], theme.root.isFixed[properties.isFixed]),
+        };
+        return output;
+    }
+}
+
+/**
+ * @see https://flowbite.com/docs/components/navbar/
+ */
+class NavbarComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(NavbarThemeService);
+        this.navbarBrandChild = contentChild(NavbarBrandComponent);
+        this.navbarToggleChild = contentChild(NavbarToggleComponent);
+        this.navbarContentChild = contentChild(NavbarContentComponent);
+        //#region properties
+        this.color = model('primary');
+        this.isOpen = model(false);
+        this.isRounded = model(false);
+        this.hasBorder = model(false);
+        this.isFixed = model(false);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            hasBorder: booleanToFlowbiteBoolean(this.isRounded()),
+            isRounded: booleanToFlowbiteBoolean(this.hasBorder()),
+            isFixed: booleanToFlowbiteBoolean(this.isFixed()),
+            customStyle: this.customStyle(),
+        });
+    }
+    verify() {
+        if (this.navbarContentChild() === undefined) {
+            throw new Error('No NavbarContentComponent available');
+        }
+    }
+    //#endregion
+    toggleVisibility(isOpen) {
+        if (isOpen === undefined) {
+            isOpen = untracked(() => !this.isOpen());
+        }
+        this.isOpen.set(isOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: NavbarComponent, isStandalone: true, selector: "flowbite-navbar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, isFixed: { classPropertyName: "isFixed", publicName: "isFixed", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", isOpen: "isOpenChange", isRounded: "isRoundedChange", hasBorder: "hasBorderChange", isFixed: "isFixedChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "navbarBrandChild", first: true, predicate: NavbarBrandComponent, descendants: true, isSignal: true }, { propertyName: "navbarToggleChild", first: true, predicate: NavbarToggleComponent, descendants: true, isSignal: true }, { propertyName: "navbarContentChild", first: true, predicate: NavbarContentComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-navbar',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const navbarTheme = createTheme({
+    root: {
+        base: 'flex flex-wrap items-center justify-between p-4',
+        color: {
+            primary: 'bg-primary-200 dark:bg-primary-800 border-primary-200 dark:border-primary-700',
+            gray: 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700',
+        },
+        isRounded: {
+            enabled: 'rounded',
+            disabled: '',
+        },
+        hasBorder: {
+            enabled: 'border',
+            disabled: '',
+        },
+        isFixed: {
+            enabled: 'border-b',
+            disabled: '',
+        },
+    },
+});
+
+const navbarBrandTheme = createTheme({
+    root: {
+        base: 'cursor-pointer flex items-center space-x-3 rtl:space-x-reverse',
+    },
+});
+
+const navbarContentTheme = createTheme({
+    root: {
+        base: 'w-full md:block md:w-auto order-last md:order-none',
+        isOpen: {
+            enabled: '',
+            disabled: 'hidden',
+        },
+    },
+    list: {
+        base: 'font-medium flex flex-col p-4 md:p-0 mt-4 items-center border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-900 md:dark:bg-gray-800 dark:border-gray-700',
+    },
+});
+
+/**
+ * Wrapping directive over RouterLinkActive.
+ *
+ * @usageNotes
+ * It provides a clean way to have 'isActive' data with signal base value.
+ *
+ * @see `RouterLinkActive`
+ */
+class FlowbiteRouterLinkActiveDirective {
+    get isActive() {
+        return this._isActive.asReadonly();
+    }
+    /**
+     * Set the RouterLinkActive's ariaCurrentWhenActive to the value passed to the component (via this Directive).
+     */
+    constructor() {
+        this.ariaCurrentValue = true;
+        this.routerLinkActive = inject(RouterLinkActive);
+        this._isActive = signal(this.routerLinkActive.isActive);
+        this.routerLinkActive.ariaCurrentWhenActive = this.ariaCurrentValue;
+    }
+    onIsActiveChange() {
+        this._isActive.set(this.routerLinkActive.isActive);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FlowbiteRouterLinkActiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: FlowbiteRouterLinkActiveDirective, isStandalone: true, selector: "[flowbiteRouterLinkActive]", host: { attributes: { "isActiveChange": "onIsActiveChange" } }, hostDirectives: [{ directive: i1.RouterLinkActive, inputs: ["routerLinkActiveOptions", "routerLinkActiveOptions", "ariaCurrentWhenActive", "ariaCurrentWhenActive", "routerLinkActive", "routerLinkActive"], outputs: ["isActiveChange", "isActiveChange"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: FlowbiteRouterLinkActiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[flowbiteRouterLinkActive]',
+                    host: {
+                        isActiveChange: 'onIsActiveChange',
+                    },
+                    hostDirectives: [
+                        {
+                            directive: RouterLinkActive,
+                            inputs: routerLinkActiveInputs,
+                            outputs: routerLinkActiveOutputs,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+
+const FLOWBITE_NAVBAR_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_ITEM_THEME_TOKEN');
+class NavbarItemThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_NAVBAR_ITEM_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
+        };
+        return output;
+    }
+}
+
+class NavbarItemComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true });
+        this.flowbiteRouterLinkActive = inject(FlowbiteRouterLinkActiveDirective, { optional: true });
+        this.themeService = inject(NavbarItemThemeService);
+        this.navbarContentComponent = inject(NavbarContentComponent);
+        //#region properties
+        this.color = model(this.navbarContentComponent.color());
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            customStyle: this.customStyle(),
+        });
+    }
+    //#endregion
+    onClick() {
+        this.navbarContentComponent.navbarComponent().toggleVisibility(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: NavbarItemComponent, isStandalone: true, selector: "flowbite-navbar-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flowbite-navbar-item',
+                    standalone: true,
+                    imports: [NgClass],
+                    template: `<ng-content />`,
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+const navbarItemTheme = createTheme({
+    root: {
+        base: 'cursor-pointer block py-2 px-3 rounded text-sm text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:p-0 md:dark:hover:bg-transparent',
+        color: {
+            primary: 'md:hover:text-primary-700 md:dark:hover:text-primary-500 aria-current:text-primary-500 dark:aria-current:text-primary-300',
+            gray: 'md:hover:text-gray-700 md:dark:hover:text-gray-500 aria-current:text-gray-500 dark:aria-current:text-gray-300',
+        },
+    },
+});
+
+const navbarToogleTheme = createTheme({
+    root: {
+        base: 'cursor-pointer inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600',
+    },
+});
+
+const FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN');
+class NavbarIconButtonThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
+        };
+        return output;
+    }
+}
+
+class NavbarIconButtonComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(NavbarIconButtonThemeService);
+        this.navbarComponent = inject(NavbarComponent, { optional: true });
+        this.navbarContentComponent = inject(NavbarContentComponent, { optional: true });
+        //#region properties
+        this.color = model(this.navbarContentComponent?.color() || this.navbarComponent.color());
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            customStyle: this.customStyle(),
+        });
+    }
+    verify() {
+        if (this.navbarComponent === null && this.navbarContentComponent === null) {
+            throw new Error('No NavbarComponent/NavbarContentComponent available');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: NavbarIconButtonComponent, isStandalone: true, selector: "flowbite-navbar-icon-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: NavbarIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flowbite-navbar-icon-button',
+                    standalone: true,
+                    imports: [],
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const navbarIconButtonTheme = createTheme({
+    root: {
+        base: 'cursor-pointer rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
+        color: {
+            primary: 'text-primary-500 dark:text-primary-300',
+            gray: 'text-gray-500 dark:text-gray-400',
+            blue: 'text-blue-500 dark:text-blue-300',
+            red: 'text-red-500 dark:text-red-300',
+            green: 'text-green-500 dark:text-green-300',
+            yellow: 'text-yellow-500 dark:text-yellow-300',
+        },
+    },
+});
+
+const FLOWBITE_SCROLL_TOP_THEME_TOKEN = new InjectionToken('FLOWBITE_SCROLL_TOP_THEME_TOKEN');
+class ScrollTopThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_SCROLL_TOP_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.position[properties.position]),
+        };
+        return output;
+    }
+}
+
+class ScrollTopComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(ScrollTopThemeService);
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        //#region properties
+        this.color = model('primary');
+        this.position = model('bottom-right');
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implemenation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            position: this.position(),
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-up', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_UP_SVG_ICON));
+    }
+    //#endregion
+    onClick() {
+        window.scrollTo(window.scrollX, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ScrollTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ScrollTopComponent, isStandalone: true, selector: "flowbite-scroll-top", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", position: "positionChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `<flowbite-icon
+    svgIcon="flowbite-angular:chevron-up"
+    class="w-5 h-5" />`, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ScrollTopComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'flowbite-scroll-top',
+                    standalone: true,
+                    imports: [IconComponent],
+                    template: `<flowbite-icon
+    svgIcon="flowbite-angular:chevron-up"
+    class="w-5 h-5" />`,
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+const scrollTopTheme = createTheme({
+    root: {
+        base: 'cursor-pointer fixed flex flex-row place-items-center p-2 rounded-lg',
+        color: {
+            primary: 'bg-primary-100',
+            dark: 'bg-gray-100 dark:bg-gray-800 dark:text-white',
+            blue: 'bg-blue-100',
+            gray: 'bg-gray-100',
+            green: 'bg-green-100',
+            lime: 'bg-lime-100',
+            purple: 'bg-purple-100',
+            red: 'bg-red-100',
+        },
+        position: {
+            'bottom-center': 'bottom-3 left-1/2 right-1/2',
+            'bottom-left': 'bottom-3 left-3',
+            'bottom-right': 'bottom-3 right-3',
+            'center-left': 'left-3 top-1/2 bottom-1/2',
+            'center-right': 'right-3 top-1/2 bottom-1/2',
+            'top-center': 'top-3 left-1/2 right-1/2',
+            'top-left': 'top-3 left-3',
+            'top-right': 'top-3 right-3',
+        },
+    },
+});
+
+const FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN');
+class SidebarItemGroupThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base),
+            spanClass: twMerge(theme.spanText.base, theme.spanText.color[properties.color]),
+        };
+        return output;
+    }
+}
+
+/**
+ * Sanitize a string as trusted HTML.
+ *
+ * @see `DomSanitizer`
+ */
+class SanitizeHtmlPipe {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+    }
+    /**
+     * Return the result of 'bypassSecurityTrustHtml' function of DomSanitizer for the parameter.
+     *
+     * @param v The string to be transformed.
+     * @returns The SfeHtml from the DomSanitizer.
+     */
+    transform(v) {
+        return this._sanitizer.bypassSecurityTrustHtml(v);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SanitizeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SanitizeHtmlPipe, isStandalone: true, name: "sanitizeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SanitizeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'sanitizeHtml',
+                }]
+        }] });
+
+const FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN');
+class SidebarItemThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
+            sidebarIconClass: twMerge(theme.icon.base),
+        };
+        return output;
+    }
+}
+
+class SidebarItemComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true });
+        this.flowbiteRouterLinkActive = inject(FlowbiteRouterLinkActiveDirective, { optional: true });
+        this.themeService = inject(SidebarItemThemeService);
+        this.sidebarItemGroupComponent = inject(SidebarItemGroupComponent, {
+            optional: true,
+        });
+        this.sidebarMenuComponent = inject(SidebarMenuComponent);
+        //#region properties
+        this.icon = model(undefined);
+        this.color = model((this.sidebarItemGroupComponent ?? this.sidebarMenuComponent).color());
+        this.label = model(undefined);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            icon: this.icon(),
+            color: this.color(),
+            label: this.label(),
+            customStyle: this.customStyle(),
+        });
+    }
+    verify() {
+        if (this.sidebarMenuComponent === undefined && this.sidebarItemGroupComponent === undefined) {
+            throw new Error('No SidebarMenuComponent/SidebarItemGroupComponent available');
+        }
+    }
+    //#endregion
+    onClick() {
+        (this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.closeAll();
+        (this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.sidebarComponent.toggleVisibility(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: SidebarItemComponent, isStandalone: true, selector: "flowbite-sidebar-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icon: "iconChange", color: "colorChange", label: "labelChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
+    <span
+      class="flex-shrink-0"
+      [innerHTML]="icon()! | sanitizeHtml"
+      *ngIf="icon()"></span>
+    <span
+      [ngClass]="contentClasses().sidebarIconClass"
+      [class.ml-3]="icon()">
+      <ng-content />
+    </span>
+    <flowbite-badge *ngIf="label()">{{ label() }}</flowbite-badge>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: BadgeComponent, selector: "flowbite-badge", inputs: ["color", "size", "isIconOnly", "isPill", "customStyle"], outputs: ["colorChange", "sizeChange", "isIconOnlyChange", "isPillChange", "customStyleChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgIf, NgClass, SanitizeHtmlPipe, BadgeComponent],
+                    selector: 'flowbite-sidebar-item',
+                    template: `
+    <span
+      class="flex-shrink-0"
+      [innerHTML]="icon()! | sanitizeHtml"
+      *ngIf="icon()"></span>
+    <span
+      [ngClass]="contentClasses().sidebarIconClass"
+      [class.ml-3]="icon()">
+      <ng-content />
+    </span>
+    <flowbite-badge *ngIf="label()">{{ label() }}</flowbite-badge>
+  `,
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+class SidebarItemGroupComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(SidebarItemGroupThemeService);
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        this.sidebarMenuComponent = inject(SidebarMenuComponent);
+        this.sidebarItemChildren = contentChildren(SidebarItemComponent);
+        //#region properties
+        this.isOpen = model(this.sidebarItemChildren().some((x) => x.flowbiteRouterLinkActive?.isActive() ?? false));
+        this.color = model(this.sidebarMenuComponent.color());
+        this.title = model.required();
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            customStyle: this.customStyle(),
+        });
+    }
+    verify() {
+        if (this.sidebarItemChildren().length === 0) {
+            throw new Error('No SidebarItemComponent available');
+        }
+    }
+    init() {
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON));
+    }
+    //#endregion
+    onSpanClick() {
+        this.toggleVisibility();
+    }
+    toggleVisibility(isOpen) {
+        if (isOpen === undefined) {
+            isOpen = untracked(() => !this.isOpen());
+        }
+        this.isOpen.set(isOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarItemGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: SidebarItemGroupComponent, isStandalone: true, selector: "flowbite-sidebar-item-group", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", color: "colorChange", title: "titleChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "sidebarItemChildren", predicate: SidebarItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <span
+      [class]="contentClasses().spanClass"
+      (click)="onSpanClick()">
+      <h4>{{ title() }}</h4>
+      <flowbite-icon
+        svgIcon="flowbite-angular:chevron-down"
+        class="h-6 w-6 shrink-0 duration-200"
+        [class.rotate-180]="!isOpen()" />
+    </span>
+    <ng-content *ngIf="isOpen()" />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarItemGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass, NgIf, IconComponent],
+                    selector: 'flowbite-sidebar-item-group',
+                    template: `
+    <span
+      [class]="contentClasses().spanClass"
+      (click)="onSpanClick()">
+      <h4>{{ title() }}</h4>
+      <flowbite-icon
+        svgIcon="flowbite-angular:chevron-down"
+        class="h-6 w-6 shrink-0 duration-200"
+        [class.rotate-180]="!isOpen()" />
+    </span>
+    <ng-content *ngIf="isOpen()" />
+  `,
+                }]
+        }] });
+
+const FLOWBITE_SIDEBAR_MENU_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_MENU_THEME_TOKEN');
+class SidebarMenuThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_SIDEBAR_MENU_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.isOpen[properties.isOpen], properties.isOpen === 'enabled' && theme.root.displayMode[properties.displayMode], theme.root.color[properties.color]),
+        };
+        return output;
+    }
+}
+
+class SidebarMenuComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(SidebarMenuThemeService);
+        this.sidebarComponent = inject(SidebarComponent);
+        this.sidebarItemGroupChildren = contentChildren(SidebarItemGroupComponent);
+        this.sidebarItemChildren = contentChildren(SidebarItemComponent);
+        //#region properties
+        this.color = model(this.sidebarComponent.color());
+        this.customStyle = model({});
+    }
+    //#endregion
+    fetchClass() {
+        return this.themeService.getClasses({
+            isOpen: booleanToFlowbiteBoolean(this.sidebarComponent.isOpen()),
+            color: this.color(),
+            displayMode: this.sidebarComponent.displayMode(),
+            customStyle: this.customStyle(),
+        });
+    }
+    verify() {
+        if (this.sidebarItemChildren().length === 0 && this.sidebarItemGroupChildren().length === 0) {
+            throw new Error('No SidebarItemComponent/SidebarItemGroupComponent available');
+        }
+    }
+    closeAll() {
+        this.sidebarItemGroupChildren().forEach((x) => x.toggleVisibility(false));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: SidebarMenuComponent, isStandalone: true, selector: "flowbite-sidebar-menu", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "sidebarItemGroupChildren", predicate: SidebarItemGroupComponent, isSignal: true }, { propertyName: "sidebarItemChildren", predicate: SidebarItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [],
+                    selector: 'flowbite-sidebar-menu',
+                    template: '<ng-content />',
+                }]
+        }] });
+
+const FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN');
+class SidebarPageContentThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, properties.isOpen === 'enabled' && theme.root.displayMode[properties.displayMode]),
+        };
+        return output;
+    }
+}
+
+class SidebarPageContentComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(SidebarPageContentThemeService);
+        this.sidebarComponent = inject(SidebarComponent);
+        //#region properties
+        this.customStyle = model({});
+    }
+    //endregion
+    //region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            isOpen: booleanToFlowbiteBoolean(this.sidebarComponent.isOpen()),
+            displayMode: this.sidebarComponent.displayMode(),
+            customStyle: this.customStyle(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarPageContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: SidebarPageContentComponent, isStandalone: true, selector: "flowbite-sidebar-page-content", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarPageContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [],
+                    selector: 'flowbite-sidebar-page-content',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const FLOWBITE_SIDEBAR_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_THEME_TOKEN');
+class SidebarThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_SIDEBAR_THEME_TOKEN);
+    }
+    getClasses(properties) {
+        const theme = mergeTheme(this.baseTheme, properties.customStyle);
+        const output = {
+            rootClass: twMerge(theme.root.base, theme.root.isRounded[properties.isRounded]),
+        };
+        return output;
+    }
+}
+
+/**
+ * @see https://flowbite.com/docs/components/sidebar/
+ */
+class SidebarComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(SidebarThemeService);
+        this.sidebarMenuChild = contentChild(SidebarMenuComponent);
+        this.sidebarPageContentChild = contentChild(SidebarPageContentComponent);
+        //#region properties
+        this.color = model('primary');
+        this.displayMode = model('push');
+        this.isOpen = model(false);
+        this.isRounded = model(false);
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            displayMode: this.displayMode(),
+            isRounded: booleanToFlowbiteBoolean(this.isRounded()),
+            customStyle: this.customStyle(),
+        });
+    }
+    verify() {
+        if (this.sidebarMenuChild() === undefined) {
+            throw new Error('No SidebarMenuComponent available');
+        }
+        if (this.sidebarPageContentChild() === undefined) {
+            throw new Error('No SidebarPageContentComponent available');
+        }
+    }
+    //#endregion
+    toggleVisibility(isOpen) {
+        if (isOpen === undefined) {
+            isOpen = untracked(() => !this.isOpen());
+        }
+        this.isOpen.set(isOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: SidebarComponent, isStandalone: true, selector: "flowbite-sidebar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", displayMode: "displayModeChange", isOpen: "isOpenChange", isRounded: "isRoundedChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "sidebarMenuChild", first: true, predicate: SidebarMenuComponent, descendants: true, isSignal: true }, { propertyName: "sidebarPageContentChild", first: true, predicate: SidebarPageContentComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [NgClass],
+                    selector: 'flowbite-sidebar',
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+const sidebarTheme = createTheme({
+    root: {
+        base: 'flex flex-row min-h-full',
+        isRounded: {
+            enabled: 'rounded',
+            disabled: '',
+        },
+    },
+});
+
+const sidebarItemTheme = createTheme({
+    root: {
+        base: 'group flex cursor-pointer items-center rounded-lg p-2 text-base font-normal text-gray-900 dark:text-white',
+        color: {
+            primary: 'aria-current:text-primary-500 dark:aria-current:text-primary-300 hover:bg-primary-200/35 dark:hover:bg-primary-700/35',
+            dark: 'aria-current:text-gray-500 dark:aria-current:text-gray-300 hover:bg-gray-200/35 dark:hover:bg-gray-700/35',
+            blue: 'aria-current:text-blue-500 dark:aria-current:text-blue-300 hover:bg-blue-200/35 dark:hover:bg-blue-700/35',
+            red: 'aria-current:text-red-500 dark:aria-current:text-red-300 hover:bg-red-200/35 dark:hover:bg-red-700/35',
+            green: 'aria-current:text-green-500 dark:aria-current:text-green-300 hover:bg-green-200/35 dark:hover:bg-green-700/35',
+            yellow: 'aria-current:text-yellow-500 dark:aria-current:text-yellow-300 hover:bg-yellow-200/35 dark:hover:bg-yellow-700/35',
+        },
+    },
+    icon: {
+        base: 'flex-1 whitespace-nowrap',
+    },
+});
+
+const sidebarItemGroupTheme = createTheme({
+    root: {
+        base: 'flex flex-col py-2 font-semibold cursor-pointer',
+    },
+    spanText: {
+        base: 'flex flex-row justify-between m-2',
+        color: {
+            primary: 'text-primary-600',
+            dark: 'text-gray-600',
+            blue: 'text-blue-600',
+            red: 'text-red-600',
+            green: 'text-green-600',
+            yellow: 'text-yellow-600',
+        },
+    },
+});
+
+const FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN = new InjectionToken('FLOWBITE_TOGGLE_SIDEBAR_THEME_TOKEN');
+class SidebarToggleThemeService {
+    constructor() {
+        this.baseTheme = inject(FLOWBITE_SIDEBAR_TOGGLE_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.size[properties.color]),
+        };
+        return output;
+    }
+}
+
+class SidebarToggleComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.themeService = inject(SidebarToggleThemeService);
+        this.iconRegistry = inject(IconRegistry);
+        this.domSanitizer = inject(DomSanitizer);
+        this.sidebarComponent = model(inject(SidebarComponent));
+        //#region properties
+        this.color = model('primary');
+        this.size = model('sm');
+        this.customStyle = model({});
+    }
+    //#endregion
+    //#region BaseComponent implementation
+    fetchClass() {
+        return this.themeService.getClasses({
+            color: this.color(),
+            size: this.size(),
+            customStyle: this.customStyle(),
+        });
+    }
+    init() {
+        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'tabs', this.domSanitizer.bypassSecurityTrustHtml(BARS_SVG_ICON));
+    }
+    //#endregion
+    onClick() {
+        const isOpen = this.sidebarComponent().isOpen();
+        this.sidebarComponent().isOpen.set(!isOpen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: SidebarToggleComponent, isStandalone: true, selector: "flowbite-sidebar-toggle", inputs: { sidebarComponent: { classPropertyName: "sidebarComponent", publicName: "sidebarComponent", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarComponent: "sidebarComponentChange", color: "colorChange", size: "sizeChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `<flowbite-icon svgIcon="flowbite-angular:bars" />`, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SidebarToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [IconComponent],
+                    selector: 'flowbite-sidebar-toggle',
+                    template: `<flowbite-icon svgIcon="flowbite-angular:bars" />`,
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+const sidebarToggleTheme = createTheme({
+    root: {
+        base: 'cursor-pointer inline-flex items-center p-2 justify-center rounded-lg focus:outline-none focus:ring-2',
+        color: {
+            primary: 'text-primary-500 dark:text-primary-400 hover:bg-primary-100 dark:hover:bg-gray-700 focus:ring-primary-200 dark:focus:ring-primary-600',
+            dark: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-200 dark:focus:ring-gray-600',
+            blue: 'text-blue-500 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 focus:ring-blue-200 dark:focus:ring-blue-600',
+            red: 'text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-700 focus:ring-red-200 dark:focus:ring-red-600',
+            green: 'text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-700 focus:ring-green-200 dark:focus:ring-green-600',
+            yellow: 'text-yellow-500 dark:text-yellow-400 hover:bg-yellow-100 dark:hover:bg-yellow-700 focus:ring-yellow-200 dark:focus:ring-yellow-600',
+        },
+        size: {
+            sm: 'text-sm',
+        },
+    },
+});
+
+const sidebarPageContentTheme = createTheme({
+    root: {
+        base: 'flex flex-1',
+        displayMode: {
+            push: '',
+            over: '',
+            backdrop: 'sticky left-0 right-0 z-30 bg-gray-500 bg-opacity-50 blur-md',
+        },
+    },
+});
+
+const sidebarMenuTheme = createTheme({
+    root: {
+        base: 'flex-col min-h-full overflow-y-auto shrink-0 pr-1 border-r bg-white dark:bg-gray-800',
+        displayMode: {
+            push: '',
+            over: 'sticky top-0 z-50',
+            backdrop: 'sticky top-0 z-50',
+        },
+        isOpen: {
+            enabled: 'flex',
+            disabled: 'hidden',
+        },
+        color: {
+            primary: 'border-primary-200 dark:border-primary-700',
+            dark: 'border-gray-200 dark:border-gray-800',
+            blue: 'border-blue-200 dark:border-blue-700',
+            red: 'border-red-200 dark:border-red-700',
+            green: 'border-green-200 dark:border-green-700',
+            yellow: 'border-yellow-200 dark:border-yellow-700',
+        },
+    },
+});
+
+/**
+ * This function define base implementation of injected services and value used all over flowbite-angular library.
+ *
+ * @returns Return the configuration for flowbite-angular ThemeServices, themeProviders and settingsProviders.
+ *
+ * @see `EnvironmentProviders`
+ */
+function initFlowbite() {
+    const serviceProviders = makeEnvironmentProviders([
+        {
+            provide: AccordionContentThemeService,
+            useClass: AccordionContentThemeService,
+        },
+        {
+            provide: AccordionPanelThemeService,
+            useClass: AccordionPanelThemeService,
+        },
+        {
+            provide: AccordionTitleThemeService,
+            useClass: AccordionTitleThemeService,
+        },
+        {
+            provide: AccordionThemeService,
+            useClass: AccordionThemeService,
+        },
+        {
+            provide: AlertThemeService,
+            useClass: AlertThemeService,
+        },
+        {
+            provide: BadgeThemeService,
+            useClass: BadgeThemeService,
+        },
+        {
+            provide: BreadcrumbItemThemeService,
+            useClass: BreadcrumbItemThemeService,
+        },
+        {
+            provide: BreadcrumbThemeService,
+            useClass: BreadcrumbThemeService,
+        },
+        {
+            provide: ButtonThemeService,
+            useClass: ButtonThemeService,
+        },
+        {
+            provide: DarkThemeToggleThemeService,
+            useClass: DarkThemeToggleThemeService,
+        },
+        {
+            provide: DropdownDividerThemeService,
+            useClass: DropdownDividerThemeService,
+        },
+        {
+            provide: DropdownHeaderThemeService,
+            useClass: DropdownHeaderThemeService,
+        },
+        {
+            provide: DropdownItemThemeService,
+            useClass: DropdownItemThemeService,
+        },
+        {
+            provide: DropdownThemeService,
+            useClass: DropdownThemeService,
+        },
+        {
+            provide: FormFieldThemeService,
+            useClass: FormFieldThemeService,
+        },
+        {
+            provide: IndicatorThemeService,
+            useClass: IndicatorThemeService,
+        },
+        {
+            provide: ModalBodyThemeService,
+            useClass: ModalBodyThemeService,
+        },
+        {
+            provide: ModalFooterThemeService,
+            useClass: ModalFooterThemeService,
+        },
+        {
+            provide: ModalHeaderThemeService,
+            useClass: ModalHeaderThemeService,
+        },
+        {
+            provide: ModalThemeService,
+            useClass: ModalThemeService,
+        },
+        {
+            provide: NavbarBrandThemeService,
+            useClass: NavbarBrandThemeService,
+        },
+        {
+            provide: NavbarContentThemeService,
+            useClass: NavbarContentThemeService,
+        },
+        {
+            provide: NavbarItemThemeService,
+            useClass: NavbarItemThemeService,
+        },
+        {
+            provide: NavbarToggleThemeService,
+            useClass: NavbarToggleThemeService,
+        },
+        {
+            provide: NavbarIconButtonThemeService,
+            useClass: NavbarIconButtonThemeService,
+        },
+        {
+            provide: NavbarThemeService,
+            useClass: NavbarThemeService,
+        },
+        {
+            provide: ScrollTopThemeService,
+            useClass: ScrollTopThemeService,
+        },
+        {
+            provide: SidebarItemGroupThemeService,
+            useClass: SidebarItemGroupThemeService,
+        },
+        {
+            provide: SidebarItemThemeService,
+            useClass: SidebarItemThemeService,
+        },
+        {
+            provide: SidebarMenuThemeService,
+            useClass: SidebarMenuThemeService,
+        },
+        {
+            provide: SidebarPageContentThemeService,
+            useClass: SidebarPageContentThemeService,
+        },
+        {
+            provide: SidebarToggleThemeService,
+            useClass: SidebarToggleThemeService,
+        },
+        {
+            provide: SidebarThemeService,
+            useClass: SidebarThemeService,
+        },
+        {
+            provide: IconDirectiveThemeService,
+            useClass: IconDirectiveThemeService,
+        },
+        {
+            provide: AddonDirectiveThemeService,
+            useClass: AddonDirectiveThemeService,
+        },
+        {
+            provide: InputDirectiveThemeService,
+            useClass: InputDirectiveThemeService,
+        },
+        {
+            provide: LabelDirectiveThemeService,
+            useClass: LabelDirectiveThemeService,
+        },
+        {
+            provide: HelperDirectiveThemeService,
+            useClass: HelperDirectiveThemeService,
+        },
+    ]);
+    const themeProviders = makeEnvironmentProviders([
+        {
+            provide: FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN,
+            useValue: accordionContentTheme,
+        },
+        {
+            provide: FLOWBITE_ACCORDION_PANEL_THEME_TOKEN,
+            useValue: accordionPanelTheme,
+        },
+        {
+            provide: FLOWBITE_ACCORDION_TITLE_THEME_TOKEN,
+            useValue: accordionTitleTheme,
+        },
+        { provide: FLOWBITE_ACCORDION_THEME_TOKEN, useValue: accordionTheme },
+        {
+            provide: FLOWBITE_ALERT_THEME_TOKEN,
+            useValue: alertTheme,
+        },
+        {
+            provide: FLOWBITE_BADGE_THEME_TOKEN,
+            useValue: badgeTheme,
+        },
+        {
+            provide: FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN,
+            useValue: breadcrumbItemTheme,
+        },
+        {
+            provide: FLOWBITE_BREADCRUMB_THEME_TOKEN,
+            useValue: breadcrumbTheme,
+        },
+        {
+            provide: FLOWBITE_BUTTON_THEME_TOKEN,
+            useValue: buttonTheme,
+        },
+        {
+            provide: FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN,
+            useValue: darkThemeToggleTheme,
+        },
+        {
+            provide: FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN,
+            useValue: dropdownDividerTheme,
+        },
+        {
+            provide: FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN,
+            useValue: dropdownHeaderTheme,
+        },
+        {
+            provide: FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN,
+            useValue: dropdownItemTheme,
+        },
+        {
+            provide: FLOWBITE_DROPDOWN_THEME_TOKEN,
+            useValue: dropdownTheme,
+        },
+        {
+            provide: FLOWBITE_FORM_FIELD_THEME_TOKEN,
+            useValue: formFieldTheme,
+        },
+        {
+            provide: FLOWBITE_INDICATOR_THEME_TOKEN,
+            useValue: indicatorTheme,
+        },
+        {
+            provide: FLOWBITE_MODAL_BODY_THEME_TOKEN,
+            useValue: modalBodyTheme,
+        },
+        {
+            provide: FLOWBITE_MODAL_FOOTER_THEME_TOKEN,
+            useValue: modalFooterTheme,
+        },
+        {
+            provide: FLOWBITE_MODAL_HEADER_THEME_TOKEN,
+            useValue: modalHeaderTheme,
+        },
+        {
+            provide: FLOWBITE_MODAL_THEME_TOKEN,
+            useValue: modalTheme,
+        },
+        {
+            provide: FLOWBITE_NAVBAR_BRAND_THEME_TOKEN,
+            useValue: navbarBrandTheme,
+        },
+        {
+            provide: FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN,
+            useValue: navbarContentTheme,
+        },
+        {
+            provide: FLOWBITE_NAVBAR_ITEM_THEME_TOKEN,
+            useValue: navbarItemTheme,
+        },
+        {
+            provide: FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN,
+            useValue: navbarToogleTheme,
+        },
+        {
+            provide: FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN,
+            useValue: navbarIconButtonTheme,
+        },
+        {
+            provide: FLOWBITE_NAVBAR_THEME_TOKEN,
+            useValue: navbarTheme,
+        },
+        {
+            provide: FLOWBITE_SCROLL_TOP_THEME_TOKEN,
+            useValue: scrollTopTheme,
+        },
+        {
+            provide: FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN,
+            useValue: sidebarItemGroupTheme,
+        },
+        {
+            provide: FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN,
+            useValue: sidebarItemTheme,
+        },
+        {
+            provide: FLOWBITE_SIDEBAR_MENU_THEME_TOKEN,
+            useValue: sidebarMenuTheme,
+        },
+        {
+            provide: FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN,
+            useValue: sidebarPageContentTheme,
+        },
+        {
+            provide: FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN,
+            useValue: sidebarToggleTheme,
+        },
+        {
+            provide: FLOWBITE_SIDEBAR_THEME_TOKEN,
+            useValue: sidebarTheme,
+        },
+        {
+            provide: FLOWBITE_DIRECTIVE_ADDON_THEME_TOKEN,
+            useValue: addonDirectiveTheme,
+        },
+        {
+            provide: FLOWBITE_DIRECTIVE_HELPER_THEME_TOKEN,
+            useValue: helperDirectiveTheme,
+        },
+        {
+            provide: FLOWBITE_DIRECTIVE_LABEL_THEME_TOKEN,
+            useValue: labelDirectiveTheme,
+        },
+        {
+            provide: FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN,
+            useValue: iconDirectiveTheme,
+        },
+        {
+            provide: FLOWBITE_DIRECTIVE_INPUT_THEME_TOKEN,
+            useValue: inputDirectiveTheme,
+        },
+    ]);
+    return makeEnvironmentProviders([serviceProviders, themeProviders]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent, AccordionContentComponent, AccordionContentThemeService, AccordionPanelComponent, AccordionPanelThemeService, AccordionThemeService, AccordionTitleComponent, AccordionTitleThemeService, AddonDirective, AddonDirectiveThemeService, AlertComponent, AlertThemeService, BadgeComponent, BadgeThemeService, BaseComponent, BaseInputDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbItemThemeService, BreadcrumbThemeService, ButtonComponent, ButtonThemeService, DarkThemeToggleComponent, DarkThemeToggleThemeService, DropdownComponent, DropdownDividerComponent, DropdownDividerThemeService, DropdownHeaderComponent, DropdownHeaderThemeService, DropdownItemComponent, DropdownItemThemeService, DropdownThemeService, FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN, FLOWBITE_ACCORDION_PANEL_THEME_TOKEN, FLOWBITE_ACCORDION_THEME_TOKEN, FLOWBITE_ACCORDION_TITLE_THEME_TOKEN, FLOWBITE_ALERT_THEME_TOKEN, FLOWBITE_BADGE_THEME_TOKEN, FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN, FLOWBITE_BREADCRUMB_THEME_TOKEN, FLOWBITE_BUTTON_THEME_TOKEN, FLOWBITE_DARK_THEME_TOGGLE_THEME_TOKEN, FLOWBITE_DIRECTIVE_ADDON_THEME_TOKEN, FLOWBITE_DIRECTIVE_HELPER_THEME_TOKEN, FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN, FLOWBITE_DIRECTIVE_INPUT_THEME_TOKEN, FLOWBITE_DIRECTIVE_LABEL_THEME_TOKEN, FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN, FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN, FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN, FLOWBITE_DROPDOWN_THEME_TOKEN, FLOWBITE_FORM_FIELD_THEME_TOKEN, FLOWBITE_INDICATOR_THEME_TOKEN, FLOWBITE_MODAL_BODY_THEME_TOKEN, FLOWBITE_MODAL_FOOTER_THEME_TOKEN, FLOWBITE_MODAL_HEADER_THEME_TOKEN, FLOWBITE_MODAL_THEME_TOKEN, FLOWBITE_NAVBAR_BRAND_THEME_TOKEN, FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN, FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN, FLOWBITE_NAVBAR_ITEM_THEME_TOKEN, FLOWBITE_NAVBAR_THEME_TOKEN, FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN, FLOWBITE_SCROLL_TOP_THEME_TOKEN, FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN, FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN, FLOWBITE_SIDEBAR_MENU_THEME_TOKEN, FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN, FLOWBITE_SIDEBAR_THEME_TOKEN, FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN, FlowbiteRouterLinkActiveDirective, FlowbiteRouterLinkDirective, FlowbiteThemeService, FormFieldClassInstance, FormFieldComponent, FormFieldThemeService, GlobalSignalStoreService, Guid, HelperDirective, HelperDirectiveThemeService, IconComponent, IconDirective, IconDirectiveThemeService, IconRegistry, IndicatorComponent, IndicatorThemeService, InputDirective, InputDirectiveThemeService, LabelDirective, LabelDirectiveThemeService, ModalBodyComponent, ModalBodyThemeService, ModalComponent, ModalFooterComponent, ModalFooterThemeService, ModalHeaderComponent, ModalHeaderThemeService, ModalThemeService, NavbarBrandComponent, NavbarBrandThemeService, NavbarComponent, NavbarContentComponent, NavbarContentThemeService, NavbarIconButtonComponent, NavbarIconButtonThemeService, NavbarItemComponent, NavbarItemThemeService, NavbarThemeService, NavbarToggleComponent, NavbarToggleThemeService, SanitizeHtmlPipe, ScrollTopComponent, ScrollTopThemeService, SidebarComponent, SidebarItemComponent, SidebarItemGroupComponent, SidebarItemGroupThemeService, SidebarItemThemeService, SidebarMenuComponent, SidebarMenuThemeService, SidebarPageContentComponent, SidebarPageContentThemeService, SidebarThemeService, SidebarToggleComponent, SidebarToggleThemeService, SignalStoreService, SvgIconConfig, accordionContentTheme, accordionPanelTheme, accordionTheme, accordionTitleTheme, addonDirectiveClassInstance, addonDirectiveTheme, alertTheme, badgeTheme, breadcrumbItemTheme, breadcrumbTheme, buttonTheme, cloneDeep, createClass, createTheme, darkThemeToggleTheme, dropdownDividerTheme, dropdownHeaderTheme, dropdownItemTheme, dropdownTheme, formFieldTheme, generateId, getSvgIconFailedToSanitizeRawError, getSvgIconFailedToSanitizeUrlError, getSvgIconFromNamedError, getSvgIconNoHttpClientProvidedError, helperDirectiveClassInstance, helperDirectiveTheme, iconDirectiveClassInstance, iconDirectiveTheme, indicatorTheme, initFlowbite, inputDirectiveClassInstance, inputDirectiveTheme, isObject, labelDirectiveClassInstance, labelDirectiveTheme, mergeTheme, modalBodyTheme, modalFooterTheme, modalHeaderTheme, modalTheme, navbarBrandTheme, navbarContentTheme, navbarIconButtonTheme, navbarItemTheme, navbarTheme, navbarToogleTheme, scrollTopTheme, sidebarItemGroupTheme, sidebarItemTheme, sidebarMenuTheme, sidebarPageContentTheme, sidebarTheme, sidebarToggleTheme, themeToString, trustedHTMLFromString };
+//# sourceMappingURL=flowbite-angular.mjs.map