@dile/ui 2.3.1 → 2.4.0

package/components/checkbox/src/DileCheckbox.js

@@ -11,10 +11,15 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
     };
   }
 
+  static get formAssociated() {
+    return true;
+  }
+
   constructor() {
     super();
     this.checked = false;
     this.name = '';
+    this.internals = this.attachInternals();
   }
 
   static get styles() {
@@ -85,6 +90,7 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
   updated(changedProperties) {
     if (changedProperties.has("checked")) {
       this.emmitChange();
+      this.internals.setFormValue(this.checked ? 'true' : null);
     }
   }
 

package/components/drop-file/src/DileDropFile.js

@@ -64,9 +64,14 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
       fileName: { type: String },
       selectedFileLabel: { type: String },
       allowedExtensions: { type: Array },
-      extensionErrorMessage: { type: String},
+      extensionErrorMessage: { type: String },
+      name: { type: String },
     };
   }
+
+  static get formAssociated() {
+    return true;
+  }
   
   constructor() {
     super();
@@ -78,6 +83,7 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     this.selectedFileLabel = "Selected file";
     this.extensionErrorMessage = "Only this file extensions are allowed: "
     this.allowedExtensions = [];
+    this.internals = this.attachInternals();
   } 
 
   firstUpdated() {
@@ -161,6 +167,7 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
   }
 
   _processFile(files) {
+    this.internals.setFormValue(files.length > 0 ? files[0] : null);
     if (files.length > 0) {
       this.fileName = files[0].name;
       this.emmitChange();
@@ -206,6 +213,7 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
   clear() {
     this.fileInput.value = "";
     this.fileName = "";
+    this.internals.setFormValue(null);
     this.emmitChange();
   }
 

package/components/input/src/DileInput.js

@@ -62,16 +62,8 @@ export class DileInput extends DileEmmitChange(LitElement) {
         };
     }
 
-    firstUpdated() {
-      if(this.focusOnStart) {
-        this.focus();
-      }
-    }
-
-    updated(changedProperties) {
-      if(changedProperties.has('value')) {
-        this.emmitChange();
-      }
+    static get formAssociated() {
+      return true;
     }
 
     constructor() {
@@ -85,6 +77,20 @@ export class DileInput extends DileEmmitChange(LitElement) {
         this.name = '';
         this.type = 'text';
         this.types = ['text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime', 'datetime-local', 'month', 'week'];     
+        this.internals = this.attachInternals();
+    }
+
+    firstUpdated() {
+      if(this.focusOnStart) {
+        this.focus();
+      }
+    }
+
+    updated(changedProperties) {
+      if(changedProperties.has('value')) {
+        this.emmitChange();
+        this.internals.setFormValue(this.value);
+      }
     }
 
     static get styles() {

package/components/input/src/DileInputInteger.js

@@ -38,6 +38,7 @@ export class DileInputInteger extends DileInput {
     }
 
     updated(changedProperties) { 
+        super.updated(changedProperties);
         if(changedProperties.has('value') && this.value) {
             this.changed = true;
         }

package/components/input/src/DileInputMoney.js

@@ -57,6 +57,7 @@ export class DileInputMoney extends DileInput {
     }
 
     updated(changedProperties) { 
+        super.updated(changedProperties);
         if(changedProperties.has('value') && this.value) {
             this.changed = true;
         }

package/components/input/src/DileInputNumberMask.js

@@ -28,6 +28,7 @@ export class DileInputNumberMask extends DileInput {
   }
 
   updated(changedProperties) {
+    super.updated(changedProperties);
     if (changedProperties.has('mask')) {
       this.maskController.setPattern(this.mask);
       this.updateValue();

package/components/input/src/DileInputPercentage.js

@@ -46,6 +46,7 @@ export class DileInputPercentage extends DileInput {
     }
 
     updated(changedProperties) { 
+        super.updated(changedProperties);
         if(changedProperties.has('value') && this.value) {
             this.changed = true;
         }

package/components/radio-group/src/DileRadioGroup.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
+import '../radio.js';
 
 export class DileRadioGroup extends DileEmmitChange(LitElement) {
   static styles = [
@@ -21,6 +22,10 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
     `
   ];
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
     return {
       label: { type: String },
@@ -37,6 +42,7 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
     super();
     this.init = false;
     this.disabled = false;
+    this.internals = this.attachInternals();
   }
 
   updated(changedProperties) {
@@ -44,6 +50,7 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
       this.doSelection(this.value);
       this.emmitChange();
       this.dispatchChangeEvent();
+      this.internals.setFormValue(this.value);
     }
   }
 

package/components/range/src/DileRange.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
+import '../../input/input-message.js';
 
 export class DileRange extends DileEmmitChange(LitElement) {
 
@@ -7,6 +8,19 @@ export class DileRange extends DileEmmitChange(LitElement) {
     return css`
       :host {
         display: block;
+        margin-bottom: 10px;
+      }
+
+      :host([errored]) {
+        --dile-range-line-color: var(--dile-range-line-errored-color, #c00);
+      }
+
+      label {
+        display: block;
+        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
+        font-size: var(--dile-input-label-font-size, 1em);
+        color: var(--dile-input-label-color, #59e);
+        font-weight: var(--dile-input-label-font-weight, normal);
       }
 
       /*********** Baseline, reset styles ***********/
@@ -24,10 +38,12 @@ export class DileRange extends DileEmmitChange(LitElement) {
         outline: none;
       }
 
+      
+
       /******** Chrome, Safari, Opera and Edge Chromium styles ********/
       /* slider track */
       input[type="range"]::-webkit-slider-runnable-track {
-        background-color: var(--dile-range-line-color, #7BB93D);
+        background-color: var(--dile-range-line-color, var(--dile-primary-color, #7BB93D));
         border-radius: 0.5rem;
         height: var(--dile-range-line-height, 0.5rem);
       }
@@ -51,7 +67,7 @@ export class DileRange extends DileEmmitChange(LitElement) {
       /*********** Firefox styles ***********/
       /* slider track */
       input[type="range"]::-moz-range-track {
-        background-color: var(--dile-range-line-color, #7BB93D);
+        background-color: var(--dile-range-line-color, var(--dile-primary-color, #7BB93D));
         border-radius: 0.5rem;
         height: var(--dile-range-line-height, 0.5rem);
       }
@@ -69,9 +85,15 @@ export class DileRange extends DileEmmitChange(LitElement) {
         outline: 3px solid var(--dile-range-thumb-color, #303030);
         outline-offset: 0.125rem;
       }
+
+
     `;
   }
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
     return {
       max: { type: Number },
@@ -79,6 +101,10 @@ export class DileRange extends DileEmmitChange(LitElement) {
       step: { type: Number },
       value: { type: Number },
       name: { type: String },
+      label: { type: String },
+      message: { type: String },
+      errored: { type: Boolean, reflect: true },
+      hideErrorOnInput: { type: Boolean },
     };
   }
 
@@ -89,13 +115,19 @@ export class DileRange extends DileEmmitChange(LitElement) {
     this.min = 0;
     this.step = 1;
     this.value = 1;
+    this.message = ""
+    this.internals = this.attachInternals();
   }
 
   render() {
     return html`
+      ${this.label
+          ? html`<label for="inputrange">${this.label}</label>`
+          : ""
+      }
       <input 
         type="range" 
-        id="${this.name}" 
+        id="inputrange" 
         name="${this.name}" 
         min="${this.min}" 
         max="${this.max}" 
@@ -103,17 +135,27 @@ export class DileRange extends DileEmmitChange(LitElement) {
         value="${this.value}"
         @input="${this.rangeChanged}"
       >
+      <dile-input-message ?errored="${this.errored}" message="${this.message}"></dile-input-message>
     `;
   }
 
   rangeChanged(e) {
     this.value = e.target.value;
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();  
+    }
   }
 
   updated(changedProperties) {
     if (changedProperties.has('value')) {
       this.emmitChange();
+      this.internals.setFormValue(this.value);
     }
   }
   
+  clearError() {
+    this.errored = false;
+    this.message = '';
+  }
+  
 }

package/components/select/src/DileSelect.js

@@ -56,6 +56,10 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     `];
   }
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
     return {
       label: { type: String },
@@ -95,6 +99,7 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     this.hideErrorOnInput = false;
     this.changeHandler = this.onChange.bind(this);
     this.quiet = false;
+    this.internals = this.attachInternals();
   }
 
 
@@ -131,6 +136,7 @@ export class DileSelect extends DileEmmitChange(LitElement) {
       } else {
         this.emmitChange();
       }
+      this.internals.setFormValue(this.value);
     }
     if(changedProperties.has("disabled")) {
       this.elselect.disabled = this.disabled;

package/components/select/src/DileSelectAjax.js

@@ -57,6 +57,10 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
     `];
   }
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
     return {
       /* Allows to set a text for the default option, that is a empty option and do not selects nothing in the interface. */
@@ -109,6 +113,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
   updated(changedProperties) {
     if(changedProperties.has("value")) {
       this.emmitChange();
+      this.internals.setFormValue(this.value);
     }
   }
 
@@ -129,6 +134,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
     this.queryStringVariable = 'q';
     this.delay = 300;
     this.idProperty = 'id';
+    this.internals = this.attachInternals();
   }
 
   connectedCallback() {
@@ -159,8 +165,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
   }
   
   registerText(json) {
-    console.log('json', json);
-    this.selectedText = json[this.displayProperty]; 
+    this.selectedText = json[this.resultDataProperty][this.displayProperty]; 
     this.loading = false;
   }
 

package/components/textarea/src/DileTextarea.js

@@ -1,7 +1,8 @@
 import { LitElement, html, css } from 'lit';
 import { messageStyles } from '../../input/index.js';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
 
-export class DileTextarea extends LitElement {
+export class DileTextarea extends DileEmmitChange(LitElement) {
 
   static get styles() {
     return [
@@ -50,6 +51,10 @@ export class DileTextarea extends LitElement {
     `];
   }
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
     return {
       name: { type: String },
@@ -80,6 +85,7 @@ export class DileTextarea extends LitElement {
     this.rows = 3;
     this.maxRows = 10;
     this._maxHeight = 100;
+    this.internals = this.attachInternals();
   }
 
   firstUpdated() {
@@ -96,6 +102,10 @@ export class DileTextarea extends LitElement {
     if(changedProperties.has('maxRows')) {
       this.calculateMaxHeight();
     }
+    if(changedProperties.has("value")) {
+      this.emmitChange();
+      this.internals.setFormValue(this.value);
+    }
   }
   
   render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "80e68858b65ac111ffba6ed72eee05df0a0aeb94"
+  "gitHead": "9514bd93f87c3237a41056fb6bb59025088f230e"
 }