src/tag/tag-selectable.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cds-tag-selectable, ibm-tag-selectable |
| template | |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
| class | |
Type : string
|
|
Default value : ""
|
|
|
Defined in src/tag/tag-selectable.component.ts:34
|
|
| disabled | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/tag/tag-selectable.component.ts:33
|
|
| selected | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/tag/tag-selectable.component.ts:35
|
|
| size | |
Type : "sm" | "md" | "lg"
|
|
Default value : "md"
|
|
|
Defined in src/tag/tag-selectable.component.ts:31
|
|
| skeleton | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/tag/tag-selectable.component.ts:32
|
|
| selectedChange | |
Type : EventEmitter
|
|
|
Defined in src/tag/tag-selectable.component.ts:37
|
|
| attr.aria-pressed |
Type : boolean
|
|
Defined in src/tag/tag-selectable.component.ts:27
|
| attr.class |
Type : string
|
|
Defined in src/tag/tag-selectable.component.ts:49
|
| attr.role |
Type : string
|
Default value : "button"
|
|
Defined in src/tag/tag-selectable.component.ts:24
|
| attr.tabindex |
Type : number
|
Default value : 0
|
|
Defined in src/tag/tag-selectable.component.ts:26
|
| attr.type |
Type : string
|
Default value : "button"
|
|
Defined in src/tag/tag-selectable.component.ts:25
|
| click |
click()
|
|
Defined in src/tag/tag-selectable.component.ts:40
|
| onClick |
onClick()
|
Decorators :
@HostListener('click')
|
|
Defined in src/tag/tag-selectable.component.ts:40
|
|
Returns :
void
|
| buttonType |
Type : string
|
Default value : "button"
|
Decorators :
@HostBinding('attr.type')
|
|
Defined in src/tag/tag-selectable.component.ts:25
|
| role |
Type : string
|
Default value : "button"
|
Decorators :
@HostBinding('attr.role')
|
|
Defined in src/tag/tag-selectable.component.ts:24
|
| tabIndex |
Type : number
|
Default value : 0
|
Decorators :
@HostBinding('attr.tabindex')
|
|
Defined in src/tag/tag-selectable.component.ts:26
|
| ariaPressed |
getariaPressed()
|
|
Defined in src/tag/tag-selectable.component.ts:27
|
| attrClass |
getattrClass()
|
|
Defined in src/tag/tag-selectable.component.ts:49
|
|
Remove |
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
HostBinding,
HostListener,
Input,
Output
} from "@angular/core";
@Component({
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
})
export class TagSelectableComponent {
@HostBinding("attr.role") role = "button";
@HostBinding("attr.type") buttonType = "button";
@HostBinding("attr.tabindex") tabIndex = 0;
@HostBinding("attr.aria-pressed") get ariaPressed() {
return this.selected;
}
@Input() size: "sm" | "md" | "lg" = "md";
@Input() skeleton = false;
@Input() disabled = false;
@Input() class = "";
@Input() selected = false;
@Output() selectedChange = new EventEmitter<boolean>();
@HostListener("click")
onClick() {
this.selected = !this.selected;
this.selectedChange.emit(this.selected);
}
/**
* @todo
* Remove `cds--tag--${this.size}` in v7
*/
@HostBinding("attr.class") 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}`;
}
}