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
343 lines (334 loc) • 14.7 kB
TypeScript
import * as flowbite_angular from 'flowbite-angular';
import { FlowbiteBoolean, DeepPartial, FlowbiteThemes } from 'flowbite-angular';
import * as flowbite_angular_button from 'flowbite-angular/button';
import { FlowbiteBaseButtonSizes, FlowbiteBaseButtonColors, BaseButton } from 'flowbite-angular/button';
import * as _angular_core from '@angular/core';
import { InjectionToken, Provider } from '@angular/core';
import * as ng_primitives_state from 'ng-primitives/state';
import * as i2 from 'ng-primitives/button';
import * as i3 from 'ng-primitives/interactions';
import * as flowbite_angular_theme_toggle from 'flowbite-angular/theme-toggle';
interface FlowbiteThemeToggleTheme {
host: FlowbiteThemeToggleHostTheme;
}
interface FlowbiteThemeToggleHostTheme {
base: string;
transition: string;
focus: string;
disabled: string;
size: FlowbiteBaseButtonSizes;
pill: FlowbiteBoolean;
color: FlowbiteBaseButtonColors;
colorOutline: FlowbiteBaseButtonColors;
}
declare const flowbiteThemeToggleTheme: FlowbiteThemeToggleTheme;
interface FlowbiteThemeToggleConfig {
/**
* The default theme of ThemeToggle
*/
baseTheme: FlowbiteThemeToggleTheme;
/**
* The custom theme of ThemeToggle
*/
customTheme: DeepPartial<FlowbiteThemeToggleTheme>;
}
declare const defaultFlowbiteThemeToggleConfig: FlowbiteThemeToggleConfig;
declare const FlowbiteThemeToggleConfigToken: InjectionToken<FlowbiteThemeToggleConfig>;
/**
* Provide the default ThemeToggle configuration
* @param config The ThemeToggle configuration
* @returns The provider
*/
declare const provideFlowbiteThemeToggleConfig: (config: Partial<FlowbiteThemeToggleConfig>) => Provider[];
/**
* Inject the ThemeToggle configuration
* @see {@link defaultFlowbiteThemeToggleConfig}
* @returns The configuration
*/
declare const injectFlowbiteThemeToggleConfig: () => FlowbiteThemeToggleConfig;
interface FlowbiteThemeConfig {
/**
* The default theme of ThemeDirective
*/
theme: FlowbiteThemes;
/**
* The default local storage key of ThemeDirective
*/
localStorageKey: string;
/**
* The default type of ThemeDirective
*/
type: {
type: 'class';
} | {
type: 'attr';
name: string;
};
}
declare const defaultFlowbiteThemeConfig: FlowbiteThemeConfig;
declare const FlowbiteThemeConfigToken: InjectionToken<FlowbiteThemeConfig>;
/**
* Provide the default Theme configuration
* @param config The Theme configuration
* @returns The provider
*/
declare const provideFlowbiteThemeConfig: (config: Partial<FlowbiteThemeConfig>) => Provider[];
/**
* Inject the Theme configuration
* @see {@link defaultFlowbiteThemeConfig}
* @returns The configuration
*/
declare const injectFlowbiteThemeConfig: () => FlowbiteThemeConfig;
declare class Theme {
protected readonly config: FlowbiteThemeConfig;
readonly localStorageKey: _angular_core.InputSignal<string>;
readonly currentTheme: _angular_core.InputSignal<FlowbiteThemes>;
readonly type: _angular_core.InputSignal<{
type: "class";
} | {
type: "attr";
name: string;
}>;
constructor();
getLocalStorageTheme(): FlowbiteThemes | undefined;
toggleTheme(theme?: FlowbiteThemes): void;
setTheme(theme: FlowbiteThemes): void;
/**
* @internal
*/
readonly state: ng_primitives_state.CreatedState<Theme>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Theme, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Theme, " [flowbiteTheme] ", ["flowbiteTheme"], { "localStorageKey": { "alias": "localStorageKey"; "required": false; "isSignal": true; }; "currentTheme": { "alias": "currentTheme"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
declare class ThemeToggle {
protected readonly baseButtonState: _angular_core.Signal<ng_primitives_state.State<{
readonly config: flowbite_angular_button.FlowbiteBaseButtonConfig;
readonly color: _angular_core.InputSignal<keyof flowbite_angular_button.FlowbiteBaseButtonColors>;
readonly size: _angular_core.InputSignal<keyof flowbite_angular_button.FlowbiteBaseButtonSizes>;
readonly pill: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly outline: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly state: ng_primitives_state.CreatedState<BaseButton>;
}>>;
protected readonly config: FlowbiteThemeToggleConfig;
protected readonly themeDirective: Theme;
/**
* @see {@link injectFlowbiteThemeToggleConfig}
*/
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
focus?: string | undefined;
disabled?: string | undefined;
size?: {
[x: string]: string | undefined;
xs?: string | undefined;
sm?: string | undefined;
md?: string | undefined;
lg?: string | undefined;
xl?: string | undefined;
} | undefined;
pill?: {
off?: string | undefined;
on?: 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;
colorOutline?: {
[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<ThemeToggle>;
/**
* @internal
*/
onClick(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeToggle, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemeToggle, " button[flowbiteThemeToggle] ", ["flowbiteThemeToggle"], { "customTheme": { "alias": "customTheme"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof flowbite_angular_button.BaseButton; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i2.NgpButton; inputs: { "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i3.NgpFocus; inputs: { "ngpFocusDisabled": "focusDisabled"; }; outputs: { "ngpFocus": "ngpFocus"; }; }]>;
}
declare const FlowbiteThemeToggleStateToken: _angular_core.InjectionToken<ThemeToggle>;
declare const provideFlowbiteThemeToggleState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
declare const injectFlowbiteThemeToggleState: <U = {
readonly baseButtonState: _angular_core.Signal<ng_primitives_state.State<{
readonly config: flowbite_angular_button.FlowbiteBaseButtonConfig;
readonly color: _angular_core.InputSignal<keyof flowbite_angular_button.FlowbiteBaseButtonColors>;
readonly size: _angular_core.InputSignal<keyof flowbite_angular_button.FlowbiteBaseButtonSizes>;
readonly pill: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly outline: _angular_core.InputSignalWithTransform<boolean, unknown>;
readonly state: ng_primitives_state.CreatedState<flowbite_angular_button.BaseButton>;
}>>;
readonly config: flowbite_angular_theme_toggle.FlowbiteThemeToggleConfig;
readonly themeDirective: flowbite_angular_theme_toggle.Theme;
readonly customTheme: _angular_core.InputSignal<{
host?: {
base?: string | undefined;
transition?: string | undefined;
focus?: string | undefined;
disabled?: string | undefined;
size?: {
[x: string]: string | undefined;
xs?: string | undefined;
sm?: string | undefined;
md?: string | undefined;
lg?: string | undefined;
xl?: string | undefined;
} | undefined;
pill?: {
off?: string | undefined;
on?: 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;
colorOutline?: {
[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<ThemeToggle>;
onClick: () => void;
}>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
declare const flowbiteThemeToggleState: <U>(state: U) => ng_primitives_state.CreatedState<U>;
declare const FlowbiteThemeStateToken: _angular_core.InjectionToken<Theme>;
declare const provideFlowbiteThemeState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
declare const injectFlowbiteThemeState: <U = {
readonly config: flowbite_angular_theme_toggle.FlowbiteThemeConfig;
readonly localStorageKey: _angular_core.InputSignal<string>;
readonly currentTheme: _angular_core.InputSignal<flowbite_angular.FlowbiteThemes>;
readonly type: _angular_core.InputSignal<{
type: "class";
} | {
type: "attr";
name: string;
}>;
getLocalStorageTheme: () => flowbite_angular.FlowbiteThemes | undefined;
toggleTheme: (theme?: flowbite_angular.FlowbiteThemes) => void;
setTheme: (theme: flowbite_angular.FlowbiteThemes) => void;
readonly state: ng_primitives_state.CreatedState<Theme>;
}>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
declare const flowbiteThemeState: <U>(state: U) => ng_primitives_state.CreatedState<U>;
export { FlowbiteThemeConfigToken, FlowbiteThemeStateToken, FlowbiteThemeToggleConfigToken, FlowbiteThemeToggleStateToken, Theme, ThemeToggle, defaultFlowbiteThemeConfig, defaultFlowbiteThemeToggleConfig, flowbiteThemeState, flowbiteThemeToggleState, flowbiteThemeToggleTheme, injectFlowbiteThemeConfig, injectFlowbiteThemeState, injectFlowbiteThemeToggleConfig, injectFlowbiteThemeToggleState, provideFlowbiteThemeConfig, provideFlowbiteThemeState, provideFlowbiteThemeToggleConfig, provideFlowbiteThemeToggleState };
export type { FlowbiteThemeConfig, FlowbiteThemeToggleConfig, FlowbiteThemeToggleHostTheme, FlowbiteThemeToggleTheme };