design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
71 lines • 11.2 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ItAbstractComponent } from '../../../abstracts/abstract.component';
import { Alert } from 'bootstrap-italia';
import { TranslateModule } from '@ngx-translate/core';
import { ItIconComponent } from '../../utils/icon/icon.component';
import { inputToBoolean } from '../../../utils/coercion';
import * as i0 from "@angular/core";
import * as i1 from "@ngx-translate/core";
/**
* Alert
* @description You can provide feedback to the user via alert messages.
*/
export class ItAlertComponent extends ItAbstractComponent {
constructor() {
super(...arguments);
/**
* The alert color
* @default info
*/
this.color = 'info';
/**
* This event fires immediately when the instance's close method is called.
*/
this.closeEvent = new EventEmitter();
/**
* This event fires when the alert has been closed (it will wait for CSS transitions to complete).
*/
this.closedEvent = new EventEmitter();
}
ngAfterViewInit() {
super.ngAfterViewInit();
if (this.alertElement) {
const element = this.alertElement.nativeElement;
this.alert = Alert.getOrCreateInstance(element);
element.addEventListener('close.bs.alert', event => this.closeEvent.emit(event));
element.addEventListener('closed.bs.alert', event => this.closedEvent.emit(event));
}
}
/**
* Close an alert by removing it from the DOM.
* If the `.fade` and `.show` classes are present in the element, the alert will be closed with a disappearing effect.
*/
close() {
this.alert?.close();
}
/**
* The alert is removed
*/
dispose() {
this.alert?.dispose();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div\n #alertElement\n class=\"alert alert-{{ color }}\"\n [class.alert-dismissible]=\"dismissible\"\n [class.fade]=\"dismissible\"\n [class.show]=\"dismissible\"\n role=\"alert\">\n <h4 class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n </h4>\n\n <ng-content></ng-content>\n\n @if (dismissible) {\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent], template: "<div\n #alertElement\n class=\"alert alert-{{ color }}\"\n [class.alert-dismissible]=\"dismissible\"\n [class.fade]=\"dismissible\"\n [class.show]=\"dismissible\"\n role=\"alert\">\n <h4 class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n </h4>\n\n <ng-content></ng-content>\n\n @if (dismissible) {\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n <it-icon name=\"close\"></it-icon>\n </button>\n }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
}], propDecorators: { color: [{
type: Input
}], dismissible: [{
type: Input,
args: [{ transform: inputToBoolean }]
}], closeEvent: [{
type: Output
}], closedEvent: [{
type: Output
}], alertElement: [{
type: ViewChild,
args: ['alertElement']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLWFuZ3VsYXIta2l0L3NyYy9saWIvY29tcG9uZW50cy9jb3JlL2FsZXJ0L2FsZXJ0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9hbGVydC9hbGVydC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLHVCQUF1QixFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFdEksT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDNUUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ3pDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDbEUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7QUFFekQ7OztHQUdHO0FBVUgsTUFBTSxPQUFPLGdCQUFpQixTQUFRLG1CQUFtQjtJQVR6RDs7UUFVRTs7O1dBR0c7UUFDTSxVQUFLLEdBQWUsTUFBTSxDQUFDO1FBUXBDOztXQUVHO1FBQ2MsZUFBVSxHQUF3QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRXRFOztXQUVHO1FBQ2MsZ0JBQVcsR0FBd0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztLQWdDeEU7SUExQlUsZUFBZTtRQUN0QixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFFeEIsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDdEIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxhQUFhLENBQUM7WUFDaEQsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsbUJBQW1CLENBQUMsT0FBTyxDQUFDLENBQUM7WUFFaEQsT0FBTyxDQUFDLGdCQUFnQixDQUFDLGdCQUFnQixFQUFFLEtBQUssQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztZQUNqRixPQUFPLENBQUMsZ0JBQWdCLENBQUMsaUJBQWlCLEVBQUUsS0FBSyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO1FBQ3JGLENBQUM7SUFDSCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0ksS0FBSztRQUNWLElBQUksQ0FBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVEOztPQUVHO0lBQ0ksT0FBTztRQUNaLElBQUksQ0FBQyxLQUFLLEVBQUUsT0FBTyxFQUFFLENBQUM7SUFDeEIsQ0FBQzs4R0FwRFUsZ0JBQWdCO2tHQUFoQixnQkFBZ0Isa0hBV1AsY0FBYyw0UENoQ3BDLDZoQkFtQkEsNkZEQVksZUFBZSw0RkFBRSxlQUFlOzsyRkFFL0IsZ0JBQWdCO2tCQVQ1QixTQUFTO2lDQUNJLElBQUksWUFDTixVQUFVLFlBR1YsU0FBUyxtQkFDRix1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsZUFBZSxFQUFFLGVBQWUsQ0FBQzs4QkFPbEMsS0FBSztzQkFBYixLQUFLO2dCQU1nQyxXQUFXO3NCQUFoRCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGNBQWMsRUFBRTtnQkFLbkIsVUFBVTtzQkFBMUIsTUFBTTtnQkFLVSxXQUFXO3NCQUEzQixNQUFNO2dCQUk0QixZQUFZO3NCQUE5QyxTQUFTO3VCQUFDLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWxlcnRDb2xvciB9IGZyb20gJy4uLy4uLy4uL2ludGVyZmFjZXMvY29yZSc7XG5pbXBvcnQgeyBJdEFic3RyYWN0Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4vLi4vYWJzdHJhY3RzL2Fic3RyYWN0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBbGVydCB9IGZyb20gJ2Jvb3RzdHJhcC1pdGFsaWEnO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQgeyBJdEljb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi91dGlscy9pY29uL2ljb24uY29tcG9uZW50JztcbmltcG9ydCB7IGlucHV0VG9Cb29sZWFuIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvY29lcmNpb24nO1xuXG4vKipcbiAqIEFsZXJ0XG4gKiBAZGVzY3JpcHRpb24gWW91IGNhbiBwcm92aWRlIGZlZWRiYWNrIHRvIHRoZSB1c2VyIHZpYSBhbGVydCBtZXNzYWdlcy5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHNlbGVjdG9yOiAnaXQtYWxlcnQnLFxuICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hbGVydC5jb21wb25lbnQuc2NzcyddLFxuICBleHBvcnRBczogJ2l0QWxlcnQnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaW1wb3J0czogW1RyYW5zbGF0ZU1vZHVsZSwgSXRJY29uQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgSXRBbGVydENvbXBvbmVudCBleHRlbmRzIEl0QWJzdHJhY3RDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgLyoqXG4gICAqIFRoZSBhbGVydCBjb2xvclxuICAgKiBAZGVmYXVsdCBpbmZvXG4gICAqL1xuICBASW5wdXQoKSBjb2xvcjogQWxlcnRDb2xvciA9ICdpbmZvJztcblxuICAvKipcbiAgICogSW5zZXJ0cyB0aGUgY2xvc2UgYnV0dG9uXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGlucHV0VG9Cb29sZWFuIH0pIGRpc21pc3NpYmxlPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogVGhpcyBldmVudCBmaXJlcyBpbW1lZGlhdGVseSB3aGVuIHRoZSBpbnN0YW5jZSdzIGNsb3NlIG1ldGhvZCBpcyBjYWxsZWQuXG4gICAqL1xuICBAT3V0cHV0KCkgcHVibGljIGNsb3NlRXZlbnQ6IEV2ZW50RW1pdHRlcjxFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgLyoqXG4gICAqIFRoaXMgZXZlbnQgZmlyZXMgd2hlbiB0aGUgYWxlcnQgaGFzIGJlZW4gY2xvc2VkIChpdCB3aWxsIHdhaXQgZm9yIENTUyB0cmFuc2l0aW9ucyB0byBjb21wbGV0ZSkuXG4gICAqL1xuICBAT3V0cHV0KCkgcHVibGljIGNsb3NlZEV2ZW50OiBFdmVudEVtaXR0ZXI8RXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIHByaXZhdGUgYWxlcnQ/OiBBbGVydDtcblxuICBAVmlld0NoaWxkKCdhbGVydEVsZW1lbnQnKSBwcml2YXRlIGFsZXJ0RWxlbWVudD86IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuXG4gIG92ZXJyaWRlIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICBzdXBlci5uZ0FmdGVyVmlld0luaXQoKTtcblxuICAgIGlmICh0aGlzLmFsZXJ0RWxlbWVudCkge1xuICAgICAgY29uc3QgZWxlbWVudCA9IHRoaXMuYWxlcnRFbGVtZW50Lm5hdGl2ZUVsZW1lbnQ7XG4gICAgICB0aGlzLmFsZXJ0ID0gQWxlcnQuZ2V0T3JDcmVhdGVJbnN0YW5jZShlbGVtZW50KTtcblxuICAgICAgZWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCdjbG9zZS5icy5hbGVydCcsIGV2ZW50ID0+IHRoaXMuY2xvc2VFdmVudC5lbWl0KGV2ZW50KSk7XG4gICAgICBlbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2Nsb3NlZC5icy5hbGVydCcsIGV2ZW50ID0+IHRoaXMuY2xvc2VkRXZlbnQuZW1pdChldmVudCkpO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBDbG9zZSBhbiBhbGVydCBieSByZW1vdmluZyBpdCBmcm9tIHRoZSBET00uXG4gICAqIElmIHRoZSBgLmZhZGVgIGFuZCBgLnNob3dgIGNsYXNzZXMgYXJlIHByZXNlbnQgaW4gdGhlIGVsZW1lbnQsIHRoZSBhbGVydCB3aWxsIGJlIGNsb3NlZCB3aXRoIGEgZGlzYXBwZWFyaW5nIGVmZmVjdC5cbiAgICovXG4gIHB1YmxpYyBjbG9zZSgpOiB2b2lkIHtcbiAgICB0aGlzLmFsZXJ0Py5jbG9zZSgpO1xuICB9XG5cbiAgLyoqXG4gICAqIFRoZSBhbGVydCBpcyByZW1vdmVkXG4gICAqL1xuICBwdWJsaWMgZGlzcG9zZSgpOiB2b2lkIHtcbiAgICB0aGlzLmFsZXJ0Py5kaXNwb3NlKCk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgI2FsZXJ0RWxlbWVudFxuICBjbGFzcz1cImFsZXJ0IGFsZXJ0LXt7IGNvbG9yIH19XCJcbiAgW2NsYXNzLmFsZXJ0LWRpc21pc3NpYmxlXT1cImRpc21pc3NpYmxlXCJcbiAgW2NsYXNzLmZhZGVdPVwiZGlzbWlzc2libGVcIlxuICBbY2xhc3Muc2hvd109XCJkaXNtaXNzaWJsZVwiXG4gIHJvbGU9XCJhbGVydFwiPlxuICA8aDQgY2xhc3M9XCJhbGVydC1oZWFkaW5nXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2hlYWRpbmddXCI+PC9uZy1jb250ZW50PlxuICA8L2g0PlxuXG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblxuICBAaWYgKGRpc21pc3NpYmxlKSB7XG4gICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJidG4tY2xvc2VcIiBkYXRhLWJzLWRpc21pc3M9XCJhbGVydFwiIFthdHRyLmFyaWEtbGFiZWxdPVwiJ2l0LmNvcmUuY2xvc2UtYWxlcnQnIHwgdHJhbnNsYXRlXCI+XG4gICAgICA8aXQtaWNvbiBuYW1lPVwiY2xvc2VcIj48L2l0LWljb24+XG4gICAgPC9idXR0b24+XG4gIH1cbjwvZGl2PlxuIl19