flowbite-angular 1.3.0 → 20.0.1

package/fesm2022/flowbite-angular-modal.mjs

@@ -1,582 +1,433 @@
-import { mergeTheme, CLOSE_SVG_ICON, createTheme } from 'flowbite-angular/utils';
+import { createTheme, mergeDeep } from 'flowbite-angular';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChild, viewChild, TemplateRef, ViewContainerRef } from '@angular/core';
+import { InjectionToken, inject, input, computed, Directive } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import * as i1 from 'ng-primitives/dialog';
+import { NgpDialog, NgpDialogOverlay, NgpDialogTitle, NgpDialogDescription } from 'ng-primitives/dialog';
 import { twMerge } from 'tailwind-merge';
-import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
-import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
-import { DomSanitizer } from '@angular/platform-browser';
-import { Router, NavigationStart } from '@angular/router';
-import { Subject, takeUntil, filter } from 'rxjs';
 
+const flowbiteModalTheme = createTheme({
+    host: {
+        base: 'h-max w-full rounded-lg bg-white shadow dark:bg-gray-700',
+        transition: '',
+        size: {
+            sm: 'max-w-md',
+            md: 'max-w-lg',
+            lg: 'max-w-4xl',
+            xl: 'max-w-7xl',
+        },
+    },
+});
+
+const defaultFlowbiteModalConfig = {
+    baseTheme: flowbiteModalTheme,
+    size: 'md',
+    customTheme: {},
+};
+const FlowbiteModalConfigToken = new InjectionToken('FlowbiteModalConfigToken');
 /**
- * `InjectionToken` used to import `ModalBodyTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_MODAL_BODY_THEME_TOKEN)
- * ```
+ * Provide the default Modal configuration
+ * @param config The Modal configuration
+ * @returns The provider
  */
