npm - @shoper/phoenix_design_system - Versions diffs - 1.18.16-0 → 1.18.16-10 - Mend

@shoper/phoenix_design_system 1.18.16-0 → 1.18.16-10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED Viewed

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_elements_constants = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
@@ -44,6 +45,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this.noDeselect = false;
         this.assistiveTitleId = '';
         this.isDevSelectPlaceholderFlagEnabled = false;
+        this.isDevSelectPlaceholderTranslationFlagEnabled = false;
+        this.isReactiveSelectionFlagEnabled = false;
         this.translations = {};
         this._selectOptionsId = v4['default']();
         this._searchValue = '';
@@ -54,14 +57,42 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._$dropdownContent = ref_js.createRef();
         this.$dropdownToggler = ref_js.createRef();
         this._selectContext = new context_provider_controller.ContextProviderController(this);
+        this._onChildRendered = (ev) => {
+            const renderedEl = ev.detail && ev.detail.$el;
+            if (!renderedEl)
+                return;
+            const tag = renderedEl.tagName.toLowerCase();
+            if (tag === select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.toggler) {
+                // Prefer child's slot API if available
+                if (typeof renderedEl.getSlot === 'function' && renderedEl.hasSlot && renderedEl.hasSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) {
+                    const arr = renderedEl.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME);
+                    if (arr && arr.length) {
+                        const val = arr[0].values && arr[0].values[0];
+                        if (val) {
+                            this.$placeholder = val;
+                            this.requestUpdate();
+                            this.removeEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._onChildRendered);
+                            return;
+                        }
+                    }
+                }
+                // Fallback: try querySelector on the rendered element
+                const el = renderedEl.querySelector ? renderedEl.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`) : null;
+                if (el) {
+                    this.$placeholder = el;
+                    this.requestUpdate();
+                    this.removeEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._onChildRendered);
+                }
+            }
+        };
         this._updateOptions = () => {
             const $options = this._getOptions();
             this._$options = $options.reduce((acc, $option) => {
                 const value = $option.getAttribute('value');
                 if (value === null || value === undefined)
-                    throw Error('Select option must hava a value');
+                    throw Error('Select option must have a value');
                 if (acc.has(value))
-                    throw Error('Select options must hava a unique values.');
+                    throw Error('Select options must have a unique values.');
                 return acc.set(value, $option);
             }, new Map());
             const options = $options.map(select_option_mapper.SelectOptionMapper.toModel);
@@ -184,8 +215,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         };
         const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
-        const $placeholderEl = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
-        this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
+        // this condition doesn't work as properties load on connectedCallback but I leave it here to not forget about deleting it
+        if (!this.isDevSelectPlaceholderTranslationFlagEnabled) {
+            const $placeholderEl = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
+            this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
+        }
         if (this.multiple)
             this.type = select_constants.SELECT_TYPES.multiple;
     }
@@ -287,6 +321,56 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         }
         this._setupEvents();
     }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (this.isDevSelectPlaceholderTranslationFlagEnabled) {
+            let placeholderCandidate = null;
+            if (this.hasSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) {
+                const slotTpls = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME);
+                if (Array.isArray(slotTpls) && slotTpls.length > 0) {
+                    const tpl = slotTpls[0];
+                    placeholderCandidate = (tpl && tpl.values && tpl.values[0] ? tpl.values[0] : null);
+                }
+            }
+            // 2) Try toggler slot that may have been assigned into this._slots
+            if (!placeholderCandidate && this.hasSlot(select_constants.SELECT_SLOT_NAMES.toggler)) {
+                const togglerTpls = this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler);
+                if (Array.isArray(togglerTpls) && togglerTpls.length > 0) {
+                    const typedTogglerPtls = togglerTpls;
+                    const togglerNode = (typedTogglerPtls[0].values ? typedTogglerPtls[0].values[0] : null);
+                    if (togglerNode) {
+                        // If togglerNode is an element, try to find an inner placeholder element
+                        if (typeof togglerNode.querySelector === 'function') {
+                            const inner = togglerNode.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
+                            if (inner)
+                                placeholderCandidate = inner;
+                        }
+                        // fallback to using togglerNode text content (if useful)
+                        if (!placeholderCandidate && togglerNode.textContent && togglerNode.textContent.trim()) {
+                            placeholderCandidate = togglerNode;
+                        }
+                    }
+                }
+            }
+            // 3) Last DOM fallback (works if placeholder still in DOM)
+            if (!placeholderCandidate) {
+                const domEl = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
+                if (domEl)
+                    placeholderCandidate = domEl;
+            }
+            // 4) If not found yet, set default and listen for child "rendered" events (toggler)
+            if (placeholderCandidate) {
+                this.$placeholder = placeholderCandidate;
+            }
+            else {
+                this.$placeholder = 'Select';
+                this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._onChildRendered);
+            }
+        }
+        if (this.isReactiveSelectionFlagEnabled) {
+            this._setupMutationObserver();
+        }
+    }
     attributeChangedCallback(name, _old, value) {
         super.attributeChangedCallback(name, _old, value);
         switch (name) {
@@ -305,19 +389,19 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._updateOptions();
     }
     get _canAddPlaceholder() {
-        var _a;
         if (this.multiple || this.required)
             return false;
-        const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
-        if (hasSelection)
-            return false;
         const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
         return !hasExistingPlaceholder;
     }
     _createPlaceholderOption() {
+        var _a;
         const $option = document.createElement('h-option');
         $option.setAttribute('value', '');
-        $option.setAttribute('selected', 'true');
+        const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+        if (!hasSelection) {
+            $option.setAttribute('selected', 'true');
+        }
         $option.setAttribute('placeholder', 'true');
         $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
         const $content = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -325,7 +409,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             $content.textContent = this.$placeholder;
         }
         else if (this.$placeholder instanceof Node) {
-            Array.from(this.$placeholder.childNodes).forEach(node => {
+            Array.from(this.$placeholder.childNodes).forEach((node) => {
                 $content.appendChild(node.cloneNode(true));
             });
         }
@@ -334,8 +418,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     }
     _injectOptionIntoDOM($option) {
         const $firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
-        if ($firstOption) {
-            this.insertBefore($option, $firstOption);
+        if ($firstOption && $firstOption.parentNode) {
+            $firstOption.parentNode.insertBefore($option, $firstOption);
         }
         else {
             this.appendChild($option);
@@ -345,6 +429,53 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
     }
+    _setupMutationObserver() {
+        this._optionsMutationObserver = new MutationObserver((mutations) => {
+            let shouldUpdate = false;
+            let newlySelectedValue = null;
+            for (const mutation of mutations) {
+                const target = mutation.target;
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'selected' &&
+                    target.tagName &&
+                    target.tagName.toLowerCase() === 'h-option') {
+                    shouldUpdate = true;
+                    if (target.hasAttribute('selected')) {
+                        newlySelectedValue = target.getAttribute('value');
+                    }
+                }
+            }
+            if (shouldUpdate) {
+                const options = Array.from(this._$options.values()).map(($el) => select_option_mapper.SelectOptionMapper.toModel($el));
+                if (!this.multiple && newlySelectedValue !== null) {
+                    options.forEach((opt) => {
+                        opt.selected = opt.value === newlySelectedValue;
+                    });
+                }
+                this._selectController.options$.notify(options);
+                let selectedOptions = options.filter((opt) => opt.selected);
+                if (selectedOptions.length === 0) {
+                    const placeholder = options.find((opt) => opt.isPlaceholder);
+                    if (placeholder) {
+                        placeholder.selected = true;
+                        const $placeholderHtml = this._$options.get(placeholder.value);
+                        if ($placeholderHtml) {
+                            $placeholderHtml.setAttribute('selected', 'true');
+                        }
+                        selectedOptions = [placeholder];
+                    }
+                }
+                this._selectController.selectedOptions$.notify(selectedOptions);
+            }
+        });
+        if (this._$optionsList.value) {
+            this._optionsMutationObserver.observe(this._$optionsList.value, {
+                attributes: true,
+                attributeFilter: ['selected'],
+                subtree: true
+            });
+        }
+    }
     _appendNewHTMLOption(option, position) {
         const $list = this._$optionsList.value;
         if (!$list)
@@ -405,9 +536,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._selectController.select(option);
     }
     disconnectedCallback() {
+        var _a;
         super.disconnectedCallback();
         this._selectController.options$.unsubscribe(this._optionsObserver);
         this._$options.clear();
+        (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._onChildRendered);
     }
     _getClonedPlaceholderElement() {
         return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -459,9 +593,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
                     <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>
-                        ${this.isDevSelectPlaceholderFlagEnabled ?
-            (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
-            lit.html `${this._getClonedPlaceholderElement()}`}
+                        ${this.isDevSelectPlaceholderFlagEnabled
+            ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
+            : lit.html `${this._getClonedPlaceholderElement()}`}
                     </div>
                     ${isSearchEnabled
@@ -581,6 +715,14 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-translation-flag-enabled' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "isDevSelectPlaceholderTranslationFlagEnabled", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
 tslib_es6.__decorate([
     decorators_js.property({
         converter: {

package/build/cjs/packages/phoenix/src/components/form/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED Viewed

@@ -24,6 +24,8 @@ export declare class HSelect extends PhoenixLightLitElement {
     noDeselect: boolean;
     assistiveTitleId: string;
     isDevSelectPlaceholderFlagEnabled: boolean;
+    isDevSelectPlaceholderTranslationFlagEnabled: boolean;
+    isReactiveSelectionFlagEnabled: boolean;
     translations: Record<string, string>;
     private _selectOptionsId;
     get selectedIndex(): number;
@@ -47,10 +49,13 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _selectedOptionsAriaObserver;
     private $placeholder;
     private $searchLabel;
+    private _optionsMutationObserver?;
     constructor();
     updated(changedProperties: PropertyValues): void;
     private _focusElementAfterSelectOpened;
     connectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    private _onChildRendered;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private _updateOptions;
     private _getOptions;
@@ -59,6 +64,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _createPlaceholderOption;
     private _injectOptionIntoDOM;
     private _setupEvents;
+    private _setupMutationObserver;
     private _handleOptionDeselect;
     private _updateOptionsView;
     private _updateLabelAria;

package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.js';
 import { html, nothing } from 'lit';
 import { state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
@@ -40,6 +41,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.noDeselect = false;
         this.assistiveTitleId = '';
         this.isDevSelectPlaceholderFlagEnabled = false;
+        this.isDevSelectPlaceholderTranslationFlagEnabled = false;
+        this.isReactiveSelectionFlagEnabled = false;
         this.translations = {};
         this._selectOptionsId = v4();
         this._searchValue = '';
@@ -50,14 +53,42 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._$dropdownContent = createRef();
         this.$dropdownToggler = createRef();
         this._selectContext = new ContextProviderController(this);
+        this._onChildRendered = (ev) => {
+            const renderedEl = ev.detail && ev.detail.$el;
+            if (!renderedEl)
+                return;
+            const tag = renderedEl.tagName.toLowerCase();
+            if (tag === SELECT_RELATED_COMPONENTS_NAMES.toggler) {
+                // Prefer child's slot API if available
+                if (typeof renderedEl.getSlot === 'function' && renderedEl.hasSlot && renderedEl.hasSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) {
+                    const arr = renderedEl.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME);
+                    if (arr && arr.length) {
+                        const val = arr[0].values && arr[0].values[0];
+                        if (val) {
+                            this.$placeholder = val;
+                            this.requestUpdate();
+                            this.removeEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._onChildRendered);
+                            return;
+                        }
+                    }
+                }
+                // Fallback: try querySelector on the rendered element
+                const el = renderedEl.querySelector ? renderedEl.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`) : null;
+                if (el) {
+                    this.$placeholder = el;
+                    this.requestUpdate();
+                    this.removeEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._onChildRendered);
+                }
+            }
+        };
         this._updateOptions = () => {
             const $options = this._getOptions();
             this._$options = $options.reduce((acc, $option) => {
                 const value = $option.getAttribute('value');
                 if (value === null || value === undefined)
-                    throw Error('Select option must hava a value');
+                    throw Error('Select option must have a value');
                 if (acc.has(value))
-                    throw Error('Select options must hava a unique values.');
+                    throw Error('Select options must have a unique values.');
                 return acc.set(value, $option);
             }, new Map());
             const options = $options.map(SelectOptionMapper.toModel);
@@ -180,8 +211,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         };
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
-        const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
-        this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
+        // this condition doesn't work as properties load on connectedCallback but I leave it here to not forget about deleting it
+        if (!this.isDevSelectPlaceholderTranslationFlagEnabled) {
+            const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
+            this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
+        }
         if (this.multiple)
             this.type = SELECT_TYPES.multiple;
     }
