@aquera/nile-elements 0.0.5-7 → 0.0.5-9

package/package.json

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

package/src/nile-button/nile-button.ts

@@ -167,11 +167,13 @@ export class NileButton extends NileElement implements NileFormControl {
     super.connectedCallback();
     this.handleHostClick = this.handleHostClick.bind(this);
     this.addEventListener('click', this.handleHostClick);
+    this.emit('nile-init');
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('click', this.handleHostClick);
+    this.emit('nile-destroy');
   }
 
   firstUpdated() {

package/src/nile-calendar/nile-calendar.ts

@@ -180,6 +180,12 @@ export class NileCalendar extends NileElement {
         this.currentYear = this.value.getFullYear();
       }
     }
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   private getDaysArray(year: number, month: number): number[] {

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,31 @@ export class NileCheckbox extends NileElement {
     this.input.blur();
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateHostClass();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
+  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;

package/src/nile-chip/nile-chip.ts

@@ -126,6 +126,12 @@ export class NileChip extends NileElement {
           option => !this.value.includes(option)
         );
     }
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   private handleSelect(event: CustomEvent<CustomEventDetail>) {

package/src/nile-date-picker/nile-date-picker.ts

@@ -183,10 +183,13 @@ export class NileDatePicker extends NileElement {
         this.currentYear = this.value.getFullYear();
       }
     }
+    this.emit('nile-init');
   }
 
-
-
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
 
   /* #endregion */
 

package/src/nile-dropdown/nile-dropdown.ts

