@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-user-settings.js

@@ -1,4 +1,142 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as e,HTMLElement as t,h as a,Host as i}from"@stencil/core/internal/client";import{d as c}from"./salla-button2.js";import{d as l}from"./salla-list-tile2.js";import{d as n}from"./salla-loading2.js";import{d as o}from"./salla-modal2.js";var d='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>user-off</title>\n<path d="M10.837 19.309c-4.963 1.284-8.171 4.303-8.171 7.691v3.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-3.667c0-2.101 2.48-4.155 6.172-5.109 0.713-0.184 1.141-0.912 0.957-1.625-0.184-0.711-0.908-1.137-1.625-0.956zM12.859 3.715c0.933-0.685 2.020-1.048 3.141-1.048 2.941 0 5.333 2.392 5.333 5.333 0 1.121-0.363 2.208-1.048 3.141-0.436 0.593-0.308 1.428 0.284 1.864 0.239 0.175 0.515 0.259 0.788 0.259 0.411 0 0.815-0.188 1.076-0.544 1.025-1.393 1.567-3.025 1.567-4.72 0-4.412-3.588-8-8-8-1.695 0-3.327 0.541-4.721 1.567-0.592 0.435-0.72 1.269-0.284 1.864 0.436 0.593 1.269 0.721 1.864 0.284zM31.609 29.724l-29.333-29.333c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l29.333 29.333c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885z"></path>\n</svg>\n';const f=e(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.deactivateAccount=salla.lang.get("pages.profile.deactivate_account"),this.promotionalMsgs=salla.lang.get("pages.profile.promotional_messages"),this.hideMyName=salla.lang.get("pages.profile.hide_my_name"),this.hideMyNameDesc=salla.lang.get("pages.profile.hide_my_name_desc"),this.deactivateDesc=salla.lang.get("pages.profile.deactivate_account_description"),this.promotionalMsgsDesc=salla.lang.get("pages.profile.promotional_messages_description"),this.sorryForLeavingText=salla.lang.get("pages.profile.warning_for_deactivate"),this.warningText=salla.lang.get("pages.profile.sorry_for_leaving"),this.keepAccount=salla.lang.get("pages.profile.keep_account"),this.buttonLoading=!1,this.canHideName=salla.config.get("store.settings.rating.can_customer_hide_name"),salla.onReady((()=>{this.isHiddenName=salla.config.get("user.is_hidden_name"),this.isNotifiable=salla.config.get("user.is_notifiable"),this.canHideName=salla.config.get("store.settings.rating.can_customer_hide_name"),this.isNotifiable&&this.isHiddenName||salla.event.on("profile::info.fetched",(s=>{this.isHiddenName=s.data.is_hidden_name,this.isNotifiable=s.data.is_notifiable}))})),salla.lang.onLoaded((()=>{this.deactivateAccount=salla.lang.get("pages.profile.deactivate_account"),this.promotionalMsgs=salla.lang.get("pages.profile.promotional_messages"),this.hideMyName=salla.lang.get("pages.profile.hide_my_name"),this.hideMyNameDesc=salla.lang.get("pages.profile.hide_my_name_desc"),this.deactivateDesc=salla.lang.get("pages.profile.deactivate_account_description"),this.promotionalMsgsDesc=salla.lang.get("pages.profile.promotional_messages_description"),this.warningText=salla.lang.get("pages.profile.warning_for_deactivate"),this.sorryForLeavingText=salla.lang.get("pages.profile.sorry_for_leaving"),this.keepAccount=salla.lang.get("pages.profile.keep_account")}))}toggleSetting(s,e){salla.profile.updateSettings({name:s,value:e.target.checked})}capitalizeText(s){return s.charAt(0).toUpperCase()+s.slice(1)}openDeactivateModal(){this.confirmationModal.setTitle(this.capitalizeText(this.deactivateAccount)),this.confirmationModal.open()}async deleteAccount(){await salla.profile.delete().finally((()=>this.confirmationModal.close()))}render(){return a(i,{key:"35629ae7a818db4d058b5de6a4ad7a2410fd769a",class:"s-user-settings-wrapper"},this.canHideName&&a("div",{key:"088ff650127df0e6e4fda37dc9769ebe7a050cfa",class:"s-user-settings-section"},a("salla-list-tile",{key:"dc71e681761440cb875d3de11b3d1a13def55a5c"},a("div",{key:"44b1c2e02b981712467b5d494e1d8e8c30cefc5d",slot:"icon",class:"s-user-settings-section-icon"},a("span",{key:"cb4f89d7f81526be268ac7ac7cf407f458eee32a",innerHTML:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>user-cancel</title>\n<path d="M29.885 16l1.724-1.724c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0l-1.724 1.724-1.724-1.724c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l1.724 1.724-1.724 1.724c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l1.724-1.724 1.724 1.724c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885zM10.667 16c4.043 0 7.333-3.289 7.333-7.333s-3.291-7.333-7.333-7.333-7.333 3.289-7.333 7.333 3.291 7.333 7.333 7.333zM10.667 4c2.573 0 4.667 2.093 4.667 4.667s-2.093 4.667-4.667 4.667-4.667-2.093-4.667-4.667 2.093-4.667 4.667-4.667zM10.667 18.667c-5.881 0-10.667 3.813-10.667 8.5v2.167c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.167c0-3.217 3.588-5.833 8-5.833s8 2.616 8 5.833v2.167c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.167c0-4.687-4.785-8.5-10.667-8.5z"></path>\n</svg>\n'})),a("div",{key:"2be07d40cd1b2082e08f391d43f6fb292e707c51",slot:"title",class:"s-user-settings-section-title"},this.capitalizeText(this.hideMyName)),a("div",{key:"ab4702331a6b59f974794e1c6f95505541273db7",slot:"subtitle",class:"s-user-settings-section-subtitle"},this.capitalizeText(this.hideMyNameDesc)),a("div",{key:"92615b95a6f669e4925a17b6a11ef9146d182d62",slot:"action",class:"s-user-settings-section-action"},a("label",{key:"d99cd97d0baf75c75fc8e2ba6fd403109295658f",class:"s-toggle"},a("input",{key:"52997c851e7ffff021d267d9cc839d19a1b940b9",class:"s-toggle-input",checked:this.isHiddenName,onChange:s=>this.toggleSetting("is_hidden_name",s),type:"checkbox"}),a("div",{key:"f2418d8595800b8e2af231aab82714137bad4e5c",class:"s-toggle-switcher"}))))),a("div",{key:"ca9641927d0c2e09345078a16e06445f1961d05d",class:"s-user-settings-section"},a("salla-list-tile",{key:"55075a73c15fda0fb94291e41d528b066d2a808d"},a("div",{key:"20e5894110f485f2ed75fdc6f0d54b647d1d4a48",slot:"icon",class:"s-user-settings-section-icon"},a("span",{key:"c616fe981cd2a7ceb8090c44fe353b5504f5b0e1",innerHTML:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>bullhorn</title>\n<path d="M30.129 0.264c-0.339-0.252-0.776-0.328-1.179-0.208l-24.951 7.485v-0.216c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v14.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-0.112l3.448 1.207-0.595 1.704c-0.321 1.019-0.227 2.103 0.267 3.051s1.327 1.647 2.345 1.968l6.359 2.004c0.399 0.127 0.804 0.187 1.201 0.187 1.699 0 3.277-1.091 3.812-2.785l0.423-1.295 7.633 2.672c0.143 0.049 0.292 0.075 0.44 0.075 0.273 0 0.543-0.084 0.772-0.247 0.352-0.249 0.561-0.655 0.561-1.087v-28c0-0.421-0.199-0.819-0.537-1.069zM18.297 28.4c-0.221 0.701-0.973 1.089-1.673 0.871l-6.357-2.004c-0.34-0.108-0.617-0.34-0.781-0.656s-0.196-0.676-0.101-0.977l0.581-1.665 8.777 3.072zM28 27.453l-24-8.4v-8.728l24-7.2z"></path>\n</svg>\n'})),a("div",{key:"c1dc47211d07cc1ea25e2ce284f460c2eb6d4f7b",slot:"title",class:"s-user-settings-section-title"},this.capitalizeText(this.promotionalMsgs)),a("div",{key:"185e058888078b556a359acb6cc1ae080f01ad81",slot:"subtitle",class:"s-user-settings-section-subtitle"},this.capitalizeText(this.promotionalMsgsDesc)),a("div",{key:"f54597f7f3c9126c57d34a5aba3ccd84752efbea",slot:"action",class:"s-user-settings-section-action"},a("label",{key:"3386b76fc2d590b3a3734716429a8317a80fcc0b",class:"s-toggle"},a("input",{key:"d2d9ce3f8e3110715d84e9b407b878e341567fc6",class:"s-toggle-input",checked:this.isNotifiable,onChange:s=>this.toggleSetting("is_notifiable",s),type:"checkbox"}),a("div",{key:"267b474fb32cbabdf53ff8fd2fe69df87875819d",class:"s-toggle-switcher"}))))),a("div",{key:"80d86e89c87bceddddd461faeede4dfc8f4b3301",class:"s-user-settings-section s-user-settings-section-deactivate-user"},a("salla-list-tile",{key:"b95c175905cde9d4fae8487d1a85329db890873f"},a("div",{key:"1e32b08bceb6bf299ea1e59545d7c539cb2ddce1",slot:"icon",class:"s-user-settings-section-icon"},a("span",{key:"f1322819a6f07dff92f9956c0149b173f283407e",innerHTML:d})),a("div",{key:"5d2ddaf6c03c8809f7e86b33fa421e73d048957e",slot:"title",class:"s-user-settings-section-title"},this.capitalizeText(this.deactivateAccount)),a("div",{key:"0578e54cc49334ad081641b2ccd5b98d81e547ed",slot:"subtitle",class:"s-user-settings-section-subtitle"},this.capitalizeText(this.deactivateDesc)),a("div",{key:"30d6697be785def178352999d437f67798a03ed5",slot:"action",class:"s-user-settings-section-action"},a("salla-button",{key:"b0ecec87180902892081999d0c96da33cda58d26",fill:"outline",color:"danger",shape:"btn",size:"medium",width:"normal",onClick:()=>this.openDeactivateModal()},this.capitalizeText(this.deactivateAccount))))),a("salla-modal",{key:"b2015afb2f495f080d6757a57408ccd3e823b1ed",width:"sm",subTitle:this.capitalizeText(this.sorryForLeavingText),ref:s=>this.confirmationModal=s},a("span",{key:"e9391b722fe6c23853664cd5558c289e7fff427a",slot:"icon",class:"s-user-settings-confirmation-icon",innerHTML:d}),a("div",{key:"fffaa51055598f66f479e90676649eac4a06148c",class:"s-user-settings-confirmation"},a("div",{key:"2d7044a63ada034d44de97a875903967de4fa7f0",class:"s-user-settings-confirmation-warning"},this.capitalizeText(this.warningText)),a("div",{key:"f79c44b10a20b187c4f5a849b7e40c3c71eb0194",class:"s-user-settings-confirmation-actions"},a("salla-button",{key:"b41c685894464f38f8a590482532a46851702ee7",width:"wide",onClick:()=>this.confirmationModal.close()},this.capitalizeText(this.keepAccount)),a("salla-button",{key:"3520e6c0bd7475a6ad3b004ec0a20c3993ebb45f",fill:"outline",loading:this.buttonLoading,width:"wide",onClick:()=>this.deleteAccount()},this.capitalizeText(this.deactivateAccount))))))}static get style(){return""}},[0,"salla-user-settings",{deactivateAccount:[32],promotionalMsgs:[32],hideMyName:[32],hideMyNameDesc:[32],deactivateDesc:[32],promotionalMsgsDesc:[32],sorryForLeavingText:[32],warningText:[32],keepAccount:[32],buttonLoading:[32],canHideName:[32],isHiddenName:[32],isNotifiable:[32]}]);function r(){"undefined"!=typeof customElements&&["salla-user-settings","salla-button","salla-list-tile","salla-loading","salla-modal"].forEach((e=>{switch(e){case"salla-user-settings":customElements.get(s(e))||customElements.define(s(e),f);break;case"salla-button":customElements.get(s(e))||c();break;case"salla-list-tile":customElements.get(s(e))||l();break;case"salla-loading":customElements.get(s(e))||n();break;case"salla-modal":customElements.get(s(e))||o()}}))}r();const h=f,b=r;export{h as SallaUserSettings,b as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-list-tile2.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.js';
+
+var Bullhorn = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bullhorn</title>
+<path d="M30.129 0.264c-0.339-0.252-0.776-0.328-1.179-0.208l-24.951 7.485v-0.216c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v14.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-0.112l3.448 1.207-0.595 1.704c-0.321 1.019-0.227 2.103 0.267 3.051s1.327 1.647 2.345 1.968l6.359 2.004c0.399 0.127 0.804 0.187 1.201 0.187 1.699 0 3.277-1.091 3.812-2.785l0.423-1.295 7.633 2.672c0.143 0.049 0.292 0.075 0.44 0.075 0.273 0 0.543-0.084 0.772-0.247 0.352-0.249 0.561-0.655 0.561-1.087v-28c0-0.421-0.199-0.819-0.537-1.069zM18.297 28.4c-0.221 0.701-0.973 1.089-1.673 0.871l-6.357-2.004c-0.34-0.108-0.617-0.34-0.781-0.656s-0.196-0.676-0.101-0.977l0.581-1.665 8.777 3.072zM28 27.453l-24-8.4v-8.728l24-7.2z"></path>
+</svg>
+`;
+
+var UserOff = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user-off</title>
+<path d="M10.837 19.309c-4.963 1.284-8.171 4.303-8.171 7.691v3.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-3.667c0-2.101 2.48-4.155 6.172-5.109 0.713-0.184 1.141-0.912 0.957-1.625-0.184-0.711-0.908-1.137-1.625-0.956zM12.859 3.715c0.933-0.685 2.020-1.048 3.141-1.048 2.941 0 5.333 2.392 5.333 5.333 0 1.121-0.363 2.208-1.048 3.141-0.436 0.593-0.308 1.428 0.284 1.864 0.239 0.175 0.515 0.259 0.788 0.259 0.411 0 0.815-0.188 1.076-0.544 1.025-1.393 1.567-3.025 1.567-4.72 0-4.412-3.588-8-8-8-1.695 0-3.327 0.541-4.721 1.567-0.592 0.435-0.72 1.269-0.284 1.864 0.436 0.593 1.269 0.721 1.864 0.284zM31.609 29.724l-29.333-29.333c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l29.333 29.333c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885z"></path>
+</svg>
+`;
+
+var UserCancel = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>user-cancel</title>
+<path d="M29.885 16l1.724-1.724c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0l-1.724 1.724-1.724-1.724c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l1.724 1.724-1.724 1.724c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l1.724-1.724 1.724 1.724c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885zM10.667 16c4.043 0 7.333-3.289 7.333-7.333s-3.291-7.333-7.333-7.333-7.333 3.289-7.333 7.333 3.291 7.333 7.333 7.333zM10.667 4c2.573 0 4.667 2.093 4.667 4.667s-2.093 4.667-4.667 4.667-4.667-2.093-4.667-4.667 2.093-4.667 4.667-4.667zM10.667 18.667c-5.881 0-10.667 3.813-10.667 8.5v2.167c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.167c0-3.217 3.588-5.833 8-5.833s8 2.616 8 5.833v2.167c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.167c0-4.687-4.785-8.5-10.667-8.5z"></path>
+</svg>
+`;
+
+const sallaUserSettingsCss = "";
+
+const SallaUserSettings$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserSettings extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        // Texts
+        this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
+        this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
+        this.hideMyName = salla.lang.get('pages.profile.hide_my_name');
+        this.hideMyNameDesc = salla.lang.get('pages.profile.hide_my_name_desc');
+        this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
+        this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
+        this.sorryForLeavingText = salla.lang.get('pages.profile.warning_for_deactivate');
+        this.warningText = salla.lang.get('pages.profile.sorry_for_leaving');
+        this.keepAccount = salla.lang.get('pages.profile.keep_account');
+        this.buttonLoading = false;
+        this.canHideName = salla.config.get('store.settings.rating.can_customer_hide_name');
+        salla.onReady(() => {
+            this.isHiddenName = salla.config.get('user.is_hidden_name');
+            this.isNotifiable = salla.config.get('user.is_notifiable');
+            this.canHideName = salla.config.get('store.settings.rating.can_customer_hide_name');
+            if (!this.isNotifiable || !this.isHiddenName) {
+                salla.event.on('profile::info.fetched', res => {
+                    this.isHiddenName = res.data.is_hidden_name;
+                    this.isNotifiable = res.data.is_notifiable;
+                });
+            }
+        });
+        salla.lang.onLoaded(() => {
+            this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
+            this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
+            this.hideMyName = salla.lang.get('pages.profile.hide_my_name');
+            this.hideMyNameDesc = salla.lang.get('pages.profile.hide_my_name_desc');
+            this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
+            this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
+            this.warningText = salla.lang.get('pages.profile.warning_for_deactivate');
+            this.sorryForLeavingText = salla.lang.get('pages.profile.sorry_for_leaving');
+            this.keepAccount = salla.lang.get('pages.profile.keep_account');
+        });
+    }
+    toggleSetting(setting, event) {
+        salla.profile.updateSettings({ name: setting, value: event.target.checked });
+    }
+    capitalizeText(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+    openDeactivateModal() {
+        this.confirmationModal.setTitle(this.capitalizeText(this.deactivateAccount));
+        this.confirmationModal.open();
+    }
+    async deleteAccount() {
+        await salla.profile.delete().finally(() => this.confirmationModal.close());
+    }
+    render() {
+        return (h(Host, { key: '35629ae7a818db4d058b5de6a4ad7a2410fd769a', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '088ff650127df0e6e4fda37dc9769ebe7a050cfa', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'dc71e681761440cb875d3de11b3d1a13def55a5c' }, h("div", { key: '44b1c2e02b981712467b5d494e1d8e8c30cefc5d', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'cb4f89d7f81526be268ac7ac7cf407f458eee32a', innerHTML: UserCancel })), h("div", { key: '2be07d40cd1b2082e08f391d43f6fb292e707c51', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'ab4702331a6b59f974794e1c6f95505541273db7', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '92615b95a6f669e4925a17b6a11ef9146d182d62', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'd99cd97d0baf75c75fc8e2ba6fd403109295658f', class: "s-toggle" }, h("input", { key: '52997c851e7ffff021d267d9cc839d19a1b940b9', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'f2418d8595800b8e2af231aab82714137bad4e5c', class: "s-toggle-switcher" }))))), h("div", { key: 'ca9641927d0c2e09345078a16e06445f1961d05d', class: "s-user-settings-section" }, h("salla-list-tile", { key: '55075a73c15fda0fb94291e41d528b066d2a808d' }, h("div", { key: '20e5894110f485f2ed75fdc6f0d54b647d1d4a48', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'c616fe981cd2a7ceb8090c44fe353b5504f5b0e1', innerHTML: Bullhorn })), h("div", { key: 'c1dc47211d07cc1ea25e2ce284f460c2eb6d4f7b', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '185e058888078b556a359acb6cc1ae080f01ad81', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'f54597f7f3c9126c57d34a5aba3ccd84752efbea', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '3386b76fc2d590b3a3734716429a8317a80fcc0b', class: "s-toggle" }, h("input", { key: 'd2d9ce3f8e3110715d84e9b407b878e341567fc6', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '267b474fb32cbabdf53ff8fd2fe69df87875819d', class: "s-toggle-switcher" }))))), h("div", { key: '80d86e89c87bceddddd461faeede4dfc8f4b3301', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'b95c175905cde9d4fae8487d1a85329db890873f' }, h("div", { key: '1e32b08bceb6bf299ea1e59545d7c539cb2ddce1', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'f1322819a6f07dff92f9956c0149b173f283407e', innerHTML: UserOff })), h("div", { key: '5d2ddaf6c03c8809f7e86b33fa421e73d048957e', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '0578e54cc49334ad081641b2ccd5b98d81e547ed', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: '30d6697be785def178352999d437f67798a03ed5', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'b0ecec87180902892081999d0c96da33cda58d26', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'b2015afb2f495f080d6757a57408ccd3e823b1ed', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: 'e9391b722fe6c23853664cd5558c289e7fff427a', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: 'fffaa51055598f66f479e90676649eac4a06148c', class: "s-user-settings-confirmation" }, h("div", { key: '2d7044a63ada034d44de97a875903967de4fa7f0', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: 'f79c44b10a20b187c4f5a849b7e40c3c71eb0194', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: 'b41c685894464f38f8a590482532a46851702ee7', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '3520e6c0bd7475a6ad3b004ec0a20c3993ebb45f', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
+    }
+    static get style() { return sallaUserSettingsCss; }
+}, [0, "salla-user-settings", {
+        "deactivateAccount": [32],
+        "promotionalMsgs": [32],
+        "hideMyName": [32],
+        "hideMyNameDesc": [32],
+        "deactivateDesc": [32],
+        "promotionalMsgsDesc": [32],
+        "sorryForLeavingText": [32],
+        "warningText": [32],
+        "keepAccount": [32],
+        "buttonLoading": [32],
+        "canHideName": [32],
+        "isHiddenName": [32],
+        "isNotifiable": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-user-settings", "salla-button", "salla-list-tile", "salla-loading", "salla-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-user-settings":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaUserSettings$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-list-tile":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaUserSettings = SallaUserSettings$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaUserSettings, defineCustomElement };

package/dist/components/salla-verify.js

@@ -1,4 +1,306 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as i,createEvent as e,h as l,Host as a}from"@stencil/core/internal/client";import{M as h}from"./mail.js";import{d as r}from"./salla-button2.js";import{d as o}from"./salla-loading2.js";import{d as n}from"./salla-modal2.js";const c=t(class extends i{constructor(s){super(),!1!==s&&this.__registerHost(),this.verified=e(this,"verified",7),this.translationLoaded=!1,this.display="modal",this.type="mobile",this.autoReload=!0,this.supportWebAuth=!0,this.resendAfter=30,this.isProfileVerify=!1,salla.lang.onLoaded((()=>{this.translationLoaded=!0,this.title=salla.lang.get("pages.profile.verify_title")+salla.lang.get("common.elements."+this.type),this.modal?.setTitle(this.title)})),"inline"!=this.display?(salla.event.on("profile::verification",(s=>{let t=Array.isArray(s)?s[0]:s;this.isProfileVerify=!0,this.open(t),this.title=salla.lang.get("pages.profile.verify_title")+salla.lang.get("common.elements."+t.type),this.modal?.setTitle(this.title)})),salla.event.on("modalClosed",(()=>{this.resendAfter=0,this.timer.innerHTML="30 : 00"}))):this.modal={open:()=>"",close:()=>"",setTitle:()=>""}}splitNumber(s){this.resetError();let t=s.data||s.target.value;t&&1!==t.length&&this.modifyNext(s.target,t)}modifyNext(s,t){s.value=t[0],t=t.substring(1),s.nextElementSibling&&t.length?this.modifyNext(s.nextElementSibling,t):s.nextElementSibling||0!==t.length?s.nextElementSibling&&0===t.length&&s.nextElementSibling.focus():s.focus()}checkAllInputs(){let s=!0;for(let t=0;t<this.otpInputs.length;t++)""===this.otpInputs[t].value&&(s=!1);return s}handleKeyUp(s){if(this.resetError(),["Alt","Shift","Control","AltGraph","Ctrl"].includes(s.key))return;let t=s.keyCode||s.charCode;s.target.value?(s.target.nextElementSibling?.focus(),s.target.nextElementSibling?.select()):[8,46].includes(t)&&(s.target.previousElementSibling?.focus(),s.target.previousElementSibling?.select()),s.target.value.length>1&&this.splitNumber(s)}handlePaste(s){this.resetError();let t=(salla.helpers.number(s.clipboardData.getData("text"))||"").replace(/[^0-9]/g,"");t=t.substring(0,this.otpInputs.length),this.otpInputs.forEach((s=>s.value="")),this.modifyNext(this.otpInputs[0],t)}handleInput(s){this.resetError(),salla.helpers.inputDigitsOnly(s.target),this.checkAllInputs()&&setTimeout((()=>{this.toggleOTPSubmit()}),100)}resetError(){this.hasError=!1,this.errorMessage=""}handleFocus(s){s.target!==this.firstOtpInput&&(""==this.firstOtpInput?.value&&this.firstOtpInput.focus(),""==s.target.previousElementSibling.value&&s.target.previousElementSibling.focus())}async getCode(){return this.code.value}async open(s){this.data=s,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.resetError(),"modal"==this.display&&this.modal?.setTitle(this.title),this.modal.open(),this.firstOtpInput?.addEventListener("input",(s=>this.splitNumber(s))),setTimeout((()=>this.otpInputs[0].focus()),100)}toggleOTPSubmit(){let s=[];if(this.otpInputs.forEach((t=>t.value&&s.push(t.value))),this.code.value=s.join(""),4===s.length)return this.btn.disable(),void this.btn.click();this.btn.enable()}reset(){this.otpInputs.forEach((s=>s.value="")),this.code.value="",this.otpInputs[0].focus()}resendTimer(){this.resendMessage.style.display="block",this.resend.style.display="none",this.resendAfter=30;let s=setInterval((()=>{this.resendAfter<=0?(clearInterval(s),this.resend.style.display="block",this.resendMessage.style.display="none"):(this.timer.innerHTML=(this.resendAfter>=10?this.resendAfter:"0"+this.resendAfter)+" : 00",this.resendAfter--)}),1e3)}resendCode(){return this.btn.stop().then((()=>this.btn.disable())).then((()=>{this.otpInputs.forEach((s=>s.value="")),this.otpInputs[0].focus()})).then((()=>salla.api.auth.resend(this.data))).finally((()=>this.resendTimer()))}submit(){if(this.code.value.length<4)return this.otpInputs[this.code.value.length].focus(),void salla.log("Trying to submit without 4 digits!");let s={code:this.code.value,...this.data};return this.btn.load().then((()=>this.btn.disable())).then((()=>this.isProfileVerify?salla.profile.verify(s):salla.auth.verify(s,this.supportWebAuth))).then((s=>this.verified.emit(s))).then((()=>this.btn.stop()&&this.btn.disable())).then((()=>this.modal.close())).then((()=>this.autoReload&&window.location.reload())).catch((s=>{this.hasError=!0,this.errorMessage=s.response?.data?.error?.message||salla.lang.get("common.errors.error_occurred"),s.response?salla.logger.error(s):console.log("Unexpected error",s),this.btn.stop()&&this.btn.enable()&&this.reset()}))}render(){return"inline"==this.display?l(a,null,this.myBody()):l("salla-modal",{width:"xs",class:"s-verify",ref:s=>this.modal=s,"modal-title":this.title},l("span",{slot:"icon",class:"s-verify-header-icon",innerHTML:"mobile"==this.type?'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>android-phone</title>\n<path d="M22.667 0h-13.333c-2.941 0-5.333 2.392-5.333 5.333v21.333c0 2.941 2.392 5.333 5.333 5.333h13.333c2.941 0 5.333-2.392 5.333-5.333v-21.333c0-2.941-2.392-5.333-5.333-5.333zM25.333 26.667c0 1.471-1.196 2.667-2.667 2.667h-13.333c-1.471 0-2.667-1.196-2.667-2.667v-2.667h18.667zM25.333 21.333h-18.667v-16c0-1.471 1.196-2.667 2.667-2.667h13.333c1.471 0 2.667 1.196 2.667 2.667zM13.333 28h5.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333z"></path>\n</svg>\n':h}),this.myBody())}myBody(){return l("div",{class:"s-verify-body",ref:s=>this.body=s},l("div",{class:"s-verify-message",innerHTML:salla.lang.get("pages.profile.verify_message")}),l("slot",{name:"mobile"}),l("slot",{name:"email"}),l("input",{type:"hidden",name:"code",maxlength:"4",required:!0,ref:s=>this.code=s}),l("div",{class:{"s-verify-codes":!0,"has-error":this.hasError},dir:"ltr"},[1,2,3,4].map((s=>l("input",{type:"number",autocomplete:"one-time-code",pattern:"[0-9]*",inputmode:"numeric",maxlength:"1",value:"",id:"otp-"+s,class:{"s-verify-input":!0,"s-has-error":this.hasError},onInput:s=>this.handleInput(s),onPaste:s=>this.handlePaste(s),onKeyUp:s=>this.handleKeyUp(s),onFocus:s=>this.handleFocus(s),required:!0})))),this.hasError&&this.errorMessage?l("span",{class:"s-verify-error-message"},this.errorMessage):"",l("div",{slot:"footer",class:"s-verify-footer"},l("salla-button",{class:"s-verify-submit","loader-position":"center",disabled:!0,onClick:()=>this.submit(),ref:s=>this.btn=s},salla.lang.get("pages.profile.verify")),l("p",{class:"s-verify-resend-message",ref:s=>this.resendMessage=s},salla.lang.get("blocks.header.resend_after"),l("b",{class:"s-verify-timer",ref:s=>this.timer=s})),l("a",{href:"#",class:"s-verify-resend",onClick:()=>this.resendCode(),ref:s=>this.resend=s},salla.lang.get("blocks.comments.submit"))),l("slot",{name:"after-footer"}))}get host(){return this}static get style(){return"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}"}},[260,"salla-verify",{display:[1],type:[1025],autoReload:[4,"auto-reload"],supportWebAuth:[4,"support-web-auth"],translationLoaded:[32],title:[32],resendAfter:[32],hasError:[32],errorMessage:[32],isProfileVerify:[32],getCode:[64],open:[64]}]);function m(){"undefined"!=typeof customElements&&["salla-verify","salla-button","salla-loading","salla-modal"].forEach((t=>{switch(t){case"salla-verify":customElements.get(s(t))||customElements.define(s(t),c);break;case"salla-button":customElements.get(s(t))||r();break;case"salla-loading":customElements.get(s(t))||o();break;case"salla-modal":customElements.get(s(t))||n()}}))}m();const d=c,u=m;export{d as SallaVerify,u as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { M as MailIcon } from './mail.js';
+import { d as defineCustomElement$4 } from './salla-button2.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.js';
+
+var AndroidPhoneIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>android-phone</title>
+<path d="M22.667 0h-13.333c-2.941 0-5.333 2.392-5.333 5.333v21.333c0 2.941 2.392 5.333 5.333 5.333h13.333c2.941 0 5.333-2.392 5.333-5.333v-21.333c0-2.941-2.392-5.333-5.333-5.333zM25.333 26.667c0 1.471-1.196 2.667-2.667 2.667h-13.333c-1.471 0-2.667-1.196-2.667-2.667v-2.667h18.667zM25.333 21.333h-18.667v-16c0-1.471 1.196-2.667 2.667-2.667h13.333c1.471 0 2.667 1.196 2.667 2.667zM13.333 28h5.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333z"></path>
+</svg>
+`;
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class SallaVerify extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.verified = createEvent(this, "verified", 7);
+        this.translationLoaded = false;
+        /**
+         * Should render component without modal
+         */
+        this.display = 'modal';
+        /**
+         * Verifying method
+         */
+        this.type = 'mobile';
+        /**
+         * should auto reloading the page after success verification
+         */
+        this.autoReload = true;
+        /**
+         * Once the api verify success, it will be login the customer in web pages
+         */
+        this.supportWebAuth = true;
+        this.resendAfter = 30;
+        /**
+         * to use: `salla.api.auth.verify` or `salla.profile.verify`
+         */
+        this.isProfileVerify = false;
+        salla.lang.onLoaded(() => {
+            this.translationLoaded = true;
+            this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);
+            this.modal?.setTitle(this.title);
+        });
+        if (this.display == 'inline') {
+            this.modal = { open: () => '', close: () => '', setTitle: () => '' };
+            return;
+        }
+        //todo:: change this way, now we fire the event from the backend, we should listen to salla.profile.event.onUpdated
+        salla.event.on('profile::verification', data => {
+            let payload = Array.isArray(data) ? data[0] : data;
+            this.isProfileVerify = true;
+            this.open(payload);
+            this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + payload.type);
+            this.modal?.setTitle(this.title);
+        });
+        salla.event.on('modalClosed', () => {
+            this.resendAfter = 0;
+            this.timer.innerHTML = '30 : 00';
+        });
+    }
+    splitNumber(e) {
+        this.resetError();
+        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);
+        }
+        else if (!el.nextElementSibling && data.length === 0) {
+            el.focus();
+        }
+        else if (el.nextElementSibling && data.length === 0) {
+            el.nextElementSibling.focus();
+        }
+    }
+    checkAllInputs() {
+        let allFilled = true;
+        for (let i = 0; i < this.otpInputs.length; i++) {
+            if (this.otpInputs[i].value === '') {
+                allFilled = false;
+            }
+        }
+        return allFilled;
+    }
+    handleKeyUp(ev) {
+        this.resetError();
+        if (['Alt', 'Shift', 'Control', 'AltGraph', 'Ctrl'].includes(ev.key)) {
+            return;
+        }
+        let key = ev.keyCode || ev.charCode;
+        if (ev.target.value) {
+            ev.target.nextElementSibling?.focus();
+            ev.target.nextElementSibling?.select();
+        }
+        else if ([8, 46].includes(key)) {
+            ev.target.previousElementSibling?.focus();
+            ev.target.previousElementSibling?.select();
+        }
+        // If the target is populated to quickly, value length can be > 1
+        if (ev.target.value.length > 1) {
+            this.splitNumber(ev);
+        }
+    }
+    handlePaste(ev) {
+        this.resetError();
+        const clipboardText = salla.helpers.number(ev.clipboardData.getData('text')) || '';
+        let text = clipboardText.replace(/[^0-9]/g, '');
+        text = text.substring(0, this.otpInputs.length);
+        this.otpInputs.forEach(input => input.value = '');
+        this.modifyNext(this.otpInputs[0], text);
+    }
+    handleInput(ev) {
+        this.resetError();
+        salla.helpers.inputDigitsOnly(ev.target);
+        // check if all otpInputs has values then send the request
+        if (this.checkAllInputs()) {
+            setTimeout(() => {
+                this.toggleOTPSubmit();
+            }, 100);
+        }
+    }
+    resetError() {
+        this.hasError = false;
+        this.errorMessage = '';
+    }
+    handleFocus(ev) {
+        // 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 (this.firstOtpInput?.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}
+     */
+    async getCode() {
+        return this.code.value;
+    }
+    /**
+     * Open verifying modal
+     * @param data
+     */
+    async open(data) {
+        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.resetError();
+        this.display == 'modal' && this.modal?.setTitle(this.title);
+        this.modal.open();
+        this.firstOtpInput?.addEventListener('input', e => this.splitNumber(e));
+        // focus the first input after opening the modal
+        setTimeout(() => this.otpInputs[0].focus(), 100);
+    }
+    toggleOTPSubmit() {
+        let otp = [];
+        this.otpInputs.forEach(input => input.value && otp.push(input.value));
+        this.code.value = otp.join('');
+        if (otp.length === 4) {
+            this.btn.disable();
+            this.btn.click();
+            return;
+        }
+        this.btn.enable();
+    }
+    reset() {
+        this.otpInputs.forEach((input) => input.value = '');
+        this.code.value = '';
+        this.otpInputs[0].focus();
+    }
+    resendTimer() {
+        this.resendMessage.style.display = 'block';
+        this.resend.style.display = 'none';
+        this.resendAfter = 30;
+        let timerId = setInterval(() => {
+            if (this.resendAfter <= 0) {
+                clearInterval(timerId);
+                this.resend.style.display = 'block';
+                this.resendMessage.style.display = 'none';
+            }
+            else {
+                this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;
+                this.resendAfter--;
+            }
+        }, 1000);
+    }
+    resendCode() {
+        return this.btn.stop()
+            .then(() => this.btn.disable())
+            .then(() => {
+            this.otpInputs.forEach(input => input.value = '');
+            this.otpInputs[0].focus();
+        })
+            .then(() => salla.api.auth.resend(this.data))
+            .finally(() => this.resendTimer());
+    }
+    submit() {
+        //if code not 4 digits, focus on the after filled input,
+        if (this.code.value.length < 4) {
+            this.otpInputs[this.code.value.length].focus();
+            salla.log('Trying to submit without 4 digits!');
+            return;
+        }
+        let data = { code: this.code.value, ...this.data };
+        return this.btn.load()
+            .then(() => this.btn.disable())
+            .then(() => this.isProfileVerify ? salla.profile.verify(data) : salla.auth.verify(data, this.supportWebAuth))
+            .then(response => this.verified.emit(response))
+            .then(() => this.btn.stop() && this.btn.disable())
+            .then(() => this.modal.close())
+            .then(() => this.autoReload && window.location.reload())
+            .catch((error) => {
+            this.hasError = true;
+            this.errorMessage = error.response?.data?.error?.message || salla.lang.get('common.errors.error_occurred');
+            if (!error.response) {
+                console.log('Unexpected error', error);
+            }
+            else {
+                salla.logger.error(error);
+            }
+            this.btn.stop() && this.btn.enable() && this.reset();
+        });
+    }
+    render() {
+        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 : MailIcon }), this.myBody());
+    }
+    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("slot", { name: "mobile" }), h("slot", { name: "email" }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: { "s-verify-codes": true, "has-error": this.hasError }, 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": true, "s-has-error": this.hasError }, onInput: e => this.handleInput(e), onPaste: e => this.handlePaste(e), onKeyUp: e => this.handleKeyUp(e), onFocus: e => this.handleFocus(e), required: true }))), this.hasError && this.errorMessage ? h("span", { class: "s-verify-error-message" }, this.errorMessage) : '', 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; }
+}, [4, "salla-verify", {
+        "display": [1],
+        "type": [1025],
+        "autoReload": [4, "auto-reload"],
+        "supportWebAuth": [4, "support-web-auth"],
+        "translationLoaded": [32],
+        "title": [32],
+        "resendAfter": [32],
+        "hasError": [32],
+        "errorMessage": [32],
+        "isProfileVerify": [32],
+        "getCode": [64],
+        "open": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-verify", "salla-button", "salla-loading", "salla-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-verify":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaVerify$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaVerify = SallaVerify$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaVerify, defineCustomElement };