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)};
`;