@aquera/nile-elements 0.0.23 → 0.0.25

package/package.json

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

package/src/nile-content-editor/nile-content-editor.ts

@@ -134,7 +134,7 @@ export class NileContentEditor extends NileElement {
     });
   }
 
-  @watch(['type', 'value'], { waitUntilFirstUpdate: true })
+  @watch(['type'], { waitUntilFirstUpdate: true })
   handleTypeChange() {
     this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
   }

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

@@ -445,6 +445,10 @@ export const styles = css`
       transform: rotate(360deg);
     }
   }
+
+  .select__invisible{
+    opacity: 0;
+  }
 `;
 
 export default [styles];

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

@@ -218,6 +218,8 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean }) showSelected = false;
 
+  @state() oldMaxOptionsVisible: number = 1;
+
   @property({ type: Boolean }) showNoResults: boolean = false;
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
@@ -935,8 +937,12 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   calculateTotalWidthOfTags() {
-    this.maxOptionsVisible = Infinity;
 
+    if(this.maxOptionsVisible !== Infinity){
+      this.oldMaxOptionsVisible = this.maxOptionsVisible;
+    }
+
+    this.maxOptionsVisible = Infinity;
     setTimeout(() => {
       let widths: number[] = [];
       if (this.shadowRoot) {
@@ -1088,8 +1094,11 @@ export class NileSelect extends NileElement implements NileFormControl {
                           index < this.maxOptionsVisible ||
                           this.maxOptionsVisible <= 0
                         ) {
+                          const classes = {
+                            'select__invisible': index + 1 > this.oldMaxOptionsVisible && this.maxOptionsVisible === Infinity                          };
                           return html`
                             <nile-tag
+                              class=${classMap(classes)}
                               part="tag"
                               exportparts="
                                   base:tag__base,

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

@@ -12,6 +12,7 @@ import { css } from 'lit-element';
  */
 export const styles = css`
   :host {
+    width: 100%;
     box-sizing: border-box;
   }
 
@@ -24,8 +25,8 @@ export const styles = css`
   }
 
   .input-container > :first-child {
-    max-width: 99%;
-    min-width: 99%;
+    max-width: 98%;
+    min-width: 98%;
   }
 
   nile-icon {

package/src/nile-switcher/nile-switcher.ts

@@ -83,8 +83,6 @@ export class NileSwitcher extends NileElement {
   static styles: CSSResultGroup = styles;
   @property({ type: Object }) nileSwitchConfig: switchconfig;
 
-  @property() value: string;
-
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
@@ -197,18 +195,18 @@ export class NileSwitcher extends NileElement {
     const haserrorMessage = !!errorMessage;
 
     return html`<nile-radio-group
-        .value=${value}
-        .disabled=${disabled}
-        @change=${(e: CustomEvent) => {
-          this.handleChange(e, inputType, inputTypeName);
-        }}
-      >
-        ${options &&
-        options.map((option: any) => {
-          return html`<nile-radio .value="${option}">${option} </nile-radio>`;
-        })}
-      </nile-radio-group>
-      ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}`;
+      .value=${value}
+      .disabled=${disabled}
+      @change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
+    >
+      ${options &&
+      options.map((option: any) => {
+        return html`<nile-radio .value="${option}">${option} </nile-radio>`;
+      })}
+      ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}
+    </nile-radio-group> `;
   }
 
   renderErrorMessage(errorMessage: string) {
@@ -225,9 +223,10 @@ export class NileSwitcher extends NileElement {
       type,
       readonly,
       noborder,
+      value,
     } = Input;
     return html`<nile-content-editor
-      .value=${this.value}
+      .value=${value}
       .options=${options}
       .type=${type}
       .readonly=${readonly}

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

@@ -58,6 +58,7 @@ export const styles = css`
     color: hsl(0, 0%, 100%);
     padding: 0.25rem 0.5rem;
     pointer-events: none;
+    word-break: break-all;
   }
 `;