@salla.sa/twilight-components 2.14.354 → 2.14.356

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

@@ -60,6 +60,11 @@ export class SallaSlider {
          * Show/hide thumbs slider arrows
          */
         this.showThumbsControls = true;
+        /**
+         * When enabled and there is exactly one slide in the `items` slot,
+         * render without initializing Swiper (single slide mode).
+         */
+        this.enableSingleSlideMode = false;
         /**
          * Enable autoplay  - working with `type="carousel" only`
          */
@@ -91,6 +96,9 @@ export class SallaSlider {
         this.isBeginning = true;
         /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse recommended) */
         this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
+        /** When true, only one slide is present; we render without Swiper for performance. */
+        this.singleSlideMode = false;
+        this._rafId = null;
         this.viewportMediaQuery = null;
         this.hasThumbSlot = false;
         this.pre_defined_config = {
@@ -146,7 +154,7 @@ export class SallaSlider {
      * @returns The Swiper slider instance
      */
     async sliderInstance() {
-        return this.slider;
+        return this.singleSlideMode ? undefined : this.slider;
     }
     /**
      * Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.
@@ -156,6 +164,8 @@ export class SallaSlider {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideTo(index, speed, runCallbacks) {
+        if (!this.slider)
+            return;
         return this.slider.slideTo(index, speed, runCallbacks);
     }
     /**
@@ -183,7 +193,7 @@ export class SallaSlider {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideToLoop(index, speed, runCallbacks) {
-        this.slider.slideToLoop(index, speed, runCallbacks);
+        this.slider?.slideToLoop(index, speed, runCallbacks);
     }
     /**
      * Does the same as .slideNext but for the case when used with enabled loop. So this method will slide to next slide with realIndex matching to next index
@@ -192,7 +202,7 @@ export class SallaSlider {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideNextLoop(speed, runCallbacks) {
-        this.slider.slideNextLoop(speed, runCallbacks);
+        this.slider?.slideNextLoop(speed, runCallbacks);
     }
     /**
      * Does the same as .slidePrev but for the case when used with enabled loop. So this method will slide to previous slide with realIndex matching to previous index
@@ -201,7 +211,7 @@ export class SallaSlider {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slidePrevLoop(speed, runCallbacks) {
-        this.slider.slidePrevLoop(speed, runCallbacks);
+        this.slider?.slidePrevLoop(speed, runCallbacks);
     }
     /**
      * Reset slider position to currently active slide for the duration equal to 'speed' parameter.
@@ -210,7 +220,7 @@ export class SallaSlider {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideReset(speed, runCallbacks) {
-        this.slider.slideReset(speed, runCallbacks);
+        this.slider?.slideReset(speed, runCallbacks);
     }
     /**
      * Reset slider position to closest slide/snap point for the duration equal to 'speed' parameter.
@@ -218,56 +228,56 @@ export class SallaSlider {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideToClosest(speed, runCallbacks) {
-        this.slider.slideToClosest(speed, runCallbacks);
+        this.slider?.slideToClosest(speed, runCallbacks);
     }
     /**
      *  You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:
      * **/
     async update() {
-        this.slider.update();
+        this.slider?.update();
     }
     /**
      * Force slider to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter
      * @param {number} speed - Transition duration (in ms).
      * **/
     async updateAutoHeight(speed) {
-        this.slider.updateAutoHeight(speed);
+        this.slider?.updateAutoHeight(speed);
     }
     /**
      * recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript
      * **/
     async updateSlides() {
-        this.slider.updateSlides();
+        this.slider?.updateSlides();
     }
     /**
      * recalculate slider progress
      * **/
     async updateProgress() {
-        this.slider.updateProgress();
+        this.slider?.updateProgress();
     }
     /**
      * update active/prev/next classes on slides and bullets
      * **/
     async updateSlidesClasses() {
-        this.slider.updateSlidesClasses();
+        this.slider?.updateSlidesClasses();
     }
     /**
      * Get slider slides
      * **/
     async getSlides() {
-        return await this.slider?.slides;
+        return this.singleSlideMode ? undefined : await this.slider?.slides;
     }
     /**
      * Get slider slides
      * **/
     async updateSize() {
-        return await this.slider.updateSize();
+        return await this.slider?.updateSize();
     }
     /**
      * Get thumbs slider update
      * **/
     async sliderInit() {
-        return await this.slider.init();
+        return await this.slider?.init();
     }
     /**
      * Get thumbs slider slides
@@ -306,6 +316,8 @@ export class SallaSlider {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async thumbsSlideTo(index, speed, runCallbacks) {
+        if (!this.thumbsSlider)
+            return;
         return this.thumbsSlider.slideTo(index, speed, runCallbacks);
     }
     /**
@@ -493,7 +505,16 @@ export class SallaSlider {
         classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal ';
         classes += this.arrowsCentered ? ' s-slider-v-centered ' : '';
         classes += this.gridThumbs ? ' s-slider-with-grid-thumbs ' : '';
-        return (h(Host, { key: '44f6baf2ec3a6421cd8d8ce6779c6ce781cecc7f', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
+        if (this.singleSlideMode) {
+            return (h(Host, { class: 's-slider-wrapper s-slider-single-mode ' + classes }, this.blockTitle || this.displayAllUrl ?
+                h("div", { class: "s-slider-block__title" }, this.blockTitle ?
+                    h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
+                    : '', this.displayAllUrl ?
+                    h("div", { class: "s-slider-block__title-left" }, h("a", { href: this.displayAllUrl, class: "s-slider-block__display-all" }, this.displayAllTitle))
+                    : '')
+                : '', h("div", { class: "swiper s-slider-container s-slider-single", dir: this.vertical ? "ltr" : this.direction }, h("slot", null), h("div", { class: "swiper-wrapper s-slider-swiper-wrapper" }, h("slot", { name: 'items' })))));
+        }
+        return (h(Host, { class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
             h("div", { class: "s-slider-block__title" }, this.blockTitle ?
                 h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
                 : '', h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
@@ -501,7 +522,7 @@ export class SallaSlider {
                 : '', this.showControls ?
                 h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : ArrowRightIcon })))
                 : ''))
-            : '', h("div", { key: '384d3224e9e2f9ad08d71093ee4c6f907232c07e', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: '578756df5b652d9b7e86d3f0424e4ec886b7a75f' }), h("div", { key: '7966a00ec720374a3dac1533d72fdfeb31db8105', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '39f9656cabb053dc4878ae1f2bd94a6efc19f975', name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
+            : '', h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", null), h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
             h("div", { class: "s-slider-thumbs-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-thumbs-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-thumbs-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : ArrowRightIcon })))
             : null))
             : null));
@@ -560,25 +581,43 @@ export class SallaSlider {
         }
         this.lazyObserver.observe(el);
     }
-    /** Keep only element nodes so Swiper never sees text nodes (getAttribute would throw). */
-    flattenSlotToElements(container, slotSelector) {
-        const slotEl = container?.querySelector(slotSelector);
-        if (!slotEl)
-            return;
-        const elements = Array.from(slotEl.children).filter((node) => node.nodeType === Node.ELEMENT_NODE);
-        if (elements.length)
-            slotEl.replaceWith(...elements);
-    }
     componentDidLoad() {
-        this.flattenSlotToElements(this.sliderWrapper, 'div[slot="items"]');
+        // 1. Batch Reads (Get all elements first without modifying DOM)
+        const tasks = [];
+        let _singleSlideMode = false;
+        const prepareFlatten = (container, slotSelector) => {
+            const slotEl = container?.querySelector(slotSelector);
+            if (!slotEl)
+                return;
+            const elements = Array.from(slotEl.children).filter((node) => node.nodeType === Node.ELEMENT_NODE);
+            if (elements.length) {
+                // Queue the Write operation
+                tasks.push(() => slotEl.replaceWith(...elements));
+                if (elements.length === 1 && this.enableSingleSlideMode) {
+                    _singleSlideMode = true;
+                    elements[0].classList.add('swiper-slide');
+                }
+            }
+        };
+        prepareFlatten(this.sliderWrapper, 'div[slot="items"]');
         if (this.type == 'thumbs' && this.hasThumbSlot) {
-            this.flattenSlotToElements(this.thumbsSliderWrapper, 'div[slot="thumbs"]');
+            prepareFlatten(this.thumbsSliderWrapper, 'div[slot="thumbs"]');
         }
-        this.initSlider();
+        // 2. Batch Writes (Execute all DOM modifications together)
+        tasks.forEach(task => task());
+        // 3. Init Swiper inside rAF
+        this._rafId = requestAnimationFrame(() => {
+            this.singleSlideMode = _singleSlideMode;
+            if (!_singleSlideMode) {
+                this.initSlider();
+            }
+        });
         this.viewportMediaQuery = window.matchMedia('(min-width: 768px)');
         this.viewportMediaQuery.addEventListener('change', this.onViewportChange);
     }
     disconnectedCallback() {
+        if (this._rafId)
+            cancelAnimationFrame(this._rafId);
         this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
         this.lazyObserver?.disconnect();
         this.lazyImageObserver?.disconnect();
@@ -836,6 +875,26 @@ export class SallaSlider {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "enableSingleSlideMode": {
+                "type": "boolean",
+                "attribute": "enable-single-slide-mode",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When enabled and there is exactly one slide in the `items` slot,\nrender without initializing Swiper (single slide mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "autoPlay": {
                 "type": "boolean",
                 "attribute": "auto-play",
@@ -1027,7 +1086,8 @@ export class SallaSlider {
             "isEnd": {},
             "isBeginning": {},
             "displayAllTitle": {},
-            "isDesktopViewport": {}
+            "isDesktopViewport": {},
+            "singleSlideMode": {}
         };
     }
     static get events() {

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: 'a0bcd60fddd2fd8e86f32cd71d484ec76d02cf49' }, h("ul", { key: 'b595d8de59199de5081370b9440c8a46cb8c751f', 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: '20f01d2027bf9ac9fa635c2e814bf9778c5abf8c' }, h("ul", { key: '016fc5a496d6efd36cf15dc805dd83ee4d6a9845', 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

@@ -122,7 +122,7 @@ export class SallaSocialShare {
         window.a2a?.init('page');
     }
     render() {
-        return (h("div", { key: 'c4ac8faea4a8ec8aa5ba9f4e744710d508387d78', class: "s-social-share-wrapper" }, h("slot", { key: '6c6b54513f67be8818a9a042570286d09b7115f8', name: 'widget' }, h("salla-button", { key: '8a57650940dad634cf3576dada4cc35687ed447c', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '207f2fb0e2f89e7057775153ffcc68eebb069824', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'fd9b25a483a93efa10994c2a7a876b6741d976c2', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
+        return (h("div", { key: '05350f69911825a04716569eaac5769c67b07e24', class: "s-social-share-wrapper" }, h("slot", { key: 'c9bb03b5907e8d211d1a2bc7d36b0924dd2fa00b', name: 'widget' }, h("salla-button", { key: '3120d746deabb24bc2b3994a1088a42e355c2796', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '7874b8c8aceb1372d061d0142405a3f07e3c0ba3', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'deaa966a6ae4a91a350361f44316d749f8459cec', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
             return (h("li", null, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
                 if (icon.name === platform) {
                     return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });

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: '6b11ec3a839c759e64e1766de55f9ac1be18931e', class: classes }, h("slot", { key: '17300d7a52e068428ea956b2c5d5be6d0ab69fca' })));
+        return (h("div", { key: 'dd7c68e402701af152ab5d3d5afb2565f9b4a5cb', class: classes }, h("slot", { key: 'f7599dd3d56d04dd06d9d8cce105d0c7b73b6195' })));
     }
     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: '08c51c1ad15c6b0efbeb165c89fc7d73748467d0', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: 'ba5045dab7c254eb4533dc64630ab0c1f561701b' })),
+            h("div", { key: '70daa4821b240da5f44591c427999d34556a0fed', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '002eb0a0e48f3a31f272a393bf4fce94bcd0c841' })),
         ];
     }
     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: '3195e8954179d52867093b5e861b3c0caa6d7af6', class: "s-tabs" }, h("div", { key: 'cf75a77b6cc9b9cd288e963ee56acf19e177029a', class: "s-tabs-header" }, h("slot", { key: 'fa345597be2fbb8ff4f1cb420a030c5ec821bc8b', name: "header" })), h("div", { key: 'f7fd939608e5341b6d9c1d75e7d9dc909a4d8912', class: "s-tabs-content-wrapper" }, h("slot", { key: '86ce2c9bcb3be06264e75369a6be81b2e1361619', name: "content" })))
+            h("div", { key: '485e1ff4ea6a556dfdd8a2e7f8166c9e3d721c7d', class: "s-tabs" }, h("div", { key: 'a2825df331fdfc01de63eea7800ad62e4814205b', class: "s-tabs-header" }, h("slot", { key: 'd9d3c9bdbce261daccd480c0245fd06930b03602', name: "header" })), h("div", { key: '9e02ff1a53ffd068f1b1da6cbe5fec7adbc38492', class: "s-tabs-content-wrapper" }, h("slot", { key: '222b612d9ef34d936b3ccb1a883a42c135f67661', name: "content" })))
         ];
     }
     static get is() { return "salla-tabs"; }

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

@@ -123,7 +123,7 @@ export class SallaTelInput {
         }
     }
     render() {
-        return (h(Host, { key: '362e48d1b39b0715c10df0c15c730ca21793a46b', class: "s-tel-input" }, h("input", { key: '07dcb2fcf639c2d7b95c250079bd24a80441e0ca', 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: 'c50f81a50debf37dc92f81fc61c3ddd3e622031f', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '2217131b313a32c5b62dcce6132a4914f30dc005', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: '686fca532ab7d1e665aeef0f402c1112182ff198', class: "s-tel-input" }, h("input", { key: '5fc71e100bedb49cd0a37b75167e0b5eb654b7b2', 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: '1b28cb0c192b9999177859c4c35c77f64d48317d', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '6d8d987f074dda360784d7121f8fed730f42772a', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
         this.initTelInput();

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

@@ -22,7 +22,7 @@ export class SallaTooltip {
         this.targetElement = document.getElementById(this.targetId);
     }
     render() {
-        return (h("div", { key: 'f2a52de43a80ec8fe2f7f2120c8ba38c7228183f', class: "s-tooltip-container" }, h("slot", { key: 'dc6ac92e0b894fa4f6c01c2aa0fad39a195a8047' }), this.show && h("div", { key: '8d4f57501bbcdb423781f6711a4af7610b89faf7', class: "s-tooltip-item" }, this.text)));
+        return (h("div", { key: 'fed457c496e7926ded53c47e1f6f7783eb9da5a0', class: "s-tooltip-container" }, h("slot", { key: 'd061264ee544bb9f4ca7ec3aa03f54b84c8af1fd' }), this.show && h("div", { key: '5d4a158dce0b562cb6e3c9bc732f47dcb96c182a', class: "s-tooltip-item" }, this.text)));
     }
     static get is() { return "salla-tooltip"; }
     static get originalStyleUrls() {

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

@@ -56,7 +56,7 @@ export class SallaUserSettings {
         await salla.profile.delete().finally(() => this.confirmationModal.close());
     }
     render() {
-        return (h(Host, { key: 'e47b5c39666443b29de9d54ec8f05cb97950ace1', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '54b3098aa736c43d6d3ef53f6a49710dc039a16d', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'dd1d06cd2ad3e0696c76cfd3f4c8b342e774b679' }, h("div", { key: '2e8b8fb48d36ce6f183698cb60a856ee0b74c639', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '0f7158ae21c5a93c5458c38388c79fb7cfa1e88d', innerHTML: UserCancel })), h("div", { key: 'f3f648e8f55f5998362107654d3a3c438bec2999', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'eddfaf2a9faf242123db36f1aa5a87fc242f6ccc', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '1112ebcb125325688758d57de115ed36d965752d', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '4bacd7e71a3f9ccef749d091d70be45b0184d195', class: "s-toggle" }, h("input", { key: '64db5795f938f72a5c0710c03c46f84bb0248b68', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'b1e178372d37f63992ba81ee6d5645fb17f5ce33', class: "s-toggle-switcher" }))))), h("div", { key: 'a11d585e1b5fe0430ca00757394e5c9a085192f9', class: "s-user-settings-section" }, h("salla-list-tile", { key: '61ad291644bc8314b443eec5d3a32abccc9c46ba' }, h("div", { key: 'e54526b5f18ce365d68efb9292af2d67ae20b77b', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'e2bb0f2b30ac57d6336785485ef99279acf09617', innerHTML: Bullhorn })), h("div", { key: '2f6ec0835993e79b1923778bfe0d6442d71809f0', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '6ad65576302c12e2298abd3de70fd5edd54aa542', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '05f00c6ed5511bd6a21b3e01a54a01549c758940', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '5c3520e04e57205dfe2e7f441e45c46682a56ad4', class: "s-toggle" }, h("input", { key: '8f7f59433b3685acbc0d35c6ceca93a9a6a4ebbf', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'a92abe23b596360bfb3e516ffb0789b53abaabd0', class: "s-toggle-switcher" }))))), h("div", { key: '0996cc090ab85a67e763b5acd19cc87db11c090d', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'f6b43aa4a618d75981fed8844ed1f4ebc3947239' }, h("div", { key: '3027e7c901c1ec214a9effdbd36e1c25d96cdb75', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '11468d7a54fa406e697e07b2ff2fe5c945a28746', innerHTML: UserOff })), h("div", { key: 'c2fd73f5d313daaba740c89ad2654144f6f54bb1', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: 'e2bad2737f3ca8e30bbb375ad7691d607366551c', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'df155e019df0514ed77faaeef107845ce144ca08', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'e7bd07fcbc49ba9e991adf52854b35c9ca8d0344', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: '730df3b04afb89a1eba96651899cf84818d49b6b', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '5254b44fac993e1e1454da4eae346afc5ad7211c', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '9c07be490266024dee72ca4a244c8dd4ffdd9d71', class: "s-user-settings-confirmation" }, h("div", { key: 'd42ac2fa9cc0030778b444b21958992677667cc3', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: 'b3cd6b31255244c469571beaf05a0f266eb431af', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: 'aadfefcd7e2561542adb10c416bac0ff14b25fef', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '12693adf31b54a4ca993632fb527dac91ec810b2', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
+        return (h(Host, { key: '1a6622794c68aa483d9a2526d7c9568619145168', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '4188aabfd44edb57365f5a2d1c0910f5ec3cd447', class: "s-user-settings-section" }, h("salla-list-tile", { key: '9f9ccbb08d666a13bf19895349a17f84fbdd3fc1' }, h("div", { key: '85426ad3140db951064c29c988badc23447a238d', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'd1a386387320cf907e4645240cace32ac27a1e5b', innerHTML: UserCancel })), h("div", { key: '1310d3547da0c2dd23e254eaf1b22f1b54956ef2', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '639ef8121549e9c119def1c8012b42647249df2c', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: 'aa8d60ad8c61d682e2114471e6168609bb4e9cb0', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '9d8d52ec4bdfb2032649ae37823070ea0902cb9d', class: "s-toggle" }, h("input", { key: 'f263da0f32ee2682bf442253980fe68da933cb06', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '058e908fcb2a61a239ff5ae67adaa290553feb0a', class: "s-toggle-switcher" }))))), h("div", { key: '2e314b366093f06ebc8e583c17d3f2f2125cd2e7', class: "s-user-settings-section" }, h("salla-list-tile", { key: '5e2fb8520042ccbd4301b20046369f65fb292a49' }, h("div", { key: '25918c6b5402504a0683f2f6931b58e3663ba4eb', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '0d24d9ecb8f7d48d1dba9eaebaad8093210f0a57', innerHTML: Bullhorn })), h("div", { key: 'e212afc7b1ad19e0c4976e5686bc51a847e94d61', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '3f4f72fe869f7cd6f4b4df870e6af8bd1cc32088', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '6929527d156f6da1f9ca61be60b756621b7fb321', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '1f3f3c77b25f602f3a4f461da321df2bcee2a956', class: "s-toggle" }, h("input", { key: 'afd4616efa19cdf04e32fd785af72a6c96ef980c', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'ef55c0480c58c3a77b4c28980c34b89197e2c84c', class: "s-toggle-switcher" }))))), h("div", { key: '7fc42b2d9ee0c58fd210b6704f96de07cf58c703', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: '35bc4e485e78f57cce3fa9d324578997bf5b5346' }, h("div", { key: 'd2643402a5f414beb388622d96352600a58e7788', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '90a634d2ff464a26f7a09df39cf0cce6f7a1ce87', innerHTML: UserOff })), h("div", { key: '3376df9d4baee75e502df2b8265328910f692708', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '1452beb1f275f905b7a1ecb7e76a4223700f7d03', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: '28bc808fbd51274f587abee141f67242100aea03', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'c54e8db52d35e9ab62e2616a0dfb3a10417fcb80', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'a1d52fd66ed991f8411ca17b16e37d21893a2f06', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '9119095941bd2a579b27c18db025238ca652bd6b', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '3194c2236470a7da32bc065218162da80ea7713c', class: "s-user-settings-confirmation" }, h("div", { key: '718f43edf4e6a22ed23e0edaccee07fd3fa46e13', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: 'a87fcd03f6d97afc26f8410faacfcbbbc81cd8bb', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '366186ea98a351d1f0a1f6b3dc2eeddc18e46a33', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: 'f42dc54f7903f3e48ab8c3ac8af0d57039753cf6', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
     }
     static get is() { return "salla-user-settings"; }
     static get originalStyleUrls() {