@dile/ui 2.20.1 → 2.21.1

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

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../radio.js';
+import '../input/input-message.js';
 
 export class DileRadioGroup extends DileEmmitChange(LitElement) {
   static styles = [
@@ -31,6 +32,9 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
       label: { type: String },
       value: { type: String },
       name: { type: String },
+      message: { type: String },
+      errored: { type: Boolean },
+      hideErrorOnInput: { type: Boolean },
       disabled: { 
         type: Boolean,
         reflect: true
@@ -43,6 +47,7 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
     this.init = false;
     this.disabled = false;
     this.internals = this.attachInternals();
+    this.message = '';
   }
 
   updated(changedProperties) {
@@ -72,11 +77,19 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
         }
         <slot></slot>
       </div>
+      ${this.message
+        ? html`<dile-input-message message="${this.message}" ?errored=${this.errored}></dile-input-message>`
+        : ''
+      }
     `;
   }
 
   changeValue(e) {
     if(!this.disabled) {
+      if(this.hideErrorOnInput && this.errored) {
+        this.message = '';
+        this.errored = false;
+      }
       this.value = e.detail.value;
     }
   }

package/mixins/form/src/DileForm.js

@@ -44,32 +44,33 @@ export const DileForm = (superclass) => class extends superclass {
         data[fieldName] = node.value;
       }
     });
-    return data;
+    return this.adaptDataOut(data);
   }
 
   setData(data) {
+    const adaptedData = this.adaptDataIn(data);
     this.allNodeElements.forEach(node => {
       const name = node.getAttribute('name');
       const isArray = name.endsWith('[]');
       const fieldName = isArray ? name.slice(0, -2) : name;
       
-      if (isArray && Array.isArray(data[fieldName])) {
+      if (isArray && Array.isArray(adaptedData[fieldName])) {
         // with arrays, the index is the element order in the DOM
         const arrayElements = Array.from(this.allNodeElements).filter(el => el.getAttribute('name') === name);
         const elementIndex = arrayElements.indexOf(node);
-        if (elementIndex >= 0 && elementIndex < data[fieldName].length) {
-          const value = data[fieldName][elementIndex];
+        if (elementIndex >= 0 && elementIndex < adaptedData[fieldName].length) {
+          const value = adaptedData[fieldName][elementIndex];
           if (typeof node.set === "function") {
             node.set(value);
           } else {
             node.value = value;
           }
         }
-      } else if (!isArray && data[fieldName] !== undefined && data[fieldName] !== null) {
+      } else if (!isArray && adaptedData[fieldName] !== undefined && adaptedData[fieldName] !== null) {
         if (typeof node.set === "function") {
-          node.set(data[fieldName]);
+          node.set(adaptedData[fieldName]);
         } else {
-          node.value = data[fieldName];
+          node.value = adaptedData[fieldName];
         }
       }
     });
@@ -196,4 +197,24 @@ export const DileForm = (superclass) => class extends superclass {
     return false;
   }
 
+  /**
+   * Template method: Adapt data before it's returned from getData()
+   * Override this method in your component to transform the structure of outgoing data
+   * @param {Object} data - The data object from form fields
+   * @returns {Object} - The adapted data object
+   */
+  adaptDataOut(data) {
+    return data;
+  }
+
+  /**
+   * Template method: Adapt data before it's set to form fields in setData()
+   * Override this method in your component to transform the structure of incoming data
+   * @param {Object} data - The data object to be set
+   * @returns {Object} - The adapted data object
+   */
+  adaptDataIn(data) {
+    return data;
+  }
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.20.1",
+  "version": "2.21.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7194ae653716358e673eb70383662cfb86247260"
+  "gitHead": "e9639442e17f7bd3e467a1177dc233bb9913dc1e"
 }

package/styles/colors.css

@@ -20,7 +20,7 @@
   --dile-link-color: #3399ff;
 
   /* Color variations */
-  --dile-primary-light-color: #fbfbe9;
+  --dile-primary-light-color: #fafadf;
   --dile-on-primary-light-color: #303030;
   --dile-primary-dark-color: #d7d353;
   --dile-on-primary-dark-color: #303030;