carbon-components-angular
Version:
Next generation components
81 lines • 6.52 kB
JavaScript
import { Component, Output, EventEmitter, ViewChild, Input } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* Component for the overlay object that acts as a backdrop to the `Modal` component.
*
* The main purpose for this component is to be able to handle click events that fall outside
* the bounds of the `Modal` component.
*/
export class Overlay {
constructor() {
/**
* Classification of the modal.
*/
this.theme = "default";
this.open = false;
/**
* When `true`, applies `cds--modal--decorator` for AI-label
*/
this.hasModalDecorator = false;
/**
* To emit the event where the user selects the overlay behind the `Modal`.
*/
this.overlaySelect = new EventEmitter();
}
/**
* Handles the user clicking on the `Overlay` which resides outside the `Modal` object.
*/
overlayClick(event) {
if (event.target !== this.overlay.nativeElement) {
return;
}
event.stopPropagation();
this.overlaySelect.emit(event);
}
}
Overlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
Overlay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Overlay, selector: "cds-overlay, ibm-overlay", inputs: { theme: "theme", open: "open", hasModalDecorator: "hasModalDecorator" }, outputs: { overlaySelect: "overlaySelect" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true, static: true }], ngImport: i0, template: `
<section
class="cds--modal cds--modal-tall"
[ngClass]="{
'cds--modal--danger': theme === 'danger',
'is-visible': open,
'cds--modal--decorator': hasModalDecorator
}"
(click)="overlayClick($event)"
#overlay>
<ng-content></ng-content>
</section>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Overlay, decorators: [{
type: Component,
args: [{
selector: "cds-overlay, ibm-overlay",
template: `
<section
class="cds--modal cds--modal-tall"
[ngClass]="{
'cds--modal--danger': theme === 'danger',
'is-visible': open,
'cds--modal--decorator': hasModalDecorator
}"
(click)="overlayClick($event)"
#overlay>
<ng-content></ng-content>
</section>
`
}]
}], propDecorators: { theme: [{
type: Input
}], open: [{
type: Input
}], hasModalDecorator: [{
type: Input
}], overlaySelect: [{
type: Output
}], overlay: [{
type: ViewChild,
args: ["overlay", { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmxheS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbW9kYWwvb3ZlcmxheS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxNQUFNLEVBQ04sWUFBWSxFQUNaLFNBQVMsRUFFVCxLQUFLLEVBQ0wsTUFBTSxlQUFlLENBQUM7OztBQUd2Qjs7Ozs7R0FLRztBQWlCSCxNQUFNLE9BQU8sT0FBTztJQWhCcEI7UUFpQkM7O1dBRUc7UUFDTSxVQUFLLEdBQXlCLFNBQVMsQ0FBQztRQUN4QyxTQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ3RCOztXQUVHO1FBQ00sc0JBQWlCLEdBQUcsS0FBSyxDQUFDO1FBQ25DOztXQUVHO1FBQ08sa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0tBZTdDO0lBVEE7O09BRUc7SUFDSCxZQUFZLENBQUMsS0FBSztRQUNqQixJQUFJLEtBQUssQ0FBQyxNQUFNLEtBQUssSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEVBQUU7WUFBRSxPQUFPO1NBQUU7UUFDNUQsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLENBQUM7O29HQTFCVyxPQUFPO3dGQUFQLE9BQU8saVRBZFQ7Ozs7Ozs7Ozs7OztFQVlUOzJGQUVXLE9BQU87a0JBaEJuQixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSwwQkFBMEI7b0JBQ3BDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7O0VBWVQ7aUJBQ0Q7OEJBS1MsS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFJRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBSUksYUFBYTtzQkFBdEIsTUFBTTtnQkFJaUMsT0FBTztzQkFBOUMsU0FBUzt1QkFBQyxTQUFTLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRPdXRwdXQsXG5cdEV2ZW50RW1pdHRlcixcblx0Vmlld0NoaWxkLFxuXHRFbGVtZW50UmVmLFxuXHRJbnB1dFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5cbi8qKlxuICogQ29tcG9uZW50IGZvciB0aGUgb3ZlcmxheSBvYmplY3QgdGhhdCBhY3RzIGFzIGEgYmFja2Ryb3AgdG8gdGhlIGBNb2RhbGAgY29tcG9uZW50LlxuICpcbiAqIFRoZSBtYWluIHB1cnBvc2UgZm9yIHRoaXMgY29tcG9uZW50IGlzIHRvIGJlIGFibGUgdG8gaGFuZGxlIGNsaWNrIGV2ZW50cyB0aGF0IGZhbGwgb3V0c2lkZVxuICogdGhlIGJvdW5kcyBvZiB0aGUgYE1vZGFsYCBjb21wb25lbnQuXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtb3ZlcmxheSwgaWJtLW92ZXJsYXlcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8c2VjdGlvblxuXHRcdFx0Y2xhc3M9XCJjZHMtLW1vZGFsIGNkcy0tbW9kYWwtdGFsbFwiXG5cdFx0XHRbbmdDbGFzc109XCJ7XG5cdFx0XHRcdCdjZHMtLW1vZGFsLS1kYW5nZXInOiB0aGVtZSA9PT0gJ2RhbmdlcicsXG5cdFx0XHRcdCdpcy12aXNpYmxlJzogb3Blbixcblx0XHRcdFx0J2Nkcy0tbW9kYWwtLWRlY29yYXRvcic6IGhhc01vZGFsRGVjb3JhdG9yXG5cdFx0XHR9XCJcblx0XHRcdChjbGljayk9XCJvdmVybGF5Q2xpY2soJGV2ZW50KVwiXG5cdFx0XHQjb3ZlcmxheT5cblx0XHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0XHQ8L3NlY3Rpb24+XG5cdGBcbn0pXG5leHBvcnQgY2xhc3MgT3ZlcmxheSB7XG5cdC8qKlxuXHQgKiBDbGFzc2lmaWNhdGlvbiBvZiB0aGUgbW9kYWwuXG5cdCAqL1xuXHRASW5wdXQoKSB0aGVtZTogXCJkZWZhdWx0XCIgfCBcImRhbmdlclwiID0gXCJkZWZhdWx0XCI7XG5cdEBJbnB1dCgpIG9wZW4gPSBmYWxzZTtcblx0LyoqXG5cdCAqIFdoZW4gYHRydWVgLCBhcHBsaWVzIGBjZHMtLW1vZGFsLS1kZWNvcmF0b3JgIGZvciBBSS1sYWJlbFxuXHQgKi9cblx0QElucHV0KCkgaGFzTW9kYWxEZWNvcmF0b3IgPSBmYWxzZTtcblx0LyoqXG5cdCAqIFRvIGVtaXQgdGhlIGV2ZW50IHdoZXJlIHRoZSB1c2VyIHNlbGVjdHMgdGhlIG92ZXJsYXkgYmVoaW5kIHRoZSBgTW9kYWxgLlxuXHQgKi9cblx0QE91dHB1dCgpIG92ZXJsYXlTZWxlY3QgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cdC8qKlxuXHQgKiBNYWludGFpbnMgYSByZWZlcmVuY2UgdG8gdGhlIHZpZXcgRE9NIGVsZW1lbnQgb2YgdGhlIGBPdmVybGF5YC5cblx0ICovXG5cdEBWaWV3Q2hpbGQoXCJvdmVybGF5XCIsIHsgc3RhdGljOiB0cnVlIH0pIG92ZXJsYXk6IEVsZW1lbnRSZWY7XG5cblx0LyoqXG5cdCAqIEhhbmRsZXMgdGhlIHVzZXIgY2xpY2tpbmcgb24gdGhlIGBPdmVybGF5YCB3aGljaCByZXNpZGVzIG91dHNpZGUgdGhlIGBNb2RhbGAgb2JqZWN0LlxuXHQgKi9cblx0b3ZlcmxheUNsaWNrKGV2ZW50KSB7XG5cdFx0aWYgKGV2ZW50LnRhcmdldCAhPT0gdGhpcy5vdmVybGF5Lm5hdGl2ZUVsZW1lbnQpIHsgcmV0dXJuOyB9XG5cdFx0ZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG5cdFx0dGhpcy5vdmVybGF5U2VsZWN0LmVtaXQoZXZlbnQpO1xuXHR9XG5cbn1cbiJdfQ==