@salla.sa/twilight-components 2.14.596 → 2.14.598

package/dist/components/salla-count-down2.js

@@ -11,16 +11,16 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         super();
         this.__registerHost();
         /**
-         * The size of the count down
-         * */
+         * The size of the countdown display. Can be 'sm', 'md', or 'lg'. Default is 'md'.
+         */
         this.size = 'md';
         /**
-         * The color of the count down
-         * */
+         * The color theme of the countdown. Can be 'primary', 'light', or 'dark'. Default is 'dark'.
+         */
         this.color = 'dark';
         /**
-         * The digits lang to show in the count down
-         * */
+         * The language/format for displaying digits. 'en' for English numerals, 'auto' for localized numerals. Default is 'auto'.
+         */
         this.digits = 'auto';
         /**
          * If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0.
@@ -41,7 +41,12 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         this.hours = this.number(0);
         this.minutes = this.number(0);
         this.seconds = this.number(0);
-        salla.lang.onLoaded(() => {
+        if (this.date && this.isValidDate(this.date)) {
+            this.startCountDown();
+        }
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
             this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
             this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
@@ -49,9 +54,9 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
             this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
             this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
         });
-        if (this.date && this.isValidDate(this.date)) {
-            this.startCountDown();
-        }
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
     }
     /**
      * End the count down
@@ -235,7 +240,7 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: 'a16b6dc8c000eea39b990588995b07d6361231b2', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+        return (h(Host, { key: '6d42cb8b06464f722d078ab4eb7117c7f698f3c3', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get style() { return sallaCountDownCss; }
 }, [0, "salla-count-down", {

package/dist/components/salla-file-upload2.js

@@ -4,6 +4,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$5, u as usesSplitCountLimits, g as getMaxImagesCount, a as getMaxVideosCount, b as getTotalMaxFiles, p as parseSizeToBytes, c as getFilePondMaxFileSize, i as isVideoMimeType, e as isImageMimeType, f as getUploadErrorMessage, h as formatBytesAsSize, j as formatDuration, P as PlayIcon, s as shouldCountGalleryFile, k as shouldCountGalleryLimit } from './salla-attachment-view2.js';
 import { C as Cancel } from './cancel.js';
+import { s as setTranslationDefault } from './translate.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';
@@ -12,6 +13,8 @@ import { d as defineCustomElement$1 } from './salla-slider2.js';
 const sallaFileUploadCss = "/*!twlt*//*!\n * FilePond 4.32.12\n * Licensed under MIT, https://opensource.org/licenses/MIT/\n * Please visit https://pqina.nl/filepond/ for details.\n */\n\n/* eslint-disable */\n.filepond--assistant{position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.filepond--browser.filepond--browser{position:absolute;margin:0;padding:0;left:1em;top:1.75em;width:calc(100% - 2em);opacity:0;font-size:0}.filepond--data{position:absolute;width:0;height:0;padding:0;margin:0;border:none;visibility:hidden;pointer-events:none;contain:strict}.filepond--drip{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;opacity:.1;pointer-events:none;border-radius:.5em;background:rgba(0,0,0,.01)}.filepond--drip-blob{-webkit-transform-origin:center center;transform-origin:center center;width:8em;height:8em;margin-left:-4em;margin-top:-4em;background:#292625;border-radius:50%}.filepond--drip-blob,.filepond--drop-label{position:absolute;top:0;left:0;will-change:transform,opacity}.filepond--drop-label{right:0;margin:0;color:#4f4f4f;display:flex;justify-content:center;align-items:center;height:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--drop-label.filepond--drop-label label{display:block;margin:0;padding:.5em}.filepond--drop-label label{cursor:default;font-size:.875em;font-weight:400;text-align:center;line-height:1.5}.filepond--label-action{text-decoration:underline;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;-webkit-text-decoration-color:#a7a4a4;text-decoration-color:#a7a4a4;cursor:pointer}.filepond--root[data-disabled] .filepond--drop-label label{opacity:.5}.filepond--file-action-button.filepond--file-action-button{font-size:1em;width:1.625em;height:1.625em;font-family:inherit;line-height:inherit;margin:0;padding:0;border:none;outline:none;will-change:transform,opacity}.filepond--file-action-button.filepond--file-action-button span{position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.filepond--file-action-button.filepond--file-action-button svg{width:100%;height:100%}.filepond--file-action-button.filepond--file-action-button:after{position:absolute;left:-.75em;right:-.75em;top:-.75em;bottom:-.75em;content:\"\"}.filepond--file-action-button{cursor:auto;color:#fff;border-radius:50%;background-color:rgba(0,0,0,.5);background-image:none;box-shadow:0 0 0 0 hsla(0,0%,100%,0);transition:box-shadow .25s ease-in}.filepond--file-action-button:focus,.filepond--file-action-button:hover{box-shadow:0 0 0 .125em hsla(0,0%,100%,.9)}.filepond--file-action-button[disabled]{color:hsla(0,0%,100%,.5);background-color:rgba(0,0,0,.25)}.filepond--file-action-button[hidden]{display:none}.filepond--action-edit-item.filepond--action-edit-item{width:2em;height:2em;padding:.1875em}.filepond--action-edit-item.filepond--action-edit-item[data-align*=center]{margin-left:-.1875em}.filepond--action-edit-item.filepond--action-edit-item[data-align*=bottom]{margin-bottom:-.1875em}.filepond--action-edit-item-alt{border:none;line-height:inherit;background:transparent;font-family:inherit;color:inherit;outline:none;padding:0;margin:0 0 0 .25em;pointer-events:all;position:absolute}.filepond--action-edit-item-alt svg{width:1.3125em;height:1.3125em}.filepond--action-edit-item-alt span{font-size:0;opacity:0}.filepond--file-info{position:static;display:flex;flex-direction:column;align-items:flex-start;flex:1;margin:0 .5em 0 0;min-width:0;will-change:transform,opacity;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--file-info *{margin:0}.filepond--file-info .filepond--file-info-main{font-size:.75em;line-height:1.2;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.filepond--file-info .filepond--file-info-sub{font-size:.625em;opacity:.5;transition:opacity .25s ease-in-out;white-space:nowrap}.filepond--file-info .filepond--file-info-sub:empty{display:none}.filepond--file-status{position:static;display:flex;flex-direction:column;align-items:flex-end;flex-grow:0;flex-shrink:0;margin:0;min-width:2.25em;text-align:right;will-change:transform,opacity;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--file-status *{margin:0;white-space:nowrap}.filepond--file-status .filepond--file-status-main{font-size:.75em;line-height:1.2}.filepond--file-status .filepond--file-status-sub{font-size:.625em;opacity:.5;transition:opacity .25s ease-in-out}.filepond--file-wrapper.filepond--file-wrapper{border:none;margin:0;padding:0;min-width:0;height:100%}.filepond--file-wrapper.filepond--file-wrapper>legend{position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.filepond--file{position:static;display:flex;height:100%;align-items:flex-start;padding:.5625em;color:#fff;border-radius:.5em}.filepond--file .filepond--file-status{margin-left:auto;margin-right:2.25em}.filepond--file .filepond--processing-complete-indicator{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:3}.filepond--file .filepond--file-action-button,.filepond--file .filepond--processing-complete-indicator,.filepond--file .filepond--progress-indicator{position:absolute}.filepond--file [data-align*=left]{left:.5625em}.filepond--file [data-align*=right]{right:.5625em}.filepond--file [data-align*=center]{left:calc(50% - .8125em)}.filepond--file [data-align*=bottom]{bottom:1.125em}.filepond--file [data-align=center]{top:calc(50% - .8125em)}.filepond--file .filepond--progress-indicator{margin-top:.1875em}.filepond--file .filepond--progress-indicator[data-align*=right]{margin-right:.1875em}.filepond--file .filepond--progress-indicator[data-align*=left]{margin-left:.1875em}[data-filepond-item-state*=error] .filepond--file-info,[data-filepond-item-state*=invalid] .filepond--file-info,[data-filepond-item-state=cancelled] .filepond--file-info{margin-right:2.25em}[data-filepond-item-state~=processing] .filepond--file-status-sub{opacity:0}[data-filepond-item-state~=processing] .filepond--action-abort-item-processing~.filepond--file-status .filepond--file-status-sub{opacity:.5}[data-filepond-item-state=processing-error] .filepond--file-status-sub{opacity:0}[data-filepond-item-state=processing-error] .filepond--action-retry-item-processing~.filepond--file-status .filepond--file-status-sub{opacity:.5}[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing svg{-webkit-animation:fall .5s linear .125s both;animation:fall .5s linear .125s both}[data-filepond-item-state=processing-complete] .filepond--file-status-sub{opacity:.5}[data-filepond-item-state=processing-complete] .filepond--file-info-sub,[data-filepond-item-state=processing-complete] .filepond--processing-complete-indicator:not([style*=hidden])~.filepond--file-status .filepond--file-status-sub{opacity:0}[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing~.filepond--file-info .filepond--file-info-sub{opacity:.5}[data-filepond-item-state*=error] .filepond--file-wrapper,[data-filepond-item-state*=error] .filepond--panel,[data-filepond-item-state*=invalid] .filepond--file-wrapper,[data-filepond-item-state*=invalid] .filepond--panel{-webkit-animation:shake .65s linear both;animation:shake .65s linear both}[data-filepond-item-state*=busy] .filepond--progress-indicator svg{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes shake{10%,90%{-webkit-transform:translateX(-.0625em);transform:translateX(-.0625em)}20%,80%{-webkit-transform:translateX(.125em);transform:translateX(.125em)}30%,50%,70%{-webkit-transform:translateX(-.25em);transform:translateX(-.25em)}40%,60%{-webkit-transform:translateX(.25em);transform:translateX(.25em)}}@keyframes shake{10%,90%{-webkit-transform:translateX(-.0625em);transform:translateX(-.0625em)}20%,80%{-webkit-transform:translateX(.125em);transform:translateX(.125em)}30%,50%,70%{-webkit-transform:translateX(-.25em);transform:translateX(-.25em)}40%,60%{-webkit-transform:translateX(.25em);transform:translateX(.25em)}}@-webkit-keyframes fall{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}70%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}to{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes fall{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}70%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}to{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.filepond--hopper[data-hopper-state=drag-over]>*{pointer-events:none}.filepond--hopper[data-hopper-state=drag-over]:after{content:\"\";position:absolute;left:0;top:0;right:0;bottom:0;z-index:100}.filepond--progress-indicator{z-index:103}.filepond--file-action-button{z-index:102}.filepond--file-status{z-index:101}.filepond--file-info{z-index:100}.filepond--item{position:absolute;top:0;left:0;right:0;z-index:1;padding:0;margin:.25em;will-change:transform,opacity;touch-action:auto}.filepond--item>.filepond--panel{z-index:-1}.filepond--item>.filepond--panel .filepond--panel-bottom{box-shadow:0 .0625em .125em -.0625em rgba(0,0,0,.25)}.filepond--item>.filepond--file-wrapper,.filepond--item>.filepond--panel{transition:opacity .15s ease-out}.filepond--item[data-drag-state]{cursor:-webkit-grab;cursor:grab}.filepond--item[data-drag-state]>.filepond--panel{transition:box-shadow .125s ease-in-out;box-shadow:0 0 0 transparent}.filepond--item[data-drag-state=drag]{cursor:-webkit-grabbing;cursor:grabbing}.filepond--item[data-drag-state=drag]>.filepond--panel{box-shadow:0 .125em .3125em rgba(0,0,0,.325)}.filepond--item[data-drag-state]:not([data-drag-state=idle]){z-index:2}.filepond--item-panel{background-color:#64605e}[data-filepond-item-state=processing-complete] .filepond--item-panel{background-color:#369763}[data-filepond-item-state*=error] .filepond--item-panel,[data-filepond-item-state*=invalid] .filepond--item-panel{background-color:#c44e47}.filepond--item-panel{border-radius:.5em;transition:background-color .25s}.filepond--list-scroller{position:absolute;top:0;left:0;right:0;margin:0;will-change:transform}.filepond--list-scroller[data-state=overflow] .filepond--list{bottom:0;right:0}.filepond--list-scroller[data-state=overflow]{overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-mask:linear-gradient(180deg,#000 calc(100% - .5em),transparent);mask:linear-gradient(180deg,#000 calc(100% - .5em),transparent)}.filepond--list-scroller::-webkit-scrollbar{background:transparent}.filepond--list-scroller::-webkit-scrollbar:vertical{width:1em}.filepond--list-scroller::-webkit-scrollbar:horizontal{height:0}.filepond--list-scroller::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:99999px;border:.3125em solid transparent;background-clip:content-box}.filepond--list.filepond--list{position:absolute;top:0;margin:0;padding:0;list-style-type:none;will-change:transform}.filepond--list{left:.75em;right:.75em}.filepond--root[data-style-panel-layout~=integrated]{width:100%;height:100%;max-width:none;margin:0}.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root,.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root{border-radius:0}.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root>*,.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root>*{display:none}.filepond--root[data-style-panel-layout~=circle] .filepond--drop-label,.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label{bottom:0;height:auto;display:flex;justify-content:center;align-items:center;z-index:7}.filepond--root[data-style-panel-layout~=circle] .filepond--item-panel,.filepond--root[data-style-panel-layout~=integrated] .filepond--item-panel{display:none}.filepond--root[data-style-panel-layout~=compact] .filepond--list-scroller,.filepond--root[data-style-panel-layout~=integrated] .filepond--list-scroller{overflow:hidden;height:100%;margin-top:0;margin-bottom:0}.filepond--root[data-style-panel-layout~=compact] .filepond--list,.filepond--root[data-style-panel-layout~=integrated] .filepond--list{left:0;right:0;height:100%}.filepond--root[data-style-panel-layout~=compact] .filepond--item,.filepond--root[data-style-panel-layout~=integrated] .filepond--item{margin:0}.filepond--root[data-style-panel-layout~=compact] .filepond--file-wrapper,.filepond--root[data-style-panel-layout~=integrated] .filepond--file-wrapper{height:100%}.filepond--root[data-style-panel-layout~=compact] .filepond--drop-label,.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label{z-index:7}.filepond--root[data-style-panel-layout~=circle]{border-radius:99999rem;overflow:hidden}.filepond--root[data-style-panel-layout~=circle]>.filepond--panel{border-radius:inherit}.filepond--root[data-style-panel-layout~=circle]>.filepond--panel>*{display:none}.filepond--root[data-style-panel-layout~=circle] .filepond--file-info,.filepond--root[data-style-panel-layout~=circle] .filepond--file-status{display:none}.filepond--root[data-style-panel-layout~=circle] .filepond--action-edit-item{opacity:1!important;visibility:visible!important}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.filepond--root[data-style-panel-layout~=circle]{will-change:transform}}}.filepond--panel-root{border-radius:.5em;background-color:#f1f0ef}.filepond--panel{position:absolute;left:0;top:0;right:0;margin:0;height:100%!important;pointer-events:none}.filepond-panel:not([data-scalable=false]){height:auto!important}.filepond--panel[data-scalable=false]>div{display:none}.filepond--panel[data-scalable=true]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;background-color:transparent!important;border:none!important}.filepond--panel-bottom,.filepond--panel-center,.filepond--panel-top{position:absolute;left:0;top:0;right:0;margin:0;padding:0}.filepond--panel-bottom,.filepond--panel-top{height:.5em}.filepond--panel-top{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;border-bottom:none!important}.filepond--panel-top:after{content:\"\";position:absolute;height:2px;left:0;right:0;bottom:-1px;background-color:inherit}.filepond--panel-bottom,.filepond--panel-center{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:translate3d(0,.5em,0);transform:translate3d(0,.5em,0)}.filepond--panel-bottom{border-top-left-radius:0!important;border-top-right-radius:0!important;border-top:none!important}.filepond--panel-bottom:before{content:\"\";position:absolute;height:2px;left:0;right:0;top:-1px;background-color:inherit}.filepond--panel-center{height:100px!important;border-top:none!important;border-bottom:none!important;border-radius:0!important}.filepond--panel-center:not([style]){visibility:hidden}.filepond--progress-indicator{position:static;width:1.25em;height:1.25em;color:#fff;margin:0;pointer-events:none;will-change:transform,opacity}.filepond--progress-indicator svg{width:100%;height:100%;vertical-align:top;transform-box:fill-box}.filepond--progress-indicator path{fill:none;stroke:currentColor}.filepond--list-scroller{z-index:6}.filepond--drop-label{z-index:5}.filepond--drip{z-index:3}.filepond--root>.filepond--panel{z-index:2}.filepond--browser{z-index:1}.filepond--root{box-sizing:border-box;position:relative;margin-bottom:1em;font-size:1rem;line-height:normal;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:450;text-align:left;text-rendering:optimizeLegibility;direction:ltr;contain:layout style size}.filepond--root *{box-sizing:inherit;line-height:inherit}.filepond--root :not(text){font-size:inherit}.filepond--root[data-disabled]{pointer-events:none}.filepond--root[data-disabled] .filepond--list-scroller{pointer-events:all}.filepond--root[data-disabled] .filepond--list{pointer-events:none}.filepond--root .filepond--drop-label{min-height:4.75em}.filepond--root .filepond--list-scroller{margin-top:1em;margin-bottom:1em}.filepond--root .filepond--credits{position:absolute;right:0;opacity:.4;line-height:.85;font-size:11px;color:inherit;text-decoration:none;z-index:3;bottom:-14px}.filepond--root .filepond--credits[style]{top:0;bottom:auto;margin-top:14px}\n/*!\n * FilePondPluginImagePreview 4.6.12\n * Licensed under MIT, https://opensource.org/licenses/MIT/\n * Please visit https://pqina.nl/filepond/ for details.\n */\n\n/* eslint-disable */\n.filepond--image-preview-markup {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.filepond--image-preview-wrapper {\n  z-index: 2;\n}\n.filepond--image-preview-overlay {\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  min-height: 5rem;\n  max-height: 7rem;\n  margin: 0;\n  opacity: 0;\n  z-index: 2;\n  pointer-events: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.filepond--image-preview-overlay svg {\n  width: 100%;\n  height: auto;\n  color: inherit;\n  max-height: inherit;\n}\n.filepond--image-preview-overlay-idle {\n  mix-blend-mode: multiply;\n  color: rgba(40, 40, 40, 0.85);\n}\n.filepond--image-preview-overlay-success {\n  mix-blend-mode: normal;\n  color: rgba(54, 151, 99, 1);\n}\n.filepond--image-preview-overlay-failure {\n  mix-blend-mode: normal;\n  color: rgba(196, 78, 71, 1);\n}\n/* disable for Safari as mix-blend-mode causes the overflow:hidden of the parent container to not work */\n@supports (-webkit-marquee-repetition: infinite) and\n  ((-o-object-fit: fill) or (object-fit: fill)) {\n  .filepond--image-preview-overlay-idle {\n    mix-blend-mode: normal;\n  }\n}\n.filepond--image-preview-wrapper {\n  /* no interaction */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n  /* have preview fill up all available space */\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  height: 100%;\n  margin: 0;\n\n  /* radius is .05em less to prevent the panel background color from shining through */\n  border-radius: 0.45em;\n  overflow: hidden;\n\n  /* this seems to prevent Chrome from redrawing this layer constantly */\n  background: rgba(0, 0, 0, 0.01);\n}\n.filepond--image-preview {\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  display: flex; /* this aligns the graphic vertically if the panel is higher than the image */\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  background: #222;\n\n  /* will be animated */\n  will-change: transform, opacity;\n}\n.filepond--image-clip {\n  position: relative;\n  overflow: hidden;\n  margin: 0 auto;\n\n  /* transparency indicator (currently only supports grid or basic color) */\n}\n.filepond--image-clip[data-transparency-indicator='grid'] img,\n.filepond--image-clip[data-transparency-indicator='grid'] canvas {\n  background-color: #fff;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M0 0 H50 V50 H0'/%3E%3Cpath d='M50 50 H100 V100 H50'/%3E%3C/svg%3E\");\n  background-size: 1.25em 1.25em;\n}\n.filepond--image-bitmap,\n.filepond--image-vector {\n  position: absolute;\n  left: 0;\n  top: 0;\n  will-change: transform;\n}\n.filepond--root[data-style-panel-layout~='integrated']\n  .filepond--image-preview-wrapper {\n  border-radius: 0;\n}\n.filepond--root[data-style-panel-layout~='integrated']\n  .filepond--image-preview {\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.filepond--root[data-style-panel-layout~='circle']\n  .filepond--image-preview-wrapper {\n  border-radius: 99999rem;\n}\n.filepond--root[data-style-panel-layout~='circle']\n  .filepond--image-preview-overlay {\n  top: auto;\n  bottom: 0;\n  -webkit-transform: scaleY(-1);\n  transform: scaleY(-1);\n}\n.filepond--root[data-style-panel-layout~='circle']\n  .filepond--file\n  .filepond--file-action-button[data-align*='bottom']:not([data-align*='center']) {\n  margin-bottom: 0.325em;\n}\n.filepond--root[data-style-panel-layout~='circle']\n  .filepond--file\n  [data-align*='left'] {\n  left: calc(50% - 3em);\n}\n.filepond--root[data-style-panel-layout~='circle']\n  .filepond--file\n  [data-align*='right'] {\n  right: calc(50% - 3em);\n}\n.filepond--root[data-style-panel-layout~='circle']\n  .filepond--progress-indicator[data-align*='bottom'][data-align*='left'],\n.filepond--root[data-style-panel-layout~='circle']\n  .filepond--progress-indicator[data-align*='bottom'][data-align*='right'] {\n  margin-bottom: calc(0.325em + 0.1875em);\n}\n.filepond--root[data-style-panel-layout~='circle']\n  .filepond--progress-indicator[data-align*='bottom'][data-align*='center'] {\n  margin-top: 0;\n  margin-bottom: 0.1875em;\n  margin-left: 0.1875em;\n}\n\n/*!\n * FilePondPluginImageEdit 1.6.3\n * Licensed under MIT, https://opensource.org/licenses/MIT/\n * Please visit https://pqina.nl/filepond/ for details.\n */\n\n/* eslint-disable */\n.filepond--action-edit-item.filepond--action-edit-item {\n  width: 2em;\n  height: 2em;\n  padding: 0.1875em;\n}\n\n.filepond--action-edit-item.filepond--action-edit-item[data-align*='center'] {\n  margin-left: -0.1875em;\n}\n\n.filepond--action-edit-item.filepond--action-edit-item[data-align*='bottom'] {\n  margin-bottom: -0.1875em;\n}\n\n.filepond--action-edit-item-alt {\n  border: none;\n  line-height: inherit;\n  background: transparent;\n  font-family: inherit;\n  color: inherit;\n  outline: none;\n  padding: 0;\n  margin: 0 0 0 0.25em;\n  pointer-events: all;\n  position: absolute;\n}\n\n.filepond--action-edit-item-alt svg {\n  width: 1.3125em;\n  height: 1.3125em;\n}\n\n.filepond--action-edit-item-alt span {\n  font-size: 0;\n  opacity: 0;\n}\n.filepond--root[data-style-panel-layout~='circle'] .filepond--action-edit-item {\n  opacity: 1 !important;\n  visibility: visible !important;\n}\n\n.s-file-upload-wrapper .filepond--file-info-main {\n  -webkit-line-clamp: 1;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n.s-file-upload-has-gallery.s-file-upload-multiple .filepond--list-scroller {\n  display: none !important;\n}\n.s-file-upload-has-gallery.s-file-upload-multiple .filepond--drop-label:not(.s-hidden) {\n  cursor: pointer;\n}\n.s-file-upload-has-gallery.s-file-upload-multiple.s-file-upload-at-max .filepond--root {\n  min-height: 120px;\n}\n.s-file-upload-has-gallery.s-file-upload-multiple .filepond--drop-label.s-file-upload-drop-label-disabled {\n  visibility: visible !important;\n  opacity: 0.55 !important;\n  transform: none !important;\n  height: auto !important;\n  min-height: 4.75em !important;\n  pointer-events: none !important;\n  cursor: not-allowed;\n}\n.s-file-upload-has-gallery.s-file-upload-multiple .filepond--drop-label.s-file-upload-drop-label-disabled label {\n  opacity: 1 !important;\n}\n.s-file-upload-wrapper .filepond--root[data-disabled] .filepond--drop-label label {\n  opacity: 0.55;\n}\n.s-file-upload-gallery {\n  --s-file-upload-preview-size: 75px;\n  --s-file-upload-remove-size: 18px;\n  --s-file-upload-remove-icon-size: 10px;\n  --s-file-upload-gallery-gap: 12px;\n  position: relative;\n  margin-top: 0.5rem;\n  padding-top: calc(var(--s-file-upload-remove-size) / 2);\n  padding-inline-end: calc(var(--s-file-upload-remove-size) / 2);\n  overflow: visible;\n}\n.s-file-upload-gallery-track {\n  display: flex;\n  gap: var(--s-file-upload-gallery-gap);\n  width: 100%;\n  min-height: var(--s-file-upload-preview-size);\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  padding-bottom: 0.25rem;\n}\n.s-file-upload-gallery-item {\n  position: relative;\n  display: block;\n  width: var(--s-file-upload-preview-size);\n  height: var(--s-file-upload-preview-size);\n  flex-shrink: 0;\n  overflow: visible;\n}\n.s-file-upload-gallery-thumb {\n  width: var(--s-file-upload-preview-size);\n  height: var(--s-file-upload-preview-size);\n  aspect-ratio: 1/1;\n  border-radius: 0.375rem;\n  overflow: hidden;\n  background-color: #f3f4f6;\n  cursor: pointer;\n  position: relative;\n  border: 1px solid #e5e7eb;\n  box-sizing: border-box;\n}\n.s-file-upload-gallery-thumb.is-processing {\n  opacity: 0.7;\n}\n.s-file-upload-gallery-thumb img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  aspect-ratio: 1/1;\n  object-fit: cover;\n}\n.s-file-upload-gallery-thumb video.s-file-upload-gallery-video-thumb {\n  display: block;\n  width: 100%;\n  height: 100%;\n  aspect-ratio: 1/1;\n  object-fit: cover;\n  pointer-events: none;\n}\n.s-file-upload-gallery-remove {\n  position: absolute;\n  top: 0;\n  inset-inline-end: 0;\n  inset-inline-start: auto;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--s-file-upload-remove-size);\n  height: var(--s-file-upload-remove-size);\n  padding: 0;\n  line-height: 1;\n  border-radius: 9999px;\n  background-color: #fff;\n  border: 1px solid #9ca3af;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n  cursor: pointer;\n}\n.s-file-upload-gallery-remove:hover {\n  background-color: #f9fafb;\n}\n.s-file-upload-gallery-remove svg {\n  display: block;\n  width: var(--s-file-upload-remove-icon-size);\n  height: var(--s-file-upload-remove-icon-size);\n  fill: #1f2937;\n  pointer-events: none;\n}\n.s-file-upload-gallery-video-icon {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(0, 0, 0, 0.2);\n  pointer-events: none;\n}\n.s-file-upload-gallery-video-icon svg {\n  width: calc(var(--s-file-upload-preview-size) * 0.28);\n  height: calc(var(--s-file-upload-preview-size) * 0.28);\n  max-width: 2rem;\n  max-height: 2rem;\n  fill: #fff;\n  opacity: 0.9;\n}\n.visible{\n  visibility: visible;\n}\n.fixed{\n  position: fixed;\n}\n.relative{\n  position: relative;\n}\n.grid{\n  display: grid;\n}\n.hidden{\n  display: none;\n}\n.transform{\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.resize{\n  resize: both;\n}\n.ps-2{\n  padding-inline-start: 0.5rem;\n}\n.filter{\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.s-hidden{\n  display: none;\n}\n.s-scrollbar::-webkit-scrollbar{\n  width: 5px;\n}\n.s-scrollbar::-webkit-scrollbar-track{\n  background-color: #eee;\n}\n.s-scrollbar::-webkit-scrollbar-thumb{\n  background-color: var(--color-primary);\n  border-radius: 10px;\n  -webkit-border-radius: 10px;\n  -moz-border-radius: 10px;\n  -ms-border-radius: 10px;\n  -o-border-radius: 10px;\n}\n.s-file-upload-wrapper .filepond--drop-label{\n  height: 100%;\n  cursor: pointer;\n  border-radius: var(--s-radius, 0.25rem);\n  border-width: 1px;\n  border-style: dashed;\n  --tw-border-opacity: 1;\n  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.s-file-upload-wrapper .filepond--drop-label label{\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n  font-family: var(--font-main), -apple-system, BlinkMacSystemFont;\n}\n.s-file-upload-wrapper .filepond--label-action{\n  text-decoration-color: #6b7280;\n}\n.s-file-upload-wrapper .filepond--panel-root{\n  border-radius: var(--s-radius, 0.25rem);\n  --tw-bg-opacity: 1 !important;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important;\n}\n.s-file-upload-profile-image .filepond--panel-root{\n  border-radius: 9999px !important;\n}\n.s-file-upload:not(.s-file-upload-multiple) .s-file-upload-wrapper .filepond--list-scroller{\n  overflow-y: inherit !important;\n  overflow: inherit !important;\n  margin: 0 !important;\n  cursor: pointer !important;\n}\n.filepond--root{\n  min-height: 120px !important;\n  font-family: inherit !important;\n}\n.s-file-upload-wrapper .filepond--item-panel{\n  --tw-bg-opacity: 1;\n  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));\n}\n.s-file-upload-wrapper .filepond--drip-blob{\n  --tw-bg-opacity: 1;\n  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));\n}\n.s-file-upload-wrapper .filepond--list{\n  left: 0px;\n  width: 100%;\n}\n.s-file-upload-wrapper .filepond--file-poster-wrapper{\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  right: 0px;\n  margin: 0px;\n  display: flex;\n  height: 100%;\n  width: 100%;\n  user-select: none;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 0.45em;\n  background-color: #00000003;\n}\n.s-file-upload-wrapper .filepond--file-poster{\n  position: absolute;\n  display: flex;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n}\n.s-file-upload-wrapper .filepond--file-poster-overlay{\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n}\n.s-file-upload-wrapper .filepond--item{\n  margin: 0px;\n}\n.s-file-upload-wrapper .filepond--file-info{\n  margin: 0px;\n}\n.s-file-upload-wrapper .filepond--file-info-main{\n  width: 85px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: normal;\n  font-size: 0.75em;\n  line-height: 1.2;\n}\n.s-file-upload-wrapper .filepond--file-status{\n  width: 55%;\n}\n.s-file-upload-wrapper .filepond--file-status:where([dir=\"rtl\"], [dir=\"rtl\"] *){\n  margin-right: 35px;\n}\n@media (min-width: 768px){\n  .s-file-upload-wrapper .filepond--file-status:where([dir=\"rtl\"], [dir=\"rtl\"] *){\n    margin-right: 2.25em;\n  }\n}\n.s-file-upload-wrapper .filepond--file-status .filepond--file-status-sub{\n  width: 275px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.s-file-upload-profile-image .filepond--root{\n  height: 80px;\n  min-height: 80px !important;\n  width: 80px;\n  border-radius: 9999px !important;\n}\n.s-file-upload-profile-image .filepond--drop-label{\n  z-index: 7;\n  min-height: 70px !important;\n  border-radius: 9999px !important;\n  border-style: none;\n}\n.s-file-upload-profile-image .filepond--drop-label label{\n  cursor: pointer;\n  padding-top: 20px;\n  padding-bottom: 20px;\n  padding-left: 6px;\n  padding-right: 6px;\n  font-size: 0.8rem;\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n  font-family: var(--font-main), -apple-system, BlinkMacSystemFont;\n}\n.s-file-upload-profile-image .filepond--file{\n  padding: 0px;\n}\n.s-file-upload-profile-image .filepond--file .filepond--action-remove-item{\n  top: auto !important;\n  bottom: -4px;\n  left: 50%;\n  transform: translateX(-50%) translateY(25%) !important;\n  background-color: rgba(255,68,58,.7);\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  transition: 0.3s;\n}\n.s-file-upload-profile-image .filepond--file .filepond--action-remove-item:hover{\n  background-color: #FF443A;\n}\n.s-file-upload-profile-image .filepond--file .filepond--file-action-button{\n  top: 28px;\n  right: 28px;\n}\n.s-file-upload-profile-image .filepond--file .filepond--progress-indicator,.s-file-upload-profile-image .filepond--file .filepond--load-indicator,.s-file-upload-profile-image .filepond--file .filepond--processing-complete-indicator{\n  top: 48% !important;\n  right: 50%;\n  left: auto;\n  transform: translateX(50%) translateY(-50%);\n}\n.s-file-upload-profile-image .filepond--item-panel{\n  background-color: transparent !important;\n}\n.s-file-upload-.s-file-upload-profile-image .filepond--item-panel .filepond--panel-top,.s-file-upload-profile-image .filepond--item-panel .filepond--panel-center,.s-file-upload-profile-image .filepond--item-panel .filepond--panel-bottom{\n  display: none;\n}\n.s-file-upload-profile-image .filepond--file-poster-overlay{\n  display: none;\n}\n.s-file-upload-profile-image .filepond--item{\n  margin: 0px !important;\n  height: 5rem !important;\n}\n.s-file-upload-profile-image .filepond--file-poster{\n  height: 100%;\n  width: 100%;\n}\n.s-file-upload-profile-image .filepond--file-status{\n  display: none;\n}\n.s-file-upload-profile-image .filepond--image-preview-overlay-success{\n  top: auto;\n  bottom: 0px;\n  --tw-scale-y: -1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.s-file-upload-profile-image .filepond--image-preview-wrapper{\n  border-radius: 9999px;\n}\n.s-file-upload-profile-image .filepond--file-info{\n  display: none;\n}\n.s-file-upload-profile-image .filepond--list{\n  left: 0px;\n  right: 0px;\n  height: 100%;\n}\n.s-file-upload-profile-image .filepond--file-poster img{\n  height: 100%;\n  width: 100%;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n.s-file-upload-profile-image .filepond--file-poster-wrapper{\n  overflow: hidden;\n  border-radius: 9999px;\n}\n.s-file-upload-profile-image .s-file-upload-has-error .filepond--file-status{\n  position: absolute;\n  bottom: -62%;\n  left: -190%;\n  display: flex !important;\n  height: auto;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.s-file-upload-multiple .filepond--root{\n  max-height: 120px;\n}\n.s-file-upload-multiple .filepond--list-scroller{\n  top: 0px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n  height: 100%;\n  overflow-y: scroll;\n}\n.s-file-upload-multiple .filepond--drop-label:not(.s-hidden) + .filepond--list-scroller{\n  display: none;\n}\n.s-file-upload-multiple .filepond--item{\n  @media(min-width: 767px){\n    width: calc(33.33% - .5em);\n    margin-left: .3em !important;\n  }\n  @media(max-width: 767px){\n    margin-bottom: .3em;\n  }\n}\n.s-file-upload-hint{\n  margin-top: -15px;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.s-product-options-image-input .s-file-upload-wrapper{\n  min-height: 120px;\n}\n";
 
 const VIDEO_METADATA_TIMEOUT_MS = 10000;
+// store feature (`store.features`) that switches profile avatars to the `upload` endpoint + url-only `profile/update`
+const AVATAR_UPLOAD_FEATURE = 'avatar-upload-endpoint';
 const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload extends HTMLElement {
     /**
      * Lazy load FilePond and all plugins
@@ -50,6 +53,12 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
         this.removed = createEvent(this, "removed", 7);
         this.galleryUpdated = createEvent(this, "galleryUpdated", 7);
         this.filePondLoaded = false;
+        /** true when the uploaded url must be saved on the profile as the avatar (avatar upload endpoint flag is on) */
+        this.savesAvatarOnUpload = false;
+        /** the profile image uses the default `profile/update` url (no custom `url` given) */
+        this.usesDefaultProfileUrl = false;
+        this.avatarSaveGeneration = 0; // bumped when the avatar is removed, so pending saves are dropped
+        this.avatarSaveQueue = Promise.resolve();
         this.max_images_count = (count) => salla.lang.get('common.uploader.max_images_count', { count });
         this.max_videos_count = (count) => salla.lang.get('common.uploader.max_videos_count', { count });
         this.max_count_hint = (count) => salla.lang.get('common.uploader.max_count_hint', { count });
@@ -201,14 +210,19 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
             this.instantUpload = true;
         }
         if (!this.url && this.profileImage) {
+            // default: the file goes straight to `profile/update`. With the `avatar-upload-endpoint` store feature
+            // the url is switched to the `upload` endpoint once the store features are known (see componentDidLoad).
             this.url = salla.url.api('profile/update');
             this.instantUpload = true;
             this.host.hasAttribute('name') || (this.name = 'avatar');
+            this.usesDefaultProfileUrl = true;
         }
         if (!this.name) {
             this.name = 'file';
         }
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.host.querySelectorAll('.filepond--drop-label>label').forEach(label => label.innerHTML = this.getLabel());
             if (this.filepond) {
                 this.filepond.labelFileTypeNotAllowed = salla.lang.get('common.uploader.invalid_type');
@@ -229,7 +243,7 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
             }
             const setNestedAsync = (lang, key, value) => {
                 return new Promise((resolve) => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    setTranslationDefault(lang, key, value);
                     resolve(true);
                 });
             };
@@ -561,6 +575,19 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
     notifyUploadError(error, file) {
         salla.notify?.error?.(this.getUploadErrorMessageForFile(error, file));
     }
+    /**
+     * Save an already uploaded avatar url on the customer profile (text-only request).
+     */
+    async saveProfileAvatar(url) {
+        try {
+            await salla.profile.update({ avatar: url });
+            return true;
+        }
+        catch (error) {
+            salla.notify?.error?.(error?.response?.data?.error?.message || salla.lang.get('common.errors.error_occurred'));
+            return false;
+        }
+    }
     removeFailedFile(file) {
         if (!this.filepond?.getFiles().some(pondFile => pondFile.id === file.id)) {
             return;
@@ -893,6 +920,7 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
         }
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.previewFilesSyncRaf != null) {
             cancelAnimationFrame(this.previewFilesSyncRaf);
             this.previewFilesSyncRaf = null;
@@ -900,16 +928,23 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
         this.revokeAllPreviewObjectUrls();
     }
     render() {
-        return (h(Host, { key: '77ac3b040e8c7e2b3dcc0957cbb761675b667a83', class: {
+        return (h(Host, { key: 'af7edd83879313df0a142890044c2bb02d5de73b', class: {
                 "s-file-upload": true,
                 "s-file-upload-profile-image": this.profileImage,
                 "s-file-upload-multiple": this.allowMultiple,
                 "s-file-upload-has-gallery": this.usesGalleryPreview(),
-            } }, h("input", { key: '8fdb2cc6f73427929a77a985018e5fc7df7cbd88', type: "file", name: this.name, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.getTotalMaxFiles())) : '', h("input", { key: 'dfc1c8e1315c8a73685b24cd869f8df47ac42a35', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.getHiddenInputValue(), ref: input => this.hiddenInput = input }), this.renderPreviewGallery()));
+            } }, h("input", { key: 'ea630bd56caac801e7f69f602d3553321cd81b17', type: "file", name: this.name, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.getTotalMaxFiles())) : '', h("input", { key: '884b42abe4b9cd832ab1d078af93c9cbe4164112', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.getHiddenInputValue(), ref: input => this.hiddenInput = input }), this.renderPreviewGallery()));
     }
     async componentDidLoad() {
         await Salla.onReady();
         await Salla.lang.onLoaded();
+        if (this.usesDefaultProfileUrl && Salla.config.get('store.features', []).includes(AVATAR_UPLOAD_FEATURE)) {
+            // Avatars are uploaded to the store `upload` endpoint first (`files[]` + `type`, images only),
+            // then saved on the profile as a plain URL, so `profile/update` never receives a file part.
+            this.url = salla.url.api('upload');
+            this.host.hasAttribute('accept') || (this.accept = 'image/png, image/jpeg, image/jpg'); // upload only allows jpg/png
+            this.savesAvatarOnUpload = true;
+        }
         if (this.profileImage && !this.value) {
             this.value = Salla.config.get('user.avatar');
         }
@@ -1005,6 +1040,9 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
                 }
             },
             onremovefile: (_error, file) => {
+                if (this.savesAvatarOnUpload) {
+                    this.avatarSaveGeneration++;
+                }
                 if (this.usesGalleryPreview()) {
                     if (file) {
                         this.emitRemovedFile(file);
@@ -1061,6 +1099,26 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
                         catch {
                             return null;
                         }
+                        if (this.savesAvatarOnUpload) {
+                            // `upload` answers with a list of urls
+                            const item = Array.isArray(responseData) ? responseData[0] : responseData;
+                            const avatarUrl = typeof item === 'object' && item !== null ? item.filePath || item.url : item;
+                            if (!this.isValidUploadResult(avatarUrl))
+                                return null;
+                            const generation = this.avatarSaveGeneration;
+                            // saves run one after the other so an older upload can never overwrite a newer one
+                            this.avatarSaveQueue = this.avatarSaveQueue.then(async () => {
+                                if (generation !== this.avatarSaveGeneration)
+                                    return; // removed while waiting in the queue
+                                const saved = await this.saveProfileAvatar(avatarUrl);
+                                // expose the value and emit `uploaded` only once the profile holds this avatar (unless it was removed meanwhile)
+                                if (saved && generation === this.avatarSaveGeneration) {
+                                    this.value = { id: this.generateUploadFileId(), url: avatarUrl };
+                                    this.uploadedHandler();
+                                }
+                            });
+                            return avatarUrl;
+                        }
                         if ((this.instantUpload || this.allowMultiple) && Array.isArray(responseData) && responseData.length > 0) {
                             const item = responseData[0];
                             const fileUrl = typeof item === 'object' && item !== null ? item.filePath || item.url : item;
@@ -1103,7 +1161,13 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
                         }
                     },
                     ondata: formData => {
-                        if (this.allowMultiple) {
+                        if (this.savesAvatarOnUpload) {
+                            const avatarFormData = new FormData();
+                            formData.forEach((value) => avatarFormData.append('files[]', value));
+                            avatarFormData.append('type', 'avatar');
+                            formData = avatarFormData; // continue below so `payloadParams` / `formData` are still applied
+                        }
+                        else if (this.allowMultiple) {
                             const newFormData = new FormData();
                             // ? This line suppose to send all files in one request but its not working properly
                             // const filesArray = this.filepond.getFiles().map(file => file.file);

package/dist/components/salla-filters-widget2.js

@@ -32,11 +32,14 @@ const SallaFiltersWidget = /*@__PURE__*/ proxyCustomElement(class SallaFiltersWi
         salla.onReady(() => {
             this.page = salla.config.get('page');
         });
-        salla.lang.onLoaded(() => {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel);
             this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel);
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     componentDidLoad() {
         // Use fixed height per item for predictable calculations
         // Each item is approximately 20px, so we calculate based on item count
@@ -178,12 +181,12 @@ const SallaFiltersWidget = /*@__PURE__*/ proxyCustomElement(class SallaFiltersWi
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: 'd3d9731c163a78609bb1a2f4b01ef6c3db4fc7dc', class: "s-filters-widget-container" }, h("h3", { key: 'bf1c5a033860416035ad7c74f4d9082f4c8de282', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '2a94d9a6500b3137900136fd052c731f63b0acae' }, this.option.label), h("span", { key: '69b28fcad8ebc564dbbe907a4eb4044a0ee9d6ad', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'fa20429b6b3399275eecbcac390d8895c3b01350', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '98c869541f0a1d61725048296af6296e603cfa2c', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: 'f5310cfdad6980e5d991bd03934d5c1a4a014f10', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '317bb4bcfae88596f8a8737b2454f5f2ecae5b0d', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '8620064a3526e686b95a0c21e39f5b15a8ea3133' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: '1e0a234fe279cd77dbdb957d1e9852d1f59b39f4', class: "s-filters-widget-container" }, h("h3", { key: 'b2b16a758d5e3c9fc97d2bfab8aee9e98cb3eae7', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: 'af2738f683dc3455adc99d6e271ed7c5217c9626' }, this.option.label), h("span", { key: '6dd325fe1977e7e1cc3e72de495bcef51a4978b4', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '87f90e444bc15193c631a6223b45b5d5d82b512c', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'bde65a20317127d415c66c06e6bc1d060f959751', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '3c06b2b5158b59652a8f91649e18922111ba8f55', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: 'b38f4c7033259152e950d3c86ee17aeea1fcfcb8', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '58a69066c1fd57b3f2d034d883b3c20c14df6154' }), this.option.type !== FilterOptionTypes.RANGE
             ? this.renderFilterOption(this.option)
             : h("salla-price-range", { onChanged: (event) => {
                     this.changed.emit(event.detail);
                 }, ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore && (!this.searchQuery || this.filteredCount > this.initialItemCount) &&
-            h("a", { key: '8c9c93c3579578f1da4fe676d4758c0bbb5b4e21', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: '5124f0e1f14cdec0af61106161b769d67dc8f82f', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     get host() { return this; }
     static get style() { return sallaFiltersWidgetCss; }

package/dist/components/salla-filters.js

@@ -19,9 +19,6 @@ const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters exten
         this.isInitialFetch = true; //the base-category auto-append may only run on the first filters::fetched
         this.filtersData = {};
         salla.event.on('filters::hidden', () => this.host.style.display = 'none');
-        salla.lang.onLoaded(() => {
-            this.apply = salla.lang.get('pages.checkout.apply');
-        });
         salla.event.on('filters::fetched', ({ filters }) => {
             this.host.style.display = '';
             let freshFilterData = {};
@@ -59,6 +56,14 @@ const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters exten
             this.host.childNodes.forEach(async (widget) => widget.setWidgetHeight && await widget.setWidgetHeight());
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.apply = salla.lang.get('pages.checkout.apply');
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async componentWillLoad() {
         try {
             const searchParams = new URLSearchParams(window.location.search);
@@ -220,7 +225,7 @@ const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters exten
         this.applyFilters();
     }
     render() {
-        return h(Host, { key: 'ef7f2cf7241193cb8b2fe24fdb0713d8c92c04c9' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+        return h(Host, { key: '7e2df6367c28317e81c8904d545e79f39e80f132' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
                 this.handleOptionChange(event, option, value);
             } })));
     }

package/dist/components/salla-gifting.js

@@ -136,7 +136,12 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
         };
         this.handleCountryDropdownClosed = () => { };
         this.handleRegionDropdownClosed = () => { };
-        salla.lang.onLoaded(() => {
+        salla.event.on(this.defaultEvent, () => {
+            this.open();
+        });
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.selectImageOrUpload = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
             this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
             this.sectionTitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love');
@@ -170,9 +175,9 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
             this.donationRequired = salla.lang.get('pages.products.donation_amount_required');
             this.currentLang = salla.lang.locale;
         });
-        salla.event.on(this.defaultEvent, () => {
-            this.open();
-        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
     }
     isPhysical() {
         return this.physicalProducts || this.physical;
@@ -884,7 +889,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
     }
     render() {
         return [
-            h("div", { key: '02f095cd71654941cc3d11f9c9be13e019247992' }, h("salla-list-tile", { key: '5dfefabc5e6fcb2f0193bf11dcd324c517b0e649', class: this.generateClass() }, h("div", { key: '35b5b8cbf54ccbf9368cdc95d2e0505ca317a555', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: '2399e07a06a808b396cf57a5233be97938e7b9b5' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '12f460ce1df5e294e77b25e07d00d85370b2b939', slot: "subtitle" }, h("div", { key: '28fd4125c6f18fb976bc271ffc7c731683757bfb' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '2ccb5745341390a9aeb80c56b4d7bb171cc2940e', slot: "action" }, h("salla-button", { key: '4e74313bd4020ae32a1c2ba30b0133da0aaf410a', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '85ef811160f391d2fc456b13a89120407d6e4c36', name: "widget-btn-content" }, h("div", { key: '6d4d1162f7147488f8ce11d7da1bf7b82bc407b0', class: "s-gifting-widget-action-content" }, h("span", { key: 'e7aa877309bc7346fe56227365ad75c0d7c1a8dc', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: '5c7f1a43fa84e8e5ba74a449063fc89576626db2' }, this.sectionBtnText)))))), h("salla-modal", { key: '1de82b1f9a7fc49321eb766b1451eacd2d210480', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'f3a97db3aa3a2591a1d391af61efa15ab76f1c8c', slot: "loading" }, h("div", { key: '67fb44c701b3f2771e041b91a2a438a0419ed4dd', class: "s-gifting-skeleton" }, h("div", { key: '70b2841fbafff80879cf2d68550cc9659da140a2', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '8d337e1bfe29aea80e93ed2d1e172fa4fe23e1db', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'b8586d28a3dda5abbdbc341830560c157efb566c', class: "s-gifting-modal-title" }, h("div", { key: '956ec550fd7ddeb6b11f174b92d0133408f95165', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'f495e7ec761c8499efb7a6e7025bd205dca49f2c', height: '15px', width: '150px' })))), h("div", { key: '28e5ad1386cebcd93a5f9307bd812dca77a66188', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '951dbed5a03ab246d661dfd2a59ae099b468fa89', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f200d5a5a4a258fb0755b6adb48e25606ab93bb7', height: '230px' }), h("salla-skeleton", { key: '1b4f69321a13d1ddea4ad038bfad22385b3b51ed', height: '10px', width: '150px' }), h("salla-skeleton", { key: '5d9219d3826de28b8e585bada604bff60dfc80f8', height: '30px' }), h("salla-skeleton", { key: 'a248552e288bea2e9839f381ec2d96bdb0e53cdf', height: '40px' })))), h("slot", { key: '3c8f9965766d7ce17fb20b4df72a3e46c273b23a', name: "header" }), !!this.hasError ?
+            h("div", { key: '2b599846ae0abb92b699be0a3dbee0d3d5f3638a' }, h("salla-list-tile", { key: '1f08c01b96dab20e82a3260e23836d56f5bcf630', class: this.generateClass() }, h("div", { key: '1f4d04b7112be42587fc35a9fa6c322321a92482', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: '8ce56efcb34d19433babde1f191e4301f4c2c8d0' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '6f035a3ee40a77a554492bde74bc834caa2e9a9a', slot: "subtitle" }, h("div", { key: '1e454d9ae0b95fd5b4ee05401f3edf0161338d43' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '98df402ea7ddda379fe10897453e61acf3166559', slot: "action" }, h("salla-button", { key: '7d7c49e3d0749cf8ed86ce17709f718fece6349c', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '6411376640ba3de3d36277981e04253fdcaaf135', name: "widget-btn-content" }, h("div", { key: '8fef0671cfa1335d6a5ab028c2fc0e978eaa11e2', class: "s-gifting-widget-action-content" }, h("span", { key: '820674db5e37dd1f3e1c3f7708bff7396955960a', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: 'ef3ee899f2231863f984ca13708382e273e38e0a' }, this.sectionBtnText)))))), h("salla-modal", { key: '0728b976c0f20f3713c9363e1c06b9da528da9ca', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '924fad1dbb5cb1ff039328bed201c07608b5e95d', slot: "loading" }, h("div", { key: '35907d0949afb5ed389fc2ee147ef73f388dc962', class: "s-gifting-skeleton" }, h("div", { key: 'c2252de89f09c4bfc1e2691b6da246408cd98003', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '1440fcf0b2dc5c3dd1d209604636bca1d68b2fd2', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '80527a48ec97624873100e91806d206194f4666c', class: "s-gifting-modal-title" }, h("div", { key: '095732ce0ca81c125ff7664e215c4a286bba4cd6', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '9e385f2e21fa305782d7c7d40df31498dfab856d', height: '15px', width: '150px' })))), h("div", { key: 'e530926826192430f094cd227a11bb9c6aee38f7', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '35a5d4bd57461b5edf69c19f27a85da2131b0545', height: '10px', width: '150px' }), h("salla-skeleton", { key: '747893f9ab1cc35d7fccb62dbd64e7a3a57b4a98', height: '230px' }), h("salla-skeleton", { key: '80ddf6036a735901a1295c3abd5e208c0cc92ca7', height: '10px', width: '150px' }), h("salla-skeleton", { key: '98720c569e326a5d2d04a37839d2064688f00a47', height: '30px' }), h("salla-skeleton", { key: '65f9deca24700906e43d34612b01ed95c86fae00', height: '40px' })))), h("slot", { key: '82e3b8afc2a736bdee08ef906a1824fc4a16ce5a', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -907,7 +912,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() && this.cityNoticeText() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.cityNoticeText())), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, !this.skipStep1() && h("a", { href: "#!", innerHTML: IconArrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '688de0af2e48acc0d91d128a321856197861eb16', name: "footer" })))
+                    ], h("slot", { key: '1d08c0a88ae9d95dd4c740d42451ddab1fffcfdc', name: "footer" })))
         ];
     }
     static get style() { return sallaGiftingCss; }

package/dist/components/salla-hook.js

@@ -17,7 +17,7 @@ const SallaHook$1 = /*@__PURE__*/ proxyCustomElement(class SallaHook extends HTM
         this.host.before(element);
     }
     render() {
-        return h(Host, { key: '579b0abf0784c9396f636da50b1fed156e5a0600' });
+        return h(Host, { key: '7784823f34808c715180741263cf7e7edf9c9d5f' });
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger

package/dist/components/salla-infinite-scroll.js

@@ -37,12 +37,17 @@ const SallaInfiniteScroll$1 = /*@__PURE__*/ proxyCustomElement(class SallaInfini
         <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
         this.btnLoader = this.status.querySelector('.s-button-loader');
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.status.querySelector('.s-button-text').innerHTML = this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more');
             this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
             this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     loading(isLoading = true) {
         let btnText = this.status.querySelector('.s-button-text');
         Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);

package/dist/components/salla-localization-modal.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$6 } from './salla-button2.js';
 import { d as defineCustomElement$5 } from './salla-loading2.js';
 import { d as defineCustomElement$4 } from './salla-modal2.js';
@@ -91,6 +91,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
         };
         //here we will used the currency code instead of the symbol when current language is not arabic
         this.arabicCurrencies = ["SAR", "AED", "KWD", "BHD", "QAR", "OMR", "EGP", "IQD", "LBP", "SYP", "TND", "DZD", "MAD", "YER"];
+        this.translationLoaded = false;
         this.languages = [];
         this.currencies = [];
         this.hasError = false;
@@ -110,6 +111,17 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
         this.languageSlot = this.host.querySelector('[slot="language"]')?.innerHTML || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span></label>';
         this.currencySlot = this.host.querySelector('[slot="currency"]')?.innerHTML || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{symbol}</small></label>';
     }
+    connectedCallback() {
+        // re-render whenever translations (re)load, so the labels read via salla.lang.get() stay current
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.translationLoaded = true;
+            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
+            forceUpdate(this);
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async componentWillLoad() {
         await Salla.onReady();
         await Salla.lang.onLoaded();
@@ -248,7 +260,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
             this.showTrigger
                 ? h("button", { type: "button", onClick: () => this.open(), class: "s-localization-modal-trigger-btn" }, h("span", null, this.getLanguageName()), h("span", { class: "s-localization-modal-trigger-separator" }, "|"), " ", h("span", { innerHTML: this.getCurrencySymbol() }))
                 : '',
-            h("salla-modal", { key: '1400a13aa9490e0f5f96259bea6bfcf3f98ee829', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: 'b31041e8d245ce30f41d4221418856e886200848', slot: 'loading' }, h("div", { key: '5531d672f7c5e8fb8a6b06fa5ae5328f4efcf3fe', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '61b8fa69733a4e970e1f72ef5b09e773781e45ae', width: '25%', height: '15px' }), h("div", { key: '20dd0f3444f0a6e05730266bf964b74f307e9aab', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '5b8b4b760f741e0cd56c07ff341205e9ec7fe4d3', width: '25%', height: '15px' }), h("div", { key: '0a3f5dbfca2d6cd81effef5d873e03c9aef57d0b', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: 'b068f327b3335b3f9154ac20f7f6de95864dde9a', height: '40px', width: '100%' }))), !!this.hasError ?
+            h("salla-modal", { key: '90691a08e6f504621d486093e0b4ce4dd6ade603', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '09c20e2dcf5840609eb6e1e124c2d8d3ceca0519', slot: 'loading' }, h("div", { key: '078f414c5c966000da4691000080912ab9e9d6e6', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: 'd34d24597d5dca4f6e987b82886749388e118454', width: '25%', height: '15px' }), h("div", { key: '5350cec15f6091450b297ed7114638440bd4da16', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '255dd34dc36801e78ea0dd83dd9825e58de3c20f', width: '25%', height: '15px' }), h("div", { key: '2f1d1acbb0734b72f6806d3ec229ffd8fc71f9f5', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '8ffa9e5ddfe05ca91032e29f24ef9eaedd73980d', height: '40px', width: '100%' }))), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
                 h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
                     h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
@@ -281,6 +293,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
         "language": [1537],
         "currency": [1537],
         "showTrigger": [1540, "show-trigger"],
+        "translationLoaded": [32],
         "languages": [32],
         "currencies": [32],
         "hasError": [32],

package/dist/components/salla-login-modal2.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-loading2.js';
 import { d as defineCustomElement$1 } from './salla-modal2.js';
 
-const sallaLoginModalCss = "/*!twlt*/iframe{-moz-transition:height 0.3s;-ms-transition:height 0.3s;-o-transition:height 0.3s;-webkit-transition:height 0.3s;transition:height 0.3s;width:100%}.inline{display:inline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";
+const sallaLoginModalCss = "/*!twlt*/iframe{-moz-transition:height 0.3s;-ms-transition:height 0.3s;-o-transition:height 0.3s;-webkit-transition:height 0.3s;transition:height 0.3s;width:100%}.visible{visibility:visible}.inline{display:inline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}";
 
 const SallaLoginModal = /*@__PURE__*/ proxyCustomElement(class SallaLoginModal extends HTMLElement {
     constructor() {
@@ -39,6 +39,7 @@ const SallaLoginModal = /*@__PURE__*/ proxyCustomElement(class SallaLoginModal e
         this.scrolling = 'no';
         this.direction = document.dir;
         this.canRenderIframe = false;
+        this.loginSucceeded = false;
         salla.event.on('login::open', (data) => this.onLoginOpen(data));
         salla.event.on('modal::close', (data) => {
             if (this.iframe)
@@ -133,6 +134,7 @@ const SallaLoginModal = /*@__PURE__*/ proxyCustomElement(class SallaLoginModal e
             }
             // temporary condition until we handle both cases separately
             if (action == 'authenticated' || action == 'authenticated_web_auth') {
+                this.loginSucceeded = true;
                 !value?.withoutClose && this.close();
                 return salla.auth.api.handlAfterAuthenticatedResponse(value, this.supportWebAuth)
                     .then(() => !(value?.withoutReload || this.withoutReload) && setTimeout(() => window.location.reload(), 1000));
@@ -186,6 +188,14 @@ const SallaLoginModal = /*@__PURE__*/ proxyCustomElement(class SallaLoginModal e
         // Fire an event if withoutReload is true
         return;
     }
+    /** Tell the listeners waiting for a login (e.g. `requireLoginThen`) that the popup was closed without one. */
+    onVisibilityChanged(visible) {
+        if (visible) {
+            this.loginSucceeded = false;
+            return;
+        }
+        !this.loginSucceeded && Salla.event.emit('salla-login::dismissed');
+    }
     close() {
         Salla.event.emit('salla-login::closing');
         this.modal.close();
@@ -237,6 +247,7 @@ const SallaLoginModal = /*@__PURE__*/ proxyCustomElement(class SallaLoginModal e
             }
         });
         if (token) {
+            this.loginSucceeded = true;
             this.modal.close();
             Salla.auth.event.tokenFetched(token);
             try {
@@ -351,7 +362,7 @@ const SallaLoginModal = /*@__PURE__*/ proxyCustomElement(class SallaLoginModal e
         if (this.inline) {
             return this.getLoginDom();
         }
-        return (h("salla-modal", { class: "s-login-modal", ref: modal => this.modal = modal, width: "xs" }, this.getLoginDom()));
+        return (h("salla-modal", { class: "s-login-modal", ref: modal => this.modal = modal, width: "xs", onModalVisibilityChanged: e => this.onVisibilityChanged(e.detail) }, this.getLoginDom()));
     }
     getLoginDom() {
         if (!this.canRenderIframe) {