carbon-components-angular
Version:
Next generation components
104 lines (102 loc) • 8.18 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" }, outputs: { closeSelect: "closeSelect" }, ngImport: i0, template: `
<header class="cds--modal-header {{theme}}">
<ng-content></ng-content>
<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: "component", type: i3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], 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>
<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
}], closeSelect: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9tb2RhbC1oZWFkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTixTQUFTLEVBQ1QsTUFBTSxFQUNOLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxlQUFlLENBQUM7Ozs7OztBQUd2Qjs7Ozs7Ozs7OztHQVVHO0FBc0JILE1BQU0sT0FBTyxXQUFXO0lBNkJ2QixZQUFzQixJQUFVO1FBQVYsU0FBSSxHQUFKLElBQUksQ0FBTTtRQTVCaEM7OztXQUdHO1FBQ00sVUFBSyxHQUFHLFNBQVMsQ0FBQztRQUMzQjs7O1dBR0c7UUFDTSxlQUFVLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1FBQ2xEOztXQUVHO1FBQ00sb0JBQWUsR0FBRyxJQUFJLENBQUM7UUFFaEM7O1dBRUc7UUFDTyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFM0Msa0JBQWEsR0FBRztZQUNmLGtCQUFrQixFQUFFLElBQUk7U0FDeEIsQ0FBQztRQUVGLHFCQUFnQixHQUFHO1lBQ2xCLFlBQVksRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLEtBQUssQ0FBQyxLQUFLO1NBQ3pDLENBQUM7SUFFaUMsQ0FBQztJQUVwQzs7T0FFRztJQUNJLE9BQU87UUFDYixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pCLENBQUM7O3dHQXBDVyxXQUFXOzRGQUFYLFdBQVcsNk1BbkJiOzs7Ozs7Ozs7Ozs7Ozs7OztFQWlCVDsyRkFFVyxXQUFXO2tCQXJCdkIsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsb0NBQW9DO29CQUM5QyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBaUJUO2lCQUNEOzJGQU1TLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxVQUFVO3NCQUFsQixLQUFLO2dCQUlHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBS0ksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0T3V0cHV0LFxuXHRFdmVudEVtaXR0ZXIsXG5cdElucHV0XG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBJMThuIH0gZnJvbSBcImNhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXIvaTE4blwiO1xuXG4vKipcbiAqICoqKklucHV0cyoqKlxuICogYGBgaHRtbFxuICogPGNkcy1tb2RhbC1oZWFkZXI+SGVhZGVyIHRleHQ8L2Nkcy1tb2RhbC1oZWFkZXI+XG4gKiBgYGBcbiAqXG4gKiAqKipPdXRwdXRzKioqXG4gKiBgYGBodG1sXG4gKiA8Y2RzLW1vZGFsLWhlYWRlciAoY2xvc2VTZWxlY3QpPVwiY2xvc2VNb2RhbCgpXCI+SGVhZGVyIHRleHQ8L2Nkcy1tb2RhbC1oZWFkZXI+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy1tb2RhbC1oZWFkZXIsIGlibS1tb2RhbC1oZWFkZXJcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8aGVhZGVyIGNsYXNzPVwiY2RzLS1tb2RhbC1oZWFkZXIge3t0aGVtZX19XCI+XG5cdFx0XHQ8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cdFx0XHQ8ZGl2IGNsYXNzPVwiY2RzLS1tb2RhbC1jbG9zZS1idXR0b25cIj5cblx0XHRcdFx0PGNkcy1pY29uLWJ1dHRvblxuXHRcdFx0XHRcdCpuZ0lmPVwic2hvd0Nsb3NlQnV0dG9uXCJcblx0XHRcdFx0XHR0eXBlPVwiYnV0dG9uXCJcblx0XHRcdFx0XHRbYnV0dG9uTmdDbGFzc109XCJidXR0b25OZ0NsYXNzXCJcblx0XHRcdFx0XHRbYnV0dG9uQXR0cmlidXRlc109XCJidXR0b25BdHRyaWJ1dGVzXCJcblx0XHRcdFx0XHRhbGlnbj1cImxlZnRcIlxuXHRcdFx0XHRcdFtkZXNjcmlwdGlvbl09XCJjbG9zZUxhYmVsXCJcblx0XHRcdFx0XHQoY2xpY2spPVwib25DbG9zZSgpXCI+XG5cdFx0XHRcdFx0PHN2ZyBjZHNJY29uPVwiY2xvc2VcIiBzaXplPVwiMjBcIiBjbGFzcz1cImNkcy0tbW9kYWwtY2xvc2VfX2ljb25cIj48L3N2Zz5cblx0XHRcdFx0PC9jZHMtaWNvbi1idXR0b24+XG5cdFx0XHQ8L2Rpdj5cblx0XHQ8L2hlYWRlcj5cblxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIE1vZGFsSGVhZGVyIHtcblx0LyoqXG5cdCAqIEBkZXByZWNhdGVkIHNpbmNlIHY1XG5cdCAqIFNldHMgdGhlIHN0eWxlIG9uIHRoZSBtb2RhbCBoZWFkaW5nIGJhc2VkIG9uIGl0cyBjYXRlZ29yeS5cblx0ICovXG5cdEBJbnB1dCgpIHRoZW1lID0gXCJkZWZhdWx0XCI7XG5cdC8qKlxuXHQgKiBBY2Nlc3NpYmxlIGxhYmVsIGZvciB0aGUgaGVhZGVyIGNsb3NlIGJ1dHRvbi5cblx0ICogRGVmYXVsdHMgdG8gdGhlIGBNT0RBTC5DTE9TRWAgdmFsdWUgZnJvbSB0aGUgaTE4biBzZXJ2aWNlLlxuXHQgKi9cblx0QElucHV0KCkgY2xvc2VMYWJlbCA9IHRoaXMuaTE4bi5nZXQoKS5NT0RBTC5DTE9TRTtcblx0LyoqXG5cdCAqIFNldCB0byBgZmFsc2VgIHRvIGhpZGUgdGhlIGNsb3NlIGJ1dHRvbi5cblx0ICovXG5cdEBJbnB1dCgpIHNob3dDbG9zZUJ1dHRvbiA9IHRydWU7XG5cblx0LyoqXG5cdCAqIFRvIGVtaXQgdGhlIGV2ZW50IG9mIGNsaWNraW5nIG9uIHRoZSBjbG9zZSBpY29uIHdpdGhpbiB0aGUgbW9kYWwuXG5cdCAqL1xuXHRAT3V0cHV0KCkgY2xvc2VTZWxlY3QgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cblx0YnV0dG9uTmdDbGFzcyA9IHtcblx0XHRcImNkcy0tbW9kYWwtY2xvc2VcIjogdHJ1ZVxuXHR9O1xuXG5cdGJ1dHRvbkF0dHJpYnV0ZXMgPSB7XG5cdFx0XCJhcmlhLWxhYmVsXCI6IHRoaXMuaTE4bi5nZXQoKS5NT0RBTC5DTE9TRVxuXHR9O1xuXG5cdGNvbnN0cnVjdG9yKHByb3RlY3RlZCBpMThuOiBJMThuKSB7fVxuXG5cdC8qKlxuXHQgKiBIYW5kbGVzIGNsaWNrIGZvciB0aGUgY2xvc2UgaWNvbiBidXR0b24gd2l0aGluIHRoZSBgTW9kYWxgLlxuXHQgKi9cblx0cHVibGljIG9uQ2xvc2UoKSB7XG5cdFx0dGhpcy5jbG9zZVNlbGVjdC5lbWl0KCk7XG5cdH1cbn1cbiJdfQ==