-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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalBodyThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalBodyThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalBodyThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE');
-const modalBodyDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteModalConfig = (config) => [
     {
-        provide: FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteModalConfigToken,
+        useValue: { ...defaultFlowbiteModalConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/modal/
+ * Inject the Modal configuration
+ * @see {@link defaultFlowbiteModalConfig}
+ * @returns The configuration
  */
-class ModalBodyComponent extends BaseComponent {
+const injectFlowbiteModalConfig = () => inject(FlowbiteModalConfigToken, { optional: true }) ?? defaultFlowbiteModalConfig;
+
+const FlowbiteModalStateToken = createStateToken('Flowbite Modal');
+const provideFlowbiteModalState = createStateProvider(FlowbiteModalStateToken);
+const injectFlowbiteModalState = createStateInjector(FlowbiteModalStateToken);
+const flowbiteModalState = createState(FlowbiteModalStateToken);
+
+class Modal {
     constructor() {
-        super(...arguments);
+        this.config = injectFlowbiteModalConfig();
         /**
-         * Service injected used to generate class
+         * @see {@link injectFlowbiteModalConfig}
          */
-        this.themeService = inject(ModalBodyThemeService);
+        this.size = input(this.config.size);
         /**
-         * The parent `ModalComponent`
+         * @see {@link injectFlowbiteModalConfig}
          */
-        this.modalComponent = inject(ModalComponent);
-        //#region properties
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, mergedTheme.host.size[this.state.size()]),
+                },
+            };
+        });
         /**
-         * Set the custom style for this modal body
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            customStyle: this.customStyle(),
-        });
+        this.state = flowbiteModalState(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Modal, isStandalone: true, selector: "\n    div[flowbiteModal],\n    section[flowbiteModal]\n  ", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteModalState()], exportAs: ["flowbiteModal"], hostDirectives: [{ directive: i1.NgpDialog, inputs: ["id", "id", "ngpDialogRole", "role", "ngpDialogModal", "modal"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalBodyComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Modal, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-modal-body',
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: `
+    div[flowbiteModal],
+    section[flowbiteModal]
+  `,
+                    exportAs: 'flowbiteModal',
+                    hostDirectives: [
+                        {
+                            directive: NgpDialog,
+                            inputs: ['id:id', 'ngpDialogRole:role', 'ngpDialogModal:modal'],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteModalState()],
+                    host: { '[class]': `theme().host.root` },
                 }]
         }] });
 
+const flowbiteModalOverlayTheme = createTheme({
+    host: {
+        base: 'fixed inset-0 flex bg-gray-900/50 p-4 dark:bg-gray-900/80',
+        transition: '',
+        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',
+        },
+    },
+});
+
+const defaultFlowbiteModalOverlayConfig = {
+    baseTheme: flowbiteModalOverlayTheme,
+    position: 'center',
+    customTheme: {},
+};
+const FlowbiteModalOverlayConfigToken = new InjectionToken('FlowbiteModalOverlayConfigToken');
 /**
- * `InjectionToken` used to import `ModalFooterTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_MODAL_FOOTER_THEME_TOKEN)
- * ```
+ * Provide the default ModalOverlay configuration
+ * @param config The ModalOverlay configuration
+ * @returns The provider
  */
-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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalFooterThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalFooterThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalFooterThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE');
-const modalFooterDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteModalOverlayConfig = (config) => [
     {
-        provide: FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteModalOverlayConfigToken,
+        useValue: { ...defaultFlowbiteModalOverlayConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/modal/
+ * Inject the ModalOverlay configuration
+ * @see {@link defaultFlowbiteModalOverlayConfig}
+ * @returns The configuration
  */
-class ModalFooterComponent extends BaseComponent {
+const injectFlowbiteModalOverlayConfig = () => inject(FlowbiteModalOverlayConfigToken, { optional: true }) ?? defaultFlowbiteModalOverlayConfig;
+
+const FlowbiteModalOverlayStateToken = createStateToken('Flowbite ModalOverlay');
+const provideFlowbiteModalOverlayState = createStateProvider(FlowbiteModalOverlayStateToken);
+const injectFlowbiteModalOverlayState = createStateInjector(FlowbiteModalOverlayStateToken);
+const flowbiteModalOverlayState = createState(FlowbiteModalOverlayStateToken);
+
+class ModalOverlay {
     constructor() {
-        super(...arguments);
+        this.config = injectFlowbiteModalOverlayConfig();
         /**
-         * Service injected used to generate class
+         * @see {@link injectFlowbiteModalOverlayConfig}
          */
-        this.themeService = inject(ModalFooterThemeService);
+        this.position = input(this.config.position);
         /**
-         * The parent `ModalComponent`
+         * @see {@link injectFlowbiteModalOverlayConfig}
          */
-        this.modalComponent = inject(ModalComponent);
-        //#region properties
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, mergedTheme.host.position[this.state.position()]),
+                },
+            };
+        });
         /**
-         * Set the custom style for this modal footer
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE));
+        this.state = flowbiteModalOverlayState(this);
     }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            customStyle: this.customStyle(),
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ModalOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: ModalOverlay, isStandalone: true, selector: "\n    div[flowbiteModalOverlay]\n  ", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteModalOverlayState()], exportAs: ["flowbiteModalOverlay"], hostDirectives: [{ directive: i1.NgpDialogOverlay, inputs: ["ngpDialogOverlayCloseOnClick", "closeOnClick"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalFooterComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ModalOverlay, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    selector: 'flowbite-modal-footer',
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: `
+    div[flowbiteModalOverlay]
+  `,
+                    exportAs: 'flowbiteModalOverlay',
+                    hostDirectives: [
+                        {
+                            directive: NgpDialogOverlay,
+                            inputs: ['ngpDialogOverlayCloseOnClick:closeOnClick'],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteModalOverlayState()],
+                    host: { '[class]': `theme().host.root` },
                 }]
         }] });
 
+const flowbiteModalHeaderTheme = createTheme({
+    host: {
+        base: 'items-center justify-between rounded-t border-b border-gray-200 p-5 text-xl font-medium text-gray-900 dark:border-gray-600 dark:text-white',
+        transition: '',
+    },
+});
+
+const defaultFlowbiteModalHeaderConfig = {
+    baseTheme: flowbiteModalHeaderTheme,
+    customTheme: {},
+};
+const FlowbiteModalHeaderConfigToken = new InjectionToken('FlowbiteModalHeaderConfigToken');
 /**
- * `InjectionToken` used to import `ModalHeaderTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_MODAL_HEADER_THEME_TOKEN)
- * ```
+ * Provide the default ModalHeader configuration
+ * @param config The ModalHeader configuration
+ * @returns The provider
  */
-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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalHeaderThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalHeaderThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalHeaderThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE');
-const modalHeaderDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteModalHeaderConfig = (config) => [
     {
-        provide: FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
+        provide: FlowbiteModalHeaderConfigToken,
+        useValue: { ...defaultFlowbiteModalHeaderConfig, ...config },
     },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/modal/
+ * Inject the ModalHeader configuration
+ * @see {@link defaultFlowbiteModalHeaderConfig}
+ * @returns The configuration
  */
-class ModalHeaderComponent extends BaseComponent {
+const injectFlowbiteModalHeaderConfig = () => inject(FlowbiteModalHeaderConfigToken, { optional: true }) ?? defaultFlowbiteModalHeaderConfig;
+
+const FlowbiteModalHeaderStateToken = createStateToken('Flowbite ModalHeader');
+const provideFlowbiteModalHeaderState = createStateProvider(FlowbiteModalHeaderStateToken);
+const injectFlowbiteModalHeaderState = createStateInjector(FlowbiteModalHeaderStateToken);
+const flowbiteModalHeaderState = createState(FlowbiteModalHeaderStateToken);
+
+class ModalHeader {
     constructor() {
-        super(...arguments);
+        this.config = injectFlowbiteModalHeaderConfig();
         /**
-         * Service injected used to generate class
+         * @see {@link injectFlowbiteModalHeaderConfig}
          */
-        this.stateService = inject(ModalHeaderThemeService);
-        /**
-         * The parent `ModalComponent`
-         */
-        this.modalComponent = inject(ModalComponent);
-        /**
-         * `IconRegistry` service
-         */
-        this.iconRegistry = inject(IconRegistry);
-        /**
-         * `DomSanitizer` service
-         */
-        this.domSanitizer = inject(DomSanitizer);
-        //#region properties
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition),
+                },
+            };
+        });
         /**
-         * Set the custom style for this modal header
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.stateService.getClasses({
-            customStyle: this.customStyle(),
-        });
+        this.state = flowbiteModalHeaderState(this);
     }
-    init() {
-        this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'close', this.domSanitizer.bypassSecurityTrustHtml(CLOSE_SVG_ICON));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", 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 [class]="contentClasses().modalHeaderTitleClass">
-      <ng-content />
-    </h3>
-    <button
-      type="button"
-      [class]="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: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ModalHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: ModalHeader, isStandalone: true, selector: "\n    h1[flowbiteModalHeader],\n    h2[flowbiteModalHeader],\n    h3[flowbiteModalHeader],\n    h4[flowbiteModalHeader],\n    h5[flowbiteModalHeader],\n    h6[flowbiteModalHeader]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteModalHeaderState()], exportAs: ["flowbiteModalHeader"], hostDirectives: [{ directive: i1.NgpDialogTitle, inputs: ["id", "id"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalHeaderComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ModalHeader, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    imports: [IconComponent],
-                    selector: 'flowbite-modal-header',
-                    template: `
-    <h3 [class]="contentClasses().modalHeaderTitleClass">
-      <ng-content />
-    </h3>
-    <button
-      type="button"
-      [class]="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>
+                    selector: `
+    h1[flowbiteModalHeader],
+    h2[flowbiteModalHeader],
+    h3[flowbiteModalHeader],
+    h4[flowbiteModalHeader],
+    h5[flowbiteModalHeader],
+    h6[flowbiteModalHeader]
   `,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'flowbiteModalHeader',
+                    hostDirectives: [
+                        {
+                            directive: NgpDialogTitle,
+                            inputs: ['id:id'],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteModalHeaderState()],
+                    host: { '[class]': `theme().host.root` },
                 }]
         }] });
 
+const flowbiteModalContentTheme = createTheme({
+    host: {
+        base: 'block space-y-6 p-6',
+        transition: '',
+    },
+});
+
+const defaultFlowbiteModalContentConfig = {
+    baseTheme: flowbiteModalContentTheme,
+    customTheme: {},
+};
+const FlowbiteModalContentConfigToken = new InjectionToken('FlowbiteModalContentConfigToken');
 /**
- * `InjectionToken` used to import `ModalTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_MODAL_THEME_TOKEN)
- * ```
+ * Provide the default ModalContent configuration
+ * @param config The ModalContent configuration
+ * @returns The provider
  */
-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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_MODAL_SIZE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_MODAL_SIZE_DEFAULT_VALUE');
-const FLOWBITE_MODAL_POSITION_DEFAULT_VALUE = new InjectionToken('FLOWBITE_MODAL_POSITION_DEFAULT_VALUE');
-const FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE');
-const FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE');
-const FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE');
-const modalDefaultValueProvider = makeEnvironmentProviders([
+const provideFlowbiteModalContentConfig = (config) => [
     {
-        provide: FLOWBITE_MODAL_SIZE_DEFAULT_VALUE,
-        useValue: 'md',
+        provide: FlowbiteModalContentConfigToken,
+        useValue: { ...defaultFlowbiteModalContentConfig, ...config },
     },
-    {
-        provide: FLOWBITE_MODAL_POSITION_DEFAULT_VALUE,
-        useValue: 'center',
-    },
-    {
-        provide: FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
-    },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/modal/
+ * Inject the ModalContent configuration
+ * @see {@link defaultFlowbiteModalContentConfig}
+ * @returns The configuration
  */
-class ModalComponent extends BaseComponent {
+const injectFlowbiteModalContentConfig = () => inject(FlowbiteModalContentConfigToken, { optional: true }) ?? defaultFlowbiteModalContentConfig;
+
+const FlowbiteModalContentStateToken = createStateToken('Flowbite ModalContent');
+const provideFlowbiteModalContentState = createStateProvider(FlowbiteModalContentStateToken);
+const injectFlowbiteModalContentState = createStateInjector(FlowbiteModalContentStateToken);
+const flowbiteModalContentState = createState(FlowbiteModalContentStateToken);
+
+class ModalContent {
     constructor() {
-        super(...arguments);
-        this.destroyed = new Subject();
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(ModalThemeService);
-        /**
-         * The child `ModalHeaderComponent`
-         */
-        this.modalHeaderChild = contentChild(ModalHeaderComponent);
-        /**
-         * The child `ModalBodyComponent`
-         */
-        this.modalBodyChild = contentChild.required(ModalBodyComponent);
-        /**
-         * The child `ModalFooterComponent`
-         */
-        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
-        /**
-         * Set the modal size
-         *
-         * @default md
-         */
-        this.size = model(inject(FLOWBITE_MODAL_SIZE_DEFAULT_VALUE));
-        /**
-         * Set the modal position
-         *
-         * @default center
-         */
-        this.position = model(inject(FLOWBITE_MODAL_POSITION_DEFAULT_VALUE));
+        this.config = injectFlowbiteModalContentConfig();
         /**
-         * Set if the modal is dismissable
-         *
-         * @default false
+         * @see {@link injectFlowbiteModalContentConfig}
          */
-        this.isDismissable = model(inject(FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE));
-        /**
-         * Set if the modal is open
-         *
-         * @default false
-         */
-        this.isOpen = model(inject(FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE));
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition),
+                },
+            };
+        });
         /**
-         * Set the custom style for this modal
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#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());
-    }
-    //#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();
-        }
+        this.state = flowbiteModalContentState(this);
     }
-    createTemplate() {
-        if (this.embeddedView) {
-            this.destroyTemplate();
-        }
-        this.embeddedView = this.viewContainer.createEmbeddedView(this.template());
-    }
-    destroyTemplate() {
-        this.embeddedView?.destroy();
-    }
-    onKeydownHandler(event) {
-        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: "19.0.4", ngImport: i0, type: ModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", 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
-        [class]="contentClasses().modalWrapperClass"
-        (click)="onBackdropClick($event)">
-        <div [class]="contentClasses().modalContainerClass">
-          <div [class]="contentClasses().modalContentClass">
-            <ng-content />
-          </div>
-        </div>
-      </div>
-    </ng-template>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ModalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: ModalContent, isStandalone: true, selector: "\n    [flowbiteModalContent]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteModalContentState()], exportAs: ["flowbiteModalContent"], hostDirectives: [{ directive: i1.NgpDialogDescription, inputs: ["id", "id"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ModalContent, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    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
-        [class]="contentClasses().modalWrapperClass"
-        (click)="onBackdropClick($event)">
-        <div [class]="contentClasses().modalContainerClass">
-          <div [class]="contentClasses().modalContentClass">
-            <ng-content />
-          </div>
-        </div>
-      </div>
-    </ng-template>
+                    selector: `
+    [flowbiteModalContent]
   `,
-                    host: {
-                        tabindex: '-1',
-                        '(document:keydown)': 'onKeydownHandler($event)',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'flowbiteModalContent',
+                    hostDirectives: [
+                        {
+                            directive: NgpDialogDescription,
+                            inputs: ['id:id'],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteModalContentState()],
+                    host: { '[class]': `theme().host.root` },
                 }]
         }] });
 
-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 flowbiteModalFooterTheme = createTheme({
+    host: {
+        base: 'flex items-center space-x-2 rounded-b border-t border-gray-200 p-6 dark:border-gray-600',
+        transition: '',
     },
 });
 
+const defaultFlowbiteModalFooterConfig = {
+    baseTheme: flowbiteModalFooterTheme,
+    customTheme: {},
+};
+const FlowbiteModalFooterConfigToken = new InjectionToken('FlowbiteModalFooterConfigToken');
 /**
- * Default theme for `ModalComponent`
+ * Provide the default ModalFooter configuration
+ * @param config The ModalFooter configuration
+ * @returns The provider
  */
-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 provideFlowbiteModalFooterConfig = (config) => [
+    {
+        provide: FlowbiteModalFooterConfigToken,
+        useValue: { ...defaultFlowbiteModalFooterConfig, ...config },
     },
-});
-
+];
 /**
- * Default theme value for `ModalBodyComponent`
+ * Inject the ModalFooter configuration
+ * @see {@link defaultFlowbiteModalFooterConfig}
+ * @returns The configuration
  */
