@dile/ui 2.1.32 → 2.1.34

package/components/input/src/DileInputSearch.js

@@ -1,8 +1,9 @@
 import { LitElement, html, css } from 'lit';
 import '../../icon/icon.js';
 import { searchIcon, clearIcon } from '@dile/icons/index.js';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
 
-export class DileInputSearch extends LitElement {
+export class DileInputSearch extends DileEmmitChange(LitElement) {
     static styles = [
         css`
             :host {
@@ -53,6 +54,8 @@ export class DileInputSearch extends LitElement {
         disabled: { type: Boolean },
         readOnly: { type: Boolean },
         errored: { type: Boolean },
+        /** Name for this input field */
+        name: { type: String },
       };
     }
 
@@ -69,6 +72,12 @@ export class DileInputSearch extends LitElement {
         this.input = this.shadowRoot.getElementById('elinput');
     }
 
+    updated(changedProperties) {
+        if(changedProperties.has('value')) {
+          this.emmitChange();
+        }
+      }
+
     render() {
         return html`
         <div class="${this.errored ? "errored" : ""}">

package/components/select/src/DileSelectAjax.js

@@ -3,11 +3,15 @@ import '../../input/input-search.js';
 import '../../spinner/spinner-horizontal.js';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../select.js';
+import { messageStyles } from '../../input/src/message-styles.js';
+
 
 export class DileSelectAjax  extends DileEmmitChange(LitElement) {
 
   static get styles() {
-    return css`
+    return [
+      messageStyles,
+      css`
       * {
         box-sizing: border-box;
       }
@@ -50,7 +54,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
         margin-bottom: 0;
         --dile-input-width: 100%;
       }
-    `;
+    `];
   }
 
   static get properties() {
@@ -94,7 +98,11 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       /* When static is true there is no posibility to search, then all the options are displayed on the select on initialization */
       static: {
         type: Boolean,
-      } 
+      }, 
+      /** Message Displayed */
+      message: { type: String },
+      /** Hide errors on input */
+      hideErrorOnInput: { type: Boolean },
     };
   }
 
@@ -176,6 +184,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
           : this.static ? this.loadingOrLoadedTemplate : this.searchTemplate
         }
       </div>
+      ${this.messageTemplate}
     `;
   }
 
@@ -203,6 +212,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
         @focus=${this.onFocus}
         @dile-input-search=${this.onTextInput}
         delay="${this.delay}"
+        @element-changed=${this.hideErrorOnInteraction}
       ></dile-input-search>
       <div class="anchor">
         <section class="${this.opened && this.keyword.length > 0 ? 'opened' : ''}">
@@ -253,6 +263,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
           id="elselect" 
           @element-changed=${this.doSelected}
           name="generated-select-field"
+          ?errored=${this.errored}
         >
           <select slot="select">
             <option value="">${this.selectDefaultPlaceholder}</option>
@@ -264,6 +275,15 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
     `;
   }
 
+  get messageTemplate() {
+    return html`
+      ${this.message 
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        : ''
+      }
+    `
+  }
+
   onFocus() {
     this.opened = true;
   }
@@ -271,6 +291,13 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
   onTextInput(e) {
     this.keyword = e.detail.keyword;
     this.loadData();
+    this.hideErrorOnInteraction();
+  }
+
+  hideErrorOnInteraction() {
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();
+    }
   }
 
   loadData() {
@@ -308,6 +335,12 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       this.isSelected = true;
     }
     e.stopPropagation();
+    this.hideErrorOnInteraction();
+  }
+
+  clearError() {
+    this.errored = false;
+    this.message = '';
   }
 
   onClearSelected() {
@@ -321,6 +354,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
         this.search.focus();
       });
     }
+    this.hideErrorOnInteraction();
   }
 
   close() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.1.32",
+  "version": "2.1.34",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0ec21ccb38e95cc07cb484a1385ef0adc9cc93ba"
+  "gitHead": "e3f1c5d2850016066910a97ca26eee78543bb247"
 }