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
894 lines (871 loc) • 42.1 kB
JavaScript
import { mergeTheme, CHEVRON_DOWN_SVG_ICON, createTheme, BARS_SVG_ICON } from 'flowbite-angular/utils';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChildren, untracked, contentChild } from '@angular/core';
import { twMerge } from 'tailwind-merge';
import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
import { BadgeComponent } from 'flowbite-angular/badge';
import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
import { SanitizeHtmlPipe } from 'flowbite-angular/sanitize-html';
import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
import { DomSanitizer } from '@angular/platform-browser';
/**
* `InjectionToken` used to import `SidebarItemGroupTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN)
* ```
*/
const FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN');
class SidebarItemGroupThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base),
spanClass: twMerge(theme.spanText.base, theme.spanText.color[properties.color]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemGroupThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemGroupThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemGroupThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* `InjectionToken` used to import `SidebarItemTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN)
* ```
*/
const FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN');
class SidebarItemThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
sidebarIconClass: twMerge(theme.icon.base),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE');
const FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE');
const FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
const sidebarItemDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE,
useValue: undefined,
},
{
provide: FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE,
useValue: undefined,
},
{
provide: FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/sidebar/
*/
class SidebarItemComponent 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(SidebarItemThemeService);
/**
* The optional parent `SidebarItemGroupComponent`
*/
this.sidebarItemGroupComponent = inject(SidebarItemGroupComponent, { optional: true });
/**
* The optional parent `SidebarMenuComponent`
*/
this.sidebarMenuComponent = inject(SidebarMenuComponent, { optional: true });
//#region properties
/**
* Set the sidebar item icon
*
* @default undefined
*/
this.icon = model(inject(FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE));
/**
* Set the sidebar item color
*
* @default `SidebarItemGroupComponent`'s color
* @default `SidebarMenuComponent`'s color
*/
this.color = model((this.sidebarItemGroupComponent ?? this.sidebarMenuComponent).color());
/**
* Set the sidebar item label
*
* @default undefined
*/
this.label = model(inject(FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE));
/**
* Set the custom style for this sidebar item
*/
this.customStyle = model(inject(FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
icon: this.icon(),
color: this.color(),
label: this.label(),
customStyle: this.customStyle(),
});
}
//#endregion
/**
* Toggle sidebar menu visibility
*/
onClick() {
(this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.closeAll();
(this.sidebarMenuComponent || this.sidebarItemGroupComponent?.sidebarMenuComponent)?.sidebarComponent.toggleVisibility(false);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: SidebarItemComponent, isStandalone: true, selector: "flowbite-sidebar-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icon: "iconChange", color: "colorChange", label: "labelChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `
(icon()) {
<span
class="flex-shrink-0"
[innerHTML]="icon()! | sanitizeHtml"></span>
}
<span
[class]="contentClasses().sidebarIconClass"
[class.ml-3]="icon()">
<ng-content />
</span>
(label()) {
<flowbite-badge>{{ label() }}</flowbite-badge>
}
`, isInline: true, dependencies: [{ kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: BadgeComponent, selector: "flowbite-badge", inputs: ["color", "hasBorder", "size", "isIconOnly", "isPill", "customStyle", "isDismissable", "onDismiss"], outputs: ["colorChange", "hasBorderChange", "sizeChange", "isIconOnlyChange", "isPillChange", "customStyleChange", "isDismissableChange", "onDismissChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarItemComponent, decorators: [{
type: Component,
args: [{
standalone: true,
imports: [SanitizeHtmlPipe, BadgeComponent],
selector: 'flowbite-sidebar-item',
template: `
(icon()) {
<span
class="flex-shrink-0"
[innerHTML]="icon()! | sanitizeHtml"></span>
}
<span
[class]="contentClasses().sidebarIconClass"
[class.ml-3]="icon()">
<ng-content />
</span>
(label()) {
<flowbite-badge>{{ label() }}</flowbite-badge>
}
`,
host: {
'(click)': 'onClick()',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
const FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE');
const sidebarItemGroupDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/sidebar/
*/
class SidebarItemGroupComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injecteed used to generate class
*/
this.themeService = inject(SidebarItemGroupThemeService);
/**
* `IconRegistry` service
*/
this.iconRegistry = inject(IconRegistry);
/**
* `DomSanitizer` service
*/
this.domSanitizer = inject(DomSanitizer);
/**
* The parent `SidebarMenuComponent`
*/
this.sidebarMenuComponent = inject(SidebarMenuComponent);
/**
* List of `SidebarItemComponent`
*/
this.sidebarItemChildren = contentChildren(SidebarItemComponent);
//#region properties
/**
* Set if the sidebar item group is open
*
* @default One of children is active
* @default false
*/
this.isOpen = model(this.sidebarItemChildren().some((x) => x.flowbiteRouterLinkActive?.isActive() ?? false));
/**
* Set the sidebar item group color
*
* @default `SidebarMenuComponent`'s color
*/
this.color = model(this.sidebarMenuComponent.color());
/**
* Set the sidebar item group title
*/
this.title = model.required();
/**
* Set the custom style for this sidebar item group
*/
this.customStyle = model(inject(FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
color: this.color(),
customStyle: this.customStyle(),
});
}
init() {
this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON));
}
//#endregion
/**
* Toggle isOpen value
*
* @param isOpen If provided force 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: SidebarItemGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: SidebarItemGroupComponent, isStandalone: true, selector: "flowbite-sidebar-item-group", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", color: "colorChange", title: "titleChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "sidebarItemChildren", predicate: SidebarItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
<span
[class]="contentClasses().spanClass"
(click)="toggleVisibility()">
<h4>{{ title() }}</h4>
<flowbite-icon
svgIcon="flowbite-angular:chevron-down"
class="h-6 w-6 shrink-0 duration-200"
[class.rotate-180]="!isOpen()" />
</span>
(isOpen()) {
<ng-content />
}
`, 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: SidebarItemGroupComponent, decorators: [{
type: Component,
args: [{
standalone: true,
imports: [IconComponent],
selector: 'flowbite-sidebar-item-group',
template: `
<span
[class]="contentClasses().spanClass"
(click)="toggleVisibility()">
<h4>{{ title() }}</h4>
<flowbite-icon
svgIcon="flowbite-angular:chevron-down"
class="h-6 w-6 shrink-0 duration-200"
[class.rotate-180]="!isOpen()" />
</span>
(isOpen()) {
<ng-content />
}
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `SidebarMenuTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_SIDEBAR_MENU_THEME_TOKEN)
* ```
*/
const FLOWBITE_SIDEBAR_MENU_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_MENU_THEME_TOKEN');
class SidebarMenuThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_SIDEBAR_MENU_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.isOpen[properties.isOpen], properties.isOpen === 'enabled' && theme.root.displayMode[properties.displayMode], theme.root.color[properties.color]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarMenuThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarMenuThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarMenuThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE');
const sidebarMenuDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/sidebar/
*/
class SidebarMenuComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(SidebarMenuThemeService);
/**
* The parent `SidebarComponent`
*/
this.sidebarComponent = inject(SidebarComponent);
/**
* List of `SidebarItemGroupComponent`
*/
this.sidebarItemGroupChildren = contentChildren(SidebarItemGroupComponent);
/**
* List of `SidebarItemComponent`
*/
this.sidebarItemChildren = contentChildren(SidebarItemComponent);
//#region properties
/**
* Set the sidebar menu color
*
* @default `SidebarComponent`'s color
*/
this.color = model(this.sidebarComponent.color());
/**
* Set the custom style for this sidebar menu
*/
this.customStyle = model(inject(FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
fetchClass() {
return this.themeService.getClasses({
isOpen: booleanToFlowbiteBoolean(this.sidebarComponent.isOpen()),
color: this.color(),
displayMode: this.sidebarComponent.displayMode(),
customStyle: this.customStyle(),
});
}
/**
* Toggle visibility of ll children to false
*/
closeAll() {
this.sidebarItemGroupChildren().forEach((x) => x.toggleVisibility(false));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: SidebarMenuComponent, isStandalone: true, selector: "flowbite-sidebar-menu", 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" }, queries: [{ propertyName: "sidebarItemGroupChildren", predicate: SidebarItemGroupComponent, isSignal: true }, { propertyName: "sidebarItemChildren", predicate: SidebarItemComponent, 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: SidebarMenuComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-sidebar-menu',
template: '<ng-content />',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `SidebarPageContentTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN)
* ```
*/
const FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN');
class SidebarPageContentThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, properties.isOpen === 'enabled' && theme.root.displayMode[properties.displayMode]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarPageContentThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarPageContentThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarPageContentThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE');
const sidebarPageContentDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/sidebar/
*/
class SidebarPageContentComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(SidebarPageContentThemeService);
/**
* The parent `SidebarComponent`
*/
this.sidebarComponent = inject(SidebarComponent);
//#region properties
/**
* Set the custom style for this sidebar page content
*/
this.customStyle = model(inject(FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE));
}
//endregion
//region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
isOpen: booleanToFlowbiteBoolean(this.sidebarComponent.isOpen()),
displayMode: this.sidebarComponent.displayMode(),
customStyle: this.customStyle(),
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarPageContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: SidebarPageContentComponent, isStandalone: true, selector: "flowbite-sidebar-page-content", 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: SidebarPageContentComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-sidebar-page-content',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `SidebarTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_SIDEBAR_THEME_TOKEN)
* ```
*/
const FLOWBITE_SIDEBAR_THEME_TOKEN = new InjectionToken('FLOWBITE_SIDEBAR_THEME_TOKEN');
class SidebarThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_SIDEBAR_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.isRounded[properties.isRounded]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE');
const FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE');
const FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE');
const FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE');
const FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE');
const sidebarDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE,
useValue: 'primary',
},
{
provide: FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE,
useValue: 'push',
},
{
provide: FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/sidebar/
*/
class SidebarComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(SidebarThemeService);
/**
* The child `SidebarMenuComponent`
*/
this.sidebarMenuChild = contentChild.required(SidebarMenuComponent);
/**
* The child `SidebarPageContentComponent`
*/
this.sidebarPageContentChild = contentChild.required(SidebarPageContentComponent);
//#region properties
/**
* Set the sidebar color
*
* @default primary
*/
this.color = model(inject(FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE));
/**
* Set the sidebar display mode
*
* @default push
*/
this.displayMode = model(inject(FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE));
/**
* Set is the sidebar is open
*
* @default false
*/
this.isOpen = model(inject(FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE));
/**
* Set is the sidebar is rounded
*
* @default false
*/
this.isRounded = model(inject(FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE));
/**
* Set the custom style for this sidebar
*/
this.customStyle = model(inject(FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
displayMode: this.displayMode(),
isRounded: booleanToFlowbiteBoolean(this.isRounded()),
customStyle: this.customStyle(),
});
}
//#endregion
/**
* Toggle sidebar visibility
*
* @param isOpen If provided force 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: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: SidebarComponent, isStandalone: true, selector: "flowbite-sidebar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", 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 }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", displayMode: "displayModeChange", isOpen: "isOpenChange", isRounded: "isRoundedChange", customStyle: "customStyleChange" }, queries: [{ propertyName: "sidebarMenuChild", first: true, predicate: SidebarMenuComponent, descendants: true, isSignal: true }, { propertyName: "sidebarPageContentChild", first: true, predicate: SidebarPageContentComponent, 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: SidebarComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-sidebar',
template: `<ng-content />`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
const sidebarTheme = createTheme({
root: {
base: 'flex flex-row min-h-full',
isRounded: {
enabled: 'rounded',
disabled: '',
},
},
});
/**
* Default theme for `SidebarItemComponent`
*/
const sidebarItemTheme = createTheme({
root: {
base: 'group flex cursor-pointer items-center rounded-lg p-2 text-base font-normal text-gray-900 dark:text-white',
color: {
primary: 'aria-current:text-primary-500 dark:aria-current:text-primary-300 hover:bg-primary-200/35 dark:hover:bg-primary-700/35',
dark: 'aria-current:text-gray-500 dark:aria-current:text-gray-300 hover:bg-gray-200/35 dark:hover:bg-gray-700/35',
blue: 'aria-current:text-blue-500 dark:aria-current:text-blue-300 hover:bg-blue-200/35 dark:hover:bg-blue-700/35',
red: 'aria-current:text-red-500 dark:aria-current:text-red-300 hover:bg-red-200/35 dark:hover:bg-red-700/35',
green: 'aria-current:text-green-500 dark:aria-current:text-green-300 hover:bg-green-200/35 dark:hover:bg-green-700/35',
yellow: 'aria-current:text-yellow-500 dark:aria-current:text-yellow-300 hover:bg-yellow-200/35 dark:hover:bg-yellow-700/35',
},
},
icon: {
base: 'flex-1 whitespace-nowrap',
},
});
/**
* Default theme for `SidebarItemGroupComponent`
*/
const sidebarItemGroupTheme = createTheme({
root: {
base: 'flex flex-col py-2 font-semibold cursor-pointer',
},
spanText: {
base: 'flex flex-row justify-between m-2',
color: {
primary: 'text-primary-600',
dark: 'text-gray-600',
blue: 'text-blue-600',
red: 'text-red-600',
green: 'text-green-600',
yellow: 'text-yellow-600',
},
},
});
/**
* `InjectionToken` used to import `SidebarToggleTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN)
* ```
*/
const FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN = new InjectionToken('FLOWBITE_TOGGLE_SIDEBAR_THEME_TOKEN');
class SidebarToggleThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.color[properties.color], theme.root.size[properties.color]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarToggleThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarToggleThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarToggleThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE');
const FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE');
const FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE');
const sidebarToggleDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE,
useValue: 'primary',
},
{
provide: FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE,
useValue: 'sm',
},
{
provide: FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/sidebar/
*/
class SidebarToggleComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(SidebarToggleThemeService);
/**
* `IconRegistry` service
*/
this.iconRegistry = inject(IconRegistry);
/**
* `DomSanitizer` service
*/
this.domSanitizer = inject(DomSanitizer);
/**
* The `SidebarComponent` to use
*
* @default The injected `SidebarComponent`
*/
this.sidebarComponent = model(inject(SidebarComponent));
//#region properties
/**
* Set the sidebar toggle color
*
* @default primary
*/
this.color = model(inject(FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE));
/**
* Set the sidebar toggle size
*
* @default sm
*/
this.size = model(inject(FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE));
/**
* Set the custom style for this sidebar toggle
*/
this.customStyle = model(inject(FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
color: this.color(),
size: this.size(),
customStyle: this.customStyle(),
});
}
init() {
this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'tabs', this.domSanitizer.bypassSecurityTrustHtml(BARS_SVG_ICON));
}
//#endregion
/**
* Toggle sidebar visibility
*/
onClick() {
const isOpen = this.sidebarComponent().isOpen();
this.sidebarComponent().isOpen.set(!isOpen);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: SidebarToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: SidebarToggleComponent, isStandalone: true, selector: "flowbite-sidebar-toggle", inputs: { sidebarComponent: { classPropertyName: "sidebarComponent", publicName: "sidebarComponent", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidebarComponent: "sidebarComponentChange", color: "colorChange", size: "sizeChange", customStyle: "customStyleChange" }, host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0, template: `<flowbite-icon svgIcon="flowbite-angular:bars" />`, 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: SidebarToggleComponent, decorators: [{
type: Component,
args: [{
standalone: true,
imports: [IconComponent],
selector: 'flowbite-sidebar-toggle',
template: `<flowbite-icon svgIcon="flowbite-angular:bars" />`,
host: {
'(click)': 'onClick()',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* Default theme for `SidebarToggleComponent`
*/
const sidebarToggleTheme = createTheme({
root: {
base: 'cursor-pointer inline-flex items-center p-2 justify-center rounded-lg focus:outline-none focus:ring-2',
color: {
primary: 'text-primary-500 dark:text-primary-400 hover:bg-primary-100 dark:hover:bg-gray-700 focus:ring-primary-200 dark:focus:ring-primary-600',
dark: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-200 dark:focus:ring-gray-600',
blue: 'text-blue-500 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 focus:ring-blue-200 dark:focus:ring-blue-600',
red: 'text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-700 focus:ring-red-200 dark:focus:ring-red-600',
green: 'text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-700 focus:ring-green-200 dark:focus:ring-green-600',
yellow: 'text-yellow-500 dark:text-yellow-400 hover:bg-yellow-100 dark:hover:bg-yellow-700 focus:ring-yellow-200 dark:focus:ring-yellow-600',
},
size: {
sm: 'text-sm',
},
},
});
/**
* Default theme for `SidebarPageContentComponent`
*/
const sidebarPageContentTheme = createTheme({
root: {
base: 'flex flex-1',
displayMode: {
push: '',
over: '',
backdrop: 'sticky left-0 right-0 z-30 bg-gray-500 bg-opacity-50 blur-md',
},
},
});
/**
* Default theme for `SidebarMenuComponent`
*/
const sidebarMenuTheme = createTheme({
root: {
base: 'flex-col min-h-full overflow-y-auto shrink-0 pr-1 border-r bg-white dark:bg-gray-800',
displayMode: {
push: '',
over: 'sticky top-0 z-50',
backdrop: 'sticky top-0 z-50',
},
isOpen: {
enabled: 'flex',
disabled: 'hidden',
},
color: {
primary: 'border-primary-200 dark:border-primary-700',
dark: 'border-gray-200 dark:border-gray-800',
blue: 'border-blue-200 dark:border-blue-700',
red: 'border-red-200 dark:border-red-700',
green: 'border-green-200 dark:border-green-700',
yellow: 'border-yellow-200 dark:border-yellow-700',
},
},
});
/**
* Generated bundle index. Do not edit.
*/
export { FLOWBITE_SIDEBAR_COLOR_DEFAULT_VALUE, FLOWBITE_SIDEBAR_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_DISPLAY_MODE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_IS_OPEN_DEFAULT_VALUE, FLOWBITE_SIDEBAR_IS_ROUNDED_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_GROUP_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_GROUP_THEME_TOKEN, FLOWBITE_SIDEBAR_ITEM_ICON_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_LABEL_DEFAULT_VALUE, FLOWBITE_SIDEBAR_ITEM_THEME_TOKEN, FLOWBITE_SIDEBAR_MENU_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_MENU_THEME_TOKEN, FLOWBITE_SIDEBAR_PAGE_CONTENT_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_PAGE_CONTENT_THEME_TOKEN, FLOWBITE_SIDEBAR_THEME_TOKEN, FLOWBITE_SIDEBAR_TOGGLE_COLOR_DEFAULT_VALUE, FLOWBITE_SIDEBAR_TOGGLE_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_TOGGLE_SIZE_DEFAULT_VALUE, FLOWBITE_SIDEBAR_TOGGLE_THEME_TOKEN, SidebarComponent, SidebarItemComponent, SidebarItemGroupComponent, SidebarItemGroupThemeService, SidebarItemThemeService, SidebarMenuComponent, SidebarMenuThemeService, SidebarPageContentComponent, SidebarPageContentThemeService, SidebarThemeService, SidebarToggleComponent, SidebarToggleThemeService, sidebarDefaultValueProvider, sidebarItemDefaultValueProvider, sidebarItemGroupDefaultValueProvider, sidebarItemGroupTheme, sidebarItemTheme, sidebarMenuDefaultValueProvider, sidebarMenuTheme, sidebarPageContentDefaultValueProvider, sidebarPageContentTheme, sidebarTheme, sidebarToggleDefaultValueProvider, sidebarToggleTheme };
//# sourceMappingURL=flowbite-angular-sidebar.mjs.map