@dile/ui 2.6.0 → 2.6.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "60b2984016e81117b9da0a5b5fe8dcd5eb8cee98"
+  "gitHead": "b82bb554da6a71a9d0ac5eb3abe7b917b5a25217"
 }

package/styles/colors.css

@@ -33,3 +33,47 @@
   --dile-gray-dark-color: #555555;
   --dile-on-gray-dark-color: #ffffff;
 }
+
+:root.dark-theme {
+  --dile-background-color: #1e1e1e;
+  --dile-on-background-color: #ffffff;
+
+  --dile-primary-color: #e1e181;
+  --dile-on-primary-color: #1e1e1e;
+
+  --dile-secondary-color: #5fd878;
+  --dile-on-secondary-color: #1e1e1e;
+
+  --dile-terciary-color: #50c4e0;
+  --dile-on-terciary-color: #1e1e1e;
+
+  --dile-neutral-color: #2c2c2c;
+  --dile-on-neutral-color: #ffffff;
+
+  --dile-alert-error-color: #ff6a6a;
+  --dile-alert-success-color: #33cc55;
+  --dile-alert-neutral-color: #58c0da;
+  --dile-on-alert-color: #1e1e1e;
+
+  --dile-danger-color: #ff4b47;
+  --dile-on-danger-color: #ffffff;
+
+  /* Variaciones */
+  --dile-primary-light-color: #f3f3ae;
+  --dile-on-primary-light-color: #1e1e1e;
+  --dile-primary-dark-color: #b5b53e;
+  --dile-on-primary-dark-color: #ffffff;
+
+  --dile-secondary-light-color: #9ff2b1;
+  --dile-on-secondary-light-color: #1e1e1e;
+  --dile-secondary-dark-color: #2a7038;
+  --dile-on-secondary-dark-color: #ffffff;
+
+  --dile-terciary-light-color: #a5e6f8;
+  --dile-on-terciary-light-color: #1e1e1e;
+  --dile-terciary-dark-color: #0e3e49;
+  --dile-on-terciary-dark-color: #ffffff;
+
+  --dile-gray-dark-color: #cccccc;
+  --dile-on-gray-dark-color: #1e1e1e;
+}