@salla.sa/twilight-components 1.6.2 → 1.6.4

package/dist/collection/components/salla-select/salla-select.js

@@ -0,0 +1,610 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, Prop, h } from '@stencil/core';
+export class SallaSelect {
+  constructor() {
+    /**
+     * Sets label
+     */
+    this.label = undefined;
+    /**
+     * Can be an array of objects or array of strings.
+     * When using objects, will look for a text, value and disabled keys.
+     */
+    this.items = [];
+    /**
+     * Set property of items’s text value
+     */
+    this.itemText = "text";
+    /**
+     * Set property of items’s value - must be primitive.
+     * Dot notation is supported.
+     */
+    this.itemValue = "value";
+    /**
+     * Set property of items’s disabled value
+     */
+    this.itemDisabled = 'disabled';
+    /**
+    * Sizing options
+    */
+    this.size = 'normal';
+    /**
+     * The selected value
+     */
+    this.value = undefined;
+    /**
+     * Enable autofocus
+     */
+    this.autofocus = false;
+    /**
+     * Add input clear functionality, default icon is `sicon-cancel`
+     */
+    this.clearable = false;
+    /**
+     * Applied when using clearable and the input is dirty
+     */
+    this.clearIcon = 'sicon-cancel';
+    /**
+     * Applies specified color to the control.
+     */
+    this.color = 'primary';
+    /**
+     * Remove elevation or box shadow.
+     */
+    this.flat = undefined;
+    /**
+     * Disable the input
+     */
+    this.disabled = false;
+    /**
+     * Displays linear progress bar.
+     */
+    this.loading = false;
+    /**
+     * Specifies which color is applied to the progress bar.
+     */
+    this.loadingColor = 'primary';
+    /**
+     * Hint text
+     */
+    this.hint = undefined;
+    /**
+     * Forces hint to always be visible.
+     */
+    this.persistHint = false;
+    /**
+     * Sets the input’s placeholder text.
+     */
+    this.placeholder = undefined;
+    /**
+     * Enable multiple item selection
+     */
+    this.multiple = false;
+    /**
+     * Enable multiple item selection
+     */
+    this.autocomplete = false;
+    /**
+     * Enable multiple item selection
+     */
+    this.required = false;
+    /**
+     * Changes display of selections to chips
+     */
+    this.chips = false;
+    /**
+     * Define appearance of the component
+     */
+    this.shape = 'outlined';
+    /**
+     * Changes the selection behavior to return the object directly
+     * rather than the value specified with item-value
+     */
+    this.returnObject = false;
+    /**
+     * Hides hint if any
+     */
+    this.hideDetail = false;
+  }
+  selectClass() {
+    return `s-select-field s-select-${this.shape} ${this.color} ${this.size}`;
+  }
+  onSelectedItemChange(event) {
+    let selectedIndex = event.target.selectedIndex;
+    if (selectedIndex < 0) {
+      this.value = undefined;
+      return;
+    }
+    let selectedItem = this.items[!!this.placeholder ? selectedIndex - 1 : selectedIndex];
+    this.value = this.returnObject ? selectedItem : selectedItem[this.itemValue];
+    console.log("🚀 ~ file: salla-select.tsx ~ line 153 ~ SallaSelect ~ onSelectedItemChange ~ this.value", this.value);
+  }
+  generateHint() {
+    if (!this.persistHint && !this.value) {
+      return "";
+    }
+    return h("div", { class: "s-select-hint" }, this.hint);
+  }
+  checkForSelected(item) {
+    if (this.returnObject && !!this.value) {
+      return item[this.itemValue] = this.value[this.itemValue];
+    }
+    return item[this.itemValue] == this.value;
+  }
+  render() {
+    return (h(Host, null,
+      !!this.label ?
+        h("label", { htmlFor: "s-select", class: "s-select-label" }, this.label)
+        : "",
+      h("select", { multiple: this.multiple, autocomplete: this.autocomplete ? 'on' : 'off', disabled: this.disabled, autoFocus: this.autofocus, id: "s-select", class: this.selectClass(), onChange: this.onSelectedItemChange.bind(this) },
+        !!this.placeholder ?
+          h("option", { selected: !this.value }, this.placeholder)
+          : "",
+        this.items.map((item) => 
+        // item instanceof Object ?
+        h("option", { label: item[this.itemText], value: item[this.itemValue], selected: this.checkForSelected(item), disabled: item[this.itemDisabled] })
+        // :
+        // <option label={item} value={item} selected={item == this.value} disabled={item == this.itemDisabled}></option>
+        )),
+      h("div", { class: { "s-hidden": this.hideDetail } }, this.generateHint())));
+  }
+  static get is() { return "salla-select"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-select.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-select.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets label"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "items": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Can be an array of objects or array of strings. \nWhen using objects, will look for a text, value and disabled keys."
+      },
+      "defaultValue": "[]"
+    },
+    "itemText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set property of items\u2019s text value"
+      },
+      "attribute": "item-text",
+      "reflect": false,
+      "defaultValue": "\"text\""
+    },
+    "itemValue": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set property of items\u2019s value - must be primitive. \nDot notation is supported."
+      },
+      "attribute": "item-value",
+      "reflect": false,
+      "defaultValue": "\"value\""
+    },
+    "itemDisabled": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set property of items\u2019s disabled value"
+      },
+      "attribute": "item-disabled",
+      "reflect": false,
+      "defaultValue": "'disabled'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'x-large' | 'large' | 'normal' | 'small' | 'x-small'",
+        "resolved": "\"large\" | \"normal\" | \"small\" | \"x-large\" | \"x-small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sizing options"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'normal'"
+    },
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The selected value"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "autofocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable autofocus"
+      },
+      "attribute": "autofocus",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Add input clear functionality, default icon is `sicon-cancel`"
+      },
+      "attribute": "clearable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clearIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Applied when using clearable and the input is dirty"
+      },
+      "attribute": "clear-icon",
+      "reflect": false,
+      "defaultValue": "'sicon-cancel'"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'success' | 'warning' | 'danger' | 'light' | 'gray' | 'dark'",
+        "resolved": "\"danger\" | \"dark\" | \"gray\" | \"light\" | \"primary\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Applies specified color to the control."
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "flat": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Remove elevation or box shadow."
+      },
+      "attribute": "flat",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable the input"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Displays linear progress bar."
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "loadingColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies which color is applied to the progress bar."
+      },
+      "attribute": "loading-color",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "hint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hint text"
+      },
+      "attribute": "hint",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "persistHint": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Forces hint to always be visible."
+      },
+      "attribute": "persist-hint",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the input\u2019s placeholder text."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable multiple item selection"
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "autocomplete": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable multiple item selection"
+      },
+      "attribute": "autocomplete",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable multiple item selection"
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "chips": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Changes display of selections to chips"
+      },
+      "attribute": "chips",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "shape": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'underline' | 'outlined'",
+        "resolved": "\"outlined\" | \"underline\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define appearance of the component"
+      },
+      "attribute": "shape",
+      "reflect": false,
+      "defaultValue": "'outlined'"
+    },
+    "returnObject": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Changes the selection behavior to return the object directly \nrather than the value specified with item-value"
+      },
+      "attribute": "return-object",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hideDetail": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hides hint if any"
+      },
+      "attribute": "hide-detail",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/salla-tel-input/interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

