diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tag-preview/tag-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tag-preview/tag-preview.component.html index 02eb120fb..5e8cc3feb 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tag-preview/tag-preview.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tag-preview/tag-preview.component.html @@ -62,5 +62,27 @@ + + + + + + + + + + + + diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tag-preview/tag-preview.component.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tag-preview/tag-preview.component.ts index 2473f2531..5cc3b671d 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tag-preview/tag-preview.component.ts +++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tag-preview/tag-preview.component.ts @@ -12,5 +12,7 @@ export class TagPreviewComponent implements OnInit { ngOnInit(): void {} - onClick() {} + onClick() { + console.log("click"); + } } diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts index 563b7793e..2af98a66b 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts @@ -197,7 +197,9 @@ export class DxcTagComponent implements OnInit { }; public onClickHandler($event: any): void { - this.onClick.emit($event); + if (!this.disabled) { + this.onClick.emit($event); + } } getShadowDepth(): string { @@ -236,17 +238,17 @@ export class DxcTagComponent implements OnInit { getDynamicStyle(inputs) { return css` display: inline-flex; - ${inputs.disabled + ${!this.isClickDefined && + (this.linkHref === null || this.linkHref === undefined) ? css` - cursor: not-allowed; + cursor: unset; ` - : this.isClickDefined || - (this.linkHref !== null && this.linkHref !== undefined) + : this.disabled ? css` - cursor: pointer; + cursor: not-allowed; ` : css` - cursor: unset; + cursor: pointer; `}; ${this.utils.getMargins(inputs.margin)}; dxc-box { @@ -317,12 +319,14 @@ export class DxcTagComponent implements OnInit { background: none; border: none; padding: 0; - cursor: pointer; + cursor: ${!this.disabled ? "pointer" : "not-allowed"}; outline: 0; } .styledLink { text-decoration: none; outline: none; + cursor: ${!this.disabled ? "pointer" : "not-allowed"}; + ${this.disabled ? "pointer-events: none;" : ""} } ${this.setActionStyle(inputs)}; `;