flowbite-angular
Version:
<div align="center"> <h1>flowbite-angular</h1> <p> Build websites even faster with components on top of Angular and Tailwind CSS </p> <p> <a href="https://discord.com/invite/4eeurUVvTy"> <img src="https://img.shields.io/discord/90291
342 lines (326 loc) • 15.4 kB
JavaScript
import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
import * as i0 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/menu';
import { NgpMenu, NgpMenuItem } from 'ng-primitives/menu';
import { twMerge } from 'tailwind-merge';
import * as i2 from 'ng-primitives/interactions';
import { NgpFocus } from 'ng-primitives/interactions';
const flowbiteDropdownTheme = createTheme({
host: {
base: 'fixed z-10 w-max divide-y rounded-lg border shadow-sm',
transition: '',
color: {
default: {
light: 'divide-gray-200 border-gray-200 bg-white',
dark: 'dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800',
},
info: {
light: 'divide-blue-200 border-blue-200 bg-white',
dark: 'dark:divide-blue-700 dark:border-blue-700 dark:bg-gray-800',
},
failure: {
light: 'divide-red-200 border-red-200 bg-white',
dark: 'dark:divide-red-700 dark:border-red-700 dark:bg-gray-800',
},
success: {
light: 'divide-green-200 border-green-200 bg-white',
dark: 'dark:divide-green-700 dark:border-green-700 dark:bg-gray-800',
},
warning: {
light: 'divide-yellow-200 border-yellow-200 bg-white',
dark: 'dark:divide-yellow-700 dark:border-yellow-700 dark:bg-gray-800',
},
primary: {
light: 'divide-primary-200 border-primary-200 bg-white',
dark: 'dark:divide-primary-700 dark:border-primary-700 dark:bg-gray-800',
},
},
},
});
const defaultFlowbiteDropdownConfig = {
baseTheme: flowbiteDropdownTheme,
color: 'default',
customTheme: {},
};
const FlowbiteDropdownConfigToken = new InjectionToken('FlowbiteDropdownConfigToken');
/**
* Provide the default Dropdown configuration
* @param config The Dropdown configuration
* @returns The provider
*/
const provideFlowbiteDropdownConfig = (config) => [
{
provide: FlowbiteDropdownConfigToken,
useValue: { ...defaultFlowbiteDropdownConfig, ...config },
},
];
/**
* Inject the Dropdown configuration
* @see {@link defaultFlowbiteDropdownConfig}
* @returns The configuration
*/
const injectFlowbiteDropdownConfig = () => inject(FlowbiteDropdownConfigToken, { optional: true }) ?? defaultFlowbiteDropdownConfig;
const FlowbiteDropdownStateToken = createStateToken('Flowbite Dropdown');
const provideFlowbiteDropdownState = createStateProvider(FlowbiteDropdownStateToken);
const injectFlowbiteDropdownState = createStateInjector(FlowbiteDropdownStateToken);
const flowbiteDropdownState = createState(FlowbiteDropdownStateToken);
class Dropdown {
constructor() {
this.config = injectFlowbiteDropdownConfig();
/**
* @see {@link injectFlowbiteDropdownConfig}
*/
this.color = input(this.config.color);
/**
* @see {@link injectFlowbiteDropdownConfig}
*/
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, colorToTheme(mergedTheme.host.color, this.state.color())),
},
};
});
/**
* @internal
*/
this.state = flowbiteDropdownState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Dropdown, isStandalone: true, selector: "\n div[flowbiteDropdown]\n ", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteDropdownState()], exportAs: ["flowbiteDropdown"], hostDirectives: [{ directive: i1.NgpMenu }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dropdown, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
div[flowbiteDropdown]
`,
exportAs: 'flowbiteDropdown',
hostDirectives: [
{
directive: NgpMenu,
inputs: [],
outputs: [],
},
],
providers: [provideFlowbiteDropdownState()],
host: {
'[class]': `theme().host.root`,
},
}]
}] });
const flowbiteDropdownItemTheme = createTheme({
host: {
base: 'flex cursor-pointer items-center justify-between px-4 py-2 font-medium',
transition: '',
color: {
default: {
light: 'data-hover:bg-gray-100',
dark: 'dark:data-hover:bg-gray-700 dark:data-hover:text-white',
},
info: {
light: 'data-hover:bg-blue-100',
dark: 'dark:data-hover:bg-blue-700 dark:data-hover:text-white',
},
failure: {
light: 'data-hover:bg-red-100',
dark: 'dark:data-hover:bg-red-700 dark:data-hover:text-white',
},
success: {
light: 'data-hover:bg-green-100',
dark: 'dark:data-hover:bg-green-700 dark:data-hover:text-white',
},
warning: {
light: 'data-hover:bg-yellow-100',
dark: 'dark:data-hover:bg-yellow-700 dark:data-hover:text-white',
},
primary: {
light: 'data-hover:bg-primary-100',
dark: 'dark:data-hover:bg-primary-700 dark:data-hover:text-white',
},
},
},
});
const defaultFlowbiteDropdownItemConfig = {
baseTheme: flowbiteDropdownItemTheme,
customTheme: {},
};
const FlowbiteDropdownItemConfigToken = new InjectionToken('FlowbiteDropdownItemConfigToken');
/**
* Provide the default Dropdown Item configuration
* @param config The Dropdown Item configuration
* @returns The provider
*/
const provideFlowbiteDropdownItemConfig = (config) => [
{
provide: FlowbiteDropdownItemConfigToken,
useValue: { ...defaultFlowbiteDropdownItemConfig, ...config },
},
];
/**
* Inject the Dropdown Item configuration
* @see {@link defaultFlowbiteDropdownItemConfig}
* @returns The configuration
*/
const injectFlowbiteDropdownItemConfig = () => inject(FlowbiteDropdownItemConfigToken, { optional: true }) ?? defaultFlowbiteDropdownItemConfig;
const FlowbiteDropdownItemStateToken = createStateToken('Flowbite Dropdown Item');
const provideFlowbiteDropdownItemState = createStateProvider(FlowbiteDropdownItemStateToken);
const injectFlowbiteDropdownItemState = createStateInjector(FlowbiteDropdownItemStateToken);
const flowbiteDropdownItemState = createState(FlowbiteDropdownItemStateToken);
class DropdownItem {
constructor() {
this.config = injectFlowbiteDropdownItemConfig();
this.dropdownState = injectFlowbiteDropdownState();
/**
* @see {@link injectFlowbiteDropdownItemConfig}
*/
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, colorToTheme(mergedTheme.host.color, this.dropdownState().color())),
},
};
});
/**
* @internal
*/
this.state = flowbiteDropdownItemState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: DropdownItem, isStandalone: true, selector: "\n li[flowbiteDropdownItem]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteDropdownItemState()], exportAs: ["flowbiteDropdownItem"], hostDirectives: [{ directive: i1.NgpMenuItem }, { directive: i2.NgpFocus }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DropdownItem, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
li[flowbiteDropdownItem]
`,
exportAs: 'flowbiteDropdownItem',
hostDirectives: [
{
directive: NgpMenuItem,
inputs: [],
outputs: [],
},
{
directive: NgpFocus,
inputs: [],
outputs: [],
},
],
providers: [provideFlowbiteDropdownItemState()],
host: {
'[class]': `theme().host.root`,
},
}]
}] });
const flowbiteDropdownContentTheme = createTheme({
host: {
base: 'py-2 text-sm',
transition: '',
color: {
default: {
light: 'text-gray-700',
dark: 'dark:text-gray-200',
},
info: {
light: 'text-gray-700',
dark: 'dark:text-gray-200',
},
failure: {
light: 'text-gray-700',
dark: 'dark:text-gray-200',
},
success: {
light: 'text-gray-700',
dark: 'dark:text-gray-200',
},
warning: {
light: 'text-gray-700',
dark: 'dark:text-gray-200',
},
primary: {
light: 'text-gray-700',
dark: 'dark:text-gray-200',
},
},
},
});
const defaultFlowbiteDropdownContentConfig = {
baseTheme: flowbiteDropdownContentTheme,
customTheme: {},
};
const FlowbiteDropdownContentConfigToken = new InjectionToken('FlowbiteDropdownContentConfigToken');
/**
* Provide the default DropdownContent configuration
* @param config The DropdownContent configuration
* @returns The provider
*/
const provideFlowbiteDropdownContentConfig = (config) => [
{
provide: FlowbiteDropdownContentConfigToken,
useValue: { ...defaultFlowbiteDropdownContentConfig, ...config },
},
];
/**
* Inject the DropdownContent configuration
* @see {@link defaultFlowbiteDropdownContentConfig}
* @returns The configuration
*/
const injectFlowbiteDropdownContentConfig = () => inject(FlowbiteDropdownContentConfigToken, { optional: true }) ??
defaultFlowbiteDropdownContentConfig;
const FlowbiteDropdownContentStateToken = createStateToken('Flowbite DropdownContent');
const provideFlowbiteDropdownContentState = createStateProvider(FlowbiteDropdownContentStateToken);
const injectFlowbiteDropdownContentState = createStateInjector(FlowbiteDropdownContentStateToken);
const flowbiteDropdownContentState = createState(FlowbiteDropdownContentStateToken);
class DropdownContent {
constructor() {
this.config = injectFlowbiteDropdownContentConfig();
this.dropdownState = injectFlowbiteDropdownState();
/**
* @see {@link injectFlowbiteDropdownContentConfig}
*/
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, colorToTheme(mergedTheme.host.color, this.dropdownState().color())),
},
};
});
/**
* @internal
*/
this.state = flowbiteDropdownContentState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: DropdownContent, isStandalone: true, selector: "\n ul[flowbiteDropdownContent]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteDropdownContentState()], exportAs: ["flowbiteDropdownContent"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DropdownContent, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
ul[flowbiteDropdownContent]
`,
exportAs: 'flowbiteDropdownContent',
hostDirectives: [],
providers: [provideFlowbiteDropdownContentState()],
host: { '[class]': `theme().host.root` },
}]
}] });
/* Dropdown */
/**
* Generated bundle index. Do not edit.
*/
export { Dropdown, DropdownContent, DropdownItem, FlowbiteDropdownConfigToken, FlowbiteDropdownContentConfigToken, FlowbiteDropdownContentStateToken, FlowbiteDropdownItemConfigToken, FlowbiteDropdownItemStateToken, FlowbiteDropdownStateToken, defaultFlowbiteDropdownConfig, defaultFlowbiteDropdownContentConfig, defaultFlowbiteDropdownItemConfig, flowbiteDropdownContentState, flowbiteDropdownContentTheme, flowbiteDropdownItemState, flowbiteDropdownItemTheme, flowbiteDropdownState, flowbiteDropdownTheme, injectFlowbiteDropdownConfig, injectFlowbiteDropdownContentConfig, injectFlowbiteDropdownContentState, injectFlowbiteDropdownItemConfig, injectFlowbiteDropdownItemState, injectFlowbiteDropdownState, provideFlowbiteDropdownConfig, provideFlowbiteDropdownContentConfig, provideFlowbiteDropdownContentState, provideFlowbiteDropdownItemConfig, provideFlowbiteDropdownItemState, provideFlowbiteDropdownState };
//# sourceMappingURL=flowbite-angular-dropdown.mjs.map