carbon-components-angular
Version:
Next generation components
382 lines (373 loc) • 16.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, HostBinding, EventEmitter, Output, Directive, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
/**
* 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 = "";
this.skeleton = false;
}
/**
* @todo
* Remove `cds--tag--${this.size}` in v7
*/
get attrClass() {
const skeletonClass = this.skeleton ? "cds--skeleton" : "";
const sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;
return `cds--tag cds--tag--${this.type} ${sizeClass} ${skeletonClass} ${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", skeleton: "skeleton" }, host: { properties: { "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"] }] });
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-container *ngIf="!skeleton">
<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
<span class="cds--tag__label">
<ng-content></ng-content>
</span>
</ng-container>
`
}]
}], propDecorators: { type: [{
type: Input
}], size: [{
type: Input
}], class: [{
type: Input
}], skeleton: [{
type: Input
}], attrClass: [{
type: HostBinding,
args: ["attr.class"]
}] } });
class TagFilter extends Tag {
constructor() {
super(...arguments);
this.closeButtonLabel = "Clear Filter";
this.disabled = false;
/**
* 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();
}
/**
* @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" : "";
return `cds--tag cds--tag--filter cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;
}
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: `
<ng-container *ngIf="!skeleton">
<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
<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>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: `
<ng-container *ngIf="!skeleton">
<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
<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>
</ng-container>
`
}]
}], 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 TagIconDirective {
constructor() {
this.tagIcon = true;
}
}
TagIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TagIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
TagIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TagIconDirective, selector: "[cdsTagIcon], [ibmTagIcon]", host: { properties: { "class.cds--tag__custom-icon": "this.tagIcon" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TagIconDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsTagIcon], [ibmTagIcon]"
}]
}], propDecorators: { tagIcon: [{
type: HostBinding,
args: ["class.cds--tag__custom-icon"]
}] } });
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"]
}] } });
class TagOperationalComponent extends Tag {
constructor() {
super(...arguments);
this.role = "button";
this.buttonType = "button";
this.tabIndex = 0;
this.disabled = false;
}
/**
* @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" : "";
return `cds--tag cds--tag--operational cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;
}
}
TagOperationalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TagOperationalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
TagOperationalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TagOperationalComponent, selector: "cds-tag-operational, ibm-tag-operational", inputs: { disabled: "disabled" }, host: { properties: { "attr.role": "this.role", "attr.type": "this.buttonType", "attr.tabindex": "this.tabIndex", "attr.class": "this.attrClass" } }, usesInheritance: true, 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: TagOperationalComponent, decorators: [{
type: Component,
args: [{
selector: "cds-tag-operational, ibm-tag-operational",
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"]
}], disabled: [{
type: Input
}], attrClass: [{
type: HostBinding,
args: ["attr.class"]
}] } });
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,
TagIconDirective,
TagSelectableComponent,
TagOperationalComponent], imports: [CommonModule, IconModule], exports: [Tag,
TagFilter,
TagIconDirective,
TagSelectableComponent,
TagOperationalComponent] });
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,
TagIconDirective,
TagSelectableComponent,
TagOperationalComponent
],
exports: [
Tag,
TagFilter,
TagIconDirective,
TagSelectableComponent,
TagOperationalComponent
],
imports: [CommonModule, IconModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Tag, TagFilter, TagIconDirective, TagModule, TagOperationalComponent, TagSelectableComponent };
//# sourceMappingURL=carbon-components-angular-tag.mjs.map