npm - @salla.sa/twilight-components - Versions diffs - 2.11.110 → 2.11.112 - Mend

@salla.sa/twilight-components 2.11.110 → 2.11.112

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

package/dist/components/salla-products-slider.js CHANGED Viewed

@@ -26,11 +26,11 @@ const SallaProductsSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.displayAllUrl = undefined;
     this.source = undefined;
     this.sourceValue = undefined;
+    this.limit = undefined;
     this.productsData = undefined;
     this.isReady = undefined;
     this.sourceValueIsValid = undefined;
     this.hasCustomComponent = undefined;
-    this.urlPrefix = '';
     this.apiUrl = '';
     this.parsedSourceValue = undefined;
     salla.onReady(() => {
@@ -48,18 +48,26 @@ const SallaProductsSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     return h("div", { class: "s-products-slider-card" }, h("salla-product-card", { "show-quantity": this.getSource() == 'landing-page', "hide-add-btn": this.getSource() == 'landing-page', "shadow-on-hover": true, product: product }));
   }
+  getUrlPrefix() {
+    let urlPrefix = '';
+    if (this.limit) {
+      urlPrefix = `&per_page=${this.limit > 32 ? 32 : this.limit}`;
+    }
+    return urlPrefix;
+  }
   getApiUrl() {
     if (this.getSource() === 'json') {
       return;
     }
+    let prefixes = this.getUrlPrefix();
     if (['offers', 'latest'].includes(this.getSource())) {
-      return salla.url.api(`products?source=${this.getSource()}${this.urlPrefix}`);
+      return salla.url.api(`products?source=${this.getSource()}${prefixes}`);
     }
     if (['related', 'landing-page'].includes(this.getSource())) {
-      return salla.url.api(`products?source=${this.getSource()}&source_value=${this.getSourceValue()}${this.urlPrefix}`);
+      return salla.url.api(`products?source=${this.getSource()}&source_value=${this.getSourceValue()}${prefixes}`);
     }
     try {
-      return salla.url.api(`products?source=${this.getSource()}&source_value[]=${this.getSourceValue().join('&source_value[]=')}${this.urlPrefix}`);
+      return salla.url.api(`products?source=${this.getSource()}&source_value[]=${this.getSourceValue().join('&source_value[]=')}${prefixes}`);
     }
     catch (e) {
       salla.logger.warn(`source-value prop should be array of ids ex source-value="[1,2,3]" for the source [${this.getSource()}]`);
@@ -118,11 +126,11 @@ const SallaProductsSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "displayAllUrl": [1, "display-all-url"],
     "source": [1537],
     "sourceValue": [1, "source-value"],
+    "limit": [1026],
     "productsData": [32],
     "isReady": [32],
     "sourceValueIsValid": [32],
     "hasCustomComponent": [32],
-    "urlPrefix": [32],
     "apiUrl": [32],
     "parsedSourceValue": [32]
   }]);

