carbon-components-angular
Version:
Next generation components
163 lines (157 loc) • 6.81 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
import * as i1 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
import { CommonModule } from '@angular/common';
/**
* Component that represents a tag for labelling/categorizing using keywords. Get started with importing the module:
*
* ```typescript
* import { TagModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-tag--basic)
*/
class Tag {
constructor() {
/**
* Type of the tag determines the styling
*/
this.type = "gray";
/**
* Tag render size
*/
this.size = "md";
this.class = "";
}
get attrClass() {
return `cds--tag cds--tag--${this.type} cds--tag--${this.size} cds--layout--size-${this.size} ${this.class}`;
}
}
Tag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Tag, deps: [], target: i0.ɵɵFactoryTarget.Component });
Tag.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Tag, selector: "cds-tag, ibm-tag", inputs: { type: "type", size: "size", class: "class" }, host: { properties: { "attr.class": "this.attrClass" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Tag, decorators: [{
type: Component,
args: [{
selector: "cds-tag, ibm-tag",
template: `<ng-content></ng-content>`
}]
}], propDecorators: { type: [{
type: Input
}], size: [{
type: Input
}], class: [{
type: Input
}], attrClass: [{
type: HostBinding,
args: ["attr.class"]
}] } });
class TagFilter extends Tag {
constructor() {
super(...arguments);
this.closeButtonLabel = "Clear Filter";
/**
* Function for close/delete the tag
*/
this.close = new EventEmitter();
/**
* We need to stop the immedate propagation of click on the close button
* to prevent undesired effects when used within dialogs.
*
* We need to emit a click event on close to allow for clicks to be listened
* to on the immediate close button element. `action` distinguishes between clicks on
* the tag vs. clicks on the close button.
*/
this.click = new EventEmitter();
}
onClick(event) {
event.stopImmediatePropagation();
if (!this.disabled) {
this.click.emit({ action: "click" });
}
}
onClose(event) {
event.stopImmediatePropagation();
this.click.emit({ action: "close" });
this.close.emit();
}
get attrClass() {
return `cds--tag cds--tag--filter cds--tag--${this.type} cds--tag--${this.size} cds--layout--size-${this.size} ${this.class}${this.disabled ? " cds--tag--disabled" : ""}`;
}
get attrAriaLabel() {
return `${this.title || ""} ${this.closeButtonLabel}`.trim();
}
}
TagFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TagFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
TagFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TagFilter, selector: "cds-tag-filter, ibm-tag-filter", inputs: { closeButtonLabel: "closeButtonLabel", disabled: "disabled", title: "title" }, outputs: { close: "close", click: "click" }, host: { properties: { "attr.class": "this.attrClass", "attr.aria-label": "this.attrAriaLabel" } }, usesInheritance: true, ngImport: i0, template: `
<span
class="cds--tag__label"
[attr.title]="title ? title : null"
(click)="onClick($event)">
<ng-content></ng-content>
</span>
<button
class="cds--tag__close-icon"
(click)="onClose($event)"
[disabled]="disabled"
[title]="closeButtonLabel">
<span class="cds--visually-hidden">{{closeButtonLabel}}</span>
<svg cdsIcon="close" size="16"></svg>
</button>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.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: TagFilter, decorators: [{
type: Component,
args: [{
selector: "cds-tag-filter, ibm-tag-filter",
template: `
<span
class="cds--tag__label"
[attr.title]="title ? title : null"
(click)="onClick($event)">
<ng-content></ng-content>
</span>
<button
class="cds--tag__close-icon"
(click)="onClose($event)"
[disabled]="disabled"
[title]="closeButtonLabel">
<span class="cds--visually-hidden">{{closeButtonLabel}}</span>
<svg cdsIcon="close" size="16"></svg>
</button>
`
}]
}], propDecorators: { closeButtonLabel: [{
type: Input
}], disabled: [{
type: Input
}], title: [{
type: Input
}], close: [{
type: Output
}], click: [{
type: Output
}], attrClass: [{
type: HostBinding,
args: ["attr.class"]
}], attrAriaLabel: [{
type: HostBinding,
args: ["attr.aria-label"]
}] } });
class TagModule {
}
TagModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TagModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TagModule, declarations: [Tag, TagFilter], imports: [CommonModule, IconModule], exports: [Tag, TagFilter] });
TagModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TagModule, imports: [CommonModule, IconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TagModule, decorators: [{
type: NgModule,
args: [{
declarations: [Tag, TagFilter],
exports: [Tag, TagFilter],
imports: [CommonModule, IconModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Tag, TagFilter, TagModule };
//# sourceMappingURL=carbon-components-angular-tag.mjs.map