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
743 lines (715 loc) • 33.8 kB
JavaScript
import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
import * as i0 from '@angular/core';
import { InjectionToken, inject, input, booleanAttribute, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive } from '@angular/core';
import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
import { twMerge } from 'tailwind-merge';
import * as i1 from 'flowbite-angular/button';
import { BaseButton, injectFlowbiteBaseButtonState } from 'flowbite-angular/button';
import * as i2 from 'ng-primitives/button';
import { NgpButton } from 'ng-primitives/button';
import * as i3 from 'ng-primitives/interactions';
import { NgpFocus } from 'ng-primitives/interactions';
import { bars } from 'flowbite-angular/icon/outline/general';
import { provideIcons } from '@ng-icons/core';
const flowbiteNavbarTheme = createTheme({
host: {
base: '',
transition: '',
fixed: {
on: 'fixed start-0 top-0 z-20 w-full border-b',
off: '',
},
color: {
default: {
light: 'border-gray-200 bg-gray-100',
dark: 'dark:border-gray-800 dark:bg-gray-900',
},
info: {
light: 'border-blue-200 bg-gray-100',
dark: 'dark:border-blue-800 dark:bg-gray-900',
},
failure: {
light: 'border-red-200 bg-gray-100',
dark: 'dark:border-red-800 dark:bg-gray-900',
},
success: {
light: 'border-green-200 bg-gray-100',
dark: 'dark:border-green-800 dark:bg-gray-900',
},
warning: {
light: 'border-yellow-200 bg-gray-100',
dark: 'dark:border-yellow-800 dark:bg-gray-900',
},
primary: {
light: 'border-primary-200 bg-gray-100',
dark: 'dark:border-primary-800 dark:bg-gray-900',
},
},
},
container: {
base: 'mx-auto flex max-w-screen flex-wrap items-center justify-between p-4',
transition: '',
},
});
const defaultFlowbiteNavbarConfig = {
baseTheme: flowbiteNavbarTheme,
fixed: false,
open: false,
color: 'default',
customTheme: {},
};
const FlowbiteNavbarConfigToken = new InjectionToken('FlowbiteNavbarConfigToken');
/**
* Provide the default Navbar configuration
* @param config The Navbar configuration
* @returns The provider
*/
const provideFlowbiteNavbarConfig = (config) => [
{
provide: FlowbiteNavbarConfigToken,
useValue: { ...defaultFlowbiteNavbarConfig, ...config },
},
];
/**
* Inject the Navbar configuration
* @see {@link defaultFlowbiteNavbarConfig}
* @returns The configuration
*/
const injectFlowbiteNavbarConfig = () => inject(FlowbiteNavbarConfigToken, { optional: true }) ?? defaultFlowbiteNavbarConfig;
const FlowbiteNavbarStateToken = createStateToken('Flowbite Navbar');
const provideFlowbiteNavbarState = createStateProvider(FlowbiteNavbarStateToken);
const injectFlowbiteNavbarState = createStateInjector(FlowbiteNavbarStateToken);
const flowbiteNavbarState = createState(FlowbiteNavbarStateToken);
class Navbar {
constructor() {
this.config = injectFlowbiteNavbarConfig();
/**
* @see {@link injectFlowbiteNavbarConfig}
*/
this.fixed = input(this.config.fixed, { transform: booleanAttribute });
/**
* @see {@link injectFlowbiteNavbarConfig}
*/
this.open = input(this.config.open, { transform: booleanAttribute });
/**
* @see {@link injectFlowbiteNavbarConfig}
*/
this.color = input(this.config.color);
/**
* @see {@link injectFlowbiteNavbarConfig}
*/
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.fixed[this.state.fixed() ? 'on' : 'off'], colorToTheme(mergedTheme.host.color, this.state.color())),
},
container: {
root: twMerge(mergedTheme.container.base, mergedTheme.container.transition),
},
};
});
/**
* @internal
*/
this.state = flowbiteNavbarState(this);
}
/**
* @internal
*/
toggle(newState) {
newState ??= !this.state.open();
this.state.open.set(newState);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Navbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: Navbar, isStandalone: true, selector: "\n nav[flowbiteNavbar]\n ", inputs: { fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, 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: [provideFlowbiteNavbarState({ inherit: true })], exportAs: ["flowbiteNavbar"], ngImport: i0, template: `
<div [class]="theme().container.root">
<ng-content />
</div>
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Navbar, decorators: [{
type: Component,
args: [{
standalone: true,
selector: `
nav[flowbiteNavbar]
`,
exportAs: 'flowbiteNavbar',
hostDirectives: [],
imports: [],
providers: [provideFlowbiteNavbarState({ inherit: true })],
host: { '[class]': `theme().host.root` },
template: `
<div [class]="theme().container.root">
<ng-content />
</div>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
const flowbiteNavbarItemTheme = createTheme({
host: {
base: 'm-0 block cursor-pointer rounded-sm px-3 py-2',
transition: '',
focus: 'data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none',
disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
size: {},
pill: {},
color: {
default: {
light: 'text-gray-800 data-hover:text-gray-900',
dark: 'dark:text-white dark:data-hover:text-gray-100',
},
info: {
light: 'text-gray-800 data-hover:text-blue-900',
dark: 'dark:text-white dark:data-hover:text-blue-100',
},
failure: {
light: 'text-gray-800 data-hover:text-red-900',
dark: 'dark:text-white dark:data-hover:text-red-100',
},
success: {
light: 'text-gray-800 data-hover:text-green-900',
dark: 'dark:text-white dark:data-hover:text-green-100',
},
warning: {
light: 'text-gray-800 data-hover:text-yellow-900',
dark: 'dark:text-white dark:data-hover:text-yellow-100',
},
primary: {
light: 'data-hover:text-primary-900 text-gray-800',
dark: 'dark:data-hover:text-primary-100 dark:text-white',
},
},
colorOutline: {},
},
});
const defaultFlowbiteNavbarItemConfig = {
baseTheme: flowbiteNavbarItemTheme,
customTheme: {},
};
const FlowbiteNavbarItemConfigToken = new InjectionToken('FlowbiteNavbarItemConfigToken');
/**
* Provide the default NavbarItem configuration
* @param config The NavbarItem configuration
* @returns The provider
*/
const provideFlowbiteNavbarItemConfig = (config) => [
{
provide: FlowbiteNavbarItemConfigToken,
useValue: { ...defaultFlowbiteNavbarItemConfig, ...config },
},
];
/**
* Inject the NavbarItem configuration
* @see {@link defaultFlowbiteNavbarItemConfig}
* @returns The configuration
*/
const injectFlowbiteNavbarItemConfig = () => inject(FlowbiteNavbarItemConfigToken, { optional: true }) ?? defaultFlowbiteNavbarItemConfig;
const FlowbiteNavbarItemStateToken = createStateToken('Flowbite NavbarItem');
const provideFlowbiteNavbarItemState = createStateProvider(FlowbiteNavbarItemStateToken);
const injectFlowbiteNavbarItemState = createStateInjector(FlowbiteNavbarItemStateToken);
const flowbiteNavbarItemState = createState(FlowbiteNavbarItemStateToken);
class NavbarItem {
constructor() {
this.config = injectFlowbiteNavbarItemConfig();
this.navbarState = injectFlowbiteNavbarState();
/**
* @see {@link injectFlowbiteNavbarItemConfig}
*/
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.focus, mergedTheme.host.disabled, colorToTheme(mergedTheme.host.color, this.navbarState().color())),
},
};
});
this.state = flowbiteNavbarItemState(this);
}
/**
* @internal
*/
onClick() {
this.toggleNavbar();
}
/**
* @internal
*/
toggleNavbar() {
this.navbarState().toggle();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: NavbarItem, isStandalone: true, selector: "\n a[flowbiteNavbarItem],\n button[flowbiteNavbarItem]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteNavbarItemState()], exportAs: ["flowbiteNavbarItem"], hostDirectives: [{ directive: i1.BaseButton, inputs: ["color", "color"] }, { directive: i2.NgpButton, inputs: ["disabled", "disabled"] }, { directive: i3.NgpFocus, inputs: ["ngpFocusDisabled", "focusDisabled"], outputs: ["ngpFocus", "ngpFocus"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarItem, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
a[flowbiteNavbarItem],
button[flowbiteNavbarItem]
`,
exportAs: 'flowbiteNavbarItem',
hostDirectives: [
{
directive: BaseButton,
inputs: ['color'],
outputs: [],
},
{
directive: NgpButton,
inputs: ['disabled:disabled'],
outputs: [],
},
{
directive: NgpFocus,
inputs: ['ngpFocusDisabled:focusDisabled'],
outputs: ['ngpFocus'],
},
],
providers: [provideFlowbiteNavbarItemState()],
host: {
'[class]': `theme().host.root`,
'(click)': 'onClick()',
},
}]
}] });
const flowbiteNavbarContentTheme = createTheme({
host: {
base: 'w-full overflow-hidden max-md:order-last md:flex md:w-auto',
transition: '',
fixed: {
on: '',
off: '',
},
open: {
on: '',
off: 'hidden',
},
},
container: {
base: 'mt-4 flex flex-col rounded-lg border p-4 font-medium md:mt-0 md:flex-row md:space-x-4 md:border-0 md:p-0',
transition: '',
color: {
default: {
light: 'bg-gray-200 md:bg-inherit',
dark: 'dark:bg-gray-800 dark:md:bg-inherit',
},
info: {
light: 'bg-gray-200 md:bg-inherit',
dark: 'dark:bg-gray-800 dark:md:bg-inherit',
},
failure: {
light: 'bg-gray-200 md:bg-inherit',
dark: 'dark:bg-gray-800 dark:md:bg-inherit',
},
success: {
light: 'bg-gray-200 md:bg-inherit',
dark: 'dark:bg-gray-800 dark:md:bg-inherit',
},
warning: {
light: 'bg-gray-200 md:bg-inherit',
dark: 'dark:bg-gray-800 dark:md:bg-inherit',
},
primary: {
light: 'bg-gray-200 md:bg-inherit',
dark: 'dark:bg-gray-800 dark:md:bg-inherit',
},
},
},
});
const defaultFlowbiteNavbarContentConfig = {
baseTheme: flowbiteNavbarContentTheme,
customTheme: {},
};
const FlowbiteNavbarContentConfigToken = new InjectionToken('FlowbiteNavbarContentConfigToken');
/**
* Provide the default NavbarContent configuration
* @param config The NavbarContent configuration
* @returns The provider
*/
const provideFlowbiteNavbarContentConfig = (config) => [
{
provide: FlowbiteNavbarContentConfigToken,
useValue: { ...defaultFlowbiteNavbarContentConfig, ...config },
},
];
/**
* Inject the NavbarContent configuration
* @see {@link defaultFlowbiteNavbarContentConfig}
* @returns The configuration
*/
const injectFlowbiteNavbarContentConfig = () => inject(FlowbiteNavbarContentConfigToken, { optional: true }) ??
defaultFlowbiteNavbarContentConfig;
const FlowbiteNavbarContentStateToken = createStateToken('Flowbite NavbarContent');
const provideFlowbiteNavbarContentState = createStateProvider(FlowbiteNavbarContentStateToken);
const injectFlowbiteNavbarContentState = createStateInjector(FlowbiteNavbarContentStateToken);
const flowbiteNavbarContentState = createState(FlowbiteNavbarContentStateToken);
class NavbarContent {
constructor() {
this.config = injectFlowbiteNavbarContentConfig();
this.navbarState = injectFlowbiteNavbarState();
/**
* @see {@link injectFlowbiteNavbarContentConfig}
*/
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.open[this.navbarState().open() ? 'on' : 'off']),
},
container: {
root: twMerge(mergedTheme.container.base, mergedTheme.container.transition, colorToTheme(mergedTheme.container.color, this.navbarState().color())),
},
};
});
/**
* @internal
*/
this.state = flowbiteNavbarContentState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: NavbarContent, isStandalone: true, selector: "\n div[flowbiteNavbarContent]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteNavbarContentState()], exportAs: ["flowbiteNavbarContent"], ngImport: i0, template: `
<ul [class]="theme().container.root">
<ng-content />
</ul>
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarContent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: `
div[flowbiteNavbarContent]
`,
exportAs: 'flowbiteNavbarContent',
hostDirectives: [],
imports: [],
providers: [provideFlowbiteNavbarContentState()],
host: { '[class]': `theme().host.root` },
template: `
<ul [class]="theme().container.root">
<ng-content />
</ul>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
const flowbiteNavbarToggleTheme = createTheme({
host: {
base: 'inline-flex cursor-pointer items-center justify-center rounded-lg p-2 text-sm md:hidden',
transition: '',
focus: 'data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none',
disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
size: {},
pill: {},
color: {
default: {
light: 'text-gray-900',
dark: 'dark:text-gray-100',
},
info: {
light: 'text-blue-900',
dark: 'dark:text-blue-100',
},
failure: {
light: 'text-red-900',
dark: 'dark:text-red-100',
},
success: {
light: 'text-green-900',
dark: 'dark:text-green-100',
},
warning: {
light: 'text-yellow-900',
dark: 'dark:text-yellow-100',
},
primary: {
light: 'text-primary-900',
dark: 'dark:text-primary-100',
},
},
colorOutline: {},
},
});
const defaultFlowbiteNavbarToggleConfig = {
baseTheme: flowbiteNavbarToggleTheme,
customTheme: {},
};
const FlowbiteNavbarToggleConfigToken = new InjectionToken('FlowbiteNavbarToggleConfigToken');
/**
* Provide the default NavbarToggle configuration
* @param config The NavbarToggle configuration
* @returns The provider
*/
const provideFlowbiteNavbarToggleConfig = (config) => [
{
provide: FlowbiteNavbarToggleConfigToken,
useValue: { ...defaultFlowbiteNavbarToggleConfig, ...config },
},
];
/**
* Inject the NavbarToggle configuration
* @see {@link defaultFlowbiteNavbarToggleConfig}
* @returns The configuration
*/
const injectFlowbiteNavbarToggleConfig = () => inject(FlowbiteNavbarToggleConfigToken, { optional: true }) ?? defaultFlowbiteNavbarToggleConfig;
const FlowbiteNavbarToggleStateToken = createStateToken('Flowbite NavbarToggle');
const provideFlowbiteNavbarToggleState = createStateProvider(FlowbiteNavbarToggleStateToken);
const injectFlowbiteNavbarToggleState = createStateInjector(FlowbiteNavbarToggleStateToken);
const flowbiteNavbarToggleState = createState(FlowbiteNavbarToggleStateToken);
class NavbarToggle {
constructor() {
this.config = injectFlowbiteNavbarToggleConfig();
this.navbarState = injectFlowbiteNavbarState();
/**
* @see {@link injectFlowbiteNavbarToggleConfig}
*/
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.focus, mergedTheme.host.disabled, colorToTheme(mergedTheme.host.color, this.navbarState().color())),
},
};
});
this.state = flowbiteNavbarToggleState(this);
}
/**
* @internal
*/
onClick() {
this.toggleNavbar();
}
/**
* @internal
*/
toggleNavbar() {
this.navbarState().toggle();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: NavbarToggle, isStandalone: true, selector: "\n button[flowbiteNavbarToggle]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteNavbarToggleState(), provideIcons({ bars })], exportAs: ["flowbiteNavbarToggle"], hostDirectives: [{ directive: i1.BaseButton }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarToggle, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
button[flowbiteNavbarToggle]
`,
exportAs: 'flowbiteNavbarToggle',
hostDirectives: [
{
directive: BaseButton,
inputs: [],
outputs: [],
},
],
providers: [provideFlowbiteNavbarToggleState(), provideIcons({ bars })],
host: {
'[class]': `theme().host.root`,
'(click)': 'onClick()',
},
}]
}] });
const flowbiteNavbarBrandTheme = createTheme({
host: {
base: 'flex cursor-pointer items-center space-x-3',
transition: '',
},
});
const defaultFlowbiteNavbarBrandConfig = {
baseTheme: flowbiteNavbarBrandTheme,
customTheme: {},
};
const FlowbiteNavbarBrandConfigToken = new InjectionToken('FlowbiteNavbarBrandConfigToken');
/**
* Provide the default NavbarBrand configuration
* @param config The NavbarBrand configuration
* @returns The provider
*/
const provideFlowbiteNavbarBrandConfig = (config) => [
{
provide: FlowbiteNavbarBrandConfigToken,
useValue: { ...defaultFlowbiteNavbarBrandConfig, ...config },
},
];
/**
* Inject the NavbarBrand configuration
* @see {@link defaultFlowbiteNavbarBrandConfig}
* @returns The configuration
*/
const injectFlowbiteNavbarBrandConfig = () => inject(FlowbiteNavbarBrandConfigToken, { optional: true }) ?? defaultFlowbiteNavbarBrandConfig;
const FlowbiteNavbarBrandStateToken = createStateToken('Flowbite NavbarBrand');
const provideFlowbiteNavbarBrandState = createStateProvider(FlowbiteNavbarBrandStateToken);
const injectFlowbiteNavbarBrandState = createStateInjector(FlowbiteNavbarBrandStateToken);
const flowbiteNavbarBrandState = createState(FlowbiteNavbarBrandStateToken);
class NavbarBrand {
constructor() {
this.config = injectFlowbiteNavbarBrandConfig();
/**
* @see {@link injectFlowbiteNavbarBrandConfig}
*/
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),
},
};
});
this.state = flowbiteNavbarBrandState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarBrand, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: NavbarBrand, isStandalone: true, selector: "\n a[flowbiteNavbarBrand]\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root", "attr.type": "button" } }, providers: [provideFlowbiteNavbarBrandState()], exportAs: ["flowbiteNavbarBrand"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarBrand, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
a[flowbiteNavbarBrand]
`,
exportAs: 'flowbiteNavbarBrand',
hostDirectives: [],
providers: [provideFlowbiteNavbarBrandState()],
host: {
'[class]': `theme().host.root`,
'[attr.type]': 'button',
},
}]
}] });
const flowbiteNavbarIconItemTheme = createTheme({
host: {
base: 'hidden cursor-pointer items-center justify-center rounded-lg p-2 text-sm sm:inline-flex',
transition: '',
focus: 'data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none',
disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
size: {},
pill: {},
color: {
default: {
light: 'text-gray-800 data-hover:text-gray-900',
dark: 'dark:text-white dark:data-hover:text-gray-100',
},
info: {
light: 'text-gray-800 data-hover:text-blue-900',
dark: 'dark:text-white dark:data-hover:text-blue-100',
},
failure: {
light: 'text-gray-800 data-hover:text-red-900',
dark: 'dark:text-white dark:data-hover:text-red-100',
},
success: {
light: 'text-gray-800 data-hover:text-green-900',
dark: 'dark:text-white dark:data-hover:text-green-100',
},
warning: {
light: 'text-gray-800 data-hover:text-yellow-900',
dark: 'dark:text-white dark:data-hover:text-yellow-100',
},
primary: {
light: 'data-hover:text-primary-900 text-gray-800',
dark: 'dark:data-hover:text-primary-100 dark:text-white',
},
},
colorOutline: {},
},
});
const defaultFlowbiteNavbarIconItemConfig = {
baseTheme: flowbiteNavbarIconItemTheme,
customTheme: {},
};
const FlowbiteNavbarIconItemConfigToken = new InjectionToken('FlowbiteNavbarIconItemConfigToken');
/**
* Provide the default NavbarIconItem configuration
* @param config The NavbarIconItem configuration
* @returns The provider
*/
const provideFlowbiteNavbarIconItemConfig = (config) => [
{
provide: FlowbiteNavbarIconItemConfigToken,
useValue: { ...defaultFlowbiteNavbarIconItemConfig, ...config },
},
];
/**
* Inject the NavbarIconItem configuration
* @see {@link defaultFlowbiteNavbarIconItemConfig}
* @returns The configuration
*/
const injectFlowbiteNavbarIconItemConfig = () => inject(FlowbiteNavbarIconItemConfigToken, { optional: true }) ??
defaultFlowbiteNavbarIconItemConfig;
const FlowbiteNavbarIconItemStateToken = createStateToken('Flowbite NavbarIconItem');
const provideFlowbiteNavbarIconItemState = createStateProvider(FlowbiteNavbarIconItemStateToken);
const injectFlowbiteNavbarIconItemState = createStateInjector(FlowbiteNavbarIconItemStateToken);
const flowbiteNavbarIconItemState = createState(FlowbiteNavbarIconItemStateToken);
class NavbarIconItem {
constructor() {
this.baseButtonState = injectFlowbiteBaseButtonState();
this.navbarState = injectFlowbiteNavbarState();
this.config = injectFlowbiteNavbarIconItemConfig();
/**
* @see {@link injectFlowbiteNavbarIconItemConfig}
*/
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.focus, mergedTheme.host.disabled, colorToTheme(mergedTheme.host.color, this.navbarState().color())),
},
};
});
/**
* @internal
*/
this.state = flowbiteNavbarIconItemState(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarIconItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: NavbarIconItem, isStandalone: true, selector: "\n button[flowbiteNavbarIconItem],\n a[flowbiteNavbarIconItem],\n ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteNavbarIconItemState()], exportAs: ["flowbiteNavbarIconItem"], hostDirectives: [{ directive: i1.BaseButton, inputs: ["color", "color"] }, { directive: i2.NgpButton, inputs: ["disabled", "disabled"] }, { directive: i3.NgpFocus, inputs: ["ngpFocusDisabled", "focusDisabled"], outputs: ["ngpFocus", "ngpFocus"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NavbarIconItem, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: `
button[flowbiteNavbarIconItem],
a[flowbiteNavbarIconItem],
`,
exportAs: 'flowbiteNavbarIconItem',
hostDirectives: [
{
directive: BaseButton,
inputs: ['color:color'],
outputs: [],
},
{
directive: NgpButton,
inputs: ['disabled:disabled'],
outputs: [],
},
{
directive: NgpFocus,
inputs: ['ngpFocusDisabled:focusDisabled'],
outputs: ['ngpFocus'],
},
],
providers: [provideFlowbiteNavbarIconItemState()],
host: { '[class]': `theme().host.root` },
}]
}] });
/* Navbar */
/**
* Generated bundle index. Do not edit.
*/
export { FlowbiteNavbarBrandConfigToken, FlowbiteNavbarBrandStateToken, FlowbiteNavbarConfigToken, FlowbiteNavbarContentConfigToken, FlowbiteNavbarContentStateToken, FlowbiteNavbarIconItemConfigToken, FlowbiteNavbarIconItemStateToken, FlowbiteNavbarItemConfigToken, FlowbiteNavbarItemStateToken, FlowbiteNavbarStateToken, FlowbiteNavbarToggleConfigToken, FlowbiteNavbarToggleStateToken, Navbar, NavbarBrand, NavbarContent, NavbarIconItem, NavbarItem, NavbarToggle, defaultFlowbiteNavbarBrandConfig, defaultFlowbiteNavbarConfig, defaultFlowbiteNavbarContentConfig, defaultFlowbiteNavbarIconItemConfig, defaultFlowbiteNavbarItemConfig, defaultFlowbiteNavbarToggleConfig, flowbiteNavbarBrandState, flowbiteNavbarBrandTheme, flowbiteNavbarContentState, flowbiteNavbarContentTheme, flowbiteNavbarIconItemState, flowbiteNavbarIconItemTheme, flowbiteNavbarItemState, flowbiteNavbarItemTheme, flowbiteNavbarState, flowbiteNavbarTheme, flowbiteNavbarToggleState, flowbiteNavbarToggleTheme, injectFlowbiteNavbarBrandConfig, injectFlowbiteNavbarBrandState, injectFlowbiteNavbarConfig, injectFlowbiteNavbarContentConfig, injectFlowbiteNavbarContentState, injectFlowbiteNavbarIconItemConfig, injectFlowbiteNavbarIconItemState, injectFlowbiteNavbarItemConfig, injectFlowbiteNavbarItemState, injectFlowbiteNavbarState, injectFlowbiteNavbarToggleConfig, injectFlowbiteNavbarToggleState, provideFlowbiteNavbarBrandConfig, provideFlowbiteNavbarBrandState, provideFlowbiteNavbarConfig, provideFlowbiteNavbarContentConfig, provideFlowbiteNavbarContentState, provideFlowbiteNavbarIconItemConfig, provideFlowbiteNavbarIconItemState, provideFlowbiteNavbarItemConfig, provideFlowbiteNavbarItemState, provideFlowbiteNavbarState, provideFlowbiteNavbarToggleConfig, provideFlowbiteNavbarToggleState };
//# sourceMappingURL=flowbite-angular-navbar.mjs.map