carbon-components-angular
Version:
Next generation components
89 lines • 8.62 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, HostListener, Input, Output } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TagSelectableComponent {
constructor() {
this.role = "button";
this.buttonType = "button";
this.tabIndex = 0;
this.size = "md";
this.skeleton = false;
this.disabled = false;
this.class = "";
this.selected = false;
this.selectedChange = new EventEmitter();
}
get ariaPressed() {
return this.selected;
}
onClick() {
this.selected = !this.selected;
this.selectedChange.emit(this.selected);
}
/**
* @todo
* Remove `cds--tag--${this.size}` in v7
*/
get attrClass() {
const disabledClass = this.disabled ? "cds--tag--disabled" : "";
const sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;
const skeletonClass = this.skeleton ? "cds--skeleton" : "";
const selectedClass = this.selected ? "cds--tag--selectable-selected" : "";
return `cds--tag cds--tag--selectable ${selectedClass} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;
}
}
TagSelectableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TagSelectableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TagSelectableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TagSelectableComponent, selector: "cds-tag-selectable, ibm-tag-selectable", inputs: { size: "size", skeleton: "skeleton", disabled: "disabled", class: "class", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.role": "this.role", "attr.type": "this.buttonType", "attr.tabindex": "this.tabIndex", "attr.aria-pressed": "this.ariaPressed", "attr.class": "this.attrClass" } }, ngImport: i0, template: `
<ng-container *ngIf="!skeleton">
<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
<span class="cds--tag__label">
<ng-content></ng-content>
</span>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TagSelectableComponent, decorators: [{
type: Component,
args: [{
selector: "cds-tag-selectable, ibm-tag-selectable",
template: `
<ng-container *ngIf="!skeleton">
<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
<span class="cds--tag__label">
<ng-content></ng-content>
</span>
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], propDecorators: { role: [{
type: HostBinding,
args: ["attr.role"]
}], buttonType: [{
type: HostBinding,
args: ["attr.type"]
}], tabIndex: [{
type: HostBinding,
args: ["attr.tabindex"]
}], ariaPressed: [{
type: HostBinding,
args: ["attr.aria-pressed"]
}], size: [{
type: Input
}], skeleton: [{
type: Input
}], disabled: [{
type: Input
}], class: [{
type: Input
}], selected: [{
type: Input
}], selectedChange: [{
type: Output
}], onClick: [{
type: HostListener,
args: ["click"]
}], attrClass: [{
type: HostBinding,
args: ["attr.class"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLXNlbGVjdGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3RhZy90YWctc2VsZWN0YWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFdBQVcsRUFDWCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixNQUFNLGVBQWUsQ0FBQzs7O0FBY3ZCLE1BQU0sT0FBTyxzQkFBc0I7SUFabkM7UUFhMkIsU0FBSSxHQUFHLFFBQVEsQ0FBQztRQUNoQixlQUFVLEdBQUcsUUFBUSxDQUFDO1FBQ2xCLGFBQVEsR0FBRyxDQUFDLENBQUM7UUFLbEMsU0FBSSxHQUF1QixJQUFJLENBQUM7UUFDaEMsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWhCLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztLQW9CdkQ7SUE5QkEsSUFBc0MsV0FBVztRQUNoRCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDdEIsQ0FBQztJQVdELE9BQU87UUFDTixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUMvQixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVEOzs7T0FHRztJQUNILElBQStCLFNBQVM7UUFDdkMsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsb0JBQW9CLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUNoRSxNQUFNLFNBQVMsR0FBRyxhQUFhLElBQUksQ0FBQyxJQUFJLHNCQUFzQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDMUUsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFDM0QsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsK0JBQStCLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUUzRSxPQUFPLGlDQUFpQyxhQUFhLElBQUksYUFBYSxJQUFJLFNBQVMsSUFBSSxhQUFhLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3RILENBQUM7O21IQWpDVyxzQkFBc0I7dUdBQXRCLHNCQUFzQiw2Y0FWeEI7Ozs7Ozs7RUFPVDsyRkFHVyxzQkFBc0I7a0JBWmxDLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHdDQUF3QztvQkFDbEQsUUFBUSxFQUFFOzs7Ozs7O0VBT1Q7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07aUJBQy9DOzhCQUUwQixJQUFJO3NCQUE3QixXQUFXO3VCQUFDLFdBQVc7Z0JBQ0UsVUFBVTtzQkFBbkMsV0FBVzt1QkFBQyxXQUFXO2dCQUNNLFFBQVE7c0JBQXJDLFdBQVc7dUJBQUMsZUFBZTtnQkFDVSxXQUFXO3NCQUFoRCxXQUFXO3VCQUFDLG1CQUFtQjtnQkFJdkIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFFSSxjQUFjO3NCQUF2QixNQUFNO2dCQUdQLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPO2dCQVVVLFNBQVM7c0JBQXZDLFdBQVc7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuXHRDb21wb25lbnQsXG5cdEV2ZW50RW1pdHRlcixcblx0SG9zdEJpbmRpbmcsXG5cdEhvc3RMaXN0ZW5lcixcblx0SW5wdXQsXG5cdE91dHB1dFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6IFwiY2RzLXRhZy1zZWxlY3RhYmxlLCBpYm0tdGFnLXNlbGVjdGFibGVcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8bmctY29udGFpbmVyICpuZ0lmPVwiIXNrZWxldG9uXCI+XG5cdFx0XHQ8bmctY29udGVudCBzZWxlY3Q9XCJbY2RzVGFnSWNvbl0sW2libVRhZ0ljb25dXCI+PC9uZy1jb250ZW50PlxuXHRcdFx0PHNwYW4gY2xhc3M9XCJjZHMtLXRhZ19fbGFiZWxcIj5cblx0XHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdFx0PC9zcGFuPlxuXHRcdDwvbmctY29udGFpbmVyPlxuXHRgLFxuXHRjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBUYWdTZWxlY3RhYmxlQ29tcG9uZW50IHtcblx0QEhvc3RCaW5kaW5nKFwiYXR0ci5yb2xlXCIpIHJvbGUgPSBcImJ1dHRvblwiO1xuXHRASG9zdEJpbmRpbmcoXCJhdHRyLnR5cGVcIikgYnV0dG9uVHlwZSA9IFwiYnV0dG9uXCI7XG5cdEBIb3N0QmluZGluZyhcImF0dHIudGFiaW5kZXhcIikgdGFiSW5kZXggPSAwO1xuXHRASG9zdEJpbmRpbmcoXCJhdHRyLmFyaWEtcHJlc3NlZFwiKSBnZXQgYXJpYVByZXNzZWQoKSB7XG5cdFx0cmV0dXJuIHRoaXMuc2VsZWN0ZWQ7XG5cdH1cblxuXHRASW5wdXQoKSBzaXplOiBcInNtXCIgfCBcIm1kXCIgfCBcImxnXCIgPSBcIm1kXCI7XG5cdEBJbnB1dCgpIHNrZWxldG9uID0gZmFsc2U7XG5cdEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cdEBJbnB1dCgpIGNsYXNzID0gXCJcIjtcblx0QElucHV0KCkgc2VsZWN0ZWQgPSBmYWxzZTtcblxuXHRAT3V0cHV0KCkgc2VsZWN0ZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cblx0QEhvc3RMaXN0ZW5lcihcImNsaWNrXCIpXG5cdG9uQ2xpY2soKSB7XG5cdFx0dGhpcy5zZWxlY3RlZCA9ICF0aGlzLnNlbGVjdGVkO1xuXHRcdHRoaXMuc2VsZWN0ZWRDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkKTtcblx0fVxuXG5cdC8qKlxuXHQgKiBAdG9kb1xuXHQgKiBSZW1vdmUgYGNkcy0tdGFnLS0ke3RoaXMuc2l6ZX1gIGluIHY3XG5cdCAqL1xuXHRASG9zdEJpbmRpbmcoXCJhdHRyLmNsYXNzXCIpIGdldCBhdHRyQ2xhc3MoKSB7XG5cdFx0Y29uc3QgZGlzYWJsZWRDbGFzcyA9IHRoaXMuZGlzYWJsZWQgPyBcImNkcy0tdGFnLS1kaXNhYmxlZFwiIDogXCJcIjtcblx0XHRjb25zdCBzaXplQ2xhc3MgPSBgY2RzLS10YWctLSR7dGhpcy5zaXplfSBjZHMtLWxheW91dC0tc2l6ZS0ke3RoaXMuc2l6ZX1gO1xuXHRcdGNvbnN0IHNrZWxldG9uQ2xhc3MgPSB0aGlzLnNrZWxldG9uID8gXCJjZHMtLXNrZWxldG9uXCIgOiBcIlwiO1xuXHRcdGNvbnN0IHNlbGVjdGVkQ2xhc3MgPSB0aGlzLnNlbGVjdGVkID8gXCJjZHMtLXRhZy0tc2VsZWN0YWJsZS1zZWxlY3RlZFwiIDogXCJcIjtcblxuXHRcdHJldHVybiBgY2RzLS10YWcgY2RzLS10YWctLXNlbGVjdGFibGUgJHtzZWxlY3RlZENsYXNzfSAke2Rpc2FibGVkQ2xhc3N9ICR7c2l6ZUNsYXNzfSAke3NrZWxldG9uQ2xhc3N9ICR7dGhpcy5jbGFzc31gO1xuXHR9XG59XG4iXX0=