package/dist/components/salla-products-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-products-slider.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,EAAE;;MCMpBA,qBAAmB;EAC9B~~;;;;;;;;;;;;;qBAiE6B~~,EAAE~~;kBACL,EAAE~~;;~~IAjE1B~~,KAAK,CAAC,OAAO,CAAC;MACZ,IAAI,CAAC,kBAAkB,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;KACnG,CAAC,CAAC;IACH,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC5B,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,6CAA6C,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;MACpF,OAAO;KACR;IACD,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;GAC7E;~~EA4DO~~,WAAW,CAAC,OAAO;IACzB,IAAI,IAAI,CAAC,kBAAkB,EAAE;MAC3B,OAAO,WAAK,KAAK,EAAC,wBAAwB,IACxC,iCAA2B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,kBAAgB,IAAI,CAAC,cAAc,EAAE,GAAG,CACzG,CAAC;KACR;IAED,OAAO,WAAK,KAAK,EAAC,wBAAwB,IACxC,2CACiB,IAAI,CAAC,SAAS,EAAE,IAAI,cAAc,kBACnC,IAAI,CAAC,SAAS,EAAE,IAAI,cAAc,qBAC/B,IAAI,EACrB,OAAO,EAAE,OAAO,GAAG,CACjB,CAAC;GACR;EAED,SAAS;IACP,IAAI,IAAI,CAAC,SAAS,EAAE,KAAK,MAAM,EAAE;MAC/B,OAAO;KACR;IACD,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE;MACnD,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAmB,IAAI,CAAC,SAAS,EAAE,GAAG,~~IAAI~~,~~CAAC,SAAS,~~EAAE,CAAC,CAAC;~~KAC9E~~;IACD,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE;MAC1D,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAmB,IAAI,CAAC,SAAS,EAAE,iBAAiB,IAAI,CAAC,cAAc,EAAE,GAAG,~~IAAI~~,~~CAAC,SAAS,~~EAAE,CAAC,CAAC;~~KACpH~~;IAED,IAAI;MACF,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAmB,IAAI,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,~~IAAI~~,~~CAAC,SAAS,~~EAAE,CAAC,CAAC;~~KAC/I~~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","names":["SallaProductsSlider"],"sources":["./src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","./src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n &-wrapper{\n\n }\n &-slider{\n\n }\n &-card{\n\n }\n}","import {Component, Host, h, Prop, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'salla-products-slider',\n styleUrl: 'salla-products-slider.scss'\n})\nexport class SallaProductsSlider {\n constructor() {\n salla.onReady(() => {\n this.sourceValueIsValid = !!(this.sourceValue \|\| ['latest', 'offers'].includes(this.getSource()));\n });\n if (!this.sourceValueIsValid) {\n salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);\n return;\n }\n this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n }\n\n @Element() host: HTMLElement;\n //todo:: support limit, default =10, make sure that maximum is 32,\n\n /*\n Title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() blockTitle: string;\n\n /\n Sub title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() subTitle: string;\n\n /\n Slider Id, if not provided will be generated automatically\n * @type {string}\n * @default ''\n * /\n @Prop() sliderId: string;\n\n /\n Display 'ALL' URL\n * @type {string}\n * @default ''\n * /\n @Prop() displayAllUrl: string;\n\n /\n Source of the products, if api will get the products from the API, if json will get the products from the products prop\n * @type {string}\n * @default ''\n * /\n @Prop({\n reflect: true,\n mutable: true\n }) source: 'categories' \| 'latest' \| 'related' \| 'brands' \| 'json' \| 'tags' \| 'selected' \| 'offers' \| 'landing-page';\n\n /\n The source value, cloud be different values as following:\n * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n * - products payload when `source` = 'json'\n * - product_id when `source` = 'related'\n \n @type {string}\n * */\n @Prop() sourceValue: string;\n @~~State~~() ~~productsData~~: ~~any~~;\n @State() ~~isReady~~: ~~boolean~~;\n @State() ~~sourceValueIsValid~~: boolean;\n @State() ~~hasCustomComponent~~: boolean;\n @State() ~~urlPrefix~~: ~~string = ''~~;\n @State() apiUrl: string = '';\n @State() parsedSourceValue: any;\n\n private getItemHTML(product) {\n if (this.hasCustomComponent) {\n return <div class=\"s-products-slider-card\">\n <custom-salla-product-card product={product} source={this.getSource()} source-value={this.getSourceValue()}/>\n </div>;\n }\n\n return <div class=\"s-products-slider-card\">\n <salla-product-card\n show-quantity={this.getSource() == 'landing-page'}\n hide-add-btn={this.getSource() == 'landing-page'}\n shadow-on-hover={true}\n product={product}/>\n </div>;\n }\n\n getApiUrl() {\n if (this.getSource() === 'json') {\n return;\n }\n if (['offers', 'latest'].includes(this.getSource())) {\n return salla.url.api(`products?source=${this.getSource()}${~~this.urlPrefix~~}`);\n }\n if (['related', 'landing-page'].includes(this.getSource())) {\n return salla.url.api(`products?source=${this.getSource()}&source_value=${this.getSourceValue()}${~~this.urlPrefix~~}`);\n }\n\n try {\n return salla.url.api(`products?source=${this.getSource()}&source_value[]=${this.getSourceValue().join('&source_value[]=')}${~~this.urlPrefix~~}`);\n } catch (e) {\n salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.getSource()}]`);\n this.sourceValueIsValid = false;\n }\n }\n private getSource(){\n return {\n 'brands.single': 'brands',\n 'product.index': 'categories',\n 'product.index.latest': 'latest',\n 'product.index.offers': 'offers',\n 'product.index.search': 'search',\n 'landing-page': 'landing-page',\n 'product.index.tag': 'tags',\n }[this.source \|\| salla.config.get('page.slug')] \|\| this.source \|\|'latest';\n }\n\n private getSourceValue() {\n if (!['search', 'json'].includes(this.getSource())) {\n if (Array.isArray(JSON.parse(this.sourceValue)) && JSON.parse(this.sourceValue).length) {\n return JSON.parse(this.sourceValue);\n }\n\n if (typeof JSON.parse(this.sourceValue) == 'number') {\n return [JSON.parse(this.sourceValue)];\n }\n }\n return this.sourceValue \|\| salla.config.get('page.id');\n }\n private canRender() {\n return this.sourceValueIsValid && this.isReady;\n }\n\n componentWillLoad() {\n if (this.source === 'json') {\n this.productsData = this.getSourceValue();\n this.isReady = true\n return;\n }\n salla.api.request(this.getApiUrl(), null, 'get').then(res => {\n this.productsData = res.data\n this.isReady = true\n })\n }\n\n render() {\n if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled')) \|\| !this.canRender()) {\n return;\n }\n return (\n <Host class=\"s-products-slider-wrapper\">\n <salla-slider\n class=\"s-products-slider-slider\"\n id={this.sliderId \|\| `s-products-slider-${Math.random().toString(36).substr(2, 9)}`}\n type=\"carousel\"\n block-title={this.blockTitle}\n block-subTitle={this.subTitle}\n display-all-url={this.displayAllUrl}\n >\n <div slot=\"items\">\n {this.productsData?.map((product) =>\n this.getItemHTML(product)\n )}\n </div>\n </salla-slider>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"salla-products-slider.js","mappings":"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","names":["SallaProductsSlider"],"sources":["./src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","./src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n &-wrapper{\n\n }\n &-slider{\n\n }\n &-card{\n\n }\n}","import {Component, Host, h, Prop, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'salla-products-slider',\n styleUrl: 'salla-products-slider.scss'\n})\nexport class SallaProductsSlider {\n constructor() {\n salla.onReady(() => {\n this.sourceValueIsValid = !!(this.sourceValue \|\| ['latest', 'offers'].includes(this.getSource()));\n });\n if (!this.sourceValueIsValid) {\n salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);\n return;\n }\n this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n }\n\n @Element() host: HTMLElement;\n //todo:: support limit, default =10, make sure that maximum is 32,\n\n /*\n Title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() blockTitle: string;\n\n /\n Sub title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() subTitle: string;\n\n /\n Slider Id, if not provided will be generated automatically\n * @type {string}\n * @default ''\n * /\n @Prop() sliderId: string;\n\n /\n Display 'ALL' URL\n * @type {string}\n * @default ''\n * /\n @Prop() displayAllUrl: string;\n\n /\n Source of the products, if api will get the products from the API, if json will get the products from the products prop\n * @type {string}\n * @default ''\n * /\n @Prop({\n reflect: true,\n mutable: true\n }) source: 'categories' \| 'latest' \| 'related' \| 'brands' \| 'json' \| 'tags' \| 'selected' \| 'offers' \| 'landing-page';\n\n /\n The source value, cloud be different values as following:\n * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n * - products payload when `source` = 'json'\n * - product_id when `source` = 'related'\n \n @type {string}\n * /\n @Prop() sourceValue: string;\n\n /\n Limit for number of products in the list.\n */\n @Prop({mutable: true}) limit: number;\n\n \n @State() productsData: any;\n @State() isReady: boolean;\n @State() sourceValueIsValid: boolean;\n @State() hasCustomComponent: boolean;\n @State() apiUrl: string = '';\n @State() parsedSourceValue: any;\n\n private getItemHTML(product) {\n if (this.hasCustomComponent) {\n return <div class=\"s-products-slider-card\">\n <custom-salla-product-card product={product} source={this.getSource()} source-value={this.getSourceValue()}/>\n </div>;\n }\n\n return <div class=\"s-products-slider-card\">\n <salla-product-card\n show-quantity={this.getSource() == 'landing-page'}\n hide-add-btn={this.getSource() == 'landing-page'}\n shadow-on-hover={true}\n product={product}/>\n </div>;\n }\n\n private getUrlPrefix() {\n let urlPrefix = '';\n if (this.limit) {\n urlPrefix = `&per_page=${this.limit > 32 ? 32 : this.limit}`;\n }\n return urlPrefix;\n }\n\n getApiUrl() {\n if (this.getSource() === 'json') {\n return;\n }\n let prefixes = this.getUrlPrefix();\n if (['offers', 'latest'].includes(this.getSource())) {\n return salla.url.api(`products?source=${this.getSource()}${prefixes}`);\n }\n if (['related', 'landing-page'].includes(this.getSource())) {\n return salla.url.api(`products?source=${this.getSource()}&source_value=${this.getSourceValue()}${prefixes}`);\n }\n\n try {\n return salla.url.api(`products?source=${this.getSource()}&source_value[]=${this.getSourceValue().join('&source_value[]=')}${prefixes}`);\n } catch (e) {\n salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.getSource()}]`);\n this.sourceValueIsValid = false;\n }\n }\n private getSource(){\n return {\n 'brands.single': 'brands',\n 'product.index': 'categories',\n 'product.index.latest': 'latest',\n 'product.index.offers': 'offers',\n 'product.index.search': 'search',\n 'landing-page': 'landing-page',\n 'product.index.tag': 'tags',\n }[this.source \|\| salla.config.get('page.slug')] \|\| this.source \|\|'latest';\n }\n\n private getSourceValue() {\n if (!['search', 'json'].includes(this.getSource())) {\n if (Array.isArray(JSON.parse(this.sourceValue)) && JSON.parse(this.sourceValue).length) {\n return JSON.parse(this.sourceValue);\n }\n\n if (typeof JSON.parse(this.sourceValue) == 'number') {\n return [JSON.parse(this.sourceValue)];\n }\n }\n return this.sourceValue \|\| salla.config.get('page.id');\n }\n private canRender() {\n return this.sourceValueIsValid && this.isReady;\n }\n\n componentWillLoad() {\n if (this.source === 'json') {\n this.productsData = this.getSourceValue();\n this.isReady = true\n return;\n }\n salla.api.request(this.getApiUrl(), null, 'get').then(res => {\n this.productsData = res.data\n this.isReady = true\n })\n }\n\n render() {\n if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled')) \|\| !this.canRender()) {\n return;\n }\n return (\n <Host class=\"s-products-slider-wrapper\">\n <salla-slider\n class=\"s-products-slider-slider\"\n id={this.sliderId \|\| `s-products-slider-${Math.random().toString(36).substr(2, 9)}`}\n type=\"carousel\"\n block-title={this.blockTitle}\n block-subTitle={this.subTitle}\n display-all-url={this.displayAllUrl}\n >\n <div slot=\"items\">\n {this.productsData?.map((product) =>\n this.getItemHTML(product)\n )}\n </div>\n </salla-slider>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/components/salla-verify2.js CHANGED Viewed

