carbon-components-angular
Version:
Next generation components
73 lines • 5.87 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;
/**
* 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" }, 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
}"
(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
}"
(click)="overlayClick($event)"
#overlay>
<ng-content></ng-content>
</section>
`
}]
}], propDecorators: { theme: [{
type: Input
}], open: [{
type: Input
}], overlaySelect: [{
type: Output
}], overlay: [{
type: ViewChild,
args: ["overlay", { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmxheS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbW9kYWwvb3ZlcmxheS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxNQUFNLEVBQ04sWUFBWSxFQUNaLFNBQVMsRUFFVCxLQUFLLEVBQ0wsTUFBTSxlQUFlLENBQUM7OztBQUd2Qjs7Ozs7R0FLRztBQWdCSCxNQUFNLE9BQU8sT0FBTztJQWZwQjtRQWdCQzs7V0FFRztRQUNNLFVBQUssR0FBeUIsU0FBUyxDQUFDO1FBQ3hDLFNBQUksR0FBRyxLQUFLLENBQUM7UUFDdEI7O1dBRUc7UUFDTyxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7S0FlN0M7SUFUQTs7T0FFRztJQUNILFlBQVksQ0FBQyxLQUFLO1FBQ2pCLElBQUksS0FBSyxDQUFDLE1BQU0sS0FBSyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsRUFBRTtZQUFFLE9BQU87U0FBRTtRQUM1RCxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDaEMsQ0FBQzs7b0dBdEJXLE9BQU87d0ZBQVAsT0FBTyx5UUFiVDs7Ozs7Ozs7Ozs7RUFXVDsyRkFFVyxPQUFPO2tCQWZuQixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSwwQkFBMEI7b0JBQ3BDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7RUFXVDtpQkFDRDs4QkFLUyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUlJLGFBQWE7c0JBQXRCLE1BQU07Z0JBSWlDLE9BQU87c0JBQTlDLFNBQVM7dUJBQUMsU0FBUyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0T3V0cHV0LFxuXHRFdmVudEVtaXR0ZXIsXG5cdFZpZXdDaGlsZCxcblx0RWxlbWVudFJlZixcblx0SW5wdXRcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuXG4vKipcbiAqIENvbXBvbmVudCBmb3IgdGhlIG92ZXJsYXkgb2JqZWN0IHRoYXQgYWN0cyBhcyBhIGJhY2tkcm9wIHRvIHRoZSBgTW9kYWxgIGNvbXBvbmVudC5cbiAqXG4gKiBUaGUgbWFpbiBwdXJwb3NlIGZvciB0aGlzIGNvbXBvbmVudCBpcyB0byBiZSBhYmxlIHRvIGhhbmRsZSBjbGljayBldmVudHMgdGhhdCBmYWxsIG91dHNpZGVcbiAqIHRoZSBib3VuZHMgb2YgdGhlIGBNb2RhbGAgY29tcG9uZW50LlxuICovXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6IFwiY2RzLW92ZXJsYXksIGlibS1vdmVybGF5XCIsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PHNlY3Rpb25cblx0XHRcdGNsYXNzPVwiY2RzLS1tb2RhbCBjZHMtLW1vZGFsLXRhbGxcIlxuXHRcdFx0W25nQ2xhc3NdPVwie1xuXHRcdFx0XHQnY2RzLS1tb2RhbC0tZGFuZ2VyJzogdGhlbWUgPT09ICdkYW5nZXInLFxuXHRcdFx0XHQnaXMtdmlzaWJsZSc6IG9wZW5cblx0XHRcdH1cIlxuXHRcdFx0KGNsaWNrKT1cIm92ZXJsYXlDbGljaygkZXZlbnQpXCJcblx0XHRcdCNvdmVybGF5PlxuXHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdDwvc2VjdGlvbj5cblx0YFxufSlcbmV4cG9ydCBjbGFzcyBPdmVybGF5IHtcblx0LyoqXG5cdCAqIENsYXNzaWZpY2F0aW9uIG9mIHRoZSBtb2RhbC5cblx0ICovXG5cdEBJbnB1dCgpIHRoZW1lOiBcImRlZmF1bHRcIiB8IFwiZGFuZ2VyXCIgPSBcImRlZmF1bHRcIjtcblx0QElucHV0KCkgb3BlbiA9IGZhbHNlO1xuXHQvKipcblx0ICogVG8gZW1pdCB0aGUgZXZlbnQgd2hlcmUgdGhlIHVzZXIgc2VsZWN0cyB0aGUgb3ZlcmxheSBiZWhpbmQgdGhlIGBNb2RhbGAuXG5cdCAqL1xuXHRAT3V0cHV0KCkgb3ZlcmxheVNlbGVjdCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblx0LyoqXG5cdCAqIE1haW50YWlucyBhIHJlZmVyZW5jZSB0byB0aGUgdmlldyBET00gZWxlbWVudCBvZiB0aGUgYE92ZXJsYXlgLlxuXHQgKi9cblx0QFZpZXdDaGlsZChcIm92ZXJsYXlcIiwgeyBzdGF0aWM6IHRydWUgfSkgb3ZlcmxheTogRWxlbWVudFJlZjtcblxuXHQvKipcblx0ICogSGFuZGxlcyB0aGUgdXNlciBjbGlja2luZyBvbiB0aGUgYE92ZXJsYXlgIHdoaWNoIHJlc2lkZXMgb3V0c2lkZSB0aGUgYE1vZGFsYCBvYmplY3QuXG5cdCAqL1xuXHRvdmVybGF5Q2xpY2soZXZlbnQpIHtcblx0XHRpZiAoZXZlbnQudGFyZ2V0ICE9PSB0aGlzLm92ZXJsYXkubmF0aXZlRWxlbWVudCkgeyByZXR1cm47IH1cblx0XHRldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcblx0XHR0aGlzLm92ZXJsYXlTZWxlY3QuZW1pdChldmVudCk7XG5cdH1cblxufVxuIl19