feat: add icon support

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

src/tag/tag-filter.component.ts

@@ -3,34 +3,40 @@ import {
 	Output,
 	EventEmitter,
 	HostBinding,
-	Input
+	Input,
+	TemplateRef
 } from "@angular/core";
 import { Tag } from "./tag.component";
 
 @Component({
 	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>
+		<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>
 	`
 })
 export class TagFilter extends Tag {
 	@Input() closeButtonLabel = "Clear Filter";
 	@Input() disabled: boolean;
 	@Input() title: string;
 
+	@Input() icon: string | TemplateRef<any>;
+
 	/**
 	 * Function for close/delete the tag
 	 */
@@ -59,8 +65,16 @@ export class TagFilter extends Tag {
 		this.close.emit();
 	}
 
+	/**
+	 * @todo
+	 * Remove `cds--tag--${this.size}` in v7
+	 */
 	@HostBinding("attr.class") 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" : ""}`;
+		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}`;
 	}
 
 	@HostBinding("attr.aria-label") get attrAriaLabel() {

src/tag/tag-icon.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, HostBinding } from "@angular/core";
+
+@Directive({
+	selector: "[cdsTagIcon], [ibmTagIcon]"
+})
+export class TagIconDirective {
+	@HostBinding("class.cds--tag__custom-icon") tagIcon = true;
+}

src/tag/tag.component.ts

@@ -31,7 +31,14 @@ export type TagType = "red" |
  */
 @Component({
 	selector: "cds-tag, ibm-tag",
-	template: `<ng-content></ng-content>`
+	template: `
+		<ng-container *ngIf="!skeleton">
+			<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>
+			<span class="cds--tag__label">
+				<ng-content></ng-content>
+			</span>
+		</ng-container>
+	`
 })
 export class Tag {
 	/**
@@ -42,11 +49,20 @@ export class Tag {
 	/**
 	 * Tag render size
 	 */
-	@Input() size: "sm" | "md" = "md";
+	@Input() size: "sm" | "md" | "lg" = "md";
 
 	@Input() class = "";
 
+	@Input() skeleton = false;
+
+	/**
+	 * @todo
+	 * Remove `cds--tag--${this.size}` in v7
+	 */
 	@HostBinding("attr.class") get attrClass() {
-		return `cds--tag cds--tag--${this.type} cds--tag--${this.size} cds--layout--size-${this.size} ${this.class}`;
+		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}`;
 	}
 }