@@ -118,6 +118,7 @@ export class NileDropdown extends NileElement {
     if (!this.containingElement) {
       this.containingElement = this;
     }
+    this.emit('nile-init');
   }
 
   firstUpdated() {
@@ -134,6 +135,7 @@ export class NileDropdown extends NileElement {
     super.disconnectedCallback();
     this.removeOpenListeners();
     this.hide();
+    this.emit('nile-destroy');
   }
 
   focusOnTrigger() {

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-icon/icons/svg/index.ts

@@ -321,6 +321,7 @@ export { default as sortup } from './sortup';
 export { default as stop } from './stop';
 export { default as storybook } from './storybook';
 export { default as string } from './string';
+export { default as stringinput } from './stringinput';
 export { default as support } from './support';
 export { default as swap } from './swap';
 export { default as sync } from './sync';

package/src/nile-icon/icons/svg/stringinput.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMTg3NSAxLjMxMjVIMTAuNVYwLjQzNzVIN1YxLjMxMjVIOC4zMTI1VjEyLjY4NzVIN1YxMy41NjI1SDEwLjVWMTIuNjg3NUg5LjE4NzVWMS4zMTI1Wk0xLjMxMjUgMy4wNjI1SDdWMy45Mzc1SDIuMTg3NVYxMC4wNjI1SDdWMTAuOTM3NUgxLjMxMjVWMy4wNjI1Wk0xMS44MTI1IDMuOTM3NUgxMC41VjMuMDYyNUgxMi42ODc1VjEwLjkzNzVIMTAuNVYxMC4wNjI1SDExLjgxMjVWMy45Mzc1Wk00LjYyMjAyIDcuMjIzMjFDNC43NTA5OSA3LjEzOTg4IDQuOTc4MTcgNy4wOTgyMSA1LjMwMzU3IDcuMDk4MjFINS42NTE3OVY3LjE1Nzc0QzUuNjUxNzkgNy40NjkyNSA1LjU4ODI5IDcuNzEyMyA1LjQ2MTMxIDcuODg2OUM1LjMzNDMzIDguMDU5NTIgNS4xNTU3NSA4LjE0NTgzIDQuOTI1NiA4LjE0NTgzQzQuNzcyODIgOC4xNDU4MyA0LjY1MTc5IDguMTAxMTkgNC41NjI1IDguMDExOUM0LjQ3MzIxIDcuOTIyNjIgNC40Mjg1NyA3LjgwMjU4IDQuNDI4NTcgNy42NTE3OUM0LjQyODU3IDcuNDQ5NCA0LjQ5MzA2IDcuMzA2NTUgNC42MjIwMiA3LjIyMzIxWk02LjUxNzg2IDguNjYzNjlWNi43NjE5QzYuNTE3ODYgNi4xOTQ0NCA2LjQwNzc0IDUuODAwNiA2LjE4NzUgNS41ODAzNkM1Ljk2OTI1IDUuMzYwMTIgNS41ODkyOSA1LjI1IDUuMDQ3NjIgNS4yNUM0LjgyNTQgNS4yNSA0LjYxNTA4IDUuMjY4ODUgNC40MTY2NyA1LjMwNjU1QzQuMjE4MjUgNS4zNDQyNSA0LjAyMjgyIDUuNDAyNzggMy44MzAzNiA1LjQ4MjE0VjYuMjI2MTlDNC4wNDI2NiA2LjExMTExIDQuMjQ2MDMgNi4wMjc3OCA0LjQ0MDQ4IDUuOTc2MTlDNC42MzY5IDUuOTIyNjIgNC44MzkyOSA1Ljg5NTgzIDUuMDQ3NjIgNS44OTU4M0M1LjI0NjAzIDUuODk1ODMgNS4zOTU4MyA1LjkzMjU0IDUuNDk3MDIgNi4wMDU5NUM1LjYwMDIgNi4wNzczOCA1LjY1MTc5IDYuMTgzNTMgNS42NTE3OSA2LjMyNDRWNi40NzAyNEg1LjA0NzYyQzQuNTE5ODQgNi40NzAyNCA0LjEyOTk2IDYuNTYzNDkgMy44Nzc5OCA2Ljc1QzMuNjI1OTkgNi45MzQ1MiAzLjUgNy4yMjEyMyAzLjUgNy42MTAxMkMzLjUgNy45NjkyNSAzLjYwNTE2IDguMjQ5MDEgMy44MTU0OCA4LjQ0OTRDNC4wMjc3OCA4LjY0OTggNC4zMjM0MSA4Ljc1IDQuNzAyMzggOC43NUM0LjkwMDc5IDguNzUgNS4wODIzNCA4LjcxMDMyIDUuMjQ3MDIgOC42MzA5NUM1LjQxMTcxIDguNTUxNTkgNS41NDY2MyA4LjQzODQ5IDUuNjUxNzkgOC4yOTE2N1Y4LjY2MzY5SDYuNTE3ODZaIiBmaWxsPSIjMDA1RUE2Ii8+PC9zdmc+";

package/src/nile-input/nile-input.ts

@@ -218,6 +218,17 @@ export class NileInput extends NileElement implements NileFormControl {
   // can be set before the component is rendered.
   //
 
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
   /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
   get valueAsDate() {
     const input = document.createElement('input');

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

@@ -48,11 +48,13 @@ export class NileLink extends NileElement {
     super.connectedCallback();
     this.handleHostClick = this.handleHostClick.bind(this);
     this.addEventListener('click', this.handleHostClick);
+    this.emit('nile-init');
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('click', this.handleHostClick);
+    this.emit('nile-destroy');
   }
 
   private handleHostClick(event: MouseEvent) {
@@ -74,6 +76,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 +105,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>

package/src/nile-radio/nile-radio.ts

@@ -56,10 +56,12 @@ export class NileRadio extends NileElement {
 
     this.setInitialAttributes();
     this.addEventListeners();
+    this.emit('nile-init');
   }
 
   disconnectedCallback() {
     this.removeEventListeners();
+    this.emit('nile-destroy');
   }
 
   private addEventListeners() {

package/src/nile-radio-group/nile-radio-group.ts

@@ -74,6 +74,12 @@ export class NileRadioGroup extends NileElement {
     super.connectedCallback();
     this.defaultValue = this.value;
     this.handleInitialDisabledState();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   private getAllRadios() {

package/src/nile-select/nile-select.ts

@@ -240,6 +240,12 @@ export class NileSelect extends NileElement implements NileFormControl {
 
     // Because this is a form control, it shouldn't be opened initially
     this.open = false;
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
   }
 
   private addOpenListeners() {

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -1,9 +1,10 @@
 import { CSSResultGroup } from 'lit';
 import { LitElement, html, property, customElement } from 'lit-element';
 import styles from './nile-slide-toggle.css';
+import NileElement from '../internal/nile-element';
 
 @customElement('nile-slide-toggle')
-export class NileSlideToggle extends LitElement {
+export class NileSlideToggle extends NileElement {
   public static styles: CSSResultGroup = styles;
 
   @property({ type: String }) label = '';
@@ -13,6 +14,18 @@ export class NileSlideToggle extends LitElement {
 
   @property({ attribute: 'error-message' }) errorMessage = '';
 
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
+
   toggleValue() {
     this.isChecked = !this.isChecked;
     this.dispatchEvent(

package/src/nile-textarea/nile-textarea.ts

@@ -157,11 +157,13 @@ export class NileTextarea extends NileElement  {
       this.setTextareaHeight();
       this.resizeObserver.observe(this.input);
     });
+    this.emit('nile-init');
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this.input);
+    this.emit('nile-destroy');
   }
 
   private handleBlur() {