@salla.sa/twilight-components 2.14.557 → 2.14.558

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

@@ -3,17 +3,39 @@
  */
 import { h } from "@stencil/core";
 import Search from "../../assets/svg/search.svg";
+import Cancel from "../../assets/svg/cancel.svg";
+import KeyBoardArrowLeftIcon from "../../assets/svg/keyboard_arrow_left.svg";
+import KeyBoardArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
 import Helper from "../../Helpers/Helper";
+import { DEFAULT_LABELS, addToSearchHistory, getDefaultProductSlot, getSearchResultsUrl, isNewSearchFeatureEnabled, loadLabels, loadSearchHistory, registerTranslationDefaults, saveSearchHistory, } from "./utils";
 /**
  * @slot product - Replaces products card in the results, has replaceable props `{name}`, `{price}`, `{regular_price}`, `{image}`.
  */
 export class SallaSearch {
     constructor() {
+        this.newSearchEnabled = isNewSearchFeatureEnabled();
         this.inputValue = '';
+        this.hasTrackedFocus = false;
         this.translationLoaded = false;
+        this.labels = DEFAULT_LABELS;
         this.loading = false;
         this.typing = false;
         this.debounce = setTimeout(() => '', 1000);
+        this.search_term = '';
+        this.hasInputValue = false;
+        this.searchHistory = loadSearchHistory();
+        /**
+         * Most-searched categories to surface before the customer types a query.
+         * Not wired to a live endpoint yet - stays empty (and hidden) until a future
+         * story populates it.
+         */
+        this.trendingCategories = [];
+        /**
+         * Most-searched terms, reused both as the pre-search "most searched" list and
+         * as the results-view "search suggestions" sidebar. Same not-wired-yet status
+         * as trendingCategories.
+         */
+        this.mostSearchedTerms = [];
         /**
          * Set the component to display as a placeholder (button) that will open the modal. Defaults to `false`
          */
@@ -38,37 +60,72 @@ export class SallaSearch {
          * Show submit action buttons at the end.
          */
         this.showAction = false;
+        this.tracking = {
+            searchFocus: () => {
+                if (this.hasTrackedFocus) {
+                    return;
+                }
+                this.hasTrackedFocus = true;
+                salla.event.emit('salla-search::input.focused');
+            },
+            productClick: (product, position) => {
+                salla.event.emit('salla-search::product.clicked', [{ product, position }]);
+            },
+            recommendationClick: (term, source) => {
+                salla.event.emit('salla-search::recommendation.clicked', { term, source });
+            },
+        };
         this.productSlot =
-            this.host.querySelector('[slot="product"]')?.innerHTML || this.getDefaultProductSlot();
+            this.host?.querySelector('[slot="product"]')?.innerHTML || getDefaultProductSlot();
         salla.event.on('search::open', () => this.open());
-        salla.lang.onLoaded(() => {
-            this.translationLoaded = true;
-        });
         salla.event.on('modalClosed', () => this.onModalClose());
     }
     async open() {
-        if (!this.inline) {
-            await this.modal.open().then(() => setTimeout(() => this.searchInput.focus(), 300));
+        if (this.newSearchEnabled || !this.inline) {
+            await this.modal?.open().then(() => setTimeout(() => this.searchInput?.focus(), 300));
         }
     }
     onModalClose() {
-        this.searchInput.value = '';
+        if (this.searchInput) {
+            this.searchInput.value = '';
+        }
         this.results = undefined;
+        this.hasInputValue = false;
         this.afterSearching();
-        this.container.classList.remove('s-search-no-results');
+        this.container?.classList.remove('s-search-no-results');
     }
     handleKeyDown(ev) {
         if (ev.key === 'Enter' && this.search_term?.length) {
-            window.location.href = salla.url.get('search?q=' + encodeURI(this.search_term));
+            window.location.href = getSearchResultsUrl(this.search_term);
         }
     }
-    getDefaultProductSlot() {
-        return ('<div class="s-search-product-image-container">' +
-            '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
-            '</div>' +
-            '<div class="s-search-product-details">' +
-            '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
-            '</div>');
+    clearSearch() {
+        if (this.searchInput) {
+            this.searchInput.value = '';
+        }
+        this.hasInputValue = false;
+        this.search_term = '';
+        this.searchInput?.focus();
+    }
+    removeFromSearchHistory(term) {
+        this.searchHistory = this.searchHistory.filter(existing => existing !== term);
+        saveSearchHistory(this.searchHistory);
+        this.afterSearching(!this.results);
+    }
+    applySuggestedTerm(term, source) {
+        this.tracking.recommendationClick(term, source);
+        if (this.searchInput) {
+            this.searchInput.value = term;
+        }
+        this.hasInputValue = true;
+        this.search_term = term;
+        this.searchInput?.focus();
+    }
+    async componentWillLoad() {
+        await salla.lang.onLoaded();
+        registerTranslationDefaults();
+        this.labels = loadLabels();
+        this.translationLoaded = true;
     }
     debounceSearch(event) {
         this.typing = true;
@@ -80,10 +137,13 @@ export class SallaSearch {
     }
     limitWordsAndSearch(event) {
         let value = event.target.value;
+        this.hasInputValue = value.length > 0;
         const words = value.trim().split(/\s+/);
         if (words.length > this.maxWords) {
             const truncatedInput = words.slice(0, this.maxWords).join(' ');
-            this.searchInput.value = truncatedInput;
+            if (this.searchInput) {
+                this.searchInput.value = truncatedInput;
+            }
         }
         this.debounceSearch(event);
     }
@@ -107,7 +167,7 @@ export class SallaSearch {
         }
     }
     search(val) {
-        this.noResults.style.display = 'none';
+        this.noResults && (this.noResults.style.display = 'none');
         //run loading spinner or stop it
         this.loading = true;
         salla.product
@@ -115,22 +175,29 @@ export class SallaSearch {
             .then(response => {
             this.results = response;
             salla.event.emit('Products Searched', val);
+            if (this.newSearchEnabled) {
+                this.searchHistory = addToSearchHistory(this.searchHistory, val);
+                saveSearchHistory(this.searchHistory);
+            }
         })
             .catch(err => (err !== 'Query is same as previous one!' ? (this.results = undefined) : null))
             .finally(() => this.afterSearching(/*isEmpty*/ false));
     }
     afterSearching(isEmpty = true) {
-        this.noResults.style.display = isEmpty || this.results?.data.length > 0 ? 'none' : 'block';
-        Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => this.results?.data.length);
+        if (this.noResults) {
+            this.noResults.style.display = isEmpty || !!this.results?.data?.length ? 'none' : 'block';
+        }
+        // The new search experience is always a fully-visible modal panel (no collapsed/expanded
+        // input trick needed), so this open/no-results cosmetic toggle only applies to the legacy UI.
+        if (!this.newSearchEnabled) {
+            Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => this.results?.data.length);
+        }
         this.loading = false;
         salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
-        this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
+        this.inputValue.length < 3 ? this.container?.classList.remove('s-search-no-results') : '';
     }
-    render() {
-        const searchContent = (h("div", { key: 'ca8dec5eb90cd0893a1a3364df34ba0ee4d60891', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, h("div", { key: '212f8180ecca220a8b89231311dec6cdf3ef0b06', class: "s-search-input-wrapper" }, h("span", { key: '51fb0f9a2e342afd35eb82b57f55471aa9e1519f', class: "s-search-icon-wrap" }, h("span", { key: 'e75117068c51c6d200e8e20fa0f00ca02ed0c61d', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: '442b1704b75a33e8c9e02da8200151a1d8e8db72', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => (this.searchInput = input), style: {
-                height: this.height + 'px',
-                borderRadius: this.oval ? this.height / 2 + 'px' : '',
-            } }), this.showAction ? (h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search }))) : null), h("div", { key: 'f3b40ce4ec24678f6d8421f3da8ac9e1bd631c3a', class: "s-search-results" }, this.results?.data.map(product => (h("a", { href: product.url + '?from=search-bar', class: {
+    renderLegacyResults() {
+        return (h("div", { class: "s-search-results" }, this.results?.data.map(product => (h("a", { href: product.url + '?from=search-bar', class: {
                 's-search-product': true,
                 's-search-product-not-available': !product.is_available,
             }, innerHTML: this.productSlot
@@ -139,12 +206,83 @@ export class SallaSearch {
                 .replace(/\{regular_price\}/g, product.is_on_sale && product.regular_price
                 ? salla.money(product.regular_price)
                 : '')
-                .replace(/\{image\}/g, product.image.url) }))), h("p", { key: 'fdbb21061c599a59c6d828eec80e8d591a708cca', ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options')))));
-        const modalContent = (h("salla-modal", { key: 'ca90aea3fb92d1ba7d8270c26e2ecd82d5018784', position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
-        const placeholderContent = (h("div", { key: '73333ce51cabadc4963a9fe9d1372bb7d63925c8', class: "s-search-placeholder-wrapper s-search-inline" }, h("div", { key: '77a66e9bba504557160c8c50d91f1216cc68f253', class: "s-search-input-wrapper" }, h("span", { key: '18fb5ce6e3e72874e76dd1ef2c6db8718a68f778', class: "s-search-icon-wrap" }, h("span", { key: '63b9e9af1c51647df734cc4d5cf7a825b922ce38', class: "s-search-icon", innerHTML: Search })), h("button", { key: 'b70169ed2d80ec2ad6b09952ad104824610212df', type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
+                .replace(/\{image\}/g, product.image.url) }))), h("p", { ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, this.labels.noOptions)));
+    }
+    renderCategoriesSection(title) {
+        if (!this.trendingCategories.length) {
+            return null;
+        }
+        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, title), h("div", { class: "s-search-idle-categories-list" }, this.trendingCategories.map(category => (h("a", { class: "s-search-idle-category-chip", href: category.url, onClick: () => this.tracking.recommendationClick(category.name, 'category') }, category.name, category.count ? (h("span", { class: "s-search-idle-category-count" }, category.count)) : null))))));
+    }
+    renderTermsSection(title, source) {
+        if (!this.mostSearchedTerms.length) {
+            return null;
+        }
+        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, title), h("ul", { class: "s-search-most-searched-list" }, this.mostSearchedTerms.map(term => (h("li", null, h("button", { type: "button", class: "s-search-most-searched-item", onClick: () => this.applySuggestedTerm(term, source) }, h("span", { class: "s-search-most-searched-icon", innerHTML: Search }), term)))))));
+    }
+    renderSearchHistorySection() {
+        // Only in the empty/zero state - hidden as soon as there's input text or results.
+        if (!this.searchHistory.length || this.hasInputValue) {
+            return null;
+        }
+        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, this.labels.searchHistory), h("div", { class: "s-search-history-list" }, this.searchHistory.map(term => (h("span", { class: "s-search-history-chip" }, h("button", { type: "button", class: "s-search-history-chip-term", onClick: () => this.applySuggestedTerm(term, 'history') }, term), h("button", { type: "button", class: "s-search-history-chip-remove", "aria-label": this.labels.remove, onClick: () => this.removeFromSearchHistory(term) }, h("span", { innerHTML: Cancel }))))))));
+    }
+    renderIdlePanel() {
+        // Always renders - even with nothing in history/trending yet - so the panel opens as a
+        // visible (if empty) container rather than disappearing until there's something to show.
+        return (h("div", { class: "s-search-idle-panel" }, this.renderSearchHistorySection(), this.renderCategoriesSection(this.labels.trendingCategories), this.renderTermsSection(this.labels.mostSearched, 'trending')));
+    }
+    renderResultsBody() {
+        // Search history never shows here (only in the empty/zero state), so the sidebar's
+        // visibility depends only on categories/terms - not the full idle-panel content check.
+        const hasSidebarContent = this.trendingCategories.length > 0 || this.mostSearchedTerms.length > 0;
+        return (h("div", { class: "s-search-results-body" }, hasSidebarContent ? (h("div", { class: "s-search-sidebar" }, this.renderTermsSection(this.labels.searchSuggestions, 'suggestion'), this.renderCategoriesSection(this.labels.categories))) : null, h("div", { class: "s-search-results-grid-wrap" }, h("p", { class: "s-search-idle-section-title" }, this.labels.searchResults), h("div", { class: "s-search-results-grid" }, this.results?.data.map((product, position) => (h("div", { class: "s-search-grid-item", onClick: () => this.tracking.productClick(product, position) }, h("salla-product-card", { product: { ...product, url: product.url + '?from=search-bar' }, horizontal: true, compact: true, "show-quantity": !product.is_available, "show-out-of-stock-beside-price": true, hideAddBtn: true })))), this.results?.data.length === 0 ? (h("p", { class: "s-search-no-results-placeholder" }, this.labels.noOptions)) : null))));
+    }
+    renderViewAllLink() {
+        if (!this.results?.data.length) {
+            return null;
+        }
+        return (h("a", { class: "s-search-view-all", href: getSearchResultsUrl(this.search_term) }, this.labels.searchViewAllTemplate.replace(':word', this.search_term), h("span", { class: "s-search-view-all-icon", innerHTML: salla.config.get('theme.is_rtl', true) ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon })));
+    }
+    renderDropdown() {
+        if (!this.newSearchEnabled) {
+            return this.renderLegacyResults();
+        }
+        return this.results ? this.renderResultsBody() : this.renderIdlePanel();
+    }
+    renderInputWrapper() {
+        const inputWrapper = (h("div", { class: "s-search-input-wrapper" }, h("span", { class: "s-search-icon-wrap" }, h("span", { class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { type: "search", enterkeyhint: "search", autocomplete: "off", class: { 's-search-input': true, 's-search-input-clearable': this.newSearchEnabled }, placeholder: this.labels.searchPlaceholder, onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.newSearchEnabled && this.tracking.searchFocus(), ref: input => (this.searchInput = input), style: {
                 height: this.height + 'px',
                 borderRadius: this.oval ? this.height / 2 + 'px' : '',
-            } }, salla.lang.get('blocks.header.search_placeholder'))), modalContent));
+            } }), this.newSearchEnabled && this.hasInputValue ? (h("button", { type: "button", class: "s-search-clear-icon", "aria-label": this.labels.close, onClick: () => this.clearSearch() }, h("span", { innerHTML: Cancel }))) : null, this.showAction ? (h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search }))) : null));
+        if (!this.newSearchEnabled) {
+            return inputWrapper;
+        }
+        return (h("div", { class: "s-search-input-row" }, h("button", { type: "button", class: "s-search-back-btn", "aria-label": this.labels.back, onClick: () => this.modal?.close() }, h("span", { innerHTML: salla.config.get('theme.is_rtl', true)
+                ? KeyBoardArrowRightIcon
+                : KeyBoardArrowLeftIcon })), inputWrapper));
+    }
+    renderPlaceholderTrigger() {
+        return (h("div", { class: "s-search-input-wrapper" }, h("span", { class: "s-search-icon-wrap" }, h("span", { class: "s-search-icon", innerHTML: Search })), h("button", { type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
+                height: this.height + 'px',
+                borderRadius: this.oval ? this.height / 2 + 'px' : '',
+            } }, this.labels.searchPlaceholder)));
+    }
+    /**
+     * The new search UI is always a modal opened from a placeholder trigger (never inline,
+     * never a bare/self-triggering modal), with its own padded panel layout - the input and
+     * dropdown content share one bordered card instead of the legacy floating-dropdown look.
+     */
+    renderNewSearchExperience() {
+        return (h("div", { class: "s-search-placeholder-wrapper s-search-inline" }, this.renderPlaceholderTrigger(), h("salla-modal", { position: "top", class: "s-search-modal s-search-modal-new", "hide-close-button": true, ref: modal => (this.modal = modal) }, h("div", { class: "s-search-panel", ref: container => (this.container = container) }, this.renderInputWrapper(), this.renderDropdown(), this.renderViewAllLink()))));
+    }
+    render() {
+        if (this.newSearchEnabled) {
+            return this.renderNewSearchExperience();
+        }
+        const searchContent = (h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, this.renderInputWrapper(), this.renderDropdown()));
+        const modalContent = (h("salla-modal", { position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
+        const placeholderContent = (h("div", { class: "s-search-placeholder-wrapper s-search-inline" }, this.renderPlaceholderTrigger(), modalContent));
         return this.placeholder ? (placeholderContent) : this.inline ? (h("div", { class: "s-search-modal" }, searchContent)) : (modalContent);
     }
     /**
@@ -152,7 +290,11 @@ export class SallaSearch {
      */
     componentDidLoad() {
         this.afterSearching();
-        this.searchInput.value = this.getQueryParam('q');
+        const initialQuery = this.getQueryParam('q');
+        if (initialQuery && this.searchInput) {
+            this.searchInput.value = initialQuery;
+            this.hasInputValue = true;
+        }
     }
     static get is() { return "salla-search"; }
     static get originalStyleUrls() {
@@ -292,11 +434,16 @@ export class SallaSearch {
     static get states() {
         return {
             "translationLoaded": {},
+            "labels": {},
             "results": {},
             "loading": {},
             "typing": {},
             "debounce": {},
-            "search_term": {}
+            "search_term": {},
+            "hasInputValue": {},
+            "searchHistory": {},
+            "trendingCategories": {},
+            "mostSearchedTerms": {}
         };
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/salla-search/utils.js

@@ -0,0 +1,111 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export const NEW_SEARCH_FEATURE_FLAG = 'new-search-ui-enabled';
+export const SEARCH_HISTORY_KEY = 'salla::search-history';
+export const SEARCH_HISTORY_LIMIT = 10;
+// Multi-market stores scope search history per market via the `scope` query param.
+export function getSearchHistoryKey() {
+    if (typeof window === 'undefined') {
+        return SEARCH_HISTORY_KEY;
+    }
+    const scope = new URLSearchParams(window.location.search).get('scope');
+    return scope ? `${SEARCH_HISTORY_KEY}-${scope}` : SEARCH_HISTORY_KEY;
+}
+export const DEFAULT_LABELS = {
+    searchPlaceholder: '',
+    noOptions: '',
+    outOfStock: '',
+    close: '',
+    back: '',
+    remove: '',
+    searchHistory: '',
+    trendingCategories: '',
+    mostSearched: '',
+    searchSuggestions: '',
+    categories: '',
+    searchResults: '',
+    searchViewAllTemplate: '',
+};
+// Labels not yet in the central translation files - seeded via addBulk only when missing.
+export const TRANSLATION_DEFAULTS = {
+    'common.elements.search_history': { ar: 'آخر ما تم البحث عنه', en: 'Recently Searched' },
+    'common.elements.trending_categories': {
+        ar: 'التصنيفات الأكثر بحثاً',
+        en: 'Trending categories',
+    },
+    'common.elements.most_searched': { ar: 'الأكثر بحثاً', en: 'Most searched' },
+    'common.elements.search_suggestions': { ar: 'اقتراحات البحث', en: 'Search suggestions' },
+    'common.elements.categories': { ar: 'التصنيفات', en: 'Categories' },
+    'common.elements.search_results': { ar: 'نتائج البحث', en: 'Search results' },
+    'common.elements.search_view_all': {
+        ar: 'عرض كل النتائج لـ ":word"',
+        en: 'View all results for ":word"',
+    },
+};
+export function isNewSearchFeatureEnabled() {
+    const flag = salla.storage.get(NEW_SEARCH_FEATURE_FLAG, false);
+    return flag === true || flag === 'true';
+}
+export function getSearchResultsUrl(term) {
+    return salla.url.get('search?q=' + encodeURI(term));
+}
+export function loadSearchHistory() {
+    const key = getSearchHistoryKey();
+    const stored = salla.storage.get(key, []);
+    return Array.isArray(stored) ? stored.filter(term => typeof term === 'string') : [];
+}
+export function saveSearchHistory(history) {
+    const key = getSearchHistoryKey();
+    salla.storage.set(key, history);
+}
+export function addToSearchHistory(history, term) {
+    const trimmed = term.trim();
+    if (!trimmed) {
+        return history;
+    }
+    const withoutDuplicate = history.filter(existing => existing.toLowerCase() !== trimmed.toLowerCase());
+    return [trimmed, ...withoutDuplicate].slice(0, SEARCH_HISTORY_LIMIT);
+}
+export function hasIdlePanelContent(searchHistory, trendingCategories, mostSearchedTerms) {
+    return searchHistory.length > 0 || trendingCategories.length > 0 || mostSearchedTerms.length > 0;
+}
+export function registerTranslationDefaults() {
+    if (!salla?.lang?.addBulk) {
+        return;
+    }
+    const missing = Object.entries(TRANSLATION_DEFAULTS).reduce((acc, [key, value]) => {
+        if (salla.lang.get(key) === key) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+    if (Object.keys(missing).length) {
+        salla.lang.addBulk(missing);
+    }
+}
+export function loadLabels() {
+    return {
+        searchPlaceholder: salla.lang.get('blocks.header.search_placeholder'),
+        noOptions: salla.lang.get('common.elements.no_options'),
+        outOfStock: salla.lang.get('pages.products.out_of_stock'),
+        close: salla.lang.get('common.elements.close'),
+        back: salla.lang.get('common.elements.back'),
+        remove: salla.lang.get('common.elements.remove'),
+        searchHistory: salla.lang.get('common.elements.search_history'),
+        trendingCategories: salla.lang.get('common.elements.trending_categories'),
+        mostSearched: salla.lang.get('common.elements.most_searched'),
+        searchSuggestions: salla.lang.get('common.elements.search_suggestions'),
+        categories: salla.lang.get('common.elements.categories'),
+        searchResults: salla.lang.get('common.elements.search_results'),
+        searchViewAllTemplate: salla.lang.get('common.elements.search_view_all'),
+    };
+}
+export function getDefaultProductSlot() {
+    return ('<div class="s-search-product-image-container">' +
+        '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+        '</div>' +
+        '<div class="s-search-product-details">' +
+        '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
+        '</div>');
+}

package/dist/collection/components/salla-searchable-dropdown/salla-searchable-dropdown.js

@@ -188,18 +188,18 @@ export class SallaSearchableDropdown {
     render() {
         const hasSelection = this.selectedItem != null;
         const listboxId = `${this.inputId}-listbox`;
-        return (h(Host, { key: '813e07447e4b3c51180345a38e82ffe135b6aec0', class: "s-searchable-dropdown" }, h("div", { key: '34eb275b53d173015a68bd2eeb93f1621eae47d1', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '3659b3ca3a882ea94656c37d2862cf2ebd0a6690', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '9bbce65147d41fad44282ad04c0707b34ee12526', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: '177b983bf879eae9a4d191226c480cbb3abe21c1', class: {
+        return (h(Host, { key: '6661631ca1fbc9dee2c634fffa720e5f90ce3483', class: "s-searchable-dropdown" }, h("div", { key: '201df6fb1c7d201d93681acc3819d76be5da4c6a', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '2a5a78700cb7c4f498140f91525e7264bcfa7555', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: 'ae3395c452ced56a8754466a5962acfaaef0c3b5', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: 'ca363dd594a146e9dedd6940c736e832f465d495', class: {
                 's-searchable-dropdown-trigger': true,
                 's-searchable-dropdown-trigger--disabled': this.disabled || this.loading,
                 's-searchable-dropdown-trigger--open': this.isOpen,
-            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '7887cee514ce9220a5974816700e7519c201183b', class: {
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '84e041b879c392a82bbaf0ebd21b50a1e035218d', class: {
                 'sicon-keyboard_arrow_down': true,
                 's-searchable-dropdown-trigger-icon': true,
                 's-searchable-dropdown-trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: 'cbca93a72a5ec382903844c60f8fef8e77d46d92', class: {
+            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: 'eeeb7a2c5f3ff05966150fada86eb26d38f38699', class: {
                 's-searchable-dropdown-panel': true,
                 's-searchable-dropdown-panel--up': this.dropUp,
-            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: '06f901a77c0ac9e2bfcfaa2823df51370163925c', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: '5bc57c4e8022f53d1c7b64cde61fdc386c94bd65', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: 'b6a3db42d1785326c4be15c58f3d37c34d221f9e', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: 'aac10f08cd4ed51829f254990d11c103861f0984', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
+            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: '28bd784d25d2bb9928c2316aac029257140d19e9', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: '78add1451d050ce225fc3e14af352af4891735a3', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: '94644b386f64d1312511349f1eebafb56566754a', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: '5e7f218ded5baac0ad6fd92a04eae8948f7c9430', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
     }
     renderListContent() {
         if (this.searching || this.loading) {

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

@@ -22,7 +22,7 @@ export class SallaSkeleton {
             's-skeleton-item': true,
             's-skeleton-item-circular': this.type == 'circle',
         };
-        return (h(Host, { key: '7b36da96585cfefe9aa96df6262be14f6a03c585', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '568ae1bc0aeae182bb32468b19601c0245e9617d', class: classes }, "\u00A0")));
+        return (h(Host, { key: '363b803ca0428a575313a96b569ddab7f67b3703', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: 'bd1e4607e4753ef8b148a125b8d9bc60ca20dc72', class: classes }, "\u00A0")));
     }
     static get is() { return "salla-skeleton"; }
     static get originalStyleUrls() {

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

@@ -31,7 +31,7 @@ export class SallaSocial {
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (h(Host, { key: 'e7d69dbae46ef54588471875ada751103d14d393' }, h("ul", { key: 'ff4b15127e6664cca17fa7f6f49e4cda25829d74', 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: 'd084cee5461e8e68ca735b86b6d453fe761280ad' }, h("ul", { key: 'e83912816c1b2f2ec1f00f1991b2ca1afd21ffe5', 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/collection/components/salla-social-share/salla-social-share.js

@@ -355,7 +355,7 @@ export class SallaSocialShare {
         })));
     }
     render() {
-        return (h("div", { key: 'cd2d10a50c7d07fb261471e7ca8e81891bc489e9', class: "s-social-share-wrapper" }, h("slot", { key: '94627cdb3aa11d3844c984d8890b13dc7e1f0e3c', name: "widget" }, h("salla-button", { key: '3b5ea25966484669a935e62ccbc3d383078337d8', "aria-label": "Share", onClick: () => this.handleShareClick(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '3de3ea0b6f4843a24eeab1f7d6f0be3c8f85de41', innerHTML: this.opened ? Cancel : ShareAlt }))), this.mode === 'modal' ? this.renderModal() : this.renderPopupList()));
+        return (h("div", { key: '4de560059da2e2dd232bbcd693cd8ad937da9c8e', class: "s-social-share-wrapper" }, h("slot", { key: '7ab0a6d03088e0c741c5f432c6c8991db1f0e7b8', name: "widget" }, h("salla-button", { key: '574fc864d8552114ead6061740581d72521fd38d', "aria-label": "Share", onClick: () => this.handleShareClick(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: 'c8456382fec13bf8b9a429ca199780b242d7992e', innerHTML: this.opened ? Cancel : ShareAlt }))), this.mode === 'modal' ? this.renderModal() : this.renderPopupList()));
     }
     static get is() { return "salla-social-share"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-tabs/salla-tab-content.js

@@ -30,7 +30,7 @@ export class SallaTabContent {
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (h("div", { key: 'f5cfa9676bc8314149cb78e103b9ef580c0d7559', class: classes }, h("slot", { key: '1b86591377c09f1acb25cda20024b3af9c6a874d' })));
+        return (h("div", { key: '12884a255f05baac9d70e8b0d2144a369fdd3cfc', class: classes }, h("slot", { key: '331d86d51ec576614e69e7190ab3cd9c31ed9117' })));
     }
     static get is() { return "salla-tab-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-tabs/salla-tab-header.js

@@ -52,7 +52,7 @@ export class SallaTabHeader {
             's-tabs-active': this.isSelected,
         };
         return [
-            h("div", { key: 'a9548ed2a74d30e6fcf365dbe26aa5f7fdab2468', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '547edd40aab5843c6035bd3c36a34d9449dc12d3' })),
+            h("div", { key: 'd9f961d47da1347b5b5f4677b3a3905f073b7b63', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '056593968bd13d806fa34a481e5ab773e23e8084' })),
         ];
     }
     static get is() { return "salla-tab-header"; }

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

@@ -50,7 +50,7 @@ export class SallaTabs {
     }
     render() {
         return [
-            h("div", { key: 'e9054cb114c2bd66940b6afa98d7c7c230353a74', class: "s-tabs" }, h("div", { key: 'd245f64aef9b7fd77c9c51eb1d86ddfd9202e5fb', class: "s-tabs-header" }, h("slot", { key: 'f1b9a982cd746d637db5d514cb691f188af0cb7e', name: "header" })), h("div", { key: '0ba8441707b087a8c4d068b1a72bf10c8efb41cc', class: "s-tabs-content-wrapper" }, h("slot", { key: 'afcee28724a5a9ce263fcc3a38d624a631069945', name: "content" })))
+            h("div", { key: '84647185ccebd52494bfff8cf9468a833dfda468', class: "s-tabs" }, h("div", { key: 'bfec0faae20e236920197fc9a518cb3fae7e820e', class: "s-tabs-header" }, h("slot", { key: '51c0297a5c75395e867e7621780fd030253393dc', name: "header" })), h("div", { key: 'b3c155ba7de23b62de2f23d0b3ac4232937f7a57', class: "s-tabs-content-wrapper" }, h("slot", { key: '2d1d90a7bed705c01efb05a8ab1ea5be543d71dc', name: "content" })))
         ];
     }
     static get is() { return "salla-tabs"; }

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

@@ -138,7 +138,7 @@ export class SallaTelInput {
         }
     }
     render() {
-        return (h(Host, { key: '1b928e13a8d7784cba93a8a9295d5e2da59380ec', class: "s-tel-input" }, h("input", { key: '351a4e2ba8865b613a7c52127ef312f834116a59', 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: 'cac78f5eede19008d46a126c8c96cd963947de1f', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '7aedcb3f86d491f4789226f12812c7023d749eba', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: '6e279f9a491d7ee129f4ccb7f64017c17bbb2229', class: "s-tel-input" }, h("input", { key: '5b0eabc113b9a766218be76e055d2cbc2f83365a', 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: 'f609b8bf28bceb61d06f9eaf3d06c26a4cabcc4e', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '10bc24025a5932b85bfa5a1ede6e203e33dddb6f', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
         this.initPromise = this.initTelInput();

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

@@ -27,7 +27,7 @@ export class SallaTooltip {
     }
     render() {
         const validTheme = ['default', 'dark'].includes(this.theme) ? this.theme : 'default';
-        return (h("div", { key: '84dfb23d4eb2689ff71b65c4a8b24dd36f8cb6ca', class: "s-tooltip-container" }, h("div", { key: '59d3bac320e20f99de1c4bf49531a61962190efc', 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: 'c2172752ccc5634d2223042d359571d4ba4e6816', class: "s-tooltip-container" }, h("div", { key: 'b37b92c725bdad1ff3fc10caedd2fe98b506f5e7', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? h("span", null, this.text) : h("slot", null))));
     }
     static get is() { return "salla-tooltip"; }
     static get originalStyleUrls() {

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

@@ -532,7 +532,7 @@ export class SallaUserSettings {
         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: '8a30c7a63785447ce4b5a37233a851056489b7a0', class: "s-user-settings-wrapper" }, this.canHideName && (h("div", { key: 'df325aab1249e9c6fbae8c9218cebe44cf3c627a', class: "s-user-settings-section" }, h("salla-list-tile", { key: '00b155f3cbdb38b97baaebc81b2f3f8ae41926c9' }, h("div", { key: '79e8eaf77e59e8228bc8a68adb55975a1400aea0', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '98e985a057595b1e136d77c8bda2951fb82b1d3e', innerHTML: UserCancel })), h("div", { key: '9c05bf47eda1764880948705b1c78af50b973c94', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '4656a31e4818d1a0678400408c1082f5e738f764', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '636e6882149c8b692c01cb97ece48014bf284631', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: '5633324ba6128911e955fbf53774f324a37ff136', class: "s-toggle" }, h("input", { key: 'cae5ee95e39ffc7ff3a1ecb86ca8cae9dc9583d9', class: "s-toggle-input", checked: this.isHiddenName, onChange: e => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'd0cdd16ca6104f73f1653088cdf43d7a1d10da34', class: "s-toggle-switcher" })))))), h("div", { key: '781043a116e44c9e60c127faf121f59c010fad17', class: "s-user-settings-section" }, h("salla-list-tile", { key: '72784431a6acd24d12a2a66e9563c603900a1f4d' }, h("div", { key: '0f5ec3452bfb20918b44d99aad5146c2a8595286', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'cef5ba0f4cd4e64f995e654b0f566a11ed2e2f48', innerHTML: Bullhorn })), h("div", { key: '8632c4f75da95d01a2cbb8a89c415c3bdd6c10ff', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: 'd93b1336e6d09e32d620376083bc704e1edac337', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '7c4f5a8102521d98a230dec0b92ded0a37ff8eea', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: '1b3419f9c933f1e20540fc70a79bdeba338e3dc6', class: "s-toggle" }, h("input", { key: '87ceb43f847b99552566579e2d0d878dbc8bf80a', class: "s-toggle-input", checked: this.isNotifiable, onChange: e => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '15ddef5bcefe2b062983b0021cfaf03ad9f6cf95', 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: 'ec31f48a8214240020804541d58e1745c429f2a5', class: "s-user-settings-wrapper" }, this.canHideName && (h("div", { key: '1a4fb3a3e47729891772838df0dca41f52e5d017', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'f965243eca4953d588ea6ef27a581f00839482ff' }, h("div", { key: 'd08fb75de39b78c02455b9ede326e0563a675762', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '4bacfb410376c98a14c7289968293a5c06520bbd', innerHTML: UserCancel })), h("div", { key: '61bbccd47940a87db9faee8a6a305aff0b5f0783', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '3b02ec766d677d37d09df8ae91fae883b3e8b35d', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: 'da7358399c5e1e8a94082585820f44e2de9d352d', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: 'f64e96e150cd78ed41b104d845774ae31187a33e', class: "s-toggle" }, h("input", { key: '69b07baebf7c0869c37b29a920851be99dbfddc8', class: "s-toggle-input", checked: this.isHiddenName, onChange: e => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '94e8675dcb56084c0581fb26f96ce0122c8898e5', class: "s-toggle-switcher" })))))), h("div", { key: '940db4113264ca36dc5283d17597a85d85c4b5b4', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'f6c8e5cbebb295826be0bfac8ae427df9cf692bf' }, h("div", { key: 'c81a3c392df36b97777d74521482266a9444a79c', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '1a5a19818579890be2ecb12848e30cf034f8569b', innerHTML: Bullhorn })), h("div", { key: '5849731b90184af7225d120b5e1077e49301e379', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '3aeda4ebfa9715d81272dd4be1e5b223f43d79fe', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '60db45c279de365c10ae40ba486afd8609f5d2b2', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: '1b855ffd24570fe90badbd18bbab2c8032f320b7', class: "s-toggle" }, h("input", { key: '9cdd0d736ed9baf0f5628803a9a4b93c5389cc51', class: "s-toggle-input", checked: this.isNotifiable, onChange: e => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '35ba9556185bb4991fc91b343573e723cd888115', 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 is() { return "salla-user-settings"; }
     static get originalStyleUrls() {