carbon-components-angular
Version:
Next generation components
159 lines • 14 kB
JavaScript
import { Component, Input, Output, EventEmitter, ViewChild, HostListener } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "carbon-components-angular/i18n";
import * as i2 from "@angular/common";
export class SelectionTile {
constructor(i18n) {
this.i18n = i18n;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* Set to `"light"` to apply the light style
*/
this.theme = "dark";
/**
* The unique id for the input.
*/
this.id = `tile-${SelectionTile.tileCount}`;
/**
* Internal event used to notify the containing `TileGroup` of changes.
*/
this.change = new EventEmitter();
/**
* Set to `true` to disable the selection tile.
*/
this.disabled = false;
/**
* Set by the containing `TileGroup`. Used for the `name` property on the input.
*/
this.name = "tile-group-unbound";
/**
* Defines whether or not the `SelectionTile` supports selecting multiple tiles as opposed to single
* tile selection.
*/
this.multiple = true; // Set to true because of the way tile group sets it up.
// If an initial selected value is set before input exists, we save
// the value and check again when input exists in `AfterViewInit`.
this._selected = null;
SelectionTile.tileCount++;
}
/**
* Updating the state of the input to match the state of the parameter passed in.
* Set to `true` if this tile should be selected.
*/
set selected(value) {
// If an initial selected value is set before input exists, we save
// the value and check again when input exists in `AfterViewInit`.
this._selected = value ? true : null;
if (this.input) {
this.input.nativeElement.checked = this._selected;
}
}
get selected() {
return this.input ? this.input.nativeElement.checked : false;
}
ngAfterViewInit() {
if (this.input) {
setTimeout(() => {
this.input.nativeElement.checked = this._selected;
});
}
}
keyboardInput(event) {
if (event.key === "Enter" || event.key === "Spacebar" || event.key === " ") {
this.selected = !this.selected;
this.change.emit(event);
}
}
onChange(event) {
this.change.emit(event);
}
}
SelectionTile.tileCount = 0;
SelectionTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectionTile, deps: [{ token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
SelectionTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: { theme: "theme", id: "id", selected: "selected", value: "value", disabled: "disabled" }, outputs: { change: "change" }, host: { listeners: { "keydown": "keyboardInput($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `
<input
#input
[attr.tabindex]="disabled ? null : 0"
class="cds--tile-input"
[id]="id"
[disabled]="disabled"
[type]="(multiple ? 'checkbox': 'radio')"
[value]="value"
[name]="name"
(change)="onChange($event)"/>
<label
class="cds--tile cds--tile--selectable"
[for]="id"
[ngClass]="{
'cds--tile--is-selected' : selected,
'cds--tile--light': theme === 'light',
'cds--tile--disabled' : disabled
}"
[attr.aria-label]="i18n.get('TILES.TILE') | async">
<div class="cds--tile__checkmark">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
fill-rule="evenodd"/>
</svg>
</div>
<div class="cds--tile-content">
<ng-content></ng-content>
</div>
</label>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectionTile, decorators: [{
type: Component,
args: [{
selector: "cds-selection-tile, ibm-selection-tile",
template: `
<input
#input
[attr.tabindex]="disabled ? null : 0"
class="cds--tile-input"
[id]="id"
[disabled]="disabled"
[type]="(multiple ? 'checkbox': 'radio')"
[value]="value"
[name]="name"
(change)="onChange($event)"/>
<label
class="cds--tile cds--tile--selectable"
[for]="id"
[ngClass]="{
'cds--tile--is-selected' : selected,
'cds--tile--light': theme === 'light',
'cds--tile--disabled' : disabled
}"
[attr.aria-label]="i18n.get('TILES.TILE') | async">
<div class="cds--tile__checkmark">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
fill-rule="evenodd"/>
</svg>
</div>
<div class="cds--tile-content">
<ng-content></ng-content>
</div>
</label>
`
}]
}], ctorParameters: function () { return [{ type: i1.I18n }]; }, propDecorators: { theme: [{
type: Input
}], id: [{
type: Input
}], selected: [{
type: Input
}], value: [{
type: Input
}], change: [{
type: Output
}], disabled: [{
type: Input
}], input: [{
type: ViewChild,
args: ["input", { static: true }]
}], keyboardInput: [{
type: HostListener,
args: ["keydown", ["$event"]]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLXRpbGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3RpbGVzL3NlbGVjdGlvbi10aWxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFNBQVMsRUFDVCxZQUFZLEVBRVosTUFBTSxlQUFlLENBQUM7Ozs7QUFxQ3ZCLE1BQU0sT0FBTyxhQUFhO0lBNkR6QixZQUFtQixJQUFVO1FBQVYsU0FBSSxHQUFKLElBQUksQ0FBTTtRQTFEN0I7OztXQUdHO1FBQ00sVUFBSyxHQUFxQixNQUFNLENBQUM7UUFFMUM7O1dBRUc7UUFDTSxPQUFFLEdBQUcsUUFBUSxhQUFhLENBQUMsU0FBUyxFQUFFLENBQUM7UUFzQmhEOztXQUVHO1FBQ08sV0FBTSxHQUF3QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTNEOztXQUVHO1FBQ00sYUFBUSxHQUFHLEtBQUssQ0FBQztRQUUxQjs7V0FFRztRQUNILFNBQUksR0FBRyxvQkFBb0IsQ0FBQztRQUM1Qjs7O1dBR0c7UUFDSCxhQUFRLEdBQUcsSUFBSSxDQUFDLENBQUMsd0RBQXdEO1FBS3pFLG1FQUFtRTtRQUNuRSxrRUFBa0U7UUFDeEQsY0FBUyxHQUFHLElBQUksQ0FBQztRQUcxQixhQUFhLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQWpERDs7O09BR0c7SUFDSCxJQUFhLFFBQVEsQ0FBQyxLQUFjO1FBQ25DLG1FQUFtRTtRQUNuRSxrRUFBa0U7UUFDbEUsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ3JDLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNmLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDO1NBQ2xEO0lBQ0YsQ0FBQztJQUVELElBQUksUUFBUTtRQUNYLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDOUQsQ0FBQztJQW9DRCxlQUFlO1FBQ2QsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2YsVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDZixJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQztZQUNuRCxDQUFDLENBQUMsQ0FBQztTQUNIO0lBQ0YsQ0FBQztJQUdELGFBQWEsQ0FBQyxLQUFLO1FBQ2xCLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxPQUFPLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxVQUFVLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxHQUFHLEVBQUU7WUFDM0UsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7WUFDL0IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDeEI7SUFDRixDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQUs7UUFDYixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QixDQUFDOztBQWxGTSx1QkFBUyxHQUFHLENBQUMsQ0FBQzswR0FEVCxhQUFhOzhGQUFiLGFBQWEsMFhBaENmOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUE4QlQ7MkZBRVcsYUFBYTtrQkFsQ3pCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHdDQUF3QztvQkFDbEQsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUE4QlQ7aUJBQ0Q7MkZBUVMsS0FBSztzQkFBYixLQUFLO2dCQUtHLEVBQUU7c0JBQVYsS0FBSztnQkFNTyxRQUFRO3NCQUFwQixLQUFLO2dCQWVHLEtBQUs7c0JBQWIsS0FBSztnQkFJSSxNQUFNO3NCQUFmLE1BQU07Z0JBS0UsUUFBUTtzQkFBaEIsS0FBSztnQkFhZ0MsS0FBSztzQkFBMUMsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO2dCQW1CcEMsYUFBYTtzQkFEWixZQUFZO3VCQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0SW5wdXQsXG5cdE91dHB1dCxcblx0RXZlbnRFbWl0dGVyLFxuXHRWaWV3Q2hpbGQsXG5cdEhvc3RMaXN0ZW5lcixcblx0QWZ0ZXJWaWV3SW5pdFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgSTE4biB9IGZyb20gXCJjYXJib24tY29tcG9uZW50cy1hbmd1bGFyL2kxOG5cIjtcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy1zZWxlY3Rpb24tdGlsZSwgaWJtLXNlbGVjdGlvbi10aWxlXCIsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PGlucHV0XG5cdFx0XHQjaW5wdXRcblx0XHRcdFthdHRyLnRhYmluZGV4XT1cImRpc2FibGVkID8gbnVsbCA6IDBcIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLXRpbGUtaW5wdXRcIlxuXHRcdFx0W2lkXT1cImlkXCJcblx0XHRcdFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG5cdFx0XHRbdHlwZV09XCIobXVsdGlwbGUgPyAnY2hlY2tib3gnOiAncmFkaW8nKVwiXG5cdFx0XHRbdmFsdWVdPVwidmFsdWVcIlxuXHRcdFx0W25hbWVdPVwibmFtZVwiXG5cdFx0XHQoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIi8+XG5cdFx0PGxhYmVsXG5cdFx0XHRjbGFzcz1cImNkcy0tdGlsZSBjZHMtLXRpbGUtLXNlbGVjdGFibGVcIlxuXHRcdFx0W2Zvcl09XCJpZFwiXG5cdFx0XHRbbmdDbGFzc109XCJ7XG5cdFx0XHRcdCdjZHMtLXRpbGUtLWlzLXNlbGVjdGVkJyA6IHNlbGVjdGVkLFxuXHRcdFx0XHQnY2RzLS10aWxlLS1saWdodCc6IHRoZW1lID09PSAnbGlnaHQnLFxuXHRcdFx0XHQnY2RzLS10aWxlLS1kaXNhYmxlZCcgOiBkaXNhYmxlZFxuXHRcdFx0fVwiXG5cdFx0XHRbYXR0ci5hcmlhLWxhYmVsXT1cImkxOG4uZ2V0KCdUSUxFUy5USUxFJykgfCBhc3luY1wiPlxuXHRcdFx0PGRpdiBjbGFzcz1cImNkcy0tdGlsZV9fY2hlY2ttYXJrXCI+XG5cdFx0XHRcdDxzdmcgd2lkdGg9XCIxNlwiIGhlaWdodD1cIjE2XCIgdmlld0JveD1cIjAgMCAxNiAxNlwiPlxuXHRcdFx0XHRcdDxwYXRoIGQ9XCJNOCAxNkE4IDggMCAxIDEgOCAwYTggOCAwIDAgMSAwIDE2em0zLjY0Ni0xMC44NTRMNi43NSAxMC4wNDMgNC4zNTQgNy42NDZsLS43MDguNzA4IDMuMTA0IDMuMTAzIDUuNjA0LTUuNjAzLS43MDgtLjcwOHpcIlxuXHRcdFx0XHRcdFx0ZmlsbC1ydWxlPVwiZXZlbm9kZFwiLz5cblx0XHRcdFx0PC9zdmc+XG5cdFx0XHQ8L2Rpdj5cblx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLXRpbGUtY29udGVudFwiPlxuXHRcdFx0XHQ8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cdFx0XHQ8L2Rpdj5cblx0XHQ8L2xhYmVsPlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIFNlbGVjdGlvblRpbGUgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcblx0c3RhdGljIHRpbGVDb3VudCA9IDA7XG5cblx0LyoqXG5cdCAqIEBkZXByZWNhdGVkIHNpbmNlIHY1IC0gVXNlIGBjZHNMYXllcmAgZGlyZWN0aXZlIGluc3RlYWRcblx0ICogU2V0IHRvIGBcImxpZ2h0XCJgIHRvIGFwcGx5IHRoZSBsaWdodCBzdHlsZVxuXHQgKi9cblx0QElucHV0KCkgdGhlbWU6IFwibGlnaHRcIiB8IFwiZGFya1wiID0gXCJkYXJrXCI7XG5cblx0LyoqXG5cdCAqIFRoZSB1bmlxdWUgaWQgZm9yIHRoZSBpbnB1dC5cblx0ICovXG5cdEBJbnB1dCgpIGlkID0gYHRpbGUtJHtTZWxlY3Rpb25UaWxlLnRpbGVDb3VudH1gO1xuXG5cdC8qKlxuXHQgKiBVcGRhdGluZyB0aGUgc3RhdGUgb2YgdGhlIGlucHV0IHRvIG1hdGNoIHRoZSBzdGF0ZSBvZiB0aGUgcGFyYW1ldGVyIHBhc3NlZCBpbi5cblx0ICogU2V0IHRvIGB0cnVlYCBpZiB0aGlzIHRpbGUgc2hvdWxkIGJlIHNlbGVjdGVkLlxuXHQgKi9cblx0QElucHV0KCkgc2V0IHNlbGVjdGVkKHZhbHVlOiBib29sZWFuKSB7XG5cdFx0Ly8gSWYgYW4gaW5pdGlhbCBzZWxlY3RlZCB2YWx1ZSBpcyBzZXQgYmVmb3JlIGlucHV0IGV4aXN0cywgd2Ugc2F2ZVxuXHRcdC8vIHRoZSB2YWx1ZSBhbmQgY2hlY2sgYWdhaW4gd2hlbiBpbnB1dCBleGlzdHMgaW4gYEFmdGVyVmlld0luaXRgLlxuXHRcdHRoaXMuX3NlbGVjdGVkID0gdmFsdWUgPyB0cnVlIDogbnVsbDtcblx0XHRpZiAodGhpcy5pbnB1dCkge1xuXHRcdFx0dGhpcy5pbnB1dC5uYXRpdmVFbGVtZW50LmNoZWNrZWQgPSB0aGlzLl9zZWxlY3RlZDtcblx0XHR9XG5cdH1cblxuXHRnZXQgc2VsZWN0ZWQoKSB7XG5cdFx0cmV0dXJuIHRoaXMuaW5wdXQgPyB0aGlzLmlucHV0Lm5hdGl2ZUVsZW1lbnQuY2hlY2tlZCA6IGZhbHNlO1xuXHR9XG5cdC8qKlxuXHQgKiBUaGUgdmFsdWUgZm9yIHRoZSB0aWxlLiBSZXR1cm5lZCB2aWEgYG5nTW9kZWxgIG9yIGBzZWxlY3RlZGAgZXZlbnQgb24gdGhlIGNvbnRhaW5pbmcgYFRpbGVHcm91cGAuXG5cdCAqL1xuXHRASW5wdXQoKSB2YWx1ZTogc3RyaW5nO1xuXHQvKipcblx0ICogSW50ZXJuYWwgZXZlbnQgdXNlZCB0byBub3RpZnkgdGhlIGNvbnRhaW5pbmcgYFRpbGVHcm91cGAgb2YgY2hhbmdlcy5cblx0ICovXG5cdEBPdXRwdXQoKSBjaGFuZ2U6IEV2ZW50RW1pdHRlcjxFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cblx0LyoqXG5cdCAqIFNldCB0byBgdHJ1ZWAgdG8gZGlzYWJsZSB0aGUgc2VsZWN0aW9uIHRpbGUuXG5cdCAqL1xuXHRASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXG5cdC8qKlxuXHQgKiBTZXQgYnkgdGhlIGNvbnRhaW5pbmcgYFRpbGVHcm91cGAuIFVzZWQgZm9yIHRoZSBgbmFtZWAgcHJvcGVydHkgb24gdGhlIGlucHV0LlxuXHQgKi9cblx0bmFtZSA9IFwidGlsZS1ncm91cC11bmJvdW5kXCI7XG5cdC8qKlxuXHQgKiBEZWZpbmVzIHdoZXRoZXIgb3Igbm90IHRoZSBgU2VsZWN0aW9uVGlsZWAgc3VwcG9ydHMgc2VsZWN0aW5nIG11bHRpcGxlIHRpbGVzIGFzIG9wcG9zZWQgdG8gc2luZ2xlXG5cdCAqIHRpbGUgc2VsZWN0aW9uLlxuXHQgKi9cblx0bXVsdGlwbGUgPSB0cnVlO1x0Ly8gU2V0IHRvIHRydWUgYmVjYXVzZSBvZiB0aGUgd2F5IHRpbGUgZ3JvdXAgc2V0cyBpdCB1cC5cblx0XHRcdFx0XHRcdC8vIElmIGl0IGlzIGZpcnN0IHVuZGVmaW5lZCB0aGVuIHNldCB0byB0cnVlLCB0aGUgdHlwZSB3aWxsIGNoYW5nZSBmcm9tIHJhZGlvIHRvIGNoZWNrYm94IGFuZCBkZXNlbGVjdHMgdGhlIGlucHV0cy5cblxuXHRAVmlld0NoaWxkKFwiaW5wdXRcIiwgeyBzdGF0aWM6IHRydWUgfSkgaW5wdXQ7XG5cblx0Ly8gSWYgYW4gaW5pdGlhbCBzZWxlY3RlZCB2YWx1ZSBpcyBzZXQgYmVmb3JlIGlucHV0IGV4aXN0cywgd2Ugc2F2ZVxuXHQvLyB0aGUgdmFsdWUgYW5kIGNoZWNrIGFnYWluIHdoZW4gaW5wdXQgZXhpc3RzIGluIGBBZnRlclZpZXdJbml0YC5cblx0cHJvdGVjdGVkIF9zZWxlY3RlZCA9IG51bGw7XG5cblx0Y29uc3RydWN0b3IocHVibGljIGkxOG46IEkxOG4pIHtcblx0XHRTZWxlY3Rpb25UaWxlLnRpbGVDb3VudCsrO1xuXHR9XG5cblx0bmdBZnRlclZpZXdJbml0KCkge1xuXHRcdGlmICh0aGlzLmlucHV0KSB7XG5cdFx0XHRzZXRUaW1lb3V0KCgpID0+IHtcblx0XHRcdFx0dGhpcy5pbnB1dC5uYXRpdmVFbGVtZW50LmNoZWNrZWQgPSB0aGlzLl9zZWxlY3RlZDtcblx0XHRcdH0pO1xuXHRcdH1cblx0fVxuXG5cdEBIb3N0TGlzdGVuZXIoXCJrZXlkb3duXCIsIFtcIiRldmVudFwiXSlcblx0a2V5Ym9hcmRJbnB1dChldmVudCkge1xuXHRcdGlmIChldmVudC5rZXkgPT09IFwiRW50ZXJcIiB8fCBldmVudC5rZXkgPT09IFwiU3BhY2ViYXJcIiB8fCBldmVudC5rZXkgPT09IFwiIFwiKSB7XG5cdFx0XHR0aGlzLnNlbGVjdGVkID0gIXRoaXMuc2VsZWN0ZWQ7XG5cdFx0XHR0aGlzLmNoYW5nZS5lbWl0KGV2ZW50KTtcblx0XHR9XG5cdH1cblxuXHRvbkNoYW5nZShldmVudCkge1xuXHRcdHRoaXMuY2hhbmdlLmVtaXQoZXZlbnQpO1xuXHR9XG59XG5cblxuIl19