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
250 lines (241 loc) • 11.7 kB
JavaScript
import { mergeTheme, CHEVRON_RIGHT_SVG_ICON, createTheme } from 'flowbite-angular/utils';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChildren } from '@angular/core';
import { twMerge } from 'tailwind-merge';
import { BaseComponent } from 'flowbite-angular';
import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
import { DomSanitizer } from '@angular/platform-browser';
/**
* `InjectionToken` used to import `BreadcrumbItemTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN)
* ```
*/
const FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN');
class BreadcrumbItemThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN);
}
getClasses(properties) {
const theme = mergeTheme(this.baseTheme, properties.customStyle);
const output = {
rootClass: twMerge(theme.root.base, theme.root.color[properties.color]),
breadcrumbIconClass: twMerge(theme.icon.base),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbItemThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbItemThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE');
const breadcrumbItemDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/breadcrumb/
*/
class BreadcrumbItemComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(BreadcrumbItemThemeService);
/**
* The parent `BreadcrumbComponent`
*/
this.breadcrumbComponent = inject(BreadcrumbComponent);
/**
* Optional `FlowbiteRouterLinkDirective` injected
*/
this.flowbiteRouterLink = inject(FlowbiteRouterLinkDirective, { optional: true });
/**
* `IconRegistry` service
*/
this.iconRegistry = inject(IconRegistry);
/**
* `DomSanitizer` service
*/
this.domSanitizer = inject(DomSanitizer);
//#region properties
/**
* Set the breadcrumb item color
*
* @default `BreadcrumbComponent`'s color
*/
this.color = model(this.breadcrumbComponent.color());
/**
* Set the custom style for this breadcrumb item
*/
this.customStyle = model(inject(FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
color: this.color(),
link: this.flowbiteRouterLink?.routerLink.urlTree ?? null,
customStyle: this.customStyle(),
});
}
init() {
this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-right', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_RIGHT_SVG_ICON));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: BreadcrumbItemComponent, isStandalone: true, selector: "flowbite-breadcrumb-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" }, usesInheritance: true, ngImport: i0, template: `
<flowbite-icon
[class]="contentClasses().breadcrumbIconClass"
svgIcon="flowbite-angular:chevron-right" />
<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: BreadcrumbItemComponent, decorators: [{
type: Component,
args: [{
standalone: true,
imports: [IconComponent],
selector: 'flowbite-breadcrumb-item',
template: `
<flowbite-icon
[class]="contentClasses().breadcrumbIconClass"
svgIcon="flowbite-angular:chevron-right" />
<ng-content />
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* `InjectionToken` used to import `BreadcrumbTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_BREADCRUMB_THEME_TOKEN)
* ```
*/
const FLOWBITE_BREADCRUMB_THEME_TOKEN = new InjectionToken('FLOWBITE_BREADCRUMB_THEME_TOKEN');
class BreadcrumbThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_BREADCRUMB_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: BreadcrumbThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: BreadcrumbThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE');
const FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE');
const breadcrumbDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE,
useValue: 'primary',
},
{
provide: FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
]);
/**
* @see https://flowbite.com/docs/components/breadcrumb/
*/
class BreadcrumbComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(BreadcrumbThemeService);
/**
* List of `BreadcrumbItemComponent`
*/
this.breadcrumbItemChildren = contentChildren(BreadcrumbItemComponent);
//#region properties
/**
* Set the breacrumb color
*
* @default primary
*/
this.color = model(inject(FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE));
/**
* Set the custom style for this breadcrumb
*/
this.customStyle = model(inject(FLOWBITE_BREADCRUMB_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: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: BreadcrumbComponent, isStandalone: true, selector: "flowbite-breadcrumb", 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: { properties: { "attr.aria-label": "breadcrumb" } }, queries: [{ propertyName: "breadcrumbItemChildren", predicate: BreadcrumbItemComponent, 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: BreadcrumbComponent, decorators: [{
type: Component,
args: [{
standalone: true,
selector: 'flowbite-breadcrumb',
template: `<ng-content />`,
host: {
'[attr.aria-label]': 'breadcrumb',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* Default theme for `BreadcrumbComponent`
*/
const breadcrumbTheme = createTheme({
root: {
base: 'flex items-center',
},
});
/**
* Default theme for `BreadcrumbItemComponent`
*/
const breadcrumbItemTheme = createTheme({
root: {
base: 'group flex items-center text-sm font-medium cursor-pointer',
color: {
primary: 'text-primary-700 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-500',
dark: 'text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
blue: 'text-blue-700 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-500',
red: 'text-red-700 dark:text-red-400 hover:text-red-900 dark:hover:text-red-500',
green: 'text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-500',
yellow: 'text-yellow-700 dark:text-yellow-400 hover:text-yellow-900 dark:hover:text-yellow-500',
},
},
icon: {
base: 'mx-1 h-6 w-6 md:mx-2 group-first:hidden',
},
});
/**
* Generated bundle index. Do not edit.
*/
export { BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbItemThemeService, BreadcrumbThemeService, FLOWBITE_BREADCRUMB_COLOR_DEFAULT_VALUE, FLOWBITE_BREADCRUMB_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_BREADCRUMB_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_BREADCRUMB_ITEM_THEME_TOKEN, FLOWBITE_BREADCRUMB_THEME_TOKEN, breadcrumbDefaultValueProvider, breadcrumbItemDefaultValueProvider, breadcrumbItemTheme, breadcrumbTheme };
//# sourceMappingURL=flowbite-angular-breadcrumb.mjs.map