@aquera/nile-elements 0.0.5-6 → 0.0.5-8

package/package.json

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

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

@@ -13,6 +13,9 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     display: inline-block;
+  }
+
+  :host(.full-width) {
     width: 100%;
   }
 

package/src/nile-checkbox/nile-checkbox.ts

@@ -162,6 +162,25 @@ export class NileCheckbox extends NileElement {
     this.input.blur();
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateHostClass();
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('helpText')) {
+      this.updateHostClass();
+    }
+  }
+
+  private updateHostClass() {
+    if (this.helpText) {
+      this.classList.add('full-width');
+    } else {
+      this.classList.remove('full-width');
+    }
+  }
 
   render() {
     const hasHelpText = this.helpText ? true : false;
@@ -239,11 +258,14 @@ export class NileCheckbox extends NileElement {
       </label>
 
       ${hasHelpText
-        ? html` <nile-icon name="question" @click=${this.toggleHelpText} class="checkbox__helptext-icon"></nile-icon> `
-        : ``}
-
-      ${hasHelpText && this.showHelpText
-        ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+        ? html`
+            <nile-tooltip content="${this.helpText}" placement="bottom">
+              <nile-icon
+                name="question"
+                class="checkbox__helptext-icon"
+              ></nile-icon>
+            </nile-tooltip>
+          `
         : ``}
 
       ${hasErrorMessage

package/src/nile-error-message/nile-error-message.css.ts

@@ -40,7 +40,7 @@ export const styles = css`
   .nile-error-message__more-button {
     color: var(--nile-colors-primary-600);
     cursor: pointer;
-    word-break: break-word;
+    white-space: nowrap;
   }
 
   .nile-error-message__response-expanded {

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

@@ -43,12 +43,8 @@ export const styles = css`
     color: rgba(0, 94, 166, 0.5);
     cursor: not-allowed;
     opacity: 0.6;
-    pointer-events: none;
   }
 
-  :host(.link--disabled) {
-    pointer-events: none;
-  }
 
   .link:not(.link--disabled):not(.link__button):hover {
     color: #005291;
@@ -72,9 +68,6 @@ export const styles = css`
     background: rgba(0, 94, 166, 0.1);
   }
 
-  :host([disabled]) {
-    pointer-events: none;
-  }
 `;
 
 export default [styles];

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

@@ -74,6 +74,13 @@ export class NileLink extends NileElement {
     this.emit('nile-focus');
   }
 
+  handleClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.stopPropagation();
+      return;
+    }
+  }
+
   /**
    * Render method
    * @slot This is a slot test
@@ -96,6 +103,7 @@ export class NileLink extends NileElement {
         tabindex=${this.disabled ? '-1' : '0'}
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}
+        @click=${this.handleClick}
       >
         <slot name="prefix" part="prefix" class="link__prefix"></slot>
         <slot part="label" class="link__label"></slot>