-const modalBodyTheme = createTheme({
-    root: {
-        base: 'block p-6 space-y-6',
-    },
-});
+const injectFlowbiteModalFooterConfig = () => inject(FlowbiteModalFooterConfigToken, { optional: true }) ?? defaultFlowbiteModalFooterConfig;
 
-/**
- * Default theme for `ModalFooterComponent`
- */
-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 FlowbiteModalFooterStateToken = createStateToken('Flowbite ModalFooter');
+const provideFlowbiteModalFooterState = createStateProvider(FlowbiteModalFooterStateToken);
+const injectFlowbiteModalFooterState = createStateInjector(FlowbiteModalFooterStateToken);
+const flowbiteModalFooterState = createState(FlowbiteModalFooterStateToken);
+
+class ModalFooter {
+    constructor() {
+        this.config = injectFlowbiteModalFooterConfig();
+        /**
+         * @see {@link injectFlowbiteModalFooterConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition),
+                },
+            };
+        });
+        /**
+         * @internal
+         */
+        this.state = flowbiteModalFooterState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: ModalFooter, isStandalone: true, selector: "\n    div[flowbiteModalFooter]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteModalFooterState()], exportAs: ["flowbiteModalFooter"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ModalFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    div[flowbiteModalFooter]
+  `,
+                    exportAs: 'flowbiteModalFooter',
+                    hostDirectives: [],
+                    providers: [provideFlowbiteModalFooterState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+/* Modal */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_MODAL_BODY_THEME_TOKEN, FLOWBITE_MODAL_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_MODAL_FOOTER_THEME_TOKEN, FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_MODAL_HEADER_THEME_TOKEN, FLOWBITE_MODAL_IS_DISMISSABLE_DEFAULT_VALUE, FLOWBITE_MODAL_IS_OPEN_DEFAULT_VALUE, FLOWBITE_MODAL_POSITION_DEFAULT_VALUE, FLOWBITE_MODAL_SIZE_DEFAULT_VALUE, FLOWBITE_MODAL_THEME_TOKEN, ModalBodyComponent, ModalBodyThemeService, ModalComponent, ModalFooterComponent, ModalFooterThemeService, ModalHeaderComponent, ModalHeaderThemeService, ModalThemeService, modalBodyDefaultValueProvider, modalBodyTheme, modalDefaultValueProvider, modalFooterDefaultValueProvider, modalFooterTheme, modalHeaderDefaultValueProvider, modalHeaderTheme, modalTheme };
+export { FlowbiteModalConfigToken, FlowbiteModalContentConfigToken, FlowbiteModalContentStateToken, FlowbiteModalFooterConfigToken, FlowbiteModalFooterStateToken, FlowbiteModalHeaderConfigToken, FlowbiteModalHeaderStateToken, FlowbiteModalOverlayConfigToken, FlowbiteModalOverlayStateToken, FlowbiteModalStateToken, Modal, ModalContent, ModalFooter, ModalHeader, ModalOverlay, defaultFlowbiteModalConfig, defaultFlowbiteModalContentConfig, defaultFlowbiteModalFooterConfig, defaultFlowbiteModalHeaderConfig, defaultFlowbiteModalOverlayConfig, flowbiteModalContentState, flowbiteModalContentTheme, flowbiteModalFooterState, flowbiteModalFooterTheme, flowbiteModalHeaderState, flowbiteModalHeaderTheme, flowbiteModalOverlayState, flowbiteModalOverlayTheme, flowbiteModalState, flowbiteModalTheme, injectFlowbiteModalConfig, injectFlowbiteModalContentConfig, injectFlowbiteModalContentState, injectFlowbiteModalFooterConfig, injectFlowbiteModalFooterState, injectFlowbiteModalHeaderConfig, injectFlowbiteModalHeaderState, injectFlowbiteModalOverlayConfig, injectFlowbiteModalOverlayState, injectFlowbiteModalState, provideFlowbiteModalConfig, provideFlowbiteModalContentConfig, provideFlowbiteModalContentState, provideFlowbiteModalFooterConfig, provideFlowbiteModalFooterState, provideFlowbiteModalHeaderConfig, provideFlowbiteModalHeaderState, provideFlowbiteModalOverlayConfig, provideFlowbiteModalOverlayState, provideFlowbiteModalState };
 //# sourceMappingURL=flowbite-angular-modal.mjs.map