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
567 lines (552 loc) • 27.4 kB
JavaScript
import { mergeTheme, CHEVRON_DOWN_SVG_ICON, createTheme } from 'flowbite-angular/utils';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChild, untracked, contentChildren } from '@angular/core';
import { twMerge } from 'tailwind-merge';
import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
import { NgTemplateOutlet } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
/**
* `InjectionToken` used to import `AccordionContentTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN)
* ```
*/
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.isFlush[properties.isFlush]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionContentThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionContentThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionContentThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
const accordionContentDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/accordion/
*/
class AccordionContentComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(AccordionContentThemeService);
/**
* The parent `AccordionPanelComponent`
*/
this.accordionPanelComponent = inject(AccordionPanelComponent);
//#region properties
/**
* Set the accordion content color
*
@default `AccordionPanelComponent`'s color
*/
this.color = model(this.accordionPanelComponent.color());
/**
* Set the custom style for this accordion content
*/
this.customStyle = model(inject(FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
color: this.accordionPanelComponent.accordionComponent.color(),
isFlush: booleanToFlowbiteBoolean(this.accordionPanelComponent.accordionComponent.isFlush()),
customStyle: this.customStyle(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", 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" }, host: { properties: { "@isOpenAnimation": "accordionPanelComponent.isOpen()" } }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, animations: [
trigger('isOpenAnimation', [
state('true', style({ height: '*' })),
state('false', style({ height: '0px' })),
transition('true <=> false', animate('300ms')),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionContentComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-accordion-content',
template: `<ng-content />`,
host: {
'[@isOpenAnimation]': 'accordionPanelComponent.isOpen()',
},
animations: [
trigger('isOpenAnimation', [
state('true', style({ height: '*' })),
state('false', style({ height: '0px' })),
transition('true <=> false', animate('300ms')),
]),
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `AccordionPanelTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_ACCORDION_PANEL_THEME_TOKEN)
* ```
*/
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;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionPanelThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionPanelThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionPanelThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* `InjectionToken` used to import `AccordionTitleTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_ACCORDION_TITLE_THEME_TOKEN)
* ```
*/
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;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionTitleThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionTitleThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionTitleThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE');
const FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE');
const accordionTitleDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE,
useValue: undefined,
},
{
provide: FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/accordion/
*/
class AccordionTitleComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(AccordionTitleThemeService);
/**
* The parent `AccordionPanelComponent`
*/
this.accordionPanelComponent = inject(AccordionPanelComponent);
/**
* `IconRegistry` service
*/
this.iconRegistry = inject(IconRegistry);
/**
* `DomSanitizer` service
*/
this.domSanitizer = inject(DomSanitizer);
//#region properties
/**
* Set the accordion title color
*
* @default `AccordionPanelComponents`'s color
*/
this.color = model(this.accordionPanelComponent.color());
/**
* Set the accordion title icon
*
* @default undefined
*/
this.icon = model(inject(FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE));
/**
* Set the custom style for this accordion title
*/
this.customStyle = model(inject(FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#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
/**
* Toggle the parent `AccordionPanelComponent`'s isOpen
*/
onClick() {
this.accordionPanelComponent.toggleVisibility();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: AccordionTitleComponent, isStandalone: true, selector: "flowbite-accordion-title", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", icon: "iconChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
<h2 [class]="contentClasses().textClass">
<ng-content />
</h2>
(icon()) {
<ng-container [ngTemplateOutlet]="icon()!" />
} {
<flowbite-icon
svgIcon="flowbite-angular:chevron-down"
class="h-6 w-6 shrink-0 duration-300"
[class.rotate-180]="accordionPanelComponent.isOpen()" />
}
`, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionTitleComponent, decorators: [{
type: Component,
args: [{
standalone: true,
imports: [IconComponent, NgTemplateOutlet],
selector: 'flowbite-accordion-title',
template: `
<h2 [class]="contentClasses().textClass">
<ng-content />
</h2>
(icon()) {
<ng-container [ngTemplateOutlet]="icon()!" />
} {
<flowbite-icon
svgIcon="flowbite-angular:chevron-down"
class="h-6 w-6 shrink-0 duration-300"
[class.rotate-180]="accordionPanelComponent.isOpen()" />
}
`,
host: {
'(click)': 'onClick()',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
const FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ACCORDION_IS_OPEN_DEFAULT_VALUE');
const FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE');
const accordionPanelDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/accordion/
*/
class AccordionPanelComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(AccordionPanelThemeService);
/**
* The parent `AccordionComponent`
*/
this.accordionComponent = inject(AccordionComponent);
/**
* The child `AccordionTitleComponent`
*/
this.accordionTitleChild = contentChild.required(AccordionTitleComponent);
/**
* The child `AccordionContentComponent`
*/
this.accordionContentChild = contentChild.required(AccordionContentComponent);
//#region properties
/**
* Set the accordion panel color
*
* @default `AccordionComponent`'s color
*/
this.color = model(this.accordionComponent.color());
/**
* Set if the accordion panel is open or not
*
* @default false
*/
this.isOpen = model(inject(FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE));
/**
* Set the custom style for this accordion panel
*/
this.customStyle = model(inject(FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
customStyle: this.customStyle(),
});
}
//#endregion
/**
* Toggle isOpen for itself and close every other `AccordionPanelComponent` if the parent `AccordionComponent`'s isAlwaysOpen is false
*
* @param isOpen Instead of toggle, it can set the value provided
*/
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: "19.0.4", ngImport: i0, type: AccordionPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionPanelComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-accordion-panel',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `AccordionTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_ACCORDION_THEME_TOKEN)
* ```
*/
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),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ACCORDION_IS_ALWAYS_OPEN');
const FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE');
const FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE');
const FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE');
const accordionDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE,
useValue: 'primary',
},
{
provide: FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/accordion/
*/
class AccordionComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generated class
*/
this.themeService = inject(AccordionThemeService);
/**
* List of `AccordionPanelComponent`
*/
this.accordionPanelChildren = contentChildren(AccordionPanelComponent);
//#region properties
/**
* Does the opened `AccordionPanelComponent` stay open if another one is opening
*
* @default false
*/
this.isAlwaysOpen = model(inject(FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE));
/**
* Set the accordion color and every child default color
*
* @default primary
*/
this.color = model(inject(FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE));
/**
* Set the accordion as flush or not
*
* @default false
*/
this.isFlush = model(inject(FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE));
/**
* Set the custom style for this accordion
*/
this.customStyle = model(inject(FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
customStyle: this.customStyle(),
});
}
//#endregion
/**
* Close every `AccordionPanelComponent`
*/
closeAll() {
this.accordionPanelChildren().forEach((child) => child.toggleVisibility(false));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-accordion',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* Default theme for `AccordionComponent`
*/
const accordionTheme = createTheme({
root: {
base: '',
},
});
/**
* Default theme for `AccordionContentComponent`
*/
const accordionContentTheme = createTheme({
root: {
base: 'flex flex-col overflow-hidden',
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',
},
isFlush: {
enabled: '',
disabled: 'border-x border-t group-last:border-b',
},
},
});
/**
* Default theme for `AccordionPanelComponent`
*/
const accordionPanelTheme = createTheme({
root: {
base: 'group',
},
});
/**
* Default theme for `AccordionTitleComponent`
*/
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: 'border border-b-0',
},
isOpen: {
enabled: '',
disabled: 'bg-transparent dark:bg-transparent',
},
},
text: {
base: 'font-semibold text-base',
},
});
/**
* Generated bundle index. Do not edit.
*/
export { AccordionComponent, AccordionContentComponent, AccordionContentThemeService, AccordionPanelComponent, AccordionPanelThemeService, AccordionThemeService, AccordionTitleComponent, AccordionTitleThemeService, FLOWBITE_ACCORDION_COLOR_DEFAULT_VALUE, FLOWBITE_ACCORDION_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_ACCORDION_CONTENT_THEME_TOKEN, FLOWBITE_ACCORDION_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_ACCORDION_IS_ALWAYS_OPEN_DEFAULT_VALUE, FLOWBITE_ACCORDION_IS_FLUSH_DEFAULT_VALUE, FLOWBITE_ACCORDION_PANEL_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_ACCORDION_PANEL_IS_OPEN_DEFAULT_VALUE, FLOWBITE_ACCORDION_PANEL_THEME_TOKEN, FLOWBITE_ACCORDION_THEME_TOKEN, FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_ACCORDION_TITLE_THEME_TOKEN, accordionContentDefaultValueProvider, accordionContentTheme, accordionDefaultValueProvider, accordionPanelDefaultValueProvider, accordionPanelTheme, accordionTheme, accordionTitleDefaultValueProvider, accordionTitleTheme };
//# sourceMappingURL=flowbite-angular-accordion.mjs.map