package/dist/collection/components/salla-tel-input/salla-tel-input.css

@@ -75,8 +75,7 @@
   transform: translateY(-50%);
 }
 .iti__arrow:after {
-  content: "\e96d";
-  font-family: sallaicons;
+  content: url("data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>");
   font-size: 16px;
   color: #999;
   opacity: 0.65;

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -74,14 +74,18 @@ export class SallaTelInput {
     });
     this.phoneInput.addEventListener("countrychange", () => {
       let data = this.iti.getSelectedCountryData();
-      this.countryCodeInput.value = data.iso2.toUpperCase();
+      let value = data.iso2.toUpperCase();
+      this.countryCodeInput.value = value;
+      this.countryCode = value;
+      this.phoneEntered.emit({ number: this.phone, country_code: value });
     });
     // on blur: validate
     // this.phoneInput.addEventListener('blur', () => this.isValid());
     // on keyup / change flag: reset
-    this.phoneInput.addEventListener('input', e => {
+    this.phoneInput.addEventListener('input', (e) => {
       salla.helpers.inputDigitsOnly(e.target);
       this.reset();
+      this.phoneEntered.emit({ number: e.target.value, country_code: this.countryCode });
     });
   }
   reset() {
@@ -89,9 +93,14 @@ export class SallaTelInput {
     this.errorMsg.innerHTML = "";
   }
   ;
+  handleCountryInput(event) {
+    if (!!this.phone) {
+      this.phoneEntered.emit({ number: event.target.value, country_code: this.countryCode });
+    }
+  }
   render() {
     return (h(Host, { class: "s-tel-input" },
-      h("input", { type: "tel", name: this.name, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }),
+      h("input", { type: "tel", name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }),
       h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }),
       h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
   }
@@ -185,6 +194,26 @@ export class SallaTelInput {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "phoneEntered",
+      "name": "phoneEntered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Phone",
+        "resolved": "Phone",
+        "references": {
+          "Phone": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "getValues": {

package/dist/collection/components/salla-verify/salla-verify.js

@@ -164,7 +164,7 @@ export class SallaVerify {
     return (h("div", { class: "s-verify-body", ref: body => this.body = body },
       h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
       h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
-      h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "number", maxlength: "1", class: "s-verify-input", required: true }))),
+      h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "tel", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", maxlength: "1", class: "s-verify-input", required: true }))),
       h("div", { slot: "footer", class: "s-verify-footer" },
         h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')),
         h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el },