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
685 lines (667 loc) • 27.9 kB
TypeScript
import * as ng_primitives_state from 'ng-primitives/state';
import * as _angular_core from '@angular/core';
import { InjectionToken, Provider } from '@angular/core';
import * as flowbite_angular_form from 'flowbite-angular/form';
import { FlowbiteColors, ColorToTheme, FlowbiteSizes, DeepPartial } from 'flowbite-angular';
import * as i1 from 'ng-primitives/form-field';
import * as i1$1 from 'ng-primitives/input';
interface FlowbiteFormFieldColors extends Pick<FlowbiteColors, 'default' | 'info' | 'failure' | 'success' | 'warning' | 'primary'> {
[key: string]: ColorToTheme;
}
interface FlowbiteFormFieldSizes extends Pick<FlowbiteSizes, 'sm' | 'md' | 'xl'> {
[ket: string]: string;
}
interface FlowbiteFormFieldModes {
normal: string;
floating: string;
[key: string]: string;
}
interface FlowbiteFormFieldTheme {
host: FlowbiteFormFieldHostTheme;
}
interface FlowbiteFormFieldHostTheme {
base: string;
transition: string;
mode: FlowbiteFormFieldModes;
}
declare const flowbiteFormFieldTheme: FlowbiteFormFieldTheme;
interface FlowbiteLabelTheme {
host: FlowbiteLabelHostTheme;
}
interface FlowbiteLabelHostTheme {
base: string;
transition: string;
color: FlowbiteFormFieldColors;
mode: FlowbiteFormFieldModes;
}
declare const flowbiteLabelTheme: FlowbiteLabelTheme;
interface FlowbiteLabelConfig {
/**
* The default theme of Label
*/
baseTheme: FlowbiteLabelTheme;
/**
* The custom theme of Label
*/
customTheme: DeepPartial<FlowbiteLabelTheme>;
}
declare const defaultFlowbiteLabelConfig: FlowbiteLabelConfig;
declare const FlowbiteLabelConfigToken: InjectionToken<FlowbiteLabelConfig>;
/**
* Provide the default Label configuration
* @param config The Label configuration
* @returns The provider
*/
declare const provideFlowbiteLabelConfig: (config: Partial<FlowbiteLabelConfig>) => Provider[];
/**
* Inject the Label configuration
* @see {@link defaultFlowbiteLabelConfig}
* @returns The configuration
*/
declare const injectFlowbiteLabelConfig: () => FlowbiteLabelConfig;
declare class Label {
readonly config: FlowbiteLabelConfig;
readonly formFieldState: _angular_core.Signal<ng_primitives_state.State<{
readonly config: flowbite_angular_form.FlowbiteFormFieldConfig;
readonly size: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldSizes>;
readonly color: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldColors>;
readonly mode: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldModes>;
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
mode?: {
[x: string]: string | undefined;
normal?: string | undefined;
floating?: string | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
readonly state: ng_primitives_state.CreatedState<flowbite_angular_form.FormField>;
}>>;
/**
* @see {@link injectFlowbiteLabelConfig}
*/
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
color?: {
[x: string]: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
default?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
info?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
failure?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
success?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
warning?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
primary?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
} | undefined;
mode?: {
[x: string]: string | undefined;
normal?: string | undefined;
floating?: string | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
/**
* @internal
*/
readonly state: ng_primitives_state.CreatedState<Label>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Label, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Label, " label[flowbiteLabel] ", ["flowbiteLabel"], { "customTheme": { "alias": "customTheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgpLabel; inputs: { "id": "id"; }; outputs: {}; }]>;
}
declare const FlowbiteLabelStateToken: _angular_core.InjectionToken<Label>;
declare const provideFlowbiteLabelState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
declare const injectFlowbiteLabelState: <U = {
readonly config: flowbite_angular_form.FlowbiteLabelConfig;
readonly formFieldState: _angular_core.Signal<ng_primitives_state.State<{
readonly config: /*elided*/ any;
readonly size: /*elided*/ any;
readonly color: /*elided*/ any;
readonly mode: /*elided*/ any;
readonly customTheme: /*elided*/ any;
readonly theme: /*elided*/ any;
readonly state: /*elided*/ any;
}>>;
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
color?: {
[x: string]: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
default?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
info?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
failure?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
success?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
warning?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
primary?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
} | undefined;
mode?: {
[x: string]: string | undefined;
normal?: string | undefined;
floating?: string | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
readonly state: ng_primitives_state.CreatedState<Label>;
}>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
declare const flowbiteLabelState: <U>(state: U) => ng_primitives_state.CreatedState<U>;
interface FlowbiteHelperTheme {
host: FlowbiteHelperHostTheme;
}
interface FlowbiteHelperHostTheme {
base: string;
transition: string;
color: FlowbiteFormFieldColors;
}
declare const flowbiteHelperTheme: FlowbiteHelperTheme;
interface FlowbiteHelperConfig {
/**
* The default theme of helper
*/
baseTheme: FlowbiteHelperTheme;
/**
* The custom theme of helper
*/
customTheme: DeepPartial<FlowbiteHelperTheme>;
}
declare const defaultFlowbiteHelperConfig: FlowbiteHelperConfig;
declare const FlowbiteHelperConfigToken: InjectionToken<FlowbiteHelperConfig>;
/**
* Provide the default Helper configuration
* @param config The Helper configuration
* @returns The provider
*/
declare const provideFlowbiteHelperConfig: (config: Partial<FlowbiteHelperConfig>) => Provider[];
/**
* Inject the Helper configuration
* @see {@link defaultFlowbiteHelperConfig}
* @returns The configuration
*/
declare const injectFlowbiteHelperConfig: () => FlowbiteHelperConfig;
declare class Helper {
readonly config: FlowbiteHelperConfig;
readonly formFieldState: _angular_core.Signal<ng_primitives_state.State<{
readonly config: flowbite_angular_form.FlowbiteFormFieldConfig;
readonly size: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldSizes>;
readonly color: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldColors>;
readonly mode: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldModes>;
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
mode?: {
[x: string]: string | undefined;
normal?: string | undefined;
floating?: string | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
readonly state: ng_primitives_state.CreatedState<flowbite_angular_form.FormField>;
}>>;
/**
* @see {@link injectFlowbiteHelperConfig}
*/
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
color?: {
[x: string]: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
default?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
info?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
failure?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
success?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
warning?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
primary?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
/**
* @internal
*/
readonly state: ng_primitives_state.CreatedState<Helper>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Helper, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Helper, " [flowbiteHelper] ", ["flowbiteHelper"], { "customTheme": { "alias": "customTheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgpDescription; inputs: { "id": "id"; }; outputs: {}; }]>;
}
declare const FlowbiteHelperStateToken: _angular_core.InjectionToken<Helper>;
declare const provideFlowbiteHelperState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
declare const injectFlowbiteHelperState: <U = {
readonly config: flowbite_angular_form.FlowbiteHelperConfig;
readonly formFieldState: _angular_core.Signal<ng_primitives_state.State<{
readonly config: /*elided*/ any;
readonly size: /*elided*/ any;
readonly color: /*elided*/ any;
readonly mode: /*elided*/ any;
readonly customTheme: /*elided*/ any;
readonly theme: /*elided*/ any;
readonly state: /*elided*/ any;
}>>;
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
color?: {
[x: string]: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
default?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
info?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
failure?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
success?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
warning?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
primary?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
readonly state: ng_primitives_state.CreatedState<Helper>;
}>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
declare const flowbiteHelperState: <U>(state: U) => ng_primitives_state.CreatedState<U>;
interface FlowbiteFormFieldConfig {
/**
* The default theme of FormField
*/
baseTheme: FlowbiteFormFieldTheme;
/**
* The default size of FormField
*/
size: keyof FlowbiteFormFieldSizes;
/**
* The default color of FormField
*/
color: keyof FlowbiteFormFieldColors;
/**
* The default mode of FormField
*/
mode: keyof FlowbiteFormFieldModes;
/**
* The custom theme of FormField
*/
customTheme: DeepPartial<FlowbiteFormFieldTheme>;
}
declare const defaultFlowbiteFormFieldConfig: FlowbiteFormFieldConfig;
declare const FlowbiteFormFieldConfigToken: InjectionToken<FlowbiteFormFieldConfig>;
/**
* Provide the default FormField configuration
* @param config The FormField configuration
* @returns The provider
*/
declare const provideFlowbiteFormFieldConfig: (config: Partial<FlowbiteFormFieldConfig>) => Provider[];
/**
* Inject the FormField configuration
* @see {@link defaultFlowbiteFormFieldConfig}
* @returns The configuration
*/
declare const injectFlowbiteFormFieldConfig: () => FlowbiteFormFieldConfig;
declare class FormField {
readonly config: FlowbiteFormFieldConfig;
/**
* @see {@link injectFlowbiteFormFieldConfig}
*/
readonly size: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldSizes>;
/**
* @see {@link injectFlowbiteFormFieldConfig}
*/
readonly color: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldColors>;
/**
* @see {@link injectFlowbiteFormFieldConfig}
*/
readonly mode: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldModes>;
/**
* @see {@link injectFlowbiteFormFieldConfig}
*/
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
mode?: {
[x: string]: string | undefined;
normal?: string | undefined;
floating?: string | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
/**
* @internal
*/
readonly state: ng_primitives_state.CreatedState<FormField>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormField, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FormField, " div[flowbiteFormField] ", ["flowbiteFormField"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "customTheme": { "alias": "customTheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgpFormField; inputs: {}; outputs: {}; }]>;
}
declare const FlowbiteFormFieldStateToken: _angular_core.InjectionToken<FormField>;
declare const provideFlowbiteFormFieldState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
declare const injectFlowbiteFormFieldState: <U = {
readonly config: flowbite_angular_form.FlowbiteFormFieldConfig;
readonly size: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldSizes>;
readonly color: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldColors>;
readonly mode: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldModes>;
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
mode?: {
[x: string]: string | undefined;
normal?: string | undefined;
floating?: string | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
readonly state: ng_primitives_state.CreatedState<FormField>;
}>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
declare const flowbiteFormFieldState: <U>(state: U) => ng_primitives_state.CreatedState<U>;
interface FlowbiteFormControlTheme {
host: FlowbiteFormControlHostTheme;
}
interface FlowbiteFormControlHostTheme {
base: string;
transition: string;
disabled: string;
size: FlowbiteFormFieldSizes;
color: FlowbiteFormFieldColors;
mode: FlowbiteFormFieldModes;
}
declare const flowbiteFormControlTheme: FlowbiteFormControlTheme;
interface FlowbiteFormControlConfig {
/**
* The default theme of FormControl
*/
baseTheme: FlowbiteFormControlTheme;
/**
* The custom theme of FormControl
*/
customTheme: DeepPartial<FlowbiteFormControlTheme>;
}
declare const defaultFlowbiteFormControlConfig: FlowbiteFormControlConfig;
declare const FlowbiteFormControlConfigToken: InjectionToken<FlowbiteFormControlConfig>;
/**
* Provide the default FormControl configuration
* @param config The FormControl configuration
* @returns The provider
*/
declare const provideFlowbiteFormControlConfig: (config: Partial<FlowbiteFormControlConfig>) => Provider[];
/**
* Inject the FormControl configuration
* @see {@link defaultFlowbiteFormControlConfig}
* @returns The configuration
*/
declare const injectFlowbiteFormControlConfig: () => FlowbiteFormControlConfig;
declare class FormControl {
readonly config: FlowbiteFormControlConfig;
readonly formFieldState: _angular_core.Signal<ng_primitives_state.State<{
readonly config: flowbite_angular_form.FlowbiteFormFieldConfig;
readonly size: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldSizes>;
readonly color: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldColors>;
readonly mode: _angular_core.InputSignal<keyof flowbite_angular_form.FlowbiteFormFieldModes>;
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
mode?: {
[x: string]: string | undefined;
normal?: string | undefined;
floating?: string | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
readonly state: ng_primitives_state.CreatedState<flowbite_angular_form.FormField>;
}>>;
/**
* @see {@link injectFlowbiteFormControlConfig}
*/
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
disabled?: string | undefined;
size?: {
[x: string]: string | undefined;
sm?: string | undefined;
md?: string | undefined;
xl?: string | undefined;
} | undefined;
color?: {
[x: string]: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
default?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
info?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
failure?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
success?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
warning?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
primary?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
} | undefined;
mode?: {
[x: string]: string | undefined;
normal?: string | undefined;
floating?: string | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
/**
* @internal
*/
readonly state: ng_primitives_state.CreatedState<FormControl>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormControl, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FormControl, " [flowbiteFormControl] ", ["flowbiteFormControl"], { "customTheme": { "alias": "customTheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.NgpInput; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }]>;
}
declare const FlowbiteFormControlStateToken: _angular_core.InjectionToken<FormControl>;
declare const provideFlowbiteFormControlState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
declare const injectFlowbiteFormControlState: <U = {
readonly config: flowbite_angular_form.FlowbiteFormControlConfig;
readonly formFieldState: _angular_core.Signal<ng_primitives_state.State<{
readonly config: /*elided*/ any;
readonly size: /*elided*/ any;
readonly color: /*elided*/ any;
readonly mode: /*elided*/ any;
readonly customTheme: /*elided*/ any;
readonly theme: /*elided*/ any;
readonly state: /*elided*/ any;
}>>;
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
disabled?: string | undefined;
size?: {
[x: string]: string | undefined;
sm?: string | undefined;
md?: string | undefined;
xl?: string | undefined;
} | undefined;
color?: {
[x: string]: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
default?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
info?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
failure?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
success?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
warning?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
primary?: {
light?: string | undefined;
dark?: string | undefined;
} | undefined;
} | undefined;
mode?: {
[x: string]: string | undefined;
normal?: string | undefined;
floating?: string | undefined;
} | undefined;
} | undefined;
}>;
readonly theme: _angular_core.Signal<{
host: {
root: string;
};
}>;
readonly state: ng_primitives_state.CreatedState<FormControl>;
}>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
declare const flowbiteFormControlState: <U>(state: U) => ng_primitives_state.CreatedState<U>;
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 };
export type { FlowbiteFormControlConfig, FlowbiteFormControlHostTheme, FlowbiteFormControlTheme, FlowbiteFormFieldColors, FlowbiteFormFieldConfig, FlowbiteFormFieldHostTheme, FlowbiteFormFieldModes, FlowbiteFormFieldSizes, FlowbiteFormFieldTheme, FlowbiteHelperConfig, FlowbiteHelperHostTheme, FlowbiteHelperTheme, FlowbiteLabelConfig, FlowbiteLabelHostTheme, FlowbiteLabelTheme };