@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
68 lines • 11.8 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Optional, Output, ViewEncapsulation } from '@angular/core';
import { IconButtonComponent } from '../icon-button/icon-button.component';
import { modalAnimation } from './modal.animations';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/dialog";
import * as i2 from "@angular/common";
export class ModalComponent {
/**
* @param dialogRef refers to `@angular/cdk` DialogRef
*/
constructor(dialogRef) {
this.dialogRef = dialogRef;
/**
* Whether modal has close icon or not
*/
this.hasCloseIcon = false;
/**
* Whether modal is vertically centered
*/
this.isVerticallyCentered = true;
/**
* Emits void event when modal is closed via the close icon
*/
this.closed = new EventEmitter();
const backdropElement = this.dialogRef?.overlayRef?.backdropElement;
// Add fluid backdrop background color to dialog overlay
if (backdropElement) {
backdropElement.style.backgroundColor = 'var(--nj-component-backdrop-color-background)';
}
}
get titleId() {
return `${this.modalId}-title`;
}
ngAfterViewInit() {
// Manually set the `aria-labelledby` attribute on the modal
setTimeout(() => {
// @ts-expect-error
this.dialogRef?.containerInstance._elementRef.nativeElement.setAttribute('aria-labelledby', this.titleId);
});
}
/**
* Emits closed event and calls dialogRef.close()
*/
closeModal() {
this.closed?.emit();
this.dialogRef?.close();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, isStandalone: true, selector: "nj-modal", inputs: { hasCloseIcon: "hasCloseIcon", closeLabel: "closeLabel", isVerticallyCentered: "isVerticallyCentered", modalId: "modalId" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"nj-modal nj-modal--visible\" [ngClass]=\"{'nj-modal--vertical-centered': isVerticallyCentered}\">\n <div class=\"nj-modal__dialog\">\n <div class=\"nj-modal__content\" @modal>\n <div class=\"nj-modal__header\">\n <h1 class=\"nj-modal__title\" [attr.id]=\"titleId\">\n <ng-content select=\"[njModalTitle]\"></ng-content>\n </h1>\n <nj-icon-button icon=\"close\" size=\"sm\" class=\"nj-modal__close\"\n (buttonClick)=\"closeModal()\"\n *ngIf=\"hasCloseIcon\" [label]=\"closeLabel\">\n </nj-icon-button>\n </div>\n <div class=\"nj-modal__body\">\n <ng-content select=\"[njModalContent]\"></ng-content>\n </div>\n <div class=\"nj-modal__footer\">\n <ng-content select=\"[njModalFooter]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: IconButtonComponent, selector: "nj-icon-button", inputs: ["type", "ariaPressed", "ariaDescribedby", "isDisabled", "tabIndex", "variant", "size", "hasCustomIcon", "icon", "label", "additionalClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [modalAnimation.modal], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [modalAnimation.modal], standalone: true, imports: [IconButtonComponent, CommonModule], template: "<div class=\"nj-modal nj-modal--visible\" [ngClass]=\"{'nj-modal--vertical-centered': isVerticallyCentered}\">\n <div class=\"nj-modal__dialog\">\n <div class=\"nj-modal__content\" @modal>\n <div class=\"nj-modal__header\">\n <h1 class=\"nj-modal__title\" [attr.id]=\"titleId\">\n <ng-content select=\"[njModalTitle]\"></ng-content>\n </h1>\n <nj-icon-button icon=\"close\" size=\"sm\" class=\"nj-modal__close\"\n (buttonClick)=\"closeModal()\"\n *ngIf=\"hasCloseIcon\" [label]=\"closeLabel\">\n </nj-icon-button>\n </div>\n <div class=\"nj-modal__body\">\n <ng-content select=\"[njModalContent]\"></ng-content>\n </div>\n <div class=\"nj-modal__footer\">\n <ng-content select=\"[njModalFooter]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1.DialogRef, decorators: [{
type: Optional
}] }]; }, propDecorators: { hasCloseIcon: [{
type: Input
}], closeLabel: [{
type: Input
}], isVerticallyCentered: [{
type: Input
}], modalId: [{
type: Input
}], closed: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbW9kYWwvbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbW9kYWwvbW9kYWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsUUFBUSxFQUNSLE1BQU0sRUFDTixpQkFBaUIsRUFDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDM0UsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG9CQUFvQixDQUFDOzs7O0FBV3BELE1BQU0sT0FBTyxjQUFjO0lBMkJ6Qjs7T0FFRztJQUNILFlBQStCLFNBQW9CO1FBQXBCLGNBQVMsR0FBVCxTQUFTLENBQVc7UUE3Qm5EOztXQUVHO1FBQ00saUJBQVksR0FBRyxLQUFLLENBQUM7UUFROUI7O1dBRUc7UUFDTSx5QkFBb0IsR0FBRyxJQUFJLENBQUM7UUFPckM7O1dBRUc7UUFDTyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQU0xQyxNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLFVBQVUsRUFBRSxlQUFlLENBQUM7UUFDcEUsd0RBQXdEO1FBQ3hELElBQUksZUFBZSxFQUFFO1lBQ25CLGVBQWUsQ0FBQyxLQUFLLENBQUMsZUFBZSxHQUFHLCtDQUErQyxDQUFDO1NBQ3pGO0lBQ0gsQ0FBQztJQUVELElBQUksT0FBTztRQUNULE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxRQUFRLENBQUM7SUFDakMsQ0FBQztJQUVELGVBQWU7UUFDYiw0REFBNEQ7UUFDNUQsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLG1CQUFtQjtZQUNuQixJQUFJLENBQUMsU0FBUyxFQUFFLGlCQUFpQixDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLGlCQUFpQixFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUM1RyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7T0FFRztJQUNJLFVBQVU7UUFDZixJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7SUFDMUIsQ0FBQzsrR0F4RFUsY0FBYzttR0FBZCxjQUFjLHlPQ3hCM0IsbzNCQXFCQSw0Q0RDWSxtQkFBbUIsME9BQUUsWUFBWSxtTkFGL0IsQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDOzs0RkFJdkIsY0FBYztrQkFUMUIsU0FBUzsrQkFDRSxVQUFVLG1CQUVILHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksY0FDekIsQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDLGNBQ3RCLElBQUksV0FDUCxDQUFDLG1CQUFtQixFQUFFLFlBQVksQ0FBQzs7MEJBZ0MvQixRQUFROzRDQTFCWixZQUFZO3NCQUFwQixLQUFLO2dCQU1HLFVBQVU7c0JBQWxCLEtBQUs7Z0JBS0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQUtHLE9BQU87c0JBQWYsS0FBSztnQkFLSSxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaWFsb2dSZWYgfSBmcm9tICdAYW5ndWxhci9jZGsvZGlhbG9nJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPcHRpb25hbCxcbiAgT3V0cHV0LFxuICBWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25CdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi9pY29uLWJ1dHRvbi9pY29uLWJ1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgbW9kYWxBbmltYXRpb24gfSBmcm9tICcuL21vZGFsLmFuaW1hdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduai1tb2RhbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9tb2RhbC5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBhbmltYXRpb25zOiBbbW9kYWxBbmltYXRpb24ubW9kYWxdLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbSWNvbkJ1dHRvbkNvbXBvbmVudCwgQ29tbW9uTW9kdWxlXVxufSlcbmV4cG9ydCBjbGFzcyBNb2RhbENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICAvKipcbiAgICogV2hldGhlciBtb2RhbCBoYXMgY2xvc2UgaWNvbiBvciBub3RcbiAgICovXG4gIEBJbnB1dCgpIGhhc0Nsb3NlSWNvbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBMYWJlbCBmb3IgdGhlIGNsb3NlIGJ1dHRvblxuICAgKiBAZXhhbXBsZSBcIkNsb3NlXCJcbiAgICovXG4gIEBJbnB1dCgpIGNsb3NlTGFiZWw/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgbW9kYWwgaXMgdmVydGljYWxseSBjZW50ZXJlZFxuICAgKi9cbiAgQElucHV0KCkgaXNWZXJ0aWNhbGx5Q2VudGVyZWQgPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBJZCBvZiB0aGUgbW9kYWwuIFRoZSB0aXRsZSBpZCB3aWxsIGJlIGJhc2VkIG9uIHRoaXMuXG4gICAqL1xuICBASW5wdXQoKSBtb2RhbElkOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEVtaXRzIHZvaWQgZXZlbnQgd2hlbiBtb2RhbCBpcyBjbG9zZWQgdmlhIHRoZSBjbG9zZSBpY29uXG4gICAqL1xuICBAT3V0cHV0KCkgY2xvc2VkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIC8qKlxuICAgKiBAcGFyYW0gZGlhbG9nUmVmIHJlZmVycyB0byBgQGFuZ3VsYXIvY2RrYCBEaWFsb2dSZWZcbiAgICovXG4gIGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIHB1YmxpYyBkaWFsb2dSZWY6IERpYWxvZ1JlZikge1xuICAgIGNvbnN0IGJhY2tkcm9wRWxlbWVudCA9IHRoaXMuZGlhbG9nUmVmPy5vdmVybGF5UmVmPy5iYWNrZHJvcEVsZW1lbnQ7XG4gICAgLy8gQWRkIGZsdWlkIGJhY2tkcm9wIGJhY2tncm91bmQgY29sb3IgdG8gZGlhbG9nIG92ZXJsYXlcbiAgICBpZiAoYmFja2Ryb3BFbGVtZW50KSB7XG4gICAgICBiYWNrZHJvcEVsZW1lbnQuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gJ3ZhcigtLW5qLWNvbXBvbmVudC1iYWNrZHJvcC1jb2xvci1iYWNrZ3JvdW5kKSc7XG4gICAgfVxuICB9XG5cbiAgZ2V0IHRpdGxlSWQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gYCR7dGhpcy5tb2RhbElkfS10aXRsZWA7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgLy8gTWFudWFsbHkgc2V0IHRoZSBgYXJpYS1sYWJlbGxlZGJ5YCBhdHRyaWJ1dGUgb24gdGhlIG1vZGFsXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICB0aGlzLmRpYWxvZ1JlZj8uY29udGFpbmVySW5zdGFuY2UuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5zZXRBdHRyaWJ1dGUoJ2FyaWEtbGFiZWxsZWRieScsIHRoaXMudGl0bGVJZCk7XG4gICAgfSk7XG4gIH1cblxuICAvKipcbiAgICogRW1pdHMgY2xvc2VkIGV2ZW50IGFuZCBjYWxscyBkaWFsb2dSZWYuY2xvc2UoKVxuICAgKi9cbiAgcHVibGljIGNsb3NlTW9kYWwoKSB7XG4gICAgdGhpcy5jbG9zZWQ/LmVtaXQoKTtcbiAgICB0aGlzLmRpYWxvZ1JlZj8uY2xvc2UoKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIm5qLW1vZGFsIG5qLW1vZGFsLS12aXNpYmxlXCIgW25nQ2xhc3NdPVwieyduai1tb2RhbC0tdmVydGljYWwtY2VudGVyZWQnOiBpc1ZlcnRpY2FsbHlDZW50ZXJlZH1cIj5cbiAgPGRpdiBjbGFzcz1cIm5qLW1vZGFsX19kaWFsb2dcIj5cbiAgICA8ZGl2IGNsYXNzPVwibmotbW9kYWxfX2NvbnRlbnRcIiBAbW9kYWw+XG4gICAgICA8ZGl2IGNsYXNzPVwibmotbW9kYWxfX2hlYWRlclwiPlxuICAgICAgICA8aDEgY2xhc3M9XCJuai1tb2RhbF9fdGl0bGVcIiBbYXR0ci5pZF09XCJ0aXRsZUlkXCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW25qTW9kYWxUaXRsZV1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvaDE+XG4gICAgICAgIDxuai1pY29uLWJ1dHRvbiBpY29uPVwiY2xvc2VcIiBzaXplPVwic21cIiBjbGFzcz1cIm5qLW1vZGFsX19jbG9zZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAoYnV0dG9uQ2xpY2spPVwiY2xvc2VNb2RhbCgpXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiaGFzQ2xvc2VJY29uXCIgW2xhYmVsXT1cImNsb3NlTGFiZWxcIj5cbiAgICAgICAgPC9uai1pY29uLWJ1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cIm5qLW1vZGFsX19ib2R5XCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltuak1vZGFsQ29udGVudF1cIj48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJuai1tb2RhbF9fZm9vdGVyXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltuak1vZGFsRm9vdGVyXVwiPjwvbmctY29udGVudD5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19