@aquera/nile-elements 0.0.5-2 → 0.0.5-4

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.5-2",
+  "version": "0.0.5-4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-link/nile-link.css.ts

@@ -25,7 +25,7 @@ export const styles = css`
     gap: 8px;
     height: 38px;
     box-sizing: border-box;
-    cursor: pointer
+    cursor: pointer;
   }
 
   .link__label {
@@ -43,7 +43,11 @@ export const styles = css`
     color: rgba(0, 94, 166, 0.5);
     cursor: not-allowed;
     opacity: 0.6;
-    pointer-events:none;
+    pointer-events: none;
+  }
+
+  :host(.link--disabled) {
+    pointer-events: none;
   }
 
   .link:not(.link--disabled):not(.link__button):hover {
@@ -67,6 +71,10 @@ export const styles = css`
     border-radius: 4px;
     background: rgba(0, 94, 166, 0.1);
   }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
 `;
 
 export default [styles];

package/src/nile-link/nile-link.ts

@@ -22,16 +22,20 @@ import { watch } from '../internal/watch';
  */
 @customElement('nile-link')
 export class NileLink extends NileElement {
+  /**
+   * The styles for Link
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
 
-	/**
-	 * The styles for Link
-	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-	 */
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
-
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    '[default]',
+    'prefix',
+    'suffix'
+  );
 
   @state() private hasFocus = false;
 
@@ -40,6 +44,25 @@ export class NileLink extends NileElement {
 
   @property({ type: Boolean }) button = false;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleHostClick = this.handleHostClick.bind(this);
+    this.addEventListener('click', this.handleHostClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleHostClick);
+  }
+
+  private handleHostClick(event: MouseEvent) {
+    // Prevent the click event from being emitted when the button is disabled
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+    }
+  }
 
   private handleBlur() {
     this.hasFocus = false;
@@ -51,21 +74,24 @@ export class NileLink extends NileElement {
     this.emit('nile-focus');
   }
 
-	/**
-	 * Render method
-	 * @slot This is a slot test
-	 */
-	public render(): TemplateResult {
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
     return html`
       <div
         part="base"
         class=${classMap({
           link: true,
           'link--disabled': this.disabled,
-          'link__button': this.button
+          link__button: this.button,
         })}
         ?disabled=${ifDefined(this.disabled)}
-        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+        title=${
+          this
+            .title /* An empty title prevents browser validation tooltips from appearing on hover */
+        }
         aria-disabled=${this.disabled ? 'true' : 'false'}
         tabindex=${this.disabled ? '-1' : '0'}
         @blur=${this.handleBlur}
@@ -78,8 +104,7 @@ export class NileLink extends NileElement {
     `;
   }
 
-
-	/* #endregion */
+  /* #endregion */
 }
 
 export default NileLink;