flowbite-angular
Version:
<div align="center"> <h1>:construction: flowbite-angular (unreleased) :construction:</h1> <p> <a href="https://flowbite.com"> <img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github
583 lines (566 loc) • 25.2 kB
JavaScript
import { mergeTheme, CLOSE_SVG_ICON, createTheme } from 'flowbite-angular/utils';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChild, viewChild, TemplateRef, ViewContainerRef } from '@angular/core';
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';
/**
* `InjectionToken` used to import `ModalBodyTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_MODAL_BODY_THEME_TOKEN)
* ```
*/
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([
{
provide: FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/modal/
*/
class ModalBodyComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(ModalBodyThemeService);
/**
* The parent `ModalComponent`
*/
this.modalComponent = inject(ModalComponent);
//#region properties
/**
* Set the custom style for this modal body
*/
this.customStyle = model(inject(FLOWBITE_MODAL_BODY_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#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: 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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalBodyComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-modal-body',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `ModalFooterTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_MODAL_FOOTER_THEME_TOKEN)
* ```
*/
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([
{
provide: FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/modal/
*/
class ModalFooterComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(ModalFooterThemeService);
/**
* The parent `ModalComponent`
*/
this.modalComponent = inject(ModalComponent);
//#region properties
/**
* Set the custom style for this modal footer
*/
this.customStyle = model(inject(FLOWBITE_MODAL_FOOTER_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalFooterComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-modal-footer',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `ModalHeaderTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_MODAL_HEADER_THEME_TOKEN)
* ```
*/
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([
{
provide: FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/modal/
*/
class ModalHeaderComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
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
/**
* Set the custom style for this modal header
*/
this.customStyle = model(inject(FLOWBITE_MODAL_HEADER_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#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: "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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalHeaderComponent, decorators: [{
type: Component,
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>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `ModalTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_MODAL_THEME_TOKEN)
* ```
*/
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([
{
provide: FLOWBITE_MODAL_SIZE_DEFAULT_VALUE,
useValue: 'md',
},
{
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/
*/
class ModalComponent extends BaseComponent {
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));
/**
* Set if the modal is dismissable
*
* @default false
*/
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));
/**
* Set the custom style for this modal
*/
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();
}
}
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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
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>
`,
host: {
tabindex: '-1',
'(document:keydown)': 'onKeydownHandler($event)',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
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',
},
});
/**
* Default theme for `ModalComponent`
*/
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',
},
});
/**
* Default theme value for `ModalBodyComponent`
*/
const modalBodyTheme = createTheme({
root: {
base: 'block p-6 space-y-6',
},
});
/**
* 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',
},
});
/**
* 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 };
//# sourceMappingURL=flowbite-angular-modal.mjs.map