@@ -14,7 +14,7 @@ const AndroidPhoneIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
-const sallaVerifyCss = "salla-verify{display:block}";
+const sallaVerifyCss = "salla-verify{display:block}.s-verify-input{}.s-verify-input::-webkit-outer-spin-button,.s-verify-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.s-verify-input[type=number]{-moz-appearance:textfield}";
 const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -52,7 +52,32 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.resendAfter = 0;
       this.timer.innerHTML = '30 : 00';
     });
-    this.otpHandler();
+  }
+  splitNumber(e) {
+    let data = e.data || e.target.value; // Chrome doesn't get the e.data, it's always empty, fallback to value then.
+    if (!data)
+      return; // Shouldn't happen, just in case.
+    if (data.length === 1)
+      return; // Here is a normal behavior, not a paste action.
+    this.modifyNext(e.target, data);
+  }
+  modifyNext(el, data) {
+    el.value = data[0]; // Apply first item to first input
+    data = data.substring(1); // remove the first char.
+    if (el.nextElementSibling && data.length) {
+      // Do the same with the next element and next data
+      this.modifyNext(el.nextElementSibling, data);
+    }
+  }
+  ;
+  checkAllInputs() {
+    let allFilled = true;
+    for (let i = 0; i < this.otpInputs.length; i++) {
+      if (this.otpInputs[i].value === '') {
+        allFilled = false;
+      }
+    }
+    return allFilled;
   }
   handleKeyUp(ev) {
     var _a, _b, _c, _d;
@@ -68,16 +93,43 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       (_c = ev.target.previousElementSibling) === null || _c === void 0 ? void 0 : _c.focus();
       (_d = ev.target.previousElementSibling) === null || _d === void 0 ? void 0 : _d.select();
     }
