@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
66 lines • 11.9 kB
JavaScript
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, inject, Input, Output } from '@angular/core';
import { ColorService } from '../../services/color/index';
import { AlertIconDirective } from './alert-icon.directive';
import * as i0 from "@angular/core";
import * as i1 from "../../directives/accessibility/focus-indicator/focus-indicator.directive";
import * as i2 from "../icon/icon.component";
export class AlertComponent {
constructor() {
this.colorService = inject(ColorService);
/** Determine the style of the alert */
this.type = 'info';
/** Determine the the alert can be dismissed */
this.dismissible = false;
/** Define a custom aria label for the dismiss button */
this.dismissAriaLabel = 'Dismiss Alert';
/** Emit when the dismiss button is pressed */
this.dismiss = new EventEmitter();
}
/** Resolve the background color from the color set */
get _backgroundColor() {
return this.backgroundColor ? this.getColor(this.backgroundColor) : null;
}
/** Resolve the foreground color from the color set */
get _foregroundColor() {
return this.foregroundColor ? this.getColor(this.foregroundColor) : null;
}
/** Determine if we are using a prefined type or custom colors */
get _isCustomColor() {
return !!this.backgroundColor && !!this.foregroundColor;
}
getColor(color) {
// check if it is a color name from the color palette or just return the CSS color value
return this.colorService.resolve(color);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: AlertComponent, selector: "ux-alert", inputs: { type: "type", dismissible: "dismissible", backgroundColor: "backgroundColor", foregroundColor: "foregroundColor", dismissAriaLabel: "dismissAriaLabel" }, outputs: { dismiss: "dismiss" }, host: { attributes: { "role": "alert" }, properties: { "class.ux-alert-info": "type === \"info\" && !_isCustomColor", "class.ux-alert-error": "type === \"error\" && !_isCustomColor", "class.ux-alert-warning": "type === \"warning\" && !_isCustomColor", "class.ux-alert-success": "type === \"success\" && !_isCustomColor", "class.ux-alert-dark": "type === \"dark\" && !_isCustomColor", "style.background-color": "_backgroundColor", "style.color": "_foregroundColor" } }, queries: [{ propertyName: "icon", first: true, predicate: AlertIconDirective, descendants: true }], ngImport: i0, template: "@if (icon) {\n <div class=\"alert-icon\">\n <ng-content select=\"[uxAlertIcon]\"></ng-content>\n </div>\n}\n\n<div class=\"alert-content\">\n <ng-content></ng-content>\n</div>\n\n@if (dismissible) {\n <button\n uxFocusIndicator\n class=\"alert-close\"\n type=\"button\"\n (click)=\"dismiss.emit()\"\n [attr.aria-label]=\"dismissAriaLabel\">\n <ux-icon name=\"close\" class=\"alert-close-icon\"></ux-icon>\n </button>\n}\n", dependencies: [{ kind: "directive", type: i1.FocusIndicatorDirective, selector: "[uxFocusIndicator]", inputs: ["checkChildren", "mouseFocusIndicator", "touchFocusIndicator", "keyboardFocusIndicator", "programmaticFocusIndicator"], outputs: ["indicator"], exportAs: ["ux-focus-indicator"] }, { kind: "component", type: i2.IconComponent, selector: "ux-icon", inputs: ["name", "size", "rotate", "flipHorizontal", "flipVertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-alert', changeDetection: ChangeDetectionStrategy.OnPush, host: {
'role': 'alert',
'[class.ux-alert-info]': 'type === "info" && !_isCustomColor',
'[class.ux-alert-error]': 'type === "error" && !_isCustomColor',
'[class.ux-alert-warning]': 'type === "warning" && !_isCustomColor',
'[class.ux-alert-success]': 'type === "success" && !_isCustomColor',
'[class.ux-alert-dark]': 'type === "dark" && !_isCustomColor',
'[style.background-color]': '_backgroundColor',
'[style.color]': '_foregroundColor'
}, template: "@if (icon) {\n <div class=\"alert-icon\">\n <ng-content select=\"[uxAlertIcon]\"></ng-content>\n </div>\n}\n\n<div class=\"alert-content\">\n <ng-content></ng-content>\n</div>\n\n@if (dismissible) {\n <button\n uxFocusIndicator\n class=\"alert-close\"\n type=\"button\"\n (click)=\"dismiss.emit()\"\n [attr.aria-label]=\"dismissAriaLabel\">\n <ux-icon name=\"close\" class=\"alert-close-icon\"></ux-icon>\n </button>\n}\n" }]
}], propDecorators: { type: [{
type: Input
}], dismissible: [{
type: Input
}], backgroundColor: [{
type: Input
}], foregroundColor: [{
type: Input
}], dismissAriaLabel: [{
type: Input
}], dismiss: [{
type: Output
}], icon: [{
type: ContentChild,
args: [AlertIconDirective, { static: false }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYWxlcnQvYWxlcnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYWxlcnQvYWxlcnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RILE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7OztBQWlCNUQsTUFBTSxPQUFPLGNBQWM7SUFmM0I7UUFpQnFCLGlCQUFZLEdBQUcsTUFBTSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBRXJELHVDQUF1QztRQUM5QixTQUFJLEdBQWMsTUFBTSxDQUFDO1FBRWxDLCtDQUErQztRQUN0QyxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQVF0Qyx3REFBd0Q7UUFDL0MscUJBQWdCLEdBQVcsZUFBZSxDQUFDO1FBRXBELDhDQUE4QztRQUNwQyxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQXlCaEQ7SUFwQkcsc0RBQXNEO0lBQ3RELElBQUksZ0JBQWdCO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUM3RSxDQUFDO0lBRUQsc0RBQXNEO0lBQ3RELElBQUksZ0JBQWdCO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUM3RSxDQUFDO0lBRUQsaUVBQWlFO0lBQ2pFLElBQUksY0FBYztRQUNkLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxlQUFlLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUM7SUFDNUQsQ0FBQztJQUVPLFFBQVEsQ0FBQyxLQUFhO1FBQzFCLHdGQUF3RjtRQUN4RixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzVDLENBQUM7K0dBM0NRLGNBQWM7bUdBQWQsY0FBYyw0dUJBdUJULGtCQUFrQixnREMxQ3BDLGljQW9CQTs7NEZERGEsY0FBYztrQkFmMUIsU0FBUzsrQkFDSSxVQUFVLG1CQUVILHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsTUFBTSxFQUFFLE9BQU87d0JBQ2YsdUJBQXVCLEVBQUUsb0NBQW9DO3dCQUM3RCx3QkFBd0IsRUFBRSxxQ0FBcUM7d0JBQy9ELDBCQUEwQixFQUFFLHVDQUF1Qzt3QkFDbkUsMEJBQTBCLEVBQUUsdUNBQXVDO3dCQUNuRSx1QkFBdUIsRUFBRSxvQ0FBb0M7d0JBQzdELDBCQUEwQixFQUFFLGtCQUFrQjt3QkFDOUMsZUFBZSxFQUFFLGtCQUFrQjtxQkFDdEM7OEJBT1EsSUFBSTtzQkFBWixLQUFLO2dCQUdHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBR0csZUFBZTtzQkFBdkIsS0FBSztnQkFHRyxlQUFlO3NCQUF2QixLQUFLO2dCQUdHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFHSSxPQUFPO3NCQUFoQixNQUFNO2dCQUc4QyxJQUFJO3NCQUF4RCxZQUFZO3VCQUFDLGtCQUFrQixFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgRXZlbnRFbWl0dGVyLCBpbmplY3QsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbG9yU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2NvbG9yL2luZGV4JztcbmltcG9ydCB7IEFsZXJ0SWNvbkRpcmVjdGl2ZSB9IGZyb20gJy4vYWxlcnQtaWNvbi5kaXJlY3RpdmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3V4LWFsZXJ0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQuY29tcG9uZW50Lmh0bWwnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ3JvbGUnOiAnYWxlcnQnLFxuICAgICAgICAnW2NsYXNzLnV4LWFsZXJ0LWluZm9dJzogJ3R5cGUgPT09IFwiaW5mb1wiICYmICFfaXNDdXN0b21Db2xvcicsXG4gICAgICAgICdbY2xhc3MudXgtYWxlcnQtZXJyb3JdJzogJ3R5cGUgPT09IFwiZXJyb3JcIiAmJiAhX2lzQ3VzdG9tQ29sb3InLFxuICAgICAgICAnW2NsYXNzLnV4LWFsZXJ0LXdhcm5pbmddJzogJ3R5cGUgPT09IFwid2FybmluZ1wiICYmICFfaXNDdXN0b21Db2xvcicsXG4gICAgICAgICdbY2xhc3MudXgtYWxlcnQtc3VjY2Vzc10nOiAndHlwZSA9PT0gXCJzdWNjZXNzXCIgJiYgIV9pc0N1c3RvbUNvbG9yJyxcbiAgICAgICAgJ1tjbGFzcy51eC1hbGVydC1kYXJrXSc6ICd0eXBlID09PSBcImRhcmtcIiAmJiAhX2lzQ3VzdG9tQ29sb3InLFxuICAgICAgICAnW3N0eWxlLmJhY2tncm91bmQtY29sb3JdJzogJ19iYWNrZ3JvdW5kQ29sb3InLFxuICAgICAgICAnW3N0eWxlLmNvbG9yXSc6ICdfZm9yZWdyb3VuZENvbG9yJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgQWxlcnRDb21wb25lbnQge1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBjb2xvclNlcnZpY2UgPSBpbmplY3QoQ29sb3JTZXJ2aWNlKTtcblxuICAgIC8qKiBEZXRlcm1pbmUgdGhlIHN0eWxlIG9mIHRoZSBhbGVydCAqL1xuICAgIEBJbnB1dCgpIHR5cGU6IEFsZXJ0VHlwZSA9ICdpbmZvJztcblxuICAgIC8qKiBEZXRlcm1pbmUgdGhlIHRoZSBhbGVydCBjYW4gYmUgZGlzbWlzc2VkICovXG4gICAgQElucHV0KCkgZGlzbWlzc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIC8qKiBEZWZpbmUgYSBjdXN0b20gYmFja2dyb3VuZCBjb2xvciAqL1xuICAgIEBJbnB1dCgpIGJhY2tncm91bmRDb2xvcjogc3RyaW5nO1xuXG4gICAgLyoqIERlZmluZSBhIGN1c3RvbSBmb3JlZ3JvdW5kIGNvbG9yICovXG4gICAgQElucHV0KCkgZm9yZWdyb3VuZENvbG9yOiBzdHJpbmc7XG5cbiAgICAvKiogRGVmaW5lIGEgY3VzdG9tIGFyaWEgbGFiZWwgZm9yIHRoZSBkaXNtaXNzIGJ1dHRvbiAqL1xuICAgIEBJbnB1dCgpIGRpc21pc3NBcmlhTGFiZWw6IHN0cmluZyA9ICdEaXNtaXNzIEFsZXJ0JztcblxuICAgIC8qKiBFbWl0IHdoZW4gdGhlIGRpc21pc3MgYnV0dG9uIGlzIHByZXNzZWQgKi9cbiAgICBAT3V0cHV0KCkgZGlzbWlzcyA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICAgIC8qKiBJZGVudGlmeSBpZiB3ZSBoYXZlIGFuIGljb24gKi9cbiAgICBAQ29udGVudENoaWxkKEFsZXJ0SWNvbkRpcmVjdGl2ZSwgeyBzdGF0aWM6IGZhbHNlIH0pIGljb246IEFsZXJ0SWNvbkRpcmVjdGl2ZTtcblxuICAgIC8qKiBSZXNvbHZlIHRoZSBiYWNrZ3JvdW5kIGNvbG9yIGZyb20gdGhlIGNvbG9yIHNldCAqL1xuICAgIGdldCBfYmFja2dyb3VuZENvbG9yKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLmJhY2tncm91bmRDb2xvciA/IHRoaXMuZ2V0Q29sb3IodGhpcy5iYWNrZ3JvdW5kQ29sb3IpIDogbnVsbDtcbiAgICB9XG5cbiAgICAvKiogUmVzb2x2ZSB0aGUgZm9yZWdyb3VuZCBjb2xvciBmcm9tIHRoZSBjb2xvciBzZXQgKi9cbiAgICBnZXQgX2ZvcmVncm91bmRDb2xvcigpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5mb3JlZ3JvdW5kQ29sb3IgPyB0aGlzLmdldENvbG9yKHRoaXMuZm9yZWdyb3VuZENvbG9yKSA6IG51bGw7XG4gICAgfVxuXG4gICAgLyoqIERldGVybWluZSBpZiB3ZSBhcmUgdXNpbmcgYSBwcmVmaW5lZCB0eXBlIG9yIGN1c3RvbSBjb2xvcnMgKi9cbiAgICBnZXQgX2lzQ3VzdG9tQ29sb3IoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiAhIXRoaXMuYmFja2dyb3VuZENvbG9yICYmICEhdGhpcy5mb3JlZ3JvdW5kQ29sb3I7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBnZXRDb2xvcihjb2xvcjogc3RyaW5nKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgICAgIC8vIGNoZWNrIGlmIGl0IGlzIGEgY29sb3IgbmFtZSBmcm9tIHRoZSBjb2xvciBwYWxldHRlIG9yIGp1c3QgcmV0dXJuIHRoZSBDU1MgY29sb3IgdmFsdWVcbiAgICAgICAgcmV0dXJuIHRoaXMuY29sb3JTZXJ2aWNlLnJlc29sdmUoY29sb3IpO1xuICAgIH1cblxufVxuXG5leHBvcnQgdHlwZSBBbGVydFR5cGUgPSAnaW5mbycgfCAnZXJyb3InIHwgJ3dhcm5pbmcnIHwgJ3N1Y2Nlc3MnIHwgJ2RhcmsnOyIsIkBpZiAoaWNvbikge1xuICA8ZGl2IGNsYXNzPVwiYWxlcnQtaWNvblwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlt1eEFsZXJ0SWNvbl1cIj48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxufVxuXG48ZGl2IGNsYXNzPVwiYWxlcnQtY29udGVudFwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48L2Rpdj5cblxuQGlmIChkaXNtaXNzaWJsZSkge1xuICA8YnV0dG9uXG4gICAgdXhGb2N1c0luZGljYXRvclxuICAgIGNsYXNzPVwiYWxlcnQtY2xvc2VcIlxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgIChjbGljayk9XCJkaXNtaXNzLmVtaXQoKVwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbF09XCJkaXNtaXNzQXJpYUxhYmVsXCI+XG4gICAgPHV4LWljb24gbmFtZT1cImNsb3NlXCIgY2xhc3M9XCJhbGVydC1jbG9zZS1pY29uXCI+PC91eC1pY29uPlxuICA8L2J1dHRvbj5cbn1cbiJdfQ==