carbon-components-angular
Version:
Next generation components
70 lines • 5.96 kB
JavaScript
import { Component, Input, HostBinding } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 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)
*/
export 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"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy90YWcvdGFnLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxXQUFXLEVBQ1gsTUFBTSxlQUFlLENBQUM7OztBQWtCdkI7Ozs7Ozs7O0dBUUc7QUFZSCxNQUFNLE9BQU8sR0FBRztJQVhoQjtRQVlDOztXQUVHO1FBQ00sU0FBSSxHQUFZLE1BQU0sQ0FBQztRQUVoQzs7V0FFRztRQUNNLFNBQUksR0FBdUIsSUFBSSxDQUFDO1FBRWhDLFVBQUssR0FBRyxFQUFFLENBQUM7UUFFWCxhQUFRLEdBQUcsS0FBSyxDQUFDO0tBWTFCO0lBVkE7OztPQUdHO0lBQ0gsSUFBK0IsU0FBUztRQUN2QyxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUMzRCxNQUFNLFNBQVMsR0FBRyxhQUFhLElBQUksQ0FBQyxJQUFJLHNCQUFzQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFFMUUsT0FBTyxzQkFBc0IsSUFBSSxDQUFDLElBQUksSUFBSSxTQUFTLElBQUksYUFBYSxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUN0RixDQUFDOztnR0F4QlcsR0FBRztvRkFBSCxHQUFHLGdNQVRMOzs7Ozs7O0VBT1Q7MkZBRVcsR0FBRztrQkFYZixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLFFBQVEsRUFBRTs7Ozs7OztFQU9UO2lCQUNEOzhCQUtTLElBQUk7c0JBQVosS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLO2dCQUVHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBTXlCLFNBQVM7c0JBQXZDLFdBQVc7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0SW5wdXQsXG5cdEhvc3RCaW5kaW5nXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbi8qKlxuICogU3VwcG9ydGVkIHRhZyB0eXBlcyBmb3IgY2FyYm9uIHYxMFxuICovXG5leHBvcnQgdHlwZSBUYWdUeXBlID0gXCJyZWRcIiB8XG5cdFwibWFnZW50YVwiIHxcblx0XCJwdXJwbGVcIiB8XG5cdFwiYmx1ZVwiIHxcblx0XCJjeWFuXCIgfFxuXHRcInRlYWxcIiB8XG5cdFwiZ3JlZW5cIiB8XG5cdFwiZ3JheVwiIHxcblx0XCJjb29sLWdyYXlcIiB8XG5cdFwid2FybS1ncmF5XCIgfFxuXHRcImhpZ2gtY29udHJhc3RcIiB8XG5cdFwib3V0bGluZVwiO1xuXG4vKipcbiAqIENvbXBvbmVudCB0aGF0IHJlcHJlc2VudHMgYSB0YWcgZm9yIGxhYmVsbGluZy9jYXRlZ29yaXppbmcgdXNpbmcga2V5d29yZHMuIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgVGFnTW9kdWxlIH0gZnJvbSAnY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhcic7XG4gKiBgYGBcbiAqXG4gKiBbU2VlIGRlbW9dKC4uLy4uLz9wYXRoPS9zdG9yeS9jb21wb25lbnRzLXRhZy0tYmFzaWMpXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtdGFnLCBpYm0tdGFnXCIsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PG5nLWNvbnRhaW5lciAqbmdJZj1cIiFza2VsZXRvblwiPlxuXHRcdFx0PG5nLWNvbnRlbnQgc2VsZWN0PVwiW2Nkc1RhZ0ljb25dLFtpYm1UYWdJY29uXVwiPjwvbmctY29udGVudD5cblx0XHRcdDxzcGFuIGNsYXNzPVwiY2RzLS10YWdfX2xhYmVsXCI+XG5cdFx0XHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0XHRcdDwvc3Bhbj5cblx0XHQ8L25nLWNvbnRhaW5lcj5cblx0YFxufSlcbmV4cG9ydCBjbGFzcyBUYWcge1xuXHQvKipcblx0ICogVHlwZSBvZiB0aGUgdGFnIGRldGVybWluZXMgdGhlIHN0eWxpbmdcblx0ICovXG5cdEBJbnB1dCgpIHR5cGU6IFRhZ1R5cGUgPSBcImdyYXlcIjtcblxuXHQvKipcblx0ICogVGFnIHJlbmRlciBzaXplXG5cdCAqL1xuXHRASW5wdXQoKSBzaXplOiBcInNtXCIgfCBcIm1kXCIgfCBcImxnXCIgPSBcIm1kXCI7XG5cblx0QElucHV0KCkgY2xhc3MgPSBcIlwiO1xuXG5cdEBJbnB1dCgpIHNrZWxldG9uID0gZmFsc2U7XG5cblx0LyoqXG5cdCAqIEB0b2RvXG5cdCAqIFJlbW92ZSBgY2RzLS10YWctLSR7dGhpcy5zaXplfWAgaW4gdjdcblx0ICovXG5cdEBIb3N0QmluZGluZyhcImF0dHIuY2xhc3NcIikgZ2V0IGF0dHJDbGFzcygpIHtcblx0XHRjb25zdCBza2VsZXRvbkNsYXNzID0gdGhpcy5za2VsZXRvbiA/IFwiY2RzLS1za2VsZXRvblwiIDogXCJcIjtcblx0XHRjb25zdCBzaXplQ2xhc3MgPSBgY2RzLS10YWctLSR7dGhpcy5zaXplfSBjZHMtLWxheW91dC0tc2l6ZS0ke3RoaXMuc2l6ZX1gO1xuXG5cdFx0cmV0dXJuIGBjZHMtLXRhZyBjZHMtLXRhZy0tJHt0aGlzLnR5cGV9ICR7c2l6ZUNsYXNzfSAke3NrZWxldG9uQ2xhc3N9ICR7dGhpcy5jbGFzc31gO1xuXHR9XG59XG4iXX0=