UNPKG

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

529 lines (514 loc) 23.6 kB
import { mergeTheme, CHEVRON_DOWN_SVG_ICON, createTheme } from 'flowbite-angular/utils'; import * as i0 from '@angular/core'; import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy, viewChild, contentChildren } from '@angular/core'; import { twMerge } from 'tailwind-merge'; import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular'; import { IconRegistry, IconComponent } from 'flowbite-angular/icon'; import { DomSanitizer } from '@angular/platform-browser'; /** * `InjectionToken` used to import `DropdownDividerTheme` value * * @example * ``` * var theme = inject(FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN) * ``` */ const FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN'); class DropdownDividerThemeService { constructor() { this.baseTheme = inject(FLOWBITE_DROPDOWN_DIVIDER_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: DropdownDividerThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownDividerThemeService, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownDividerThemeService, decorators: [{ type: Injectable, args: [{ providedIn: 'root', }] }] }); const FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE'); const dropdownDividerDefaultValueProvider = makeEnvironmentProviders([ { provide: FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE, useValue: {}, }, ]); /** * @see https://flowbite.com/docs/components/dropdowns/ */ class DropdownDividerComponent extends BaseComponent { constructor() { super(...arguments); /** * Service injected used to generate class */ this.themeService = inject(DropdownDividerThemeService); /** * The parent `DropdownComponent` */ this.dropdownComponent = inject(DropdownComponent); //#region properties /** * Set the custom style for this dropdown divider */ this.customStyle = model(inject(FLOWBITE_DROPDOWN_DIVIDER_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: DropdownDividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: DropdownDividerComponent, isStandalone: true, selector: "flowbite-dropdown-divider", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownDividerComponent, decorators: [{ type: Component, args: [{ standalone: true, selector: 'flowbite-dropdown-divider', template: ``, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }] }] }); /** * `InjectionToken` used to import `DropdownHeaderTheme` value * * @example * ``` * var theme = inject(FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN) * ``` */ const FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN'); class DropdownHeaderThemeService { constructor() { this.baseTheme = inject(FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN); } getClasses(properties) { const theme = mergeTheme(this.baseTheme, properties.customStyle); const output = { rootClass: twMerge(theme.root.base), root: twMerge(theme.content.base), }; return output; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownHeaderThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownHeaderThemeService, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownHeaderThemeService, decorators: [{ type: Injectable, args: [{ providedIn: 'root', }] }] }); const FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE'); const dropdownHeaderDefaultValueProvider = makeEnvironmentProviders([ { provide: FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE, useValue: {}, }, ]); /** * @see https://flowbite.com/docs/components/dropdowns/ */ class DropdownHeaderComponent extends BaseComponent { constructor() { super(...arguments); /** * Service injected used to generate class */ this.themeService = inject(DropdownHeaderThemeService); /** * The parent `DropdownComponent` */ this.dropdownComponent = inject(DropdownComponent); //#region properties /** * Set the custom style for this dropdown header */ this.customStyle = model(inject(FLOWBITE_DROPDOWN_HEADER_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: DropdownHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: DropdownHeaderComponent, isStandalone: true, selector: "flowbite-dropdown-header", inputs: { customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customStyle: "customStyleChange" }, usesInheritance: true, ngImport: i0, template: ` <div [class]="contentClasses().root"> <ng-content /> </div> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownHeaderComponent, decorators: [{ type: Component, args: [{ standalone: true, selector: 'flowbite-dropdown-header', template: ` <div [class]="contentClasses().root"> <ng-content /> </div> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }] }] }); /** * `InjectionToken` used to import `DropdownItemTheme` value * * @example * ``` * var theme = inject(FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN) * ``` */ const FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN'); class DropdownItemThemeService { constructor() { this.baseTheme = inject(FLOWBITE_DROPDOWN_ITEM_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: DropdownItemThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownItemThemeService, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownItemThemeService, decorators: [{ type: Injectable, args: [{ providedIn: 'root', }] }] }); const FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE'); const dropdownItemDefaultValueProvider = makeEnvironmentProviders([ { provide: FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, useValue: {}, }, ]); /** * @see https://flowbite.com/docs/components/dropdowns/ */ class DropdownItemComponent extends BaseComponent { constructor() { super(...arguments); /** * Service injected used to generate class */ this.themeService = inject(DropdownItemThemeService); /** * The parent `DropdownComponent` */ this.dropdownComponent = inject(DropdownComponent); //#region properties /** * Set the custom style for this dropdown item */ this.customStyle = model(inject(FLOWBITE_DROPDOWN_ITEM_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: DropdownItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.4", type: DropdownItemComponent, isStandalone: true, selector: "flowbite-dropdown-item", 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: DropdownItemComponent, decorators: [{ type: Component, args: [{ standalone: true, selector: 'flowbite-dropdown-item', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }] }] }); /** * `InjectionToken` used to import `DropdownTheme` value * * @example * ``` * var theme = inject(FLOWBITE_DROPDOWN_THEME_TOKEN) * ``` */ const FLOWBITE_DROPDOWN_THEME_TOKEN = new InjectionToken('FLOWBITE_DROPDOWN_THEME_TOKEN'); class DropdownThemeService { constructor() { this.baseTheme = inject(FLOWBITE_DROPDOWN_THEME_TOKEN); } getClasses(properties) { const theme = mergeTheme(this.baseTheme, properties.customStyle); const output = { rootClass: twMerge(theme.root.base), dropdownClass: twMerge(theme.dropdown.base), spanClass: twMerge(theme.span.base), containerClass: twMerge(theme.container.base, theme.container.isOpen[properties.isOpen], theme.container.placement[properties.placement]), contentClass: twMerge(theme.content.base), subContentClass: twMerge(theme.subContent.base), }; return output; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); } static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownThemeService, providedIn: 'root' }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownThemeService, decorators: [{ type: Injectable, args: [{ providedIn: 'root', }] }] }); const FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE'); const FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE'); const FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE'); const FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE'); const dropdownDefaultValueProvider = makeEnvironmentProviders([ { provide: FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE, useValue: 'Dropdown', }, { provide: FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE, useValue: false, }, { provide: FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE, useValue: 'bottom-center', }, { provide: FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE, useValue: {}, }, ]); /** * @see https://flowbite.com/docs/components/dropdowns/ */ class DropdownComponent extends BaseComponent { constructor() { super(...arguments); this.dropdown = viewChild.required('dropdown'); this.button = viewChild.required('button'); /** * Service injected used to generate class */ this.themeService = inject(DropdownThemeService); /** * `IconRegistry` service */ this.iconRegistry = inject(IconRegistry); /** * `DomSanitizer` service */ this.domSanitizer = inject(DomSanitizer); /** * List of `DropdownItemComponent` */ this.dropdownItemChildren = contentChildren(DropdownItemComponent); /** * List of `DropdownHeaderComponent` */ this.dropdownHeaderChildren = contentChildren(DropdownHeaderComponent); /** * List of `DropdownDividerComponent` */ this.dropdownDividerChildren = contentChildren(DropdownDividerComponent); //#region properties /** * Set the dropdown label * * @default Dropdown */ this.label = model(inject(FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE)); /** * Set if the dropdown is open * * @default false */ this.isOpen = model(inject(FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE)); /** * Set the dropdown position * * @default bottom-center */ this.position = model(inject(FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE)); /** * Set the custom style for this dropdown */ this.customStyle = model(inject(FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE)); } //#endregion //#region BaseComponent implementation fetchClass() { return this.themeService.getClasses({ label: this.label(), isOpen: booleanToFlowbiteBoolean(this.isOpen()), placement: this.position(), customStyle: this.customStyle(), }); } init() { this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'chevron-down', this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON)); } //#endregion /** * Toggle dropdown isOpen */ toggle() { this.isOpen.set(!this.isOpen()); } // Onclick outside the dropdown, close it clickout(event) { if (!this.dropdown().nativeElement.contains(event.target) && this.isOpen() && !this.button().nativeElement.contains(event.target)) { this.isOpen.set(false); } } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.4", type: DropdownComponent, isStandalone: true, selector: "flowbite-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { label: "labelChange", isOpen: "isOpenChange", position: "positionChange", customStyle: "customStyleChange" }, host: { listeners: { "document:click": "clickout($event)" } }, queries: [{ propertyName: "dropdownItemChildren", predicate: DropdownItemComponent, isSignal: true }, { propertyName: "dropdownHeaderChildren", predicate: DropdownHeaderComponent, isSignal: true }, { propertyName: "dropdownDividerChildren", predicate: DropdownDividerComponent, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <button type="button" [class]="contentClasses().dropdownClass" (click)="toggle()" #button> <span [class]="contentClasses().spanClass"> {{ label() }} <flowbite-icon svgIcon="flowbite-angular:chevron-down" class="ml-2 h-4 w-4" /> </span> </button> <div [class]="contentClasses().containerClass" #dropdown [style.display]="isOpen() ? 'block' : 'none'" [style.minWidth.px]="button.clientWidth"> <div [class]="contentClasses().contentClass"> <ul [class]="contentClasses().subContentClass"> <ng-content /> </ul> </div> </div> `, 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: DropdownComponent, decorators: [{ type: Component, args: [{ standalone: true, imports: [IconComponent], selector: 'flowbite-dropdown', template: ` <button type="button" [class]="contentClasses().dropdownClass" (click)="toggle()" #button> <span [class]="contentClasses().spanClass"> {{ label() }} <flowbite-icon svgIcon="flowbite-angular:chevron-down" class="ml-2 h-4 w-4" /> </span> </button> <div [class]="contentClasses().containerClass" #dropdown [style.display]="isOpen() ? 'block' : 'none'" [style.minWidth.px]="button.clientWidth"> <div [class]="contentClasses().contentClass"> <ul [class]="contentClasses().subContentClass"> <ng-content /> </ul> </div> </div> `, host: { '(document:click)': 'clickout($event)', }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }] }] }); /** * Default theme for `DropdownComponent` */ const dropdownTheme = createTheme({ root: { base: 'relative inline w-fit', }, dropdown: { base: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 dark:disabled:hover:bg-blue-600 group flex h-min items-center justify-center p-0.5 text-center font-medium focus:z-10 rounded-lg', }, span: { base: 'flex items-center rounded-md text-sm px-4 py-2', }, container: { base: 'z-10 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 min-w-fit absolute', isOpen: { enabled: 'block', disabled: 'hidden', }, placement: { 'top-center': 'bottom-full mb-2.5 left-1/2 -translate-x-1/2', 'bottom-center': 'top-full mt-2.5 left-1/2 -translate-x-1/2', 'left-center': 'left-full ml-2.5 top-1/2 -translate-y-1/2', 'right-center': 'right-full mr-2.5 top-1/2 -translate-y-1/2', }, }, content: { base: 'py-1 text-sm text-gray-700 dark:text-gray-200 shadow-md', }, subContent: { base: 'py-1', }, }); /** * Default theme value for `DropdownItemComponent` */ const dropdownItemTheme = { root: { base: 'flex items-center justify-start py-2 px-4 text-sm text-gray-700 cursor-pointer hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white', }, }; /** * Default theme for `DropdownDividerComponent` */ const dropdownDividerTheme = createTheme({ root: { base: 'block my-1 h-px bg-gray-100 dark:bg-gray-600', }, }); /** * Default theme for `DropdownHeaderComponent` */ const dropdownHeaderTheme = createTheme({ root: { base: '', }, content: { base: 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200', }, }); /** * Generated bundle index. Do not edit. */ export { DropdownComponent, DropdownDividerComponent, DropdownDividerThemeService, DropdownHeaderComponent, DropdownHeaderThemeService, DropdownItemComponent, DropdownItemThemeService, DropdownThemeService, FLOWBITE_DROPDOWN_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_DIVIDER_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_DIVIDER_THEME_TOKEN, FLOWBITE_DROPDOWN_HEADER_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_HEADER_THEME_TOKEN, FLOWBITE_DROPDOWN_IS_OPEN_DEFAULT_VALUE, FLOWBITE_DROPDOWN_ITEM_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_DROPDOWN_ITEM_THEME_TOKEN, FLOWBITE_DROPDOWN_LABEL_DEFAULT_VALUE, FLOWBITE_DROPDOWN_POSITION_DEFAULT_VALUE, FLOWBITE_DROPDOWN_THEME_TOKEN, dropdownDefaultValueProvider, dropdownDividerDefaultValueProvider, dropdownDividerTheme, dropdownHeaderDefaultValueProvider, dropdownHeaderTheme, dropdownItemDefaultValueProvider, dropdownItemTheme, dropdownTheme }; //# sourceMappingURL=flowbite-angular-dropdown.mjs.map