@@ -283,6 +317,56 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         }
         this._setupEvents();
     }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (this.isDevSelectPlaceholderTranslationFlagEnabled) {
+            let placeholderCandidate = null;
+            if (this.hasSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) {
+                const slotTpls = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME);
+                if (Array.isArray(slotTpls) && slotTpls.length > 0) {
+                    const tpl = slotTpls[0];
+                    placeholderCandidate = (tpl && tpl.values && tpl.values[0] ? tpl.values[0] : null);
+                }
+            }
+            // 2) Try toggler slot that may have been assigned into this._slots
+            if (!placeholderCandidate && this.hasSlot(SELECT_SLOT_NAMES.toggler)) {
+                const togglerTpls = this.getSlot(SELECT_SLOT_NAMES.toggler);
+                if (Array.isArray(togglerTpls) && togglerTpls.length > 0) {
+                    const typedTogglerPtls = togglerTpls;
+                    const togglerNode = (typedTogglerPtls[0].values ? typedTogglerPtls[0].values[0] : null);
+                    if (togglerNode) {
+                        // If togglerNode is an element, try to find an inner placeholder element
+                        if (typeof togglerNode.querySelector === 'function') {
+                            const inner = togglerNode.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
+                            if (inner)
+                                placeholderCandidate = inner;
+                        }
+                        // fallback to using togglerNode text content (if useful)
+                        if (!placeholderCandidate && togglerNode.textContent && togglerNode.textContent.trim()) {
+                            placeholderCandidate = togglerNode;
+                        }
+                    }
+                }
+            }
+            // 3) Last DOM fallback (works if placeholder still in DOM)
+            if (!placeholderCandidate) {
+                const domEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
+                if (domEl)
+                    placeholderCandidate = domEl;
+            }
+            // 4) If not found yet, set default and listen for child "rendered" events (toggler)
+            if (placeholderCandidate) {
+                this.$placeholder = placeholderCandidate;
+            }
+            else {
+                this.$placeholder = 'Select';
+                this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._onChildRendered);
+            }
+        }
+        if (this.isReactiveSelectionFlagEnabled) {
+            this._setupMutationObserver();
+        }
+    }
     attributeChangedCallback(name, _old, value) {
         super.attributeChangedCallback(name, _old, value);
         switch (name) {
@@ -301,19 +385,19 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._updateOptions();
     }
     get _canAddPlaceholder() {
-        var _a;
         if (this.multiple || this.required)
             return false;
-        const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
-        if (hasSelection)
-            return false;
         const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
         return !hasExistingPlaceholder;
     }
     _createPlaceholderOption() {
+        var _a;
         const $option = document.createElement('h-option');
         $option.setAttribute('value', '');
-        $option.setAttribute('selected', 'true');
+        const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+        if (!hasSelection) {
+            $option.setAttribute('selected', 'true');
+        }
         $option.setAttribute('placeholder', 'true');
         $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
         const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -321,7 +405,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             $content.textContent = this.$placeholder;
         }
         else if (this.$placeholder instanceof Node) {
-            Array.from(this.$placeholder.childNodes).forEach(node => {
+            Array.from(this.$placeholder.childNodes).forEach((node) => {
                 $content.appendChild(node.cloneNode(true));
             });
         }
@@ -330,8 +414,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     }
     _injectOptionIntoDOM($option) {
         const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
-        if ($firstOption) {
-            this.insertBefore($option, $firstOption);
+        if ($firstOption && $firstOption.parentNode) {
+            $firstOption.parentNode.insertBefore($option, $firstOption);
         }
         else {
             this.appendChild($option);
@@ -341,6 +425,53 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
     }
+    _setupMutationObserver() {
+        this._optionsMutationObserver = new MutationObserver((mutations) => {
+            let shouldUpdate = false;
+            let newlySelectedValue = null;
+            for (const mutation of mutations) {
+                const target = mutation.target;
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'selected' &&
+                    target.tagName &&
+                    target.tagName.toLowerCase() === 'h-option') {
+                    shouldUpdate = true;
+                    if (target.hasAttribute('selected')) {
+                        newlySelectedValue = target.getAttribute('value');
+                    }
+                }
+            }
+            if (shouldUpdate) {
+                const options = Array.from(this._$options.values()).map(($el) => SelectOptionMapper.toModel($el));
+                if (!this.multiple && newlySelectedValue !== null) {
+                    options.forEach((opt) => {
+                        opt.selected = opt.value === newlySelectedValue;
+                    });
+                }
+                this._selectController.options$.notify(options);
+                let selectedOptions = options.filter((opt) => opt.selected);
+                if (selectedOptions.length === 0) {
+                    const placeholder = options.find((opt) => opt.isPlaceholder);
+                    if (placeholder) {
+                        placeholder.selected = true;
+                        const $placeholderHtml = this._$options.get(placeholder.value);
+                        if ($placeholderHtml) {
+                            $placeholderHtml.setAttribute('selected', 'true');
+                        }
+                        selectedOptions = [placeholder];
+                    }
+                }
+                this._selectController.selectedOptions$.notify(selectedOptions);
+            }
+        });
+        if (this._$optionsList.value) {
+            this._optionsMutationObserver.observe(this._$optionsList.value, {
+                attributes: true,
+                attributeFilter: ['selected'],
+                subtree: true
+            });
+        }
+    }
     _appendNewHTMLOption(option, position) {
         const $list = this._$optionsList.value;
         if (!$list)
@@ -401,9 +532,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._selectController.select(option);
     }
     disconnectedCallback() {
+        var _a;
         super.disconnectedCallback();
         this._selectController.options$.unsubscribe(this._optionsObserver);
         this._$options.clear();
+        (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._onChildRendered);
     }
     _getClonedPlaceholderElement() {
         return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -455,9 +589,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
                     <div class=${SELECT_CSS_CLASSES.selectLabel}>
-                        ${this.isDevSelectPlaceholderFlagEnabled ?
-            (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
-            html `${this._getClonedPlaceholderElement()}`}
+                        ${this.isDevSelectPlaceholderFlagEnabled
+            ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
+            : html `${this._getClonedPlaceholderElement()}`}
                     </div>
                     ${isSearchEnabled
@@ -577,6 +711,14 @@ __decorate([
     property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
     __metadata("design:type", Boolean)
 ], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-dev-select-placeholder-translation-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "isDevSelectPlaceholderTranslationFlagEnabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
 __decorate([
     property({
         converter: {

package/build/esm/packages/phoenix/src/components/form/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.18.16-0",
+  "version": "1.18.16-10",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",