@dile/ui 2.5.6 → 2.6.1

package/components/input/input-contact.js

@@ -0,0 +1,3 @@
+import { DileInputContact } from "./src/DileInputContact.js";
+
+window.customElements.define("dile-input-contact", DileInputContact);

package/components/input/src/DileInputContact.js

@@ -0,0 +1,130 @@
+import { LitElement, html, css } from 'lit';
+import { DileInput } from '../../input/index.js';
+
+export class DileInputContact extends DileInput {
+
+    static get properties() {
+      return {
+        value: { type: String },
+        phone: { type: Boolean },
+        mobile: { type: Boolean },
+        fax: { type: Boolean },
+        email: { type: Boolean },
+        messageError: { type: String }
+      };
+    }
+
+    constructor() {
+        super();
+        this.valid = true;
+    }
+
+    firstUpdated() {
+        super.firstUpdated();
+        if(this.value !== '' && this.value !== undefined) {
+            this._isValidInput();
+        }
+    }
+
+    render() {
+        return html`
+            <div>
+                ${this.label ? this.renderLabel : ''}
+                ${this.renderInput}
+                ${this.errored && this.messageError != '' ? this.renderMsgError : ''}
+            </div>
+        `;
+    }
+
+    get renderLabel() {
+        return html`
+            <label for="textField">${this.label}</label>
+        `;
+    }
+
+    get renderInput() {
+        return html`
+            <input
+                type="${this.availableType(this.type)}"
+                id="textField"
+                name="${this.name}"
+                placeholder="${this.placeholder}"
+                ?disabled="${this.disabled}"
+                ?readonly="${this.readonly}"
+                autocomplete="${this.disableAutocomplete ? "off" : "on"}"
+                .value="${this.computeValue(this.value)}"
+                class="${this.errored ? 'errored' : ''}"
+                @keypress="${this._lookForEnter}"
+                @input="${this._input}"
+                @blur="${this._isValidInput}"
+                @focus="${this.doFocus}"
+            >
+            </input>
+        `;
+    }
+
+    get renderMsgError() {
+        return html`
+            <div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.messageError}</span></div>
+        `;
+    }
+
+    _input(ev) {
+        this.value = ev.target.value;
+        this.dispatchEvent(new CustomEvent('dile-input-contact-input', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.value
+            }
+        }));
+    }
+
+    _isValidInput() {
+        const rePhone = /^(\+34|0034|34)?[89]\d{8}$/;
+        const reMobile = /^(\+34|0034|34)?[67]\d{8}$/;
+        const reMail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        if(this.value === '') {
+            this.valid = true;
+        } else {
+            if (this.phone || this.fax) {
+                if (rePhone.test(this.value) || this.value === "") {
+                    this._isPhone = this.phone;
+                    this._isFax = this.fax;
+                    this.valid = true;
+                } else {
+                    this.valid = false;
+                }
+            } else if (this.mobile) {
+                this._isMobile = true;
+                if (reMobile.test(this.value) || this.value === "") {
+                    this.valid = true;
+                } else {
+                    this.valid = false;
+                }
+            } else if(this.email) {
+                if(reMail.test(this.value) || this.value === ""){
+                    this.valid = true;
+                }else{
+                    this.valid = false;
+                }
+            }
+        }
+        this.errored = !this.valid;
+        console.log("Válido: " + this.valid);
+        this.dispatchEvent(
+            new CustomEvent('dile-input-contact-blur', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.value,
+                isValid: this.valid,
+                isMobile: this._isMobile,
+                isPhone: this._isPhone,
+                isFax: this._isFax,
+                isMail: this._isMail
+            }
+          }),
+        );
+    }
+}

package/components/select/src/DileSelectAjax.js

@@ -115,6 +115,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
   updated(changedProperties) {
     if(changedProperties.has("value")) {
       this.emmitChange();
+      this.dispatchSelectedTextChanged();
       this.internals.setFormValue(this.value);
     }
   }
@@ -398,4 +399,14 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       this.searchValueInitial();
     }
   }
+
+  dispatchSelectedTextChanged() {
+    this.dispatchEvent(new CustomEvent('dile-select-ajax-selected-text-changed', 
+      { 
+        bubbles: true,
+        composed: true,
+        detail: { selectedText: this.selectedText }
+      }
+    ));
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.5.6",
+  "version": "2.6.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -20,11 +20,11 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/icons": "^2.1.2",
+    "@dile/icons": "^2.1.3",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0ca8a028f7d8e60a7e1b83ad5a6a90dfc97ddac4"
+  "gitHead": "916ed6faee1f05e718fba83e7f0f646992d4018e"
 }