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
284 lines (278 loc) • 13.7 kB
JavaScript
import { mergeTheme, CLOSE_SVG_ICON, createTheme } from 'flowbite-angular/utils';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { twMerge } from 'tailwind-merge';
import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
import { IconRegistry, IconComponent } from 'flowbite-angular/icon';
import { trigger, transition, style, animate } from '@angular/animations';
import { NgTemplateOutlet } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
/**
* `InjectionToken` used to import `AlertTheme` value
*
* @example
* ```
* var theme = inject(FLOWBITE_ALERT_THEME_TOKEN)
* ```
*/
const FLOWBITE_ALERT_THEME_TOKEN = new InjectionToken('FLOWBITE_ALERT_THEME_TOKEN');
class AlertThemeService {
constructor() {
this.baseTheme = inject(FLOWBITE_ALERT_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.hasBorder[properties.hasBorder], theme.root.hasBorderAccent[properties.hasBorderAccent]),
closeButtonClass: twMerge(theme.closeButton.base, theme.closeButton.color[properties.color]),
};
return output;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AlertThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AlertThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AlertThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const FLOWBITE_ALERT_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_COLOR_DEFAULT_VALUE');
const FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE');
const FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE');
const FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE');
const FLOWBITE_ALERT_ICON_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_ICON_DEFAULT_VALUE');
const FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE');
const FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE');
const FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE = new InjectionToken('FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE');
const alertDefaultValueProvider = makeEnvironmentProviders([
{
provide: FLOWBITE_ALERT_COLOR_DEFAULT_VALUE,
useValue: 'primary',
},
{
provide: FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE,
useValue: {},
},
{
provide: FLOWBITE_ALERT_ICON_DEFAULT_VALUE,
useValue: null,
},
{
provide: FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE,
useValue: null,
},
{
provide: FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE,
useValue: false,
},
{
provide: FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE,
useValue: undefined,
},
]);
/**
* @see https://flowbite.com/docs/components/alerts/
*/
class AlertComponent extends BaseComponent {
constructor() {
super(...arguments);
/**
* Service injected used to generate class
*/
this.themeService = inject(AlertThemeService);
/**
* `IcoRegistry` service
*/
this.iconRegistry = inject(IconRegistry);
/**
* `DomSanitizer` service
*/
this.domSanitizer = inject(DomSanitizer);
//#region properties
/**
* Set the indicator color
*
* @default primary
*/
this.color = model(inject(FLOWBITE_ALERT_COLOR_DEFAULT_VALUE));
/**
* Set if the alert has border
*
* @default false
*/
this.hasBorder = model(inject(FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE));
/**
* Set if the alert has border accent
*
* @default false
*/
this.hasBorderAccent = model(inject(FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE));
/**
* Set the custom style for this alert
*/
this.customStyle = model(inject(FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE));
/**
* Set the custom icon
*
* @default null
*/
this.icon = model(inject(FLOWBITE_ALERT_ICON_DEFAULT_VALUE));
/**
* Set the additional content
*
* @default null
*/
this.additionalContent = model(inject(FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE));
/**
* Set if the alert is dismissable
*
* @default false
*/
this.isDismissable = model(inject(FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE));
/**
* Set the function called when the alert is dismissed
*
* @default undefined
*/
this.onDismiss = model(inject(FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE));
}
//#endregion
//#region BaseComponent implementation
fetchClass() {
return this.themeService.getClasses({
color: this.color(),
hasBorder: booleanToFlowbiteBoolean(this.hasBorder()),
hasBorderAccent: booleanToFlowbiteBoolean(this.hasBorderAccent()),
customStyle: this.customStyle(),
});
}
init() {
this.iconRegistry.addRawSvgIconInNamepsace('flowbite-angular', 'close', this.domSanitizer.bypassSecurityTrustHtml(CLOSE_SVG_ICON));
}
//#endregion
/**
* Call the onDismiss function if it's not undefined
*/
onDismissClick() {
const func = this.onDismiss();
if (func)
func();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: AlertComponent, isStandalone: true, selector: "flowbite-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hasBorder: { classPropertyName: "hasBorder", publicName: "hasBorder", isSignal: true, isRequired: false, transformFunction: null }, hasBorderAccent: { classPropertyName: "hasBorderAccent", publicName: "hasBorderAccent", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, additionalContent: { classPropertyName: "additionalContent", publicName: "additionalContent", isSignal: true, isRequired: false, transformFunction: null }, isDismissable: { classPropertyName: "isDismissable", publicName: "isDismissable", isSignal: true, isRequired: false, transformFunction: null }, onDismiss: { classPropertyName: "onDismiss", publicName: "onDismiss", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", hasBorder: "hasBorderChange", hasBorderAccent: "hasBorderAccentChange", customStyle: "customStyleChange", icon: "iconChange", additionalContent: "additionalContentChange", isDismissable: "isDismissableChange", onDismiss: "onDismissChange" }, host: { properties: { "attr.role": "alert", "@onDestroyAnimation": "" } }, usesInheritance: true, ngImport: i0, template: `
<div class="flex items-center">
<ng-container [ngTemplateOutlet]="icon()"></ng-container>
<div>
<ng-content />
</div>
(isDismissable()) {
<button
type="button"
[class]="contentClasses()!.closeButtonClass"
aria-label="Close"
(click)="onDismissClick()">
<span class="sr-only">Close</span>
<flowbite-icon
svgIcon="flowbite-angular:close"
class="h-5 w-5" />
</button>
}
</div>
<ng-container [ngTemplateOutlet]="additionalContent()"></ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "flowbite-icon", inputs: ["svgIcon"], outputs: ["svgIconChange"] }], animations: [
trigger('onDestroyAnimation', [
transition(':enter', [style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))]),
transition(':leave', [animate('300ms', style({ opacity: 0 }))]),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{
standalone: true,
imports: [NgTemplateOutlet, IconComponent],
selector: 'flowbite-alert',
template: `
<div class="flex items-center">
<ng-container [ngTemplateOutlet]="icon()"></ng-container>
<div>
<ng-content />
</div>
(isDismissable()) {
<button
type="button"
[class]="contentClasses()!.closeButtonClass"
aria-label="Close"
(click)="onDismissClick()">
<span class="sr-only">Close</span>
<flowbite-icon
svgIcon="flowbite-angular:close"
class="h-5 w-5" />
</button>
}
</div>
<ng-container [ngTemplateOutlet]="additionalContent()"></ng-container>
`,
host: {
'[attr.role]': 'alert',
'[@onDestroyAnimation]': '',
},
animations: [
trigger('onDestroyAnimation', [
transition(':enter', [style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))]),
transition(':leave', [animate('300ms', style({ opacity: 0 }))]),
]),
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
/**
* Default theme for `AlertComponent`
*/
const alertTheme = createTheme({
root: {
base: 'flex flex-col gap-2 p-4 text-sm rounded-lg',
color: {
primary: 'text-primary-800 dark:text-primary-400 bg-primary-50 dark:bg-gray-800 border-primary-300 dark:border-primary-800',
dark: 'text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600',
blue: 'text-blue-800 dark:text-blue-400 bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-800',
red: 'text-red-800 dark:text-red-400 bg-red-100 dark:bg-gray-800 border-red-300 dark:border-red-800',
green: 'text-green-800 dark:text-green-400 bg-green-100 dark:bg-gray-800 border-green-300 dark:border-green-800',
yellow: 'text-yellow-800 dark:text-yellow-300 bg-yellow-100 dark:bg-gray-800 border-yellow-300 dark:border-yellow-800',
},
hasBorder: {
enabled: 'border',
disabled: 'border-0',
},
hasBorderAccent: {
enabled: 'border-t-4',
disabled: '',
},
},
closeButton: {
base: '-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2',
color: {
primary: 'text-primary-500 dark:text-primary-600 hover:bg-primary-200 dark:hover:bg-primary-300',
dark: 'text-gray-500 dark:text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-300',
blue: 'text-blue-500 dark:text-blue-600 hover:bg-blue-200 dark:hover:bg-blue-300',
red: 'text-red-500 dark:text-red-600 hover:bg-red-200 dark:hover:bg-red-300',
green: 'text-green-500 dark:text-green-600 hover:bg-green-200 dark:hover:bg-green-300',
yellow: 'text-yellow-500 dark:text-yellow-600 hover:bg-yellow-200 dark:hover:bg-yellow-300',
},
},
});
/**
* Generated bundle index. Do not edit.
*/
export { AlertComponent, AlertThemeService, FLOWBITE_ALERT_ADDITIONAL_CONTENT_DEFAULT_VALUE, FLOWBITE_ALERT_COLOR_DEFAULT_VALUE, FLOWBITE_ALERT_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_ALERT_HAS_BORDER_ACCENT_DEFAULT_VALUE, FLOWBITE_ALERT_HAS_BORDER_DEFAULT_VALUE, FLOWBITE_ALERT_ICON_DEFAULT_VALUE, FLOWBITE_ALERT_IS_DISMISSABLE_DEFAULT_VALUE, FLOWBITE_ALERT_ON_DISMISS_DEFAULT_VALUE, FLOWBITE_ALERT_THEME_TOKEN, alertDefaultValueProvider, alertTheme };
//# sourceMappingURL=flowbite-angular-alert.mjs.map