-    this.toggleOTPSubmit();
+    // If the target is populated to quickly, value length can be > 1
+    if (ev.target.value.length > 1) {
+      this.splitNumber(ev);
+    }
   }
   handlePaste(ev) {
     let text = salla.helpers.number(ev.clipboardData.getData('text'))
       .replace(/[^0-9.]/g, '')
       .replace('..', '.');
     this.otpInputs.forEach((input, i) => input.value = text[i] || '');
-    this.toggleOTPSubmit();
+    // this.toggleOTPSubmit();
     setTimeout(() => this.otpInputs[3].focus(), 100);
   }
+  handleInput(ev) {
+    salla.helpers.inputDigitsOnly(ev.target);
+    // check if all otpInputs has values then send the request
+    if (this.checkAllInputs()) {
+      setTimeout(() => {
+        this.toggleOTPSubmit();
+      }, 100);
+    }
+  }
+  handleFocus(ev) {
+    var _a;
+    // If the focus element is the first one, do nothing
+    if (ev.target === this.firstOtpInput)
+      return;
+    // If value of input 1 is empty, focus it.
+    if (((_a = this.firstOtpInput) === null || _a === void 0 ? void 0 : _a.value) == '') {
+      this.firstOtpInput.focus();
+    }
+    // If value of a previous input is empty, focus it.
+    // To remove if you don't wanna force user respecting the fields order.
+    if (ev.target.previousElementSibling.value == '') {
+      ev.target.previousElementSibling.focus();
+    }
+  }
   /**
    * Get current code
    * @return {string}
@@ -90,15 +142,17 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @param data
    */
   async open(data) {
-    var _a;
+    var _a, _b;
     this.data = data;
     this.data.type = this.data.type || this.type;
     this.type = this.data.type;
     this.resendTimer();
     this.otpInputs = this.body.querySelectorAll('.s-verify-input');
+    this.firstOtpInput = this.body.querySelector('#otp-1');
     this.reset();
     this.display == 'modal' && ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title));
     this.modal.open();
+    (_b = this.firstOtpInput) === null || _b === void 0 ? void 0 : _b.addEventListener('input', e => this.splitNumber(e));
     // focus the first input after opening the modal
     setTimeout(() => this.otpInputs[0].focus(), 100);
   }
@@ -168,24 +222,8 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.display == 'inline' ? h(Host, null, this.myBody()) :
       h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, h("span", { slot: 'icon', class: "s-verify-header-icon", innerHTML: this.type == "mobile" ? AndroidPhoneIcon : email }), this.myBody());
   }
