flowbite-angular
Version:
<div align="center"> <h1>:construction: flowbite-angular (unreleased) :construction:</h1> <p> <a href="https://flowbite.com"> <img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github
747 lines (726 loc) • 35.3 kB
JavaScript
import { mergeTheme, BARS_SVG_ICON, createTheme } from 'flowbite-angular/utils';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChild, untracked } from '@angular/core';
import { twMerge } from 'tailwind-merge';
import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
/**
* `InjectionToken` used to import `NavbarBrandTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_NAVBAR_BRAND_THEME_TOKEN)
* ```
*/
const FLOWBITE_NAVBAR_BRAND_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_BRAND_THEME_TOKEN');
class NavbarBrandThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_NAVBAR_BRAND_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarBrandThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarBrandThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarBrandThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE');
const navbarBrandDefaultThemeProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/navbar/
*/
class NavbarBrandComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(NavbarBrandThemeService);
/**
* The parent `NavbarComponent`
*/
this.navbarComponent = inject(NavbarComponent);
//#region properties
/**
* Set the custom style for this navbar brand
*/
this.customStyle = model(inject(FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
customStyle: this.customStyle(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarBrandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarBrandComponent, isStandalone: true, selector: "flowbite-navbar-brand", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarBrandComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-navbar-brand',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `NavbarContentTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN)
* ```
*/
const FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN');
class NavbarContentThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base),
navbarContentListClass: twMerge(theme.list.base),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
const navbarContentDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/navbar/
*/
class NavbarContentComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(NavbarContentThemeService);
/**
* The parent `NavbarComponent`
*/
this.navbarComponent = model(inject(NavbarComponent));
//#region properties
/**
* Set the navbar content color
*
* @default `NavbarComponent`'s color
*/
this.color = model(this.navbarComponent().color());
/**
* Set the custom style for this navbar content
*/
this.customStyle = model(inject(FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
customStyle: this.customStyle(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarContentComponent, isStandalone: true, selector: "flowbite-navbar-content", inputs: { navbarComponent: { classPropertyName: "navbarComponent", publicName: "navbarComponent", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarComponent: "navbarComponentChange", color: "colorChange", customStyle: "customStyleChange" }, host: { properties: { "@isOpenAnimation": "navbarComponent().isOpen()" } }, usesInheritance: true, ngImport: i0, template: `
<div [class]="contentClasses().navbarContentListClass">
<ng-content />
</div>
`, isInline: true, animations: [
trigger('isOpenAnimation', [
state('true', style({ height: '*' })),
state('false', style({ height: '0px' })),
transition('true <=> false', animate('300ms')),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarContentComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-navbar-content',
template: `
<div [class]="contentClasses().navbarContentListClass">
<ng-content />
</div>
`,
host: {
'[@isOpenAnimation]': 'navbarComponent().isOpen()',
},
animations: [
trigger('isOpenAnimation', [
state('true', style({ height: '*' })),
state('false', style({ height: '0px' })),
transition('true <=> false', animate('300ms')),
]),
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `NavbarToggleTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN)
* ```
*/
const FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN');
class NavbarToggleThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarToggleThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarToggleThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarToggleThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
const navbarToggleDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/navbar/
*/
class NavbarToggleComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(NavbarToggleThemeService);
/**
* The parent `NavbarComponent`
*/
this.navbarComponent = model(inject(NavbarComponent));
/**
* `IconRegistry` service
*/
this.iconRegistry = inject(IconRegistry);
/**
* `DomSanitizer` service
*/
this.domSanitizer = inject(DomSanitizer);
//#region properties
/**
* Set the custom style for this navbar toggle
*/
this.customStyle = model(inject(FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
customStyle: this.customStyle(),
});
}
init() {
this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'bars', this.domSanitizer.bypassSecurityTrustHtml(BARS_SVG_ICON));
}
//#endregion
/**
* Toggle navbar visibility (open close on mobile device)
*/
onClick() {
const isCollapsed = this.navbarComponent().isOpen();
this.navbarComponent().isOpen.set(!isCollapsed);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarToggleComponent, isStandalone: true, selector: "flowbite-navbar-toggle", inputs: { navbarComponent: { classPropertyName: "navbarComponent", publicName: "navbarComponent", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navbarComponent: "navbarComponentChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
<flowbite-icon
svgIcon="flowbite-angular:bars"
class="w-5 h-5" />
`, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarToggleComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-navbar-toggle',
imports: [IconComponent],
template: `
<flowbite-icon
svgIcon="flowbite-angular:bars"
class="w-5 h-5" />
`,
host: {
'(click)': 'onClick()',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `NavbarTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_NAVBAR_THEME_TOKEN)
* ```
*/
const FLOWBITE_NAVBAR_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_THEME_TOKEN');
class NavbarThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_NAVBAR_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.color['gray'], theme.root.isRounded[properties.isRounded], theme.root.hasBorder[properties.hasBorder], theme.root.isFixed[properties.isFixed]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE');
const FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE');
const FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE');
const FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE');
const FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE');
const FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE');
const navbarDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE,
useValue: 'primary',
},
{
provide: FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/navbar/
*/
class NavbarComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injecteed used to generate class
*/
this.themeService = inject(NavbarThemeService);
/**
* The child `NavbarBrandComponent`
*/
this.navbarBrandChild = contentChild(NavbarBrandComponent);
/**
* The child `NavbarToggleComponent`
*/
this.navbarToggleChild = contentChild(NavbarToggleComponent);
/**
* The child `NavbarContentComponent`
*/
this.navbarContentChild = contentChild.required(NavbarContentComponent);
//#region properties
/**
* Set the navbar color
*
* @default primary
*/
this.color = model(inject(FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE));
/**
* Set if the navbar is open
*
* @default false
*/
this.isOpen = model(inject(FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE));
/**
* Set if the navbar is rounded
*
* @default false
*/
this.isRounded = model(inject(FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE));
/**
* Set if the navbar has border
*
* @default false
*/
this.hasBorder = model(inject(FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE));
/**
* Set if the navbar is fixed
*
* @default false
*/
this.isFixed = model(inject(FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE));
/**
* Set the custom style for this navbar
*/
this.customStyle = model(inject(FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
hasBorder: booleanToFlowbiteBoolean(this.isRounded()),
isRounded: booleanToFlowbiteBoolean(this.hasBorder()),
isFixed: booleanToFlowbiteBoolean(this.isFixed()),
customStyle: this.customStyle(),
});
}
//#endregion
/**
* Toggle visibility of the navbar
*
* @param isOpen When provide force the isOpen value
*/
toggleVisibility(isOpen) {
if (isOpen === undefined) {
isOpen = untracked(() => !this.isOpen());
}
this.isOpen.set(isOpen);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: NavbarComponent, isStandalone: true, selector: "flowbite-navbar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, isFixed: { classPropertyName: "isFixed", publicName: "isFixed", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", isOpen: "isOpenChange", isRounded: "isRoundedChange", hasBorder: "hasBorderChange", isFixed: "isFixedChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "navbarBrandChild", first: true, predicate: NavbarBrandComponent, descendants: true, isSignal: true }, { propertyName: "navbarToggleChild", first: true, predicate: NavbarToggleComponent, descendants: true, isSignal: true }, { propertyName: "navbarContentChild", first: true, predicate: NavbarContentComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-navbar',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
const navbarTheme = createTheme({
root: {
base: 'flex flex-wrap items-center justify-between p-4',
color: {
primary: 'bg-primary-200 dark:bg-primary-800 border-primary-200 dark:border-primary-700',
gray: 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700',
},
isRounded: {
enabled: 'rounded',
disabled: '',
},
hasBorder: {
enabled: 'border',
disabled: '',
},
isFixed: {
enabled: 'fixed w-full border-b',
disabled: '',
},
},
});
/**
* Default theme for `NavbarBrandComponent`
*/
const navbarBrandTheme = createTheme({
root: {
base: 'cursor-pointer flex items-center space-x-3 rtl:space-x-reverse',
},
});
/**
* Default theme for `NavbarContentComponent`
*/
const navbarContentTheme = createTheme({
root: {
base: 'w-full md:!h-fit md:w-auto order-last md:order-none overflow-hidden',
},
list: {
base: 'font-medium flex flex-col p-4 md:p-0 mt-4 items-center border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-900 md:dark:bg-gray-800 dark:border-gray-700',
},
});
/**
* `InjectionToken` used to import `NavbarItemTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_NAVBAR_ITEM_THEME_TOKEN)
* ```
*/
const FLOWBITE_NAVBAR_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_ITEM_THEME_TOKEN');
class NavbarItemThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_NAVBAR_ITEM_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
const navbarItemDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/navbar/
*/
class NavbarItemComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Optional `FlowbiteRouterLinkDirective` injected
*/
this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true });
/**
* Optional `FlowbiteRouterLinkActiveDirective` injected
*/
this.flowbiteRouterLinkActive = inject(FlowbiteRouterLinkActiveDirective, {
optional: true,
});
/**
* Service injected used to generate class
*/
this.themeService = inject(NavbarItemThemeService);
/**
* The parent `NavbarContentComponent`
*/
this.navbarContentComponent = inject(NavbarContentComponent);
//#region properties
/**
* Set the navbar item color
*
* @default `NavbarContentComponent`'s color
*/
this.color = model(this.navbarContentComponent.color());
/**
* Set the custom style for this navbar item
*/
this.customStyle = model(inject(FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
color: this.color(),
customStyle: this.customStyle(),
});
}
//#endregion
/**
* Toggle the nnavbar visibility (auto close when on mobile device)
*/
onClick() {
this.navbarContentComponent.navbarComponent().toggleVisibility(false);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarItemComponent, isStandalone: true, selector: "flowbite-navbar-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarItemComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-navbar-item',
template: `<ng-content />`,
host: {
'(click)': 'onClick()',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* Default theme for `NavbarItemComponent`
*/
const navbarItemTheme = createTheme({
root: {
base: 'cursor-pointer block py-2 px-3 rounded text-sm text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:p-0 md:dark:hover:bg-transparent',
color: {
primary: 'md:hover:text-primary-700 md:dark:hover:text-primary-500 aria-current:text-primary-500 dark:aria-current:text-primary-300',
gray: 'md:hover:text-gray-700 md:dark:hover:text-gray-500 aria-current:text-gray-500 dark:aria-current:text-gray-300',
},
},
});
/**
* Default theme for `NavbarToggleComponent`
*/
const navbarToggleTheme = createTheme({
root: {
base: 'cursor-pointer inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600',
},
});
/**
* `InjectionToken` used to import `NavbarIconButtonTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN)
* ```
*/
const FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN = new InjectionToken('FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN');
class NavbarIconButtonThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarIconButtonThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarIconButtonThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarIconButtonThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE');
const navbarIconButtonDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/navbar/
*/
class NavbarIconButtonComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(NavbarIconButtonThemeService);
/**
* The optional parent `NavbarComponent`
*/
this.navbarComponent = inject(NavbarComponent, { optional: true });
/**
* The optional parent `NavbarContentComponent`
*/
this.navbarContentComponent = inject(NavbarContentComponent, { optional: true });
//#region properties
/**
* Set the navbar icon button color
*
* @default `NavbarContentComponent`'s color
* @default `NavbarComponent`'s color
*/
this.color = model(this.navbarContentComponent?.color() || this.navbarComponent.color());
/**
* Set the custom style for this navbar icon button
*/
this.customStyle = model(inject(FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
color: this.color(),
customStyle: this.customStyle(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: NavbarIconButtonComponent, isStandalone: true, selector: "flowbite-navbar-icon-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NavbarIconButtonComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-navbar-icon-button',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* Default theme for `NavbarIconButtonComponent`
*/
const navbarIconButtonTheme = createTheme({
root: {
base: 'cursor-pointer rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
color: {
primary: 'text-primary-500 dark:text-primary-300',
gray: 'text-gray-500 dark:text-gray-400',
blue: 'text-blue-500 dark:text-blue-300',
red: 'text-red-500 dark:text-red-300',
green: 'text-green-500 dark:text-green-300',
yellow: 'text-yellow-500 dark:text-yellow-300',
},
},
});
/**
* Generated bundle index. Do not edit.
*/
export { FLOWBITE_NAVBAR_BRAND_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_BRAND_THEME_TOKEN, FLOWBITE_NAVBAR_COLOR_DEFAULT_VALUE, FLOWBITE_NAVBAR_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_CONTENT_THEME_TOKEN, FLOWBITE_NAVBAR_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_HAS_BORDER_DEFAULT_VALUE, FLOWBITE_NAVBAR_ICON_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_ICON_BUTTON_THEME_TOKEN, FLOWBITE_NAVBAR_IS_FIXED_DEFAULT_VALUE, FLOWBITE_NAVBAR_IS_OPEN_DEFAULT_VALUE, FLOWBITE_NAVBAR_IS_ROUNDED_DEFAULT_VALUE, FLOWBITE_NAVBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_ITEM_THEME_TOKEN, FLOWBITE_NAVBAR_THEME_TOKEN, FLOWBITE_NAVBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_NAVBAR_TOGGLE_THEME_TOKEN, NavbarBrandComponent, NavbarBrandThemeService, NavbarComponent, NavbarContentComponent, NavbarContentThemeService, NavbarIconButtonComponent, NavbarIconButtonThemeService, NavbarItemComponent, NavbarItemThemeService, NavbarThemeService, NavbarToggleComponent, NavbarToggleThemeService, navbarBrandDefaultThemeProvider, navbarBrandTheme, navbarContentDefaultValueProvider, navbarContentTheme, navbarDefaultValueProvider, navbarIconButtonDefaultValueProvider, navbarIconButtonTheme, navbarItemDefaultValueProvider, navbarItemTheme, navbarTheme, navbarToggleDefaultValueProvider, navbarToggleTheme };
//# sourceMappingURL=flowbite-angular-navbar.mjs.map