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
445 lines (425 loc) • 20.2 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/form-field';
import { NgpLabel, NgpDescription, NgpFormField } from 'ng-primitives/form-field';
import { twMerge } from 'tailwind-merge';
import * as i1$1 from 'ng-primitives/input';
import { NgpInput } from 'ng-primitives/input';
const flowbiteLabelTheme = createTheme({
host: {
base: 'mb-2 block text-sm font-medium',
transition: '',
color: {
default: {
light: 'text-gray-900',
dark: 'dark:text-white',
},
info: {
light: 'text-blue-900',
dark: 'dark:text-blue-500',
},
failure: {
light: 'text-red-900',
dark: 'dark:text-red-500',
},
success: {
light: 'text-green-900',
dark: 'dark:text-green-500',
},
warning: {
light: 'text-yellow-900',
dark: 'dark:text-yellow-500',
},
primary: {
light: 'text-primary-900',
dark: 'dark:text-primary-500',
},
},
mode: {
normal: '',
floating: 'absolute top-3 -z-10 origin-[0] -translate-y-6 scale-75 transform transition-transform duration-150 ease-in-out peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:start-0 peer-focus:-translate-y-6 peer-focus:scale-75 peer-focus:font-medium',
},
},
});
const defaultFlowbiteLabelConfig = {
baseTheme: flowbiteLabelTheme,
customTheme: {},
};
const FlowbiteLabelConfigToken = new InjectionToken('FlowbiteLabelConfigToken');
/**
* Provide the default Label configuration
* @param config The Label configuration
* @returns The provider
*/
const provideFlowbiteLabelConfig = (config) => [
{
provide: FlowbiteLabelConfigToken,
useValue: { ...defaultFlowbiteLabelConfig, ...config },
},
];
/**
* Inject the Label configuration
* @see {@link defaultFlowbiteLabelConfig}
* @returns The configuration
*/
const injectFlowbiteLabelConfig = () => inject(FlowbiteLabelConfigToken, { optional: true }) ?? defaultFlowbiteLabelConfig;
const FlowbiteFormFieldStateToken = createStateToken('Flowbite FormField');
const provideFlowbiteFormFieldState = createStateProvider(FlowbiteFormFieldStateToken);
const injectFlowbiteFormFieldState = createStateInjector(FlowbiteFormFieldStateToken);
const flowbiteFormFieldState = createState(FlowbiteFormFieldStateToken);
const FlowbiteLabelStateToken = createStateToken('Flowbite Label');
const provideFlowbiteLabelState = createStateProvider(FlowbiteLabelStateToken);
const injectFlowbiteLabelState = createStateInjector(FlowbiteLabelStateToken);
const flowbiteLabelState = createState(FlowbiteLabelStateToken);
class Label {
constructor() {
this.config = injectFlowbiteLabelConfig();
this.formFieldState = injectFlowbiteFormFieldState();
/**
* @see {@link injectFlowbiteLabelConfig}
*/
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.formFieldState().color()), mergedTheme.host.mode[this.formFieldState().mode()]),
},
};
});
/**
* @internal
*/
this.state = flowbiteLabelState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Label, isStandalone: true, selector: "\n label[flowbiteLabel]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteLabelState()], exportAs: ["flowbiteLabel"], hostDirectives: [{ directive: i1.NgpLabel, inputs: ["id", "id"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Label, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
label[flowbiteLabel]
`,
exportAs: 'flowbiteLabel',
hostDirectives: [
{
directive: NgpLabel,
inputs: ['id:id'],
outputs: [],
},
],
providers: [provideFlowbiteLabelState()],
host: { '[class]': `theme().host.root` },
}]
}] });
const flowbiteHelperTheme = createTheme({
host: {
base: 'mt-2 text-sm',
transition: '',
color: {
default: {
light: 'text-gray-900',
dark: 'dark:text-white',
},
info: {
light: 'text-gray-900',
dark: 'dark:text-white',
},
failure: {
light: 'text-gray-900',
dark: 'dark:text-white',
},
success: {
light: 'text-gray-900',
dark: 'dark:text-white',
},
warning: {
light: 'text-gray-900',
dark: 'dark:text-white',
},
primary: {
light: 'text-gray-900',
dark: 'dark:text-white',
},
},
},
});
const defaultFlowbiteHelperConfig = {
baseTheme: flowbiteHelperTheme,
customTheme: {},
};
const FlowbiteHelperConfigToken = new InjectionToken('FlowbiteHelperConfigToken');
/**
* Provide the default Helper configuration
* @param config The Helper configuration
* @returns The provider
*/
const provideFlowbiteHelperConfig = (config) => [
{
provide: FlowbiteHelperConfigToken,
useValue: { ...defaultFlowbiteHelperConfig, ...config },
},
];
/**
* Inject the Helper configuration
* @see {@link defaultFlowbiteHelperConfig}
* @returns The configuration
*/
const injectFlowbiteHelperConfig = () => inject(FlowbiteHelperConfigToken, { optional: true }) ?? defaultFlowbiteHelperConfig;
const FlowbiteHelperStateToken = createStateToken('Flowbite Helper');
const provideFlowbiteHelperState = createStateProvider(FlowbiteHelperStateToken);
const injectFlowbiteHelperState = createStateInjector(FlowbiteHelperStateToken);
const flowbiteHelperState = createState(FlowbiteHelperStateToken);
class Helper {
constructor() {
this.config = injectFlowbiteHelperConfig();
this.formFieldState = injectFlowbiteFormFieldState();
/**
* @see {@link injectFlowbiteHelperConfig}
*/
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.formFieldState().color())),
},
};
});
/**
* @internal
*/
this.state = flowbiteHelperState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Helper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Helper, isStandalone: true, selector: "\n [flowbiteHelper]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteHelperState()], exportAs: ["flowbiteHelper"], hostDirectives: [{ directive: i1.NgpDescription, inputs: ["id", "id"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Helper, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
[flowbiteHelper]
`,
exportAs: 'flowbiteHelper',
hostDirectives: [
{
directive: NgpDescription,
inputs: ['id:id'],
outputs: [],
},
],
providers: [provideFlowbiteHelperState()],
host: { '[class]': `theme().host.root` },
}]
}] });
const flowbiteFormFieldTheme = createTheme({
host: {
base: 'mb-5',
transition: '',
mode: {
normal: 'block',
floating: 'group relative z-0',
},
},
});
const defaultFlowbiteFormFieldConfig = {
baseTheme: flowbiteFormFieldTheme,
size: 'md',
color: 'default',
mode: 'normal',
customTheme: {},
};
const FlowbiteFormFieldConfigToken = new InjectionToken('FlowbiteFormFieldConfigToken');
/**
* Provide the default FormField configuration
* @param config The FormField configuration
* @returns The provider
*/
const provideFlowbiteFormFieldConfig = (config) => [
{
provide: FlowbiteFormFieldConfigToken,
useValue: { ...defaultFlowbiteFormFieldConfig, ...config },
},
];
/**
* Inject the FormField configuration
* @see {@link defaultFlowbiteFormFieldConfig}
* @returns The configuration
*/
const injectFlowbiteFormFieldConfig = () => inject(FlowbiteFormFieldConfigToken, { optional: true }) ?? defaultFlowbiteFormFieldConfig;
class FormField {
constructor() {
this.config = injectFlowbiteFormFieldConfig();
/**
* @see {@link injectFlowbiteFormFieldConfig}
*/
this.size = input(this.config.size);
/**
* @see {@link injectFlowbiteFormFieldConfig}
*/
this.color = input(this.config.color);
/**
* @see {@link injectFlowbiteFormFieldConfig}
*/
this.mode = input(this.config.mode);
/**
* @see {@link injectFlowbiteFormFieldConfig}
*/
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.mode[this.state.mode()]),
},
};
});
/**
* @internal
*/
this.state = flowbiteFormFieldState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: FormField, isStandalone: true, selector: "\n div[flowbiteFormField]\n ", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteFormFieldState()], exportAs: ["flowbiteFormField"], hostDirectives: [{ directive: i1.NgpFormField }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormField, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
div[flowbiteFormField]
`,
exportAs: 'flowbiteFormField',
hostDirectives: [
{
directive: NgpFormField,
inputs: [],
outputs: [],
},
],
providers: [provideFlowbiteFormFieldState()],
host: { '[class]': `theme().host.root` },
}]
}] });
const flowbiteFormControlTheme = createTheme({
host: {
base: 'block w-full text-sm',
transition: '',
disabled: 'data-disabled:cursor-not-allowed',
size: {
sm: 'p-2',
md: 'p-2.5',
xl: 'p-3',
},
color: {
default: {
light: 'border-gray-300 bg-gray-50 text-gray-900 outline-gray-200',
dark: 'dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:outline-gray-700',
},
info: {
light: 'border-blue-300 bg-gray-50 text-blue-900 outline-blue-200',
dark: 'dark:border-blue-600 dark:bg-gray-700 dark:text-blue-500 dark:placeholder-blue-400 dark:outline-blue-700',
},
failure: {
light: 'border-red-300 bg-gray-50 text-red-900 outline-red-200',
dark: 'dark:border-red-600 dark:bg-gray-700 dark:text-red-500 dark:placeholder-red-400 dark:outline-red-700',
},
success: {
light: 'border-green-300 bg-gray-50 text-green-900 outline-green-200',
dark: 'dark:border-green-600 dark:bg-gray-700 dark:text-green-500 dark:placeholder-green-400 dark:outline-green-700',
},
warning: {
light: 'border-yellow-300 bg-gray-50 text-yellow-900 outline-yellow-200',
dark: 'dark:border-yellow-600 dark:bg-gray-700 dark:text-yellow-500 dark:placeholder-yellow-400 dark:outline-yellow-700',
},
primary: {
light: 'border-primary-300 text-primary-900 outline-primary-200 bg-gray-50',
dark: 'dark:border-primary-600 dark:text-primary-500 dark:placeholder-primary-400 dark:outline-primary-700 dark:bg-gray-700',
},
},
mode: {
normal: 'rounded-lg border data-focus:outline-2',
floating: 'peer appearance-none border-b-2 bg-transparent px-0 not-data-focus:border-gray-300 data-focus:outline-0 dark:bg-transparent',
},
},
});
const defaultFlowbiteFormControlConfig = {
baseTheme: flowbiteFormControlTheme,
customTheme: {},
};
const FlowbiteFormControlConfigToken = new InjectionToken('FlowbiteFormControlConfigToken');
/**
* Provide the default FormControl configuration
* @param config The FormControl configuration
* @returns The provider
*/
const provideFlowbiteFormControlConfig = (config) => [
{
provide: FlowbiteFormControlConfigToken,
useValue: { ...defaultFlowbiteFormControlConfig, ...config },
},
];
/**
* Inject the FormControl configuration
* @see {@link defaultFlowbiteFormControlConfig}
* @returns The configuration
*/
const injectFlowbiteFormControlConfig = () => inject(FlowbiteFormControlConfigToken, { optional: true }) ?? defaultFlowbiteFormControlConfig;
const FlowbiteFormControlStateToken = createStateToken('Flowbite FormControl');
const provideFlowbiteFormControlState = createStateProvider(FlowbiteFormControlStateToken);
const injectFlowbiteFormControlState = createStateInjector(FlowbiteFormControlStateToken);
const flowbiteFormControlState = createState(FlowbiteFormControlStateToken);
class FormControl {
constructor() {
this.config = injectFlowbiteFormControlConfig();
this.formFieldState = injectFlowbiteFormFieldState();
/**
* @see {@link injectFlowbiteFormControlConfig}
*/
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.disabled, colorToTheme(mergedTheme.host.color, this.formFieldState().color()), mergedTheme.host.mode[this.formFieldState().mode()], mergedTheme.host.size[this.formFieldState().size()]),
},
};
});
/**
* @internal
*/
this.state = flowbiteFormControlState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: FormControl, isStandalone: true, selector: "\n [flowbiteFormControl]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteFormControlState()], exportAs: ["flowbiteFormControl"], hostDirectives: [{ directive: i1$1.NgpInput, inputs: ["id", "id", "disabled", "disabled"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: FormControl, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
[flowbiteFormControl]
`,
exportAs: 'flowbiteFormControl',
hostDirectives: [
{
directive: NgpInput,
inputs: ['id:id', 'disabled:disabled'],
outputs: [],
},
],
providers: [provideFlowbiteFormControlState()],
host: { '[class]': `theme().host.root` },
}]
}] });
/* Label */
/**
* Generated bundle index. Do not edit.
*/
export { FlowbiteFormControlConfigToken, FlowbiteFormControlStateToken, FlowbiteFormFieldConfigToken, FlowbiteFormFieldStateToken, FlowbiteHelperConfigToken, FlowbiteHelperStateToken, FlowbiteLabelConfigToken, FlowbiteLabelStateToken, FormControl, FormField, Helper, Label, defaultFlowbiteFormControlConfig, defaultFlowbiteFormFieldConfig, defaultFlowbiteHelperConfig, defaultFlowbiteLabelConfig, flowbiteFormControlState, flowbiteFormControlTheme, flowbiteFormFieldState, flowbiteFormFieldTheme, flowbiteHelperState, flowbiteHelperTheme, flowbiteLabelState, flowbiteLabelTheme, injectFlowbiteFormControlConfig, injectFlowbiteFormControlState, injectFlowbiteFormFieldConfig, injectFlowbiteFormFieldState, injectFlowbiteHelperConfig, injectFlowbiteHelperState, injectFlowbiteLabelConfig, injectFlowbiteLabelState, provideFlowbiteFormControlConfig, provideFlowbiteFormControlState, provideFlowbiteFormFieldConfig, provideFlowbiteFormFieldState, provideFlowbiteHelperConfig, provideFlowbiteHelperState, provideFlowbiteLabelConfig, provideFlowbiteLabelState };
//# sourceMappingURL=flowbite-angular-form.mjs.map