-  otpHandler() {
-    if (!window.OTPCredential) {
-      return;
-    }
-    const ac = new AbortController();
-    let o = {
-      otp: { transport: ['sms'] },
-      signal: ac.signal
-    };
-    navigator.credentials.get(o)
-      .then(otp => {
-      // @ts-ignore
-      this.otpInputs.forEach((input, index) => input.value = otp.code[index]);
-      return this.submit();
-    });
-  }
   myBody() {
-    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: "tel", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", maxlength: "1", class: "s-verify-input", onInput: e => salla.helpers.inputDigitsOnly(e.target), onPaste: e => this.handlePaste(e), onKeyUp: e => this.handleKeyUp(e), 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 }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
+    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((i) => h("input", { type: "number", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", maxlength: "1", value: "", id: `otp-${i}`, class: "s-verify-input", onInput: e => this.handleInput(e), onPaste: e => this.handlePaste(e), onKeyUp: e => this.handleKeyUp(e), onFocus: e => this.handleFocus(e), 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 }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
   }
   get host() { return this; }
   static get style() { return sallaVerifyCss; }

package/dist/components/salla-verify2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-verify2.js","mappings":"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","names":["MailIcon"],"sources":["./src/components/salla-verify/salla-verify.scss?tag=salla-verify","./src/components/salla-verify/salla-verify.tsx"],"sourcesContent":["/\n Verify Component: verify step in login and register and displays after the user change it's phone number.\n* You can use these classes to target the elements in the component.\n/\n\nsalla-verify {\n display: block;\n}\n\n.s-verify {\n &-host{\n \n }\n &-message {\n\n }\n &-label {\n\n }\n &-codes {\n\n }\n &-input {\n\n }\n &-footer {\n\n }\n &-submit {\n\n }\n &-resend-message {\n\n }\n &-timer {\n\n }\n &-resend {\n\n }\n &-back {\n \n }\n}\n","import { Component, Host, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport AndroidPhoneIcon from '../../assets/svg/android-phone.svg';\nimport MailIcon from '../../assets/svg/mail.svg';\n\n/\n @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer\n * @slot after-footer - placeholder position\n /\n@Component({ tag: 'salla-verify', styleUrl: 'salla-verify.scss' })\n\nexport class SallaVerify {\n constructor() {\n salla.lang.onLoaded(() => {\n this.translationLoaded = true;\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);\n this.modal?.setTitle(this.title);\n });\n\n if (this.display == 'inline') {\n this.modal = { open: () => '', close: () => '', setTitle: () => '' };\n return;\n }\n\n //todo:: change this way, now we fire the event from the backend, we should listen to salla.profile.event.onUpdated\n salla.event.on('profile::verification', data => {\n let payload = Array.isArray(data) ? data[0] : data;\n this.isProfileVerify = true;\n this.open(payload);\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + payload.type);\n this.modal?.setTitle(this.title);\n });\n\n salla.event.on('modalClosed', () => {\n this.resendAfter = 0;\n this.timer.innerHTML = '30 : 00';\n });\n\n this.otpHandler();\n }\n\n private modal: HTMLSallaModalElement \| any;\n private body: HTMLDivElement;\n private code: HTMLInputElement;\n private btn: HTMLSallaButtonElement;\n private resendMessage: HTMLParagraphElement;\n private timer: HTMLElement;\n private resend: HTMLAnchorElement;\n private otpInputs: NodeListOf<HTMLInputElement>;\n private data: { type: 'mobile' \| 'email', phone?: string, country_code?: string, email?: string };\n\n @State() translationLoaded: boolean = false;\n\n @Element() host: HTMLElement;\n /\n Should render component without modal\n /\n @Prop() display: 'inline' \| 'modal' = 'modal';\n\n /\n Verifying method\n /\n @Prop({ mutable: true }) type: 'mobile' \| 'email' = 'mobile';\n /\n should auto reloading the page after success verification\n /\n @Prop() autoReload: boolean = true;\n\n /\n Once the api verify success, it will be login the customer in web pages\n /\n @Prop() supportWebAuth: boolean = true;\n\n /\n Event when success verification\n /\n @Event() verified: EventEmitter;\n\n @State() title: string;\n\n @State() resendAfter: number = 30;\n /\n to use: `salla.api.auth.verify` or `salla.profile.verify`\n /\n @State() isProfileVerify: boolean = false;\n\n private handleKeyUp(ev) {\n if (['Alt', 'Shift', 'Control', 'AltGraph', 'Ctrl'].includes(ev.key)) {\n return;\n }\n let key = ev.keyCode \|\| ev.charCode;\n if (ev.target.value) {\n ev.target.nextElementSibling?.focus();\n ev.target.nextElementSibling?.select();\n } else if ([8, 46].includes(key)) {\n ev.target.previousElementSibling?.focus();\n ev.target.previousElementSibling?.select();\n }\n this.toggleOTPSubmit();\n }\n\n private handlePaste(ev) {\n let text = salla.helpers.number(ev.clipboardData.getData('text'))\n .replace(/[^0-9.]/g, '')\n .replace('..', '.');\n this.otpInputs.forEach((input, i) => input.value = text[i] \|\| '');\n this.toggleOTPSubmit();\n setTimeout(() => this.otpInputs[3].focus(), 100);\n }\n\n /\n Get current code\n * @return {string}\n /\n @Method()\n async getCode() {\n return this.code.value;\n }\n\n /\n Open verifying modal\n * @param data\n /\n @Method()\n async open(data) {\n this.data = data;\n this.data.type = this.data.type \|\| this.type;\n this.type = this.data.type;\n this.resendTimer();\n this.otpInputs = this.body.querySelectorAll('.s-verify-input');\n\n this.reset();\n this.display == 'modal' && this.modal?.setTitle(this.title);\n this.modal.open();\n\n // focus the first input after opening the modal\n setTimeout(() => this.otpInputs[0].focus(), 100);\n }\n\n private toggleOTPSubmit() {\n let otp = []\n this.otpInputs.forEach(input => input.value && otp.push(input.value));\n\n this.code.value = otp.join('');\n\n if (otp.length === 4) {\n this.btn.disable()\n this.btn.click();\n return;\n }\n\n this.btn.enable()\n }\n\n private reset() {\n this.otpInputs.forEach((input) => input.value = '');\n this.code.value = '';\n this.otpInputs[0].focus();\n }\n\n private resendTimer() {\n this.resendMessage.style.display = 'block';\n this.resend.style.display = 'none';\n this.resendAfter = 30;\n\n let timerId = setInterval(() => {\n if (this.resendAfter <= 0) {\n clearInterval(timerId);\n this.resend.style.display = 'block';\n this.resendMessage.style.display = 'none';\n } else {\n this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;\n this.resendAfter--;\n }\n }, 1000);\n }\n\n private resendCode() {\n return this.btn.stop()\n .then(() => this.btn.disable())\n .then(() => {\n this.otpInputs.forEach(input => input.value = '');\n this.otpInputs[0].focus();\n })\n .then(() => salla.api.auth.resend(this.data))\n .finally(() => this.resendTimer());\n }\n\n private submit() {\n //if code not 4 digits, focus on the after filled input,\n if (this.code.value.length < 4) {\n this.otpInputs[this.code.value.length].focus();\n salla.log('Trying to submit without 4 digits!');\n return;\n }\n\n let data = { code: this.code.value, ...this.data };\n\n return this.btn.load()\n .then(() => this.btn.disable())\n .then(() => this.isProfileVerify ? salla.profile.verify(data) : salla.auth.verify(data, this.supportWebAuth))\n .then(response => this.verified.emit(response))\n .then(() => this.btn.stop() && this.btn.disable())\n .then(() => this.modal.close())\n .then(() => this.autoReload && window.location.reload())\n .catch((error) => {\n salla.logger.error(error);\n this.btn.stop() && this.btn.enable() && this.reset()\n });\n }\n\n render() {\n return this.display == 'inline' ? <Host>{this.myBody()}</Host> :\n <salla-modal width=\"xs\" class=\"s-verify\" ref={modal => this.modal = modal}\n modal-title={this.title}>\n <span slot='icon' class=\"s-verify-header-icon\" innerHTML={this.type == \"mobile\" ? AndroidPhoneIcon : MailIcon}></span>\n {this.myBody()}\n </salla-modal>;\n }\n\n private otpHandler() {\n if (!window.OTPCredential) {\n return;\n }\n\n const ac = new AbortController();\n\n let o = {\n otp: {transport: ['sms']},\n signal: ac.signal\n }\n\n navigator.credentials.get(o)\n .then(otp => {\n // @ts-ignore\n this.otpInputs.forEach((input, index) => input.value = otp.code[index])\n return this.submit()\n });\n }\n\n private myBody() {\n return (\n <div class=\"s-verify-body\" ref={body => this.body = body}>\n <div class=\"s-verify-message\" innerHTML={salla.lang.get('pages.profile.verify_message')} />\n <input type=\"hidden\" name=\"code\" maxlength=\"4\" required ref={code => this.code = code} />\n <div class=\"s-verify-codes\" dir=\"ltr\">\n {[1, 2, 3, 4].map(() => <input type=\"tel\" autocomplete=\"one-time-code\" pattern=\"[0-9]\" inputmode=\"numeric\"\n maxlength=\"1\" class=\"s-verify-input\"\n onInput={e => salla.helpers.inputDigitsOnly(e.target)}\n onPaste={e => this.handlePaste(e)}\n onKeyUp={e => this.handleKeyUp(e)}\n required />)}\n </div>\n <div slot=\"footer\" class=\"s-verify-footer\">\n <salla-button class=\"s-verify-submit\" loader-position='center' disabled={true}\n onClick={() => this.submit()}\n ref={b => this.btn = b}>\n {salla.lang.get('pages.profile.verify')}\n </salla-button>\n <p class=\"s-verify-resend-message\" ref={el => this.resendMessage = el}>\n {salla.lang.get('blocks.header.resend_after')}\n <b class=\"s-verify-timer\" ref={el => this.timer = el}></b></p>\n <a href=\"#\" class=\"s-verify-resend\" onClick={() => this.resendCode()}\n ref={el => this.resend = el}>{salla.lang.get('blocks.comments.submit')}</a>\n </div>\n <slot name=\"after-footer\" />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"salla-verify2.js","mappings":"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","names":["MailIcon"],"sources":["./src/components/salla-verify/salla-verify.scss?tag=salla-verify","./src/components/salla-verify/salla-verify.tsx"],"sourcesContent":["/\n Verify Component: verify step in login and register and displays after the user change it's phone number.\n* You can use these classes to target the elements in the component.\n/\n\nsalla-verify {\n display: block;\n}\n\n.s-verify {\n &-host{\n \n }\n &-message {\n\n }\n &-label {\n\n }\n &-codes {\n\n }\n &-input {\n // Hide number input arrows\n / Chrome, Safari, Edge, Opera /\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n / Firefox /\n &[type=number] {\n -moz-appearance: textfield;\n }\n }\n &-footer {\n\n }\n &-submit {\n\n }\n &-resend-message {\n\n }\n &-timer {\n\n }\n &-resend {\n\n }\n &-back {\n \n }\n}\n","import { Component, Host, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport AndroidPhoneIcon from '../../assets/svg/android-phone.svg';\nimport MailIcon from '../../assets/svg/mail.svg';\n\n/\n @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer\n * @slot after-footer - placeholder position\n /\n@Component({ tag: 'salla-verify', styleUrl: 'salla-verify.scss' })\n\nexport class SallaVerify {\n constructor() {\n salla.lang.onLoaded(() => {\n this.translationLoaded = true;\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);\n this.modal?.setTitle(this.title);\n });\n\n if (this.display == 'inline') {\n this.modal = { open: () => '', close: () => '', setTitle: () => '' };\n return;\n }\n\n //todo:: change this way, now we fire the event from the backend, we should listen to salla.profile.event.onUpdated\n salla.event.on('profile::verification', data => {\n let payload = Array.isArray(data) ? data[0] : data;\n this.isProfileVerify = true;\n this.open(payload);\n this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + payload.type);\n this.modal?.setTitle(this.title);\n });\n\n salla.event.on('modalClosed', () => {\n this.resendAfter = 0;\n this.timer.innerHTML = '30 : 00';\n });\n\n }\n\n private modal: HTMLSallaModalElement \| any;\n private body: HTMLDivElement;\n private code: HTMLInputElement;\n private btn: HTMLSallaButtonElement;\n private resendMessage: HTMLParagraphElement;\n private timer: HTMLElement;\n private resend: HTMLAnchorElement;\n private otpInputs: NodeListOf<HTMLInputElement>;\n private firstOtpInput: HTMLInputElement;\n private data: { type: 'mobile' \| 'email', phone?: string, country_code?: string, email?: string };\n\n @State() translationLoaded: boolean = false;\n\n @Element() host: HTMLElement;\n /\n Should render component without modal\n /\n @Prop() display: 'inline' \| 'modal' = 'modal';\n\n /\n Verifying method\n /\n @Prop({ mutable: true }) type: 'mobile' \| 'email' = 'mobile';\n /\n should auto reloading the page after success verification\n /\n @Prop() autoReload: boolean = true;\n\n /\n Once the api verify success, it will be login the customer in web pages\n /\n @Prop() supportWebAuth: boolean = true;\n\n /\n Event when success verification\n /\n @Event() verified: EventEmitter;\n\n @State() title: string;\n\n @State() resendAfter: number = 30;\n /\n to use: `salla.api.auth.verify` or `salla.profile.verify`\n /\n @State() isProfileVerify: boolean = false;\n\n private splitNumber(e) {\n let data = e.data \|\| e.target.value; // Chrome doesn't get the e.data, it's always empty, fallback to value then.\n if (!data) return; // Shouldn't happen, just in case.\n if (data.length === 1) return; // Here is a normal behavior, not a paste action.\n this.modifyNext(e.target, data);\n }\n\n private modifyNext(el, data) {\n el.value = data[0]; // Apply first item to first input\n data = data.substring(1); // remove the first char.\n if (el.nextElementSibling && data.length) {\n // Do the same with the next element and next data\n this.modifyNext(el.nextElementSibling, data);\n }\n };\n\n private checkAllInputs() {\n let allFilled = true;\n for (let i = 0; i < this.otpInputs.length; i++) {\n if (this.otpInputs[i].value === '') {\n allFilled = false;\n }\n }\n return allFilled;\n }\n\n private handleKeyUp(ev) {\n if (['Alt', 'Shift', 'Control', 'AltGraph', 'Ctrl'].includes(ev.key)) {\n return;\n }\n let key = ev.keyCode \|\| ev.charCode;\n if (ev.target.value) {\n ev.target.nextElementSibling?.focus();\n ev.target.nextElementSibling?.select();\n } else if ([8, 46].includes(key)) {\n ev.target.previousElementSibling?.focus();\n ev.target.previousElementSibling?.select();\n }\n // If the target is populated to quickly, value length can be > 1\n if (ev.target.value.length > 1) {\n this.splitNumber(ev);\n }\n }\n\n private handlePaste(ev) {\n let text = salla.helpers.number(ev.clipboardData.getData('text'))\n .replace(/[^0-9.]/g, '')\n .replace('..', '.');\n this.otpInputs.forEach((input, i) => input.value = text[i] \|\| '');\n // this.toggleOTPSubmit();\n setTimeout(() => this.otpInputs[3].focus(), 100);\n }\n\n private handleInput(ev) {\n salla.helpers.inputDigitsOnly(ev.target)\n // check if all otpInputs has values then send the request\n if (this.checkAllInputs()) {\n setTimeout(() => {\n this.toggleOTPSubmit();\n }, 100);\n }\n }\n\n private handleFocus(ev) {\n // If the focus element is the first one, do nothing\n if (ev.target === this.firstOtpInput) return;\n // If value of input 1 is empty, focus it.\n if (this.firstOtpInput?.value == '') {\n this.firstOtpInput.focus();\n }\n // If value of a previous input is empty, focus it.\n // To remove if you don't wanna force user respecting the fields order.\n if (ev.target.previousElementSibling.value == '') {\n ev.target.previousElementSibling.focus();\n }\n }\n\n /\n Get current code\n * @return {string}\n /\n @Method()\n async getCode() {\n return this.code.value;\n }\n\n /\n Open verifying modal\n * @param data\n /\n @Method()\n async open(data) {\n this.data = data;\n this.data.type = this.data.type \|\| this.type;\n this.type = this.data.type;\n this.resendTimer();\n this.otpInputs = this.body.querySelectorAll('.s-verify-input');\n this.firstOtpInput = this.body.querySelector('#otp-1');\n this.reset();\n this.display == 'modal' && this.modal?.setTitle(this.title);\n this.modal.open();\n this.firstOtpInput?.addEventListener('input', e => this.splitNumber(e));\n\n // focus the first input after opening the modal\n setTimeout(() => this.otpInputs[0].focus(), 100);\n }\n\n private toggleOTPSubmit() {\n let otp = []\n this.otpInputs.forEach(input => input.value && otp.push(input.value));\n\n this.code.value = otp.join('');\n\n if (otp.length === 4) {\n this.btn.disable()\n this.btn.click();\n return;\n }\n\n this.btn.enable()\n }\n\n private reset() {\n this.otpInputs.forEach((input) => input.value = '');\n this.code.value = '';\n this.otpInputs[0].focus();\n }\n\n private resendTimer() {\n this.resendMessage.style.display = 'block';\n this.resend.style.display = 'none';\n this.resendAfter = 30;\n\n let timerId = setInterval(() => {\n if (this.resendAfter <= 0) {\n clearInterval(timerId);\n this.resend.style.display = 'block';\n this.resendMessage.style.display = 'none';\n } else {\n this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;\n this.resendAfter--;\n }\n }, 1000);\n }\n\n private resendCode() {\n return this.btn.stop()\n .then(() => this.btn.disable())\n .then(() => {\n this.otpInputs.forEach(input => input.value = '');\n this.otpInputs[0].focus();\n })\n .then(() => salla.api.auth.resend(this.data))\n .finally(() => this.resendTimer());\n }\n\n private submit() {\n //if code not 4 digits, focus on the after filled input,\n if (this.code.value.length < 4) {\n this.otpInputs[this.code.value.length].focus();\n salla.log('Trying to submit without 4 digits!');\n return;\n }\n\n let data = { code: this.code.value, ...this.data };\n\n return this.btn.load()\n .then(() => this.btn.disable())\n .then(() => this.isProfileVerify ? salla.profile.verify(data) : salla.auth.verify(data, this.supportWebAuth))\n .then(response => this.verified.emit(response))\n .then(() => this.btn.stop() && this.btn.disable())\n .then(() => this.modal.close())\n .then(() => this.autoReload && window.location.reload())\n .catch((error) => {\n salla.logger.error(error);\n this.btn.stop() && this.btn.enable() && this.reset()\n });\n }\n\n render() {\n return this.display == 'inline' ? <Host>{this.myBody()}</Host> :\n <salla-modal width=\"xs\" class=\"s-verify\" ref={modal => this.modal = modal}\n modal-title={this.title}>\n <span slot='icon' class=\"s-verify-header-icon\" innerHTML={this.type == \"mobile\" ? AndroidPhoneIcon : MailIcon}></span>\n {this.myBody()}\n </salla-modal>;\n }\n\n\n private myBody() {\n return (\n <div class=\"s-verify-body\" ref={body => this.body = body}>\n <div class=\"s-verify-message\" innerHTML={salla.lang.get('pages.profile.verify_message')} />\n <input type=\"hidden\" name=\"code\" maxlength=\"4\" required ref={code => this.code = code} />\n <div class=\"s-verify-codes\" dir=\"ltr\">\n {[1, 2, 3, 4].map((i) => <input type=\"number\" autocomplete=\"one-time-code\" pattern=\"[0-9]\" inputmode=\"numeric\"\n maxlength=\"1\" value=\"\" id={`otp-${i}`} class=\"s-verify-input\"\n onInput={e => this.handleInput(e)}\n onPaste={e => this.handlePaste(e)}\n onKeyUp={e => this.handleKeyUp(e)}\n onFocus={e => this.handleFocus(e)}\n required />)}\n </div>\n <div slot=\"footer\" class=\"s-verify-footer\">\n <salla-button class=\"s-verify-submit\" loader-position='center' disabled={true}\n onClick={() => this.submit()}\n ref={b => this.btn = b}>\n {salla.lang.get('pages.profile.verify')}\n </salla-button>\n <p class=\"s-verify-resend-message\" ref={el => this.resendMessage = el}>\n {salla.lang.get('blocks.header.resend_after')}\n <b class=\"s-verify-timer\" ref={el => this.timer = el}></b></p>\n <a href=\"#\" class=\"s-verify-resend\" onClick={() => this.resendCode()}\n ref={el => this.resend = el}>{salla.lang.get('blocks.comments.submit')}</a>\n </div>\n <slot name=\"after-footer\" />\n </div>\n );\n }\n}\n"],"version":3}