@salla.sa/twilight-components 3.0.18 → 3.0.20

package/dist/components/salla-social-share2.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, Build, h } from '@stencil/core/internal/client';
 import { f as facebook, t as twitter } from './facebook.js';
-import { M as MailIcon } from './mail.js';
+import { e as email } from './mail.js';
 import { C as Cancel } from './cancel.js';
 import { d as defineCustomElement$1 } from './salla-button2.js';
 
@@ -76,7 +76,7 @@ const SallaSocialShare = /*@__PURE__*/ proxyCustomElement(class SallaSocialShare
                 name: Socials.FACEBOOK,
             },
             { icon: twitter, name: Socials.TWITTER },
-            { icon: MailIcon, name: Socials.EMAIL },
+            { icon: email, name: Socials.EMAIL },
             {
                 icon: copy_link,
                 name: Socials.COPY_LINK,
@@ -370,7 +370,7 @@ const SallaSocialShare = /*@__PURE__*/ proxyCustomElement(class SallaSocialShare
             case Socials.TWITTER:
                 return { icon: twitter, color: '#000000', label: salla.lang.get('common.social.twitter') };
             case Socials.EMAIL:
-                return { icon: MailIcon, color: '#2BA6FF', label: salla.lang.get('common.social.email') };
+                return { icon: email, color: '#2BA6FF', label: salla.lang.get('common.social.email') };
             default:
                 return { icon: copy_link, color: '#6b7280', label: platform };
         }
@@ -410,7 +410,7 @@ const SallaSocialShare = /*@__PURE__*/ proxyCustomElement(class SallaSocialShare
         })));
     }
     render() {
-        return (h("div", { key: '485904f160d3cca87190cd2840d87ae06a44bc67', class: "s-social-share-wrapper" }, h("slot", { key: '2849b4724cc91be120a7c86ab6ac0ec365c95e8e', name: "widget" }, h("salla-button", { key: '0dd4a988743d8a766de2c4a71e8d9ce7a87448fe', "aria-label": "Share", onClick: () => this.handleShareClick(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '460ee35d12b9b25e94d8c667c46199a3786174e1', innerHTML: this.opened ? Cancel : ShareAlt }))), this.mode === 'modal' ? this.renderModal() : this.renderPopupList()));
+        return (h("div", { key: '6947ccab470304eb0d483fd4b7ca9cc2554bbb71', class: "s-social-share-wrapper" }, h("slot", { key: 'b286eaf408c6b424f2a6b54b8ca7556b8af7af8c', name: "widget" }, h("salla-button", { key: '45e580eb0c93990ece828470a0d3eb8bb76303db', "aria-label": "Share", onClick: () => this.handleShareClick(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '770d272c4132f0106e70f0ef765417ba4ac0b9f8', innerHTML: this.opened ? Cancel : ShareAlt }))), this.mode === 'modal' ? this.renderModal() : this.renderPopupList()));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/salla-social.js

@@ -61,7 +61,7 @@ const SallaSocial$1 = /*@__PURE__*/ proxyCustomElement(class SallaSocial extends
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (h(Host, { key: '4875f05a11d5cd0dd8118a742217259b67e49cba' }, h("ul", { key: 'a2584f25353945cea66083154e2983a204a5f56d', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
+        return (h(Host, { key: '29f04bfaf306c249ce6da993bad695b009e2c9e9' }, h("ul", { key: 'ed987f835308d337e3e58accccc159d97d822fe8', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
                 .replace(/\{icon\}/g, this.iconsList[link.type])
                 .replace(/\{type\}/g, link.type)
                 .replace(/\{link\}/g, link.value.toString()) })))))));

package/dist/components/salla-tab-content2.js

@@ -38,7 +38,7 @@ const SallaTabContent = /*@__PURE__*/ proxyCustomElement(class SallaTabContent e
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (h("div", { key: '1bbc452fae5af3438acc31c767eea60d2f6ca040', class: classes }, h("slot", { key: '4e28919c1c1267a0fc600c1c12a4f2b4ac5f3845' })));
+        return (h("div", { key: 'e5da5a9d996bbb72e1603f88053d140138d08b38', class: classes }, h("slot", { key: '830ad13557951a06486f3d1155f7d2ec475fc243' })));
     }
     get host() { return this; }
     static get style() { return sallaTabContentCss; }

package/dist/components/salla-tab-header2.js

@@ -58,7 +58,7 @@ const SallaTabHeader = /*@__PURE__*/ proxyCustomElement(class SallaTabHeader ext
             's-tabs-active': this.isSelected,
         };
         return [
-            h("div", { key: 'a5e5d2c85bac8826816ffee72e6b66689be36573', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '7a2162f55a393c307a755bd18050090ed7e1e8f8' })),
+            h("div", { key: 'dbcd51f0c181991c1ea52ce4d2b8f364c4f77832', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '382fc1cb4bece683fcbc67db46f51f5b0900e328' })),
         ];
     }
     static get style() { return sallaTabHeaderCss; }

package/dist/components/salla-tabs2.js

@@ -60,7 +60,7 @@ const SallaTabs = /*@__PURE__*/ proxyCustomElement(class SallaTabs extends HTMLE
     render() {
         const headerStyle = this.backgroundColor ? { 'background-color': this.backgroundColor } : {};
         return [
-            h("div", { key: '7a00d7d7f42f332921f9cbb0eafec15cd4068a02', class: "s-tabs" }, h("div", { key: 'ba7ba485972d98409839a0edeb5515ee4e1a6d40', class: "s-tabs-header", style: headerStyle }, h("slot", { key: '4acaf275bfa3192108e9852a2918f09c1333e1d4', name: "header" })), h("div", { key: '3108d4e627049cdbad2e6755b01a8f454f541cbe', class: "s-tabs-content-wrapper" }, h("slot", { key: '433301db2d569304b3548216aade05135a1798d5', name: "content" })))
+            h("div", { key: 'e9e0030c417a98d19fdcf04ab290e6c77743fa68', class: "s-tabs" }, h("div", { key: 'b79d94a3744ba6d6b5c6e2948a2be057f9d5555c', class: "s-tabs-header", style: headerStyle }, h("slot", { key: '1136f96eeb12125185685a336be660eec5591daa', name: "header" })), h("div", { key: 'ac3ea577952031a2f366172ab27bc08c19f706f4', class: "s-tabs-content-wrapper" }, h("slot", { key: '48486dad9ae07f6a0dacab3c70c9c3df4eb66dcd', name: "content" })))
         ];
     }
     get host() { return this; }

package/dist/components/salla-tel-input2.js

@@ -149,7 +149,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
         }
     }
     render() {
-        return (h(Host, { key: '7616b0d80100d5032a8fc0c8c57880463764277e', class: "s-tel-input" }, h("input", { key: '321cf9386c2fa477f7f8286330e95003e114cfa2', type: "tel", disabled: this.disabled, 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", { key: '8166effadc8d574feb279fcb23fd779678bbbc8a', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '9fecbe3307f3da9524424a7db4ea1d6e65adabaf', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: '1ac7260480017f583ad9a85e3184e91aed10c44f', class: "s-tel-input" }, h("input", { key: 'b67e55b6cc4154d4743dee20be5d9fb5b000e698', type: "tel", disabled: this.disabled, 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", { key: '2533925768fe0265fbea2552540734d5cac0b9aa', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '0bb28963824dbc6e12ececc76f9e756e1a0e150e', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
         this.initPromise = this.initTelInput();

package/dist/components/salla-thank-you-header.js

@@ -56,7 +56,7 @@ const SallaThankYouHeader$1 = /*@__PURE__*/ proxyCustomElement(class SallaThankY
     }
     render() {
         const date = this.dateLabel();
-        return h("header", { key: 'd2d1914e2380a41b92c7d1ed0be4474535f347d4', class: "s-thank-you-header-wrapper" }, h("div", { key: 'a55c95fabb88c28027b4cdc8fec3b3689229f81c', class: "s-thank-you-header-intro" }, h("span", { key: '68a5faab8488ff85cccdf74654be4c9a2c140399', class: "s-thank-you-header-success" }, h("span", { key: '428d70eb21c90fe3db56e59141da3a7c581a8e94', class: "s-thank-you-header-success-icon", "aria-hidden": "true", innerHTML: SuccessIcon }), h("span", { key: '5532f94ab170683945d88664c66d42f6cb75c68f', class: "s-thank-you-header-store" }, this.storeLogo ? h("img", { src: this.storeLogo, alt: this.storeName || '' }) : h("span", { "aria-hidden": "true", innerHTML: StoreIcon }))), h("div", { key: '262f9756d2323be508c48bff389ebb8f840fc35b', class: "s-thank-you-header-copy" }, h("h1", { key: '6f4cfc3918a346d561ab449314196bfb3a85bd20', "data-testid": "store-thankyou-header-show-title", class: "s-thank-you-header-title" }, this.heading), h("p", { key: '177f9fed6204bf568f6745311032521606eeafcf', class: "s-thank-you-header-subtitle" }, this.subtitle || salla.lang.get('pages.thank_you.order_received')))), h("hr", { key: '864eedb2137299b4c73256cfd8f0cc5a848e1998', class: "s-thank-you-header-divider" }), h("div", { key: 'd3e74fd5b47f6559d350f7a673c7cd0fdf1f4e76', class: "s-thank-you-header-meta" }, this.referenceId ? h("button", { type: "button", class: "s-thank-you-header-reference", "data-testid": "store-thankyou-header-copy-reference", "aria-label": `${salla.lang.get('common.elements.copy')} ${this.referenceId}`, onClick: () => this.copyReference() }, h("span", { "aria-hidden": "true", innerHTML: OrderIcon }), h("span", { dir: "ltr" }, "#", this.referenceId), h("span", { "aria-hidden": "true", innerHTML: CopyIcon })) : null, date ? h("span", { class: "s-thank-you-header-date" }, h("span", { "aria-hidden": "true", innerHTML: TimeIcon }), h("time", { dateTime: this.createdAt }, date)) : null), h("slot", { key: '086631b68ccd291cc3b188d4193aa3a782509edf' }));
+        return h("header", { key: '059ca864ef1b2688f3919e0d1afe312a6a26304b', class: "s-thank-you-header-wrapper" }, h("div", { key: '7db61c7e59b0c648a863c8f273733a351d7ae7f6', class: "s-thank-you-header-intro" }, h("span", { key: 'fd6898fd919eb23123f0922504cd7fa27fd6d7cf', class: "s-thank-you-header-success" }, h("span", { key: 'f3e543dd2cdb8fd6ec766decf8733053f64a85b4', class: "s-thank-you-header-success-icon", "aria-hidden": "true", innerHTML: SuccessIcon }), h("span", { key: 'fe155c56cfa5b8c96f9ec0ab0212d0ecaa9b78e8', class: "s-thank-you-header-store" }, this.storeLogo ? h("img", { src: this.storeLogo, alt: this.storeName || '' }) : h("span", { "aria-hidden": "true", innerHTML: StoreIcon }))), h("div", { key: '98df6b364ae471bc6d293b2bc2ef550f93ab1ded', class: "s-thank-you-header-copy" }, h("h1", { key: 'e0150e20cf220cb60612745341e0a243f5155f6a', "data-testid": "store-thankyou-header-show-title", class: "s-thank-you-header-title" }, this.heading), h("p", { key: 'd4b592a4517434d7d21c24884bebc7a5d99128ab', class: "s-thank-you-header-subtitle" }, this.subtitle || salla.lang.get('pages.thank_you.order_received')))), h("hr", { key: '98dcc158ecd2af0c6081959299164e4a004255ca', class: "s-thank-you-header-divider" }), h("div", { key: '1b40af524a983485f718aab6f52a13da56c11f69', class: "s-thank-you-header-meta" }, this.referenceId ? h("button", { type: "button", class: "s-thank-you-header-reference", "data-testid": "store-thankyou-header-copy-reference", "aria-label": `${salla.lang.get('common.elements.copy')} ${this.referenceId}`, onClick: () => this.copyReference() }, h("span", { "aria-hidden": "true", innerHTML: OrderIcon }), h("span", { dir: "ltr" }, "#", this.referenceId), h("span", { "aria-hidden": "true", innerHTML: CopyIcon })) : null, date ? h("span", { class: "s-thank-you-header-date" }, h("span", { "aria-hidden": "true", innerHTML: TimeIcon }), h("time", { dateTime: this.createdAt }, date)) : null), h("slot", { key: '1ec96de5ef0c5c44dc80742277ad6b4ee83354da' }));
     }
     static get style() { return sallaThankYouHeaderCss; }
 }, [4, "salla-thank-you-header", {

package/dist/components/salla-thank-you-page.js

@@ -11,7 +11,7 @@ const SallaThankYouPage$1 = /*@__PURE__*/ proxyCustomElement(class SallaThankYou
         this.__registerHost();
     }
     render() {
-        return h(Host, { key: '97dd9a2815a884b200f90d59c6216c6c7c93074c', class: "s-thank-you-page-wrapper" }, h("slot", { key: '2decea79a3b1b92f2540479ed5b0584c6704a029', name: "main" }), h("slot", { key: '25c0d3f065a024467b15b0e82138c7ca791741f1' }));
+        return h(Host, { key: '605e01d9b7299b700f24339f20995bd83e8add0c', class: "s-thank-you-page-wrapper" }, h("slot", { key: 'e1c24571fe73dda85f4f8bd8f2aa206a40bf7aa2', name: "main" }), h("slot", { key: 'd198960d04ce37f98476d9538da54d377edb84ae' }));
     }
     static get style() { return sallaThankYouPageCss; }
 }, [4, "salla-thank-you-page"]);

package/dist/components/salla-tooltip2.js

@@ -32,7 +32,7 @@ const SallaTooltip = /*@__PURE__*/ proxyCustomElement(class SallaTooltip extends
     }
     render() {
         const validTheme = ['default', 'dark'].includes(this.theme) ? this.theme : 'default';
-        return (h("div", { key: 'e88949e9f1d97170bc61a0ab37e221863b9bc79f', class: "s-tooltip-container" }, h("div", { key: '1e65ce349cab58449512ba02ab11028de7fd6aa4', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? h("span", null, this.text) : h("slot", null))));
+        return (h("div", { key: 'e78c348a4fdc3eae7b719a8c8f1f115d521a1965', class: "s-tooltip-container" }, h("div", { key: 'dc2137a53c1f5b2075d8a96d13c16ad216ca9b37', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? h("span", null, this.text) : h("slot", null))));
     }
     get el() { return this; }
     static get style() { return sallaTooltipCss; }

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

@@ -586,7 +586,7 @@ const SallaUserSettings$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserSett
         return (h("salla-button", { fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeleteModal() }, this.capitalizeText(this.deleteAccount)));
     }
     render() {
-        return (h(Host, { key: '235e0a344565e48724ade2bae57ba084273f120c', class: "s-user-settings-wrapper" }, this.canHideName && (h("div", { key: '16fa72a01cdf69c82f1389164dd64ef814b7212f', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'b753024966a6df5f4b27e9cbb70591055f7fcead' }, h("div", { key: '1af0bf18b22d5df386d88eea7249f92e5edadfdf', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '29eab8ad46744c402bc9c97b5a1f2864c242ae44', innerHTML: UserCancel })), h("div", { key: '3978c127bc9195f1384c4867d1820b2868c7e1ed', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'a8cddacc12bb9ec6c078c664dc4de44b1cf071af', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '58ced777acef0cea96d9d2c921ca15aae50d5407', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: '17827e38c54b85f0cdd143b13e20149224959447', class: "s-toggle" }, h("input", { key: '227128054c57e7b7efb66f9ddf6773f3bdace0ae', class: "s-toggle-input", checked: this.isHiddenName, onChange: e => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '9c14439a42c1548ca7fd4c3bed9df5e19667e286', class: "s-toggle-switcher" })))))), h("div", { key: '1c5784612dff9eb994852379b104d52f9293b4a4', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'f55f9302936d52c19ae0732f535b27347487abf7' }, h("div", { key: 'c27db366d4529650203b90d7992fd3866d396a4a', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '7d523f03f771d0a7e6fe32ef8879e7e6c27702ec', innerHTML: Bullhorn })), h("div", { key: '0a62c6326d28479c6a1d9c15f71e0a70dc2b4b75', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '3bb66045d5fede7f9c366be329c5d0370b662124', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '31dab543f6bc02e5f111169e2d2cec5cbc2ba6a6', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: 'cacfe5a74684feab1f73a9cc31c805e123816a23', class: "s-toggle" }, h("input", { key: 'bc1939012a98db1f038aab5920aaca174f02a2c0', class: "s-toggle-input", checked: this.isNotifiable, onChange: e => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'bce649ee7e21658be48d9a8bf8c5331298bf0717', class: "s-toggle-switcher" }))))), this.isDeleteAccountEnabled ? (h("div", { class: "s-user-settings-section s-user-settings-section-delete-user" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, this.renderUserDeleteIcon()), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deleteAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.isDeletePending ? this.deleteAccountPending : this.deleteAccountDesc)), h("div", { slot: "action", class: "s-user-settings-section-action" }, this.renderDeleteSectionAction())))) : (h("div", { class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, h("span", { innerHTML: UserOff })), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { slot: "action", class: "s-user-settings-section-action" }, h("salla-button", { fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount)))))), this.isDeleteAccountEnabled ? (h("salla-modal", { id: "salla-user-settings-delete-modal", width: "xs", centered: true, showBack: this.currentStep === 'otp', isClosable: this.currentStep !== 'success', iconStyle: this.currentStep === 'success' ? 'success' : undefined, onModalVisibilityChanged: e => this.handleModalVisibilityChanged(e), onModalBack: () => this.goBackFromOtp(), ref: modal => (this.confirmationModal = modal) }, this.currentStep !== 'success' ? (h("span", { slot: "icon", class: "s-user-settings-delete-icon" }, this.renderUserDeleteIcon())) : null, h("div", { key: this.currentStep, class: "s-user-settings-delete-step" }, this.renderDeleteStep()))) : (h("salla-modal", { width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => (this.confirmationModal = modal) }, h("span", { slot: "icon", class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { class: "s-user-settings-confirmation" }, h("div", { class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { class: "s-user-settings-confirmation-actions" }, h("salla-button", { width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { fill: "outline", loading: this.buttonLoading, width: "wide", onClick: () => this.confirmDeactivateAccount() }, this.capitalizeText(this.deactivateAccount))))))));
+        return (h(Host, { key: 'a5329b99eb9ae0d351d3732a8bd73cb5a0e3bf0e', class: "s-user-settings-wrapper" }, this.canHideName && (h("div", { key: 'fa451ecdfcc4797eb5a844a6b6ba57456887bc65', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'efe0e7fbf16ce4c23f9fefd7d96e77b86c17407d' }, h("div", { key: '6749a02ca8b2fe06bf604aa7e6343c2f6a933db9', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '3fac5e8f843a6d7a82355e742801701daa839b37', innerHTML: UserCancel })), h("div", { key: '9902df824f1c959e5e78448019bb0019139181e3', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'a2d6b461b818fb5c88831fc3515c62fbb27a3604', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '14dfc10aeb8f3ae132bd6a884f6f0909b3ee0071', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: 'd224bf45f7b946f37460478e49019d38fbe5f4f9', class: "s-toggle" }, h("input", { key: 'f6b97efb600c39f0e66eaac8538a7e076cba851e', class: "s-toggle-input", checked: this.isHiddenName, onChange: e => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'e6c00fa21b86e168a4a6c236cc20035ca3310c7e', class: "s-toggle-switcher" })))))), h("div", { key: '5452089f49aa35bdf5ee2f8cd39dbfc7bf5b83d3', class: "s-user-settings-section" }, h("salla-list-tile", { key: '95a23fe5cbb2e5481137bdad8a424430922110af' }, h("div", { key: 'ae6f7395a3beb1a46339acb225fbf8ae86086f1a', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '4f09f13877d1c9c405163bc7035196ce4e7ab574', innerHTML: Bullhorn })), h("div", { key: '77e038e9ede04ebceb33dc5732552bfb872ff07f', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: 'c1332d656e6c898b09d63b8985ab2b32f92029f1', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '236c6622e61210bdcad47582e4626fbf7a4f77d3', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: 'be37b0ea5465911064146779025fd5e353a6f556', class: "s-toggle" }, h("input", { key: 'fea0f0478c959bc94f91bc302618eb2e30047927', class: "s-toggle-input", checked: this.isNotifiable, onChange: e => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '1420206f5679e67ce1fd908ae8e9179eaae1dc77', class: "s-toggle-switcher" }))))), this.isDeleteAccountEnabled ? (h("div", { class: "s-user-settings-section s-user-settings-section-delete-user" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, this.renderUserDeleteIcon()), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deleteAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.isDeletePending ? this.deleteAccountPending : this.deleteAccountDesc)), h("div", { slot: "action", class: "s-user-settings-section-action" }, this.renderDeleteSectionAction())))) : (h("div", { class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, h("span", { innerHTML: UserOff })), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { slot: "action", class: "s-user-settings-section-action" }, h("salla-button", { fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount)))))), this.isDeleteAccountEnabled ? (h("salla-modal", { id: "salla-user-settings-delete-modal", width: "xs", centered: true, showBack: this.currentStep === 'otp', isClosable: this.currentStep !== 'success', iconStyle: this.currentStep === 'success' ? 'success' : undefined, onModalVisibilityChanged: e => this.handleModalVisibilityChanged(e), onModalBack: () => this.goBackFromOtp(), ref: modal => (this.confirmationModal = modal) }, this.currentStep !== 'success' ? (h("span", { slot: "icon", class: "s-user-settings-delete-icon" }, this.renderUserDeleteIcon())) : null, h("div", { key: this.currentStep, class: "s-user-settings-delete-step" }, this.renderDeleteStep()))) : (h("salla-modal", { width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => (this.confirmationModal = modal) }, h("span", { slot: "icon", class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { class: "s-user-settings-confirmation" }, h("div", { class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { class: "s-user-settings-confirmation-actions" }, h("salla-button", { width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { fill: "outline", loading: this.buttonLoading, width: "wide", onClick: () => this.confirmDeactivateAccount() }, this.capitalizeText(this.deactivateAccount))))))));
     }
     static get style() { return sallaUserSettingsCss; }
 }, [0, "salla-user-settings", {

package/dist/components/salla-verify.js

@@ -1,327 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, 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 = "/*!twlt*/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}.visible{visibility:visible}.block{display:block}.inline{display:inline}.hidden{display:none}.s-has-error{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}.s-has-error:focus{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.btn{display:inline-flex;flex:1 1 0%;align-items:center;justify-content:center;white-space:nowrap;border-radius:0.375rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:0.625rem;padding-top:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.btn:hover{opacity:0.8}.has-error .s-form-label{color:#ff443a}.has-error .s-form-control,.has-error .s-tel-input-control,.has-error .s-datetime-picker-input{border-color:#ff443a;color:#ff443a}.s-has-error{--tw-border-opacity:1 !important;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;--tw-text-opacity:1 !important;color:rgb(239 68 68 / var(--tw-text-opacity, 1)) !important}.s-verify-message{text-align:center;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-verify-label{margin-bottom:1rem;display:block;text-align:center;font-size:0.875rem;line-height:1.25rem}.s-verify-codes{margin-left:-0.25rem;margin-right:-0.25rem;margin-bottom:1.25rem;display:flex;justify-content:space-between}.s-verify-codes.has-error{margin-bottom:0px}.s-verify-input{margin-left:0.25rem;margin-right:0.25rem;height:2.5rem;width:100%;border-radius:var(--s-radius, 0.25rem);border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding-left:0.5rem;padding-right:0.5rem;text-align:center;font-size:1.125rem;line-height:1.75rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-verify-input:focus{border-color:var(--color-primary)}.s-verify-input:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.s-verify-footer{text-align:center}.s-verify-submit{margin-bottom:1.25rem;width:100%}.s-verify-header-icon{display:inline-flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}@media (min-width: 640px){.s-verify-header-icon{margin-left:auto;margin-right:auto;margin-bottom:1rem;height:5rem;width:5rem}}.s-verify-header-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0.5rem}@media (min-width: 640px){.s-verify-header-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0px}}.s-verify-header-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0.5rem}@media (min-width: 640px){.s-verify-header-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0px}}.s-verify-resend-message{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-verify-error-message{margin-bottom:1.25rem;display:block;height:1.75rem;padding-top:0.75rem;text-align:center;font-size:0.75rem;line-height:1rem;--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}.s-verify-error-message:focus{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.s-verify-error-message{--tw-border-opacity:1 !important;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;--tw-text-opacity:1 !important;color:rgb(239 68 68 / var(--tw-text-opacity, 1)) !important}.s-verify-timer{margin-left:0.25rem;margin-right:0.25rem;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.s-verify-resend{text-align:center;font-size:0.875rem;line-height:1.25rem;color:var(--color-primary)}.s-verify-back{position:absolute;left:10px;top:10px;display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));font-size:1.125rem;line-height:1.75rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-verify-back:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.s-verify-back:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:unset;right:10px}.s-verify-back svg{height:18px;width:18px}[dir='ltr'] .s-verify-back{transform:scale(-1)}";
-
-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;
-        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
-        this.profileVerificationListener = data => {
-            let payload = Array.isArray(data) ? data[0] : data;
-            // Account-deletion OTP is owned by <salla-user-settings>; opening this modal
-            // (and auto-reloading) would break that flow. Prefer payload.request_type when
-            // present; fall back to the delete modal being open.
-            const isDeleteRequest = payload?.request_type === 'delete_account'
-                || document.getElementById('salla-user-settings-delete-modal')?.hasAttribute('visible');
-            if (isDeleteRequest) {
-                return;
-            }
-            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);
-        };
-        this.modalClosedListener = () => {
-            this.resendAfter = 0;
-            this.timer.innerHTML = '30 : 00';
-        };
-    }
-    connectedCallback() {
-        if (this.profileVerificationListener) {
-            salla.event.on('profile::verification', this.profileVerificationListener);
-            salla.event.on('modalClosed', this.modalClosedListener);
-        }
-        this.langUnsubscribe = salla.lang.subscribe(() => {
-            this.translationLoaded = true;
-            this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);
-            this.modal?.setTitle(this.title);
-            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
-            forceUpdate(this);
-        });
-    }
-    disconnectedCallback() {
-        if (this.profileVerificationListener) {
-            salla.event.off('profile::verification', this.profileVerificationListener);
-            salla.event.off('modalClosed', this.modalClosedListener);
-        }
-        this.langUnsubscribe?.();
-    }
-    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();
+import { S as SallaVerify$1, d as defineCustomElement$1 } from './salla-verify2.js';
 
 const SallaVerify = SallaVerify$1;
 const defineCustomElement = defineCustomElement$1;