carbon-components-angular
Version:
Next generation components
116 lines (114 loc) • 9.31 kB
JavaScript
import { Component, Output, EventEmitter, Input } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "carbon-components-angular/i18n";
import * as i2 from "@angular/common";
import * as i3 from "carbon-components-angular/forms";
import * as i4 from "carbon-components-angular/icon";
/**
* ***Inputs***
* ```html
* <cds-modal-header>Header text</cds-modal-header>
* ```
*
* ***Outputs***
* ```html
* <cds-modal-header (closeSelect)="closeModal()">Header text</cds-modal-header>
* ```
*/
export class ModalHeader {
constructor(i18n) {
this.i18n = i18n;
/**
* @deprecated since v5
* Sets the style on the modal heading based on its category.
*/
this.theme = "default";
/**
* Accessible label for the header close button.
* Defaults to the `MODAL.CLOSE` value from the i18n service.
*/
this.closeLabel = this.i18n.get().MODAL.CLOSE;
/**
* Set to `false` to hide the close button.
*/
this.showCloseButton = true;
/**
* To emit the event of clicking on the close icon within the modal.
*/
this.closeSelect = new EventEmitter();
this.buttonNgClass = {
"cds--modal-close": true
};
this.buttonAttributes = {
"aria-label": this.i18n.get().MODAL.CLOSE
};
}
/**
* Handles click for the close icon button within the `Modal`.
*/
onClose() {
this.closeSelect.emit();
}
}
ModalHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ModalHeader, deps: [{ token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
ModalHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: { theme: "theme", closeLabel: "closeLabel", showCloseButton: "showCloseButton", decorator: "decorator" }, outputs: { closeSelect: "closeSelect" }, ngImport: i0, template: `
<header class="cds--modal-header {{theme}}">
<ng-content></ng-content>
<ng-container *ngIf="decorator">
<div class="cds--modal--inner__decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
<div class="cds--modal-close-button">
<cds-icon-button
*ngIf="showCloseButton"
type="button"
[buttonNgClass]="buttonNgClass"
[buttonAttributes]="buttonAttributes"
align="left"
[description]="closeLabel"
(click)="onClose()">
<svg cdsIcon="close" size="20" class="cds--modal-close__icon"></svg>
</cds-icon-button>
</div>
</header>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description", "showTooltipWhenDisabled"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ModalHeader, decorators: [{
type: Component,
args: [{
selector: "cds-modal-header, ibm-modal-header",
template: `
<header class="cds--modal-header {{theme}}">
<ng-content></ng-content>
<ng-container *ngIf="decorator">
<div class="cds--modal--inner__decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
<div class="cds--modal-close-button">
<cds-icon-button
*ngIf="showCloseButton"
type="button"
[buttonNgClass]="buttonNgClass"
[buttonAttributes]="buttonAttributes"
align="left"
[description]="closeLabel"
(click)="onClose()">
<svg cdsIcon="close" size="20" class="cds--modal-close__icon"></svg>
</cds-icon-button>
</div>
</header>
`
}]
}], ctorParameters: function () { return [{ type: i1.I18n }]; }, propDecorators: { theme: [{
type: Input
}], closeLabel: [{
type: Input
}], showCloseButton: [{
type: Input
}], decorator: [{
type: Input
}], closeSelect: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9tb2RhbC1oZWFkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTixTQUFTLEVBQ1QsTUFBTSxFQUNOLFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxlQUFlLENBQUM7Ozs7OztBQUd2Qjs7Ozs7Ozs7OztHQVVHO0FBMkJILE1BQU0sT0FBTyxXQUFXO0lBa0N2QixZQUFzQixJQUFVO1FBQVYsU0FBSSxHQUFKLElBQUksQ0FBTTtRQWpDaEM7OztXQUdHO1FBQ00sVUFBSyxHQUFHLFNBQVMsQ0FBQztRQUMzQjs7O1dBR0c7UUFDTSxlQUFVLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1FBQ2xEOztXQUVHO1FBQ00sb0JBQWUsR0FBRyxJQUFJLENBQUM7UUFPaEM7O1dBRUc7UUFDTyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFM0Msa0JBQWEsR0FBRztZQUNmLGtCQUFrQixFQUFFLElBQUk7U0FDeEIsQ0FBQztRQUVGLHFCQUFnQixHQUFHO1lBQ2xCLFlBQVksRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLEtBQUssQ0FBQyxLQUFLO1NBQ3pDLENBQUM7SUFFaUMsQ0FBQztJQUVwQzs7T0FFRztJQUNJLE9BQU87UUFDYixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pCLENBQUM7O3dHQXpDVyxXQUFXOzRGQUFYLFdBQVcscU9BeEJiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBc0JUOzJGQUVXLFdBQVc7a0JBMUJ2QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxvQ0FBb0M7b0JBQzlDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXNCVDtpQkFDRDsyRkFNUyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csVUFBVTtzQkFBbEIsS0FBSztnQkFJRyxlQUFlO3NCQUF2QixLQUFLO2dCQUtHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBS0ksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0T3V0cHV0LFxuXHRFdmVudEVtaXR0ZXIsXG5cdElucHV0LFxuXHRUZW1wbGF0ZVJlZlxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgSTE4biB9IGZyb20gXCJjYXJib24tY29tcG9uZW50cy1hbmd1bGFyL2kxOG5cIjtcblxuLyoqXG4gKiAqKipJbnB1dHMqKipcbiAqIGBgYGh0bWxcbiAqIDxjZHMtbW9kYWwtaGVhZGVyPkhlYWRlciB0ZXh0PC9jZHMtbW9kYWwtaGVhZGVyPlxuICogYGBgXG4gKlxuICogKioqT3V0cHV0cyoqKlxuICogYGBgaHRtbFxuICogPGNkcy1tb2RhbC1oZWFkZXIgKGNsb3NlU2VsZWN0KT1cImNsb3NlTW9kYWwoKVwiPkhlYWRlciB0ZXh0PC9jZHMtbW9kYWwtaGVhZGVyPlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtbW9kYWwtaGVhZGVyLCBpYm0tbW9kYWwtaGVhZGVyXCIsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PGhlYWRlciBjbGFzcz1cImNkcy0tbW9kYWwtaGVhZGVyIHt7dGhlbWV9fVwiPlxuXHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdFx0PG5nLWNvbnRhaW5lciAqbmdJZj1cImRlY29yYXRvclwiPlxuXHRcdFx0XHQ8ZGl2IGNsYXNzPVwiY2RzLS1tb2RhbC0taW5uZXJfX2RlY29yYXRvclwiPlxuXHRcdFx0XHRcdDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJkZWNvcmF0b3JcIj48L25nLXRlbXBsYXRlPlxuXHRcdFx0XHQ8L2Rpdj5cblx0XHRcdDwvbmctY29udGFpbmVyPlxuXHRcdFx0PGRpdiBjbGFzcz1cImNkcy0tbW9kYWwtY2xvc2UtYnV0dG9uXCI+XG5cdFx0XHRcdDxjZHMtaWNvbi1idXR0b25cblx0XHRcdFx0XHQqbmdJZj1cInNob3dDbG9zZUJ1dHRvblwiXG5cdFx0XHRcdFx0dHlwZT1cImJ1dHRvblwiXG5cdFx0XHRcdFx0W2J1dHRvbk5nQ2xhc3NdPVwiYnV0dG9uTmdDbGFzc1wiXG5cdFx0XHRcdFx0W2J1dHRvbkF0dHJpYnV0ZXNdPVwiYnV0dG9uQXR0cmlidXRlc1wiXG5cdFx0XHRcdFx0YWxpZ249XCJsZWZ0XCJcblx0XHRcdFx0XHRbZGVzY3JpcHRpb25dPVwiY2xvc2VMYWJlbFwiXG5cdFx0XHRcdFx0KGNsaWNrKT1cIm9uQ2xvc2UoKVwiPlxuXHRcdFx0XHRcdDxzdmcgY2RzSWNvbj1cImNsb3NlXCIgc2l6ZT1cIjIwXCIgY2xhc3M9XCJjZHMtLW1vZGFsLWNsb3NlX19pY29uXCI+PC9zdmc+XG5cdFx0XHRcdDwvY2RzLWljb24tYnV0dG9uPlxuXHRcdFx0PC9kaXY+XG5cdFx0PC9oZWFkZXI+XG5cblx0YFxufSlcbmV4cG9ydCBjbGFzcyBNb2RhbEhlYWRlciB7XG5cdC8qKlxuXHQgKiBAZGVwcmVjYXRlZCBzaW5jZSB2NVxuXHQgKiBTZXRzIHRoZSBzdHlsZSBvbiB0aGUgbW9kYWwgaGVhZGluZyBiYXNlZCBvbiBpdHMgY2F0ZWdvcnkuXG5cdCAqL1xuXHRASW5wdXQoKSB0aGVtZSA9IFwiZGVmYXVsdFwiO1xuXHQvKipcblx0ICogQWNjZXNzaWJsZSBsYWJlbCBmb3IgdGhlIGhlYWRlciBjbG9zZSBidXR0b24uXG5cdCAqIERlZmF1bHRzIHRvIHRoZSBgTU9EQUwuQ0xPU0VgIHZhbHVlIGZyb20gdGhlIGkxOG4gc2VydmljZS5cblx0ICovXG5cdEBJbnB1dCgpIGNsb3NlTGFiZWwgPSB0aGlzLmkxOG4uZ2V0KCkuTU9EQUwuQ0xPU0U7XG5cdC8qKlxuXHQgKiBTZXQgdG8gYGZhbHNlYCB0byBoaWRlIHRoZSBjbG9zZSBidXR0b24uXG5cdCAqL1xuXHRASW5wdXQoKSBzaG93Q2xvc2VCdXR0b24gPSB0cnVlO1xuXG5cdC8qKlxuXHQgKiAqKkV4cGVyaW1lbnRhbCoqOiBPcHRpb25hbCBkZWNvcmF0b3IgKGUuZy4gQUkgbGFiZWwpLlxuXHQgKi9cblx0QElucHV0KCkgZGVjb3JhdG9yOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG5cdC8qKlxuXHQgKiBUbyBlbWl0IHRoZSBldmVudCBvZiBjbGlja2luZyBvbiB0aGUgY2xvc2UgaWNvbiB3aXRoaW4gdGhlIG1vZGFsLlxuXHQgKi9cblx0QE91dHB1dCgpIGNsb3NlU2VsZWN0ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG5cdGJ1dHRvbk5nQ2xhc3MgPSB7XG5cdFx0XCJjZHMtLW1vZGFsLWNsb3NlXCI6IHRydWVcblx0fTtcblxuXHRidXR0b25BdHRyaWJ1dGVzID0ge1xuXHRcdFwiYXJpYS1sYWJlbFwiOiB0aGlzLmkxOG4uZ2V0KCkuTU9EQUwuQ0xPU0Vcblx0fTtcblxuXHRjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgaTE4bjogSTE4bikge31cblxuXHQvKipcblx0ICogSGFuZGxlcyBjbGljayBmb3IgdGhlIGNsb3NlIGljb24gYnV0dG9uIHdpdGhpbiB0aGUgYE1vZGFsYC5cblx0ICovXG5cdHB1YmxpYyBvbkNsb3NlKCkge1xuXHRcdHRoaXMuY2xvc2VTZWxlY3QuZW1pdCgpO1xuXHR9XG59XG4iXX0=