Merge pull request #731 from dxc-technology/fix-disabled-tag

[Patch] Fixed tag when disabled and has actions

Author: marcialfps

projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/tag-preview/tag-preview.component.html

@@ -62,5 +62,27 @@
         <img src="{{ dxcLogoPath }}" />
       </dxc-tag-icon>
     </dxc-tag>
+
+    <dxc-tag
+      margin="xsmall"
+      label="DXC TECHNOLOGY"
+      disabled="true"
+      linkHref="www.google.es"
+    >
+      <dxc-tag-icon>
+        <img src="{{ dxcLogoPath }}" />
+      </dxc-tag-icon>
+    </dxc-tag>
+
+    <dxc-tag
+      margin="xsmall"
+      label="DXC TECHNOLOGY"
+      (onClick)="onClick()"
+      disabled="true"
+    >
+      <dxc-tag-icon>
+        <img src="{{ dxcLogoPath }}" />
+      </dxc-tag-icon>
+    </dxc-tag>
   </tbuilder-component-mode>
 </div>

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");
+  }
 }

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