flowbite-angular 1.0.0-alpha.2 → 1.0.0-alpha.4

package/fesm2022/flowbite-angular.mjs

@@ -1,13 +1,6 @@
 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';
+import { Injectable, inject, Injector, signal, computed, afterNextRender, Directive } from '@angular/core';
+import { Guid, generateId } from 'flowbite-angular/utils';
 
 /**
  * This function cast a boolean to the internal flowbute-angular boolean type.
@@ -20,85 +13,18 @@ function booleanToFlowbiteBoolean(value) {
 }
 
 /**
- * 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`
+ * Provide an abstract class used in themeing system of flowbite-angular.
  */
-function generateId() {
-    return Guid.newGuid();
+class FlowbiteThemeService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FlowbiteThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FlowbiteThemeService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FlowbiteThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 class BaseComponent {
     constructor() {
@@ -131,4098 +57,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                 }]
         }] });
 
-/**
- * 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.0.0", ngImport: i0, type: AccordionContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: IconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: IconRegistry, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", 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.0.0", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: AccordionTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: AccordionPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: AlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: FlowbiteRouterLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: BadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: BreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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.0.0", 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',
-        },
-    },
-});
-
-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.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(() => {
-            this.toggleTheme(this.getTheme());
-        }, { 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() {
-        this.toggleTheme();
-    }
-    getTheme() {
-        return localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';
-    }
-    toggleTheme(theme) {
-        if (!theme) {
-            const tmpTheme = this.getTheme();
-            if (tmpTheme === 'dark')
-                theme = 'light';
-            else
-                theme = 'dark';
-        }
-        this.setTheme(theme);
-    }
-    setTheme(theme) {
-        localStorage.setItem('color-theme', theme);
-        theme === 'dark'
-            ? document.documentElement.classList.add('dark')
-            : document.documentElement.classList.remove('dark');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DarkThemeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: DropdownDividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: DropdownHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: DropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: FormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: BaseInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: BaseInputDirective, isStandalone: true, host: { properties: { "class": "contentClasses()?.rootClass" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", 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.0.0", ngImport: i0, type: AddonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: HelperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: IconDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: InputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: LabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: IndicatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: ModalBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: ModalFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: ModalHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: ModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: NavbarBrandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: NavbarContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: NavbarToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: NavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: FlowbiteRouterLinkActiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: NavbarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: NavbarIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: ScrollTopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: SanitizeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: SanitizeHtmlPipe, isStandalone: true, name: "sanitizeHtml" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", 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.0.0", ngImport: i0, type: SidebarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: SidebarItemGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: SidebarMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: SidebarPageContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", 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.0.0", 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.0.0", ngImport: i0, type: SidebarToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", 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.0.0", 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]);
-}
-
-/**
- * Provide an abstract class used in themeing system of flowbite-angular.
- */
-class FlowbiteThemeService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FlowbiteThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FlowbiteThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: FlowbiteThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 /**
  * 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, 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, 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 };
+export { BaseComponent, FlowbiteThemeService, booleanToFlowbiteBoolean };
 //# sourceMappingURL=flowbite-angular.mjs.map