@shoper/phoenix_design_system 1.18.8 → 1.18.10

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 class SelectOption {
-    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
+    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
         this.value = value;
         this.selected = selected;
         this.hidden = hidden;
         this.disabled = disabled;
         this.content = content;
         this.inactive = inactive;
+        this.isPlaceholder = isPlaceholder;
     }
     static create(options) {
         return new SelectOption(options);

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js

@@ -10,7 +10,7 @@ class SelectOptionMapper {
         const $optionContent = $option.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
         const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
         const value = $option.getAttribute('value');
-        if (!value)
+        if (value === null || value === undefined)
             throw new Error('h-option must contain a unique value');
         if (!optionContentText)
             throw new Error('h-options must contains a h-option-content element inside');
@@ -20,7 +20,8 @@ class SelectOptionMapper {
             hidden: $option.hasAttribute('hidden'),
             inactive: $option.hasAttribute('inactive'),
             content: optionContentText,
-            selected: $option.hasAttribute('selected')
+            selected: $option.hasAttribute('selected'),
+            isPlaceholder: $option.hasAttribute('placeholder')
         });
     }
 }

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/form/select/select.js

@@ -43,6 +43,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this.type = select_constants.SELECT_TYPES.select;
         this.noDeselect = false;
         this.assistiveTitleId = '';
+        this.isDevSelectPlaceholderFlagEnabled = false;
         this.translations = {};
         this._selectOptionsId = v4['default']();
         this._searchValue = '';
@@ -57,7 +58,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             const $options = this._getOptions();
             this._$options = $options.reduce((acc, $option) => {
                 const value = $option.getAttribute('value');
-                if (!value)
+                if (value === null || value === undefined)
                     throw Error('Select option must hava a value');
                 if (acc.has(value))
                     throw Error('Select options must hava a unique values.');
@@ -114,12 +115,24 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             if (!this.$searchLabel)
                 return;
             (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
-            this.$searchLabel.innerHTML = `
-            ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
-            <span id="value-label" class="sr-only">
-                ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
-            </span>
-        `;
+            if (this.isDevSelectPlaceholderFlagEnabled) {
+                const hasValidOptions = options.some((option) => !option.isPlaceholder);
+                if (!hasValidOptions)
+                    return;
+                const valueLabelSpan = document.createElement('span');
+                valueLabelSpan.id = 'value-label';
+                valueLabelSpan.className = 'sr-only';
+                valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
+                this.$searchLabel.appendChild(valueLabelSpan);
+            }
+            else {
+                this.$searchLabel.innerHTML = `
+                ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
+                <span id="value-label" class="sr-only">
+                    ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
+                </span>
+            `;
+            }
         };
         this._handleOptionClicked = ({ detail }) => {
             if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -171,7 +184,8 @@ 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));
-        this.$placeholder = (_a = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
+        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;
     }
@@ -217,6 +231,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         }
         if (changedProperties.has('optionsList')) {
             this._updateOptions();
+            if (this.isDevSelectPlaceholderFlagEnabled) {
+                this._addPlaceholderOptionIfNeeded();
+            }
         }
         if (this._$optionsList.value) {
             (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -265,6 +282,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
         this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
         this._updateOptions();
+        if (this.isDevSelectPlaceholderFlagEnabled) {
+            this._addPlaceholderOptionIfNeeded();
+        }
         this._setupEvents();
     }
     attributeChangedCallback(name, _old, value) {
@@ -277,6 +297,50 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
         }
     }
+    _addPlaceholderOptionIfNeeded() {
+        if (!this._canAddPlaceholder)
+            return;
+        const $placeholderOption = this._createPlaceholderOption();
+        this._injectOptionIntoDOM($placeholderOption);
+        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() {
+        const $option = document.createElement('h-option');
+        $option.setAttribute('value', '');
+        $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);
+        if (typeof this.$placeholder === 'string') {
+            $content.textContent = this.$placeholder;
+        }
+        else if (this.$placeholder instanceof Node) {
+            Array.from(this.$placeholder.childNodes).forEach(node => {
+                $content.appendChild(node.cloneNode(true));
+            });
+        }
+        $option.appendChild($content);
+        return $option;
+    }
+    _injectOptionIntoDOM($option) {
+        const $firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
+        if ($firstOption) {
+            this.insertBefore($option, $firstOption);
+        }
+        else {
+            this.appendChild($option);
+        }
+    }
     _setupEvents() {
         this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -357,7 +421,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         return fragment;
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
         return lit.html `
@@ -381,6 +445,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     aria-activedescendant
                     role="combobox"
                     aria-controls="${this._selectOptionsId}"
+                    aria-labelledby="${this.assistiveTitleId}"
                 >
                     ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
                 </h-dropdown-toggler>
@@ -393,14 +458,18 @@ 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}>${lit.html `${this._getClonedPlaceholderElement()}`}</div>
+                    <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()}`}
+                    </div>
 
                     ${isSearchEnabled
             ? lit.html ` <h-select-search
                               class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
                               ${ref_js.ref(this.$search)}
                               .value=${this._searchValue}
-                              placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
+                              placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || select_constants.SELECT_DEFAULT_TRANSLATIONS.SEARCH}
                               @search=${this._handleSearch}
                           ></h-select-search>`
             : lit.nothing}
@@ -421,7 +490,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     ${this._searchNoResult()
             ? lit.html ` <div>
                               <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
-                                  ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
+                                  ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || select_constants.SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
                                   <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
                               </p>
                           </div>`
@@ -430,11 +499,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             ? lit.html `
                               <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
                                   <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
-                                      ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
+                                      ${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || select_constants.SELECT_DEFAULT_TRANSLATIONS.RESET}
                                   </button>
                                   <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
                                       ><span slot=${select_components_constatns.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
-                                          >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
+                                          >${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || select_constants.SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
                                       >
                                   </h-select-close-btn>
                               </section>
@@ -508,6 +577,10 @@ tslib_es6.__decorate([
     decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSelect.prototype, "assistiveTitleId", void 0);
+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({
         converter: {

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

@@ -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;"}
+{"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;"}

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

@@ -6,7 +6,7 @@ var select_components_constatns = require('./components/select_components_consta
 
 class SelectControlUtils {
     static createHTMLOption(option) {
-        const { selected, value, disabled, hidden, content } = option;
+        const { selected, value, disabled, hidden, content, isPlaceholder } = option;
         const $option = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
         $option.setAttribute('value', String(value));
         const $optionContent = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -18,14 +18,17 @@ class SelectControlUtils {
             $option.setAttribute('disabled', '');
         if (hidden)
             $option.setAttribute('hidden', '');
+        if (isPlaceholder)
+            $option.setAttribute('placeholder', 'true');
         return $option;
     }
     static syncHTMLOptionWithModel(option, $option) {
-        const { selected, value, disabled, hidden } = option;
+        const { selected, value, disabled, hidden, isPlaceholder } = option;
         $option.selected = selected;
         $option.value = value;
         $option.disabled = disabled;
         $option.hidden = hidden;
+        $option.toggleAttribute('placeholder', isPlaceholder);
     }
     static removeHTMLOptions($options, optionsValuesThatExists) {
         return $options.reduce((acc, $option) => {
@@ -50,6 +53,23 @@ class SelectControlUtils {
         const firstIndexInReversed = [...options].reverse().findIndex((option) => option.selected);
         return options.length - firstIndexInReversed - 1;
     }
+    static extractSelectValue($select) {
+        var _a;
+        const { selectedOptions } = $select;
+        const selectedValues = Array.from(selectedOptions).map((option) => option.value);
+        if (selectedValues.length === 0) {
+            return undefined;
+        }
+        const isPlaceholder = !$select.multiple && selectedOptions.length === 1 && ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.hasAttribute('placeholder'));
+        const isSingleEmptyValue = selectedValues.length === 1 && selectedValues[0] === '';
+        if (isPlaceholder && isSingleEmptyValue) {
+            return null;
+        }
+        if ($select.multiple) {
+            return selectedValues;
+        }
+        return selectedValues[0];
+    }
 }
 
 exports.SelectControlUtils = SelectControlUtils;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/index.js

@@ -26,6 +26,7 @@ var toggle_element_aria_controller = require('./controllers/toggle_element_aria_
 var dropdown_toggler = require('./components/dropdown/dropdown_toggler.js');
 var relative_position_controller = require('./controllers/relative_position_controller/relative_position_controller.js');
 var dropdown = require('./components/dropdown/dropdown.js');
+var select_utils = require('./components/form/select/select_utils.js');
 var select = require('./components/form/select/select.js');
 var file = require('./components/form/file_picker/file/file.js');
 var input_constants = require('./components/form/input/input_constants.js');
@@ -209,6 +210,7 @@ Object.defineProperty(exports, 'HDropdown', {
 		return dropdown.HDropdown;
 	}
 });
+exports.SelectControlUtils = select_utils.SelectControlUtils;
 Object.defineProperty(exports, 'HSelect', {
 	enumerable: true,
 	get: function () {

package/build/cjs/packages/phoenix/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/model/select_option.d.ts

@@ -6,6 +6,7 @@ export declare class SelectOption {
     inactive: boolean;
     hidden: boolean;
     content: string;
+    isPlaceholder: boolean;
     private constructor();
     static create(options: TSelectOptionConstructorOptions): SelectOption;
 }

package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js

@@ -1,11 +1,12 @@
 class SelectOption {
-    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
+    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
         this.value = value;
         this.selected = selected;
         this.hidden = hidden;
         this.disabled = disabled;
         this.content = content;
         this.inactive = inactive;
+        this.isPlaceholder = isPlaceholder;
     }
     static create(options) {
         return new SelectOption(options);

package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js

@@ -6,7 +6,7 @@ class SelectOptionMapper {
         const $optionContent = $option.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
         const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
         const value = $option.getAttribute('value');
-        if (!value)
+        if (value === null || value === undefined)
             throw new Error('h-option must contain a unique value');
         if (!optionContentText)
             throw new Error('h-options must contains a h-option-content element inside');
@@ -16,7 +16,8 @@ class SelectOptionMapper {
             hidden: $option.hasAttribute('hidden'),
             inactive: $option.hasAttribute('inactive'),
             content: optionContentText,
-            selected: $option.hasAttribute('selected')
+            selected: $option.hasAttribute('selected'),
+            isPlaceholder: $option.hasAttribute('placeholder')
         });
     }
 }

package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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/model/select_option_types.d.ts

@@ -5,5 +5,6 @@ export declare type TSelectOption = {
     disabled?: boolean;
     hidden?: boolean;
     inactive?: boolean;
+    isPlaceholder?: boolean;
 };
 export declare type TSelectOptionConstructorOptions = TSelectOption;

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

@@ -23,6 +23,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     optionsList?: TSelectOption[];
     noDeselect: boolean;
     assistiveTitleId: string;
+    isDevSelectPlaceholderFlagEnabled: boolean;
     translations: Record<string, string>;
     private _selectOptionsId;
     get selectedIndex(): number;
@@ -53,6 +54,10 @@ export declare class HSelect extends PhoenixLightLitElement {
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private _updateOptions;
     private _getOptions;
+    private _addPlaceholderOptionIfNeeded;
+    private get _canAddPlaceholder();
+    private _createPlaceholderOption;
+    private _injectOptionIntoDOM;
     private _setupEvents;
     private _handleOptionDeselect;
     private _updateOptionsView;

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

@@ -39,6 +39,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.type = SELECT_TYPES.select;
         this.noDeselect = false;
         this.assistiveTitleId = '';
+        this.isDevSelectPlaceholderFlagEnabled = false;
         this.translations = {};
         this._selectOptionsId = v4();
         this._searchValue = '';
@@ -53,7 +54,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             const $options = this._getOptions();
             this._$options = $options.reduce((acc, $option) => {
                 const value = $option.getAttribute('value');
-                if (!value)
+                if (value === null || value === undefined)
                     throw Error('Select option must hava a value');
                 if (acc.has(value))
                     throw Error('Select options must hava a unique values.');
@@ -110,12 +111,24 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             if (!this.$searchLabel)
                 return;
             (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
-            this.$searchLabel.innerHTML = `
-            ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
-            <span id="value-label" class="sr-only">
-                ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
-            </span>
-        `;
+            if (this.isDevSelectPlaceholderFlagEnabled) {
+                const hasValidOptions = options.some((option) => !option.isPlaceholder);
+                if (!hasValidOptions)
+                    return;
+                const valueLabelSpan = document.createElement('span');
+                valueLabelSpan.id = 'value-label';
+                valueLabelSpan.className = 'sr-only';
+                valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
+                this.$searchLabel.appendChild(valueLabelSpan);
+            }
+            else {
+                this.$searchLabel.innerHTML = `
+                ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
+                <span id="value-label" class="sr-only">
+                    ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
+                </span>
+            `;
+            }
         };
         this._handleOptionClicked = ({ detail }) => {
             if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -167,7 +180,8 @@ 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));
-        this.$placeholder = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
+        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;
     }
@@ -213,6 +227,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         }
         if (changedProperties.has('optionsList')) {
             this._updateOptions();
+            if (this.isDevSelectPlaceholderFlagEnabled) {
+                this._addPlaceholderOptionIfNeeded();
+            }
         }
         if (this._$optionsList.value) {
             (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -261,6 +278,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
         this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
         this._updateOptions();
+        if (this.isDevSelectPlaceholderFlagEnabled) {
+            this._addPlaceholderOptionIfNeeded();
+        }
         this._setupEvents();
     }
     attributeChangedCallback(name, _old, value) {
@@ -273,6 +293,50 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
         }
     }
+    _addPlaceholderOptionIfNeeded() {
+        if (!this._canAddPlaceholder)
+            return;
+        const $placeholderOption = this._createPlaceholderOption();
+        this._injectOptionIntoDOM($placeholderOption);
+        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() {
+        const $option = document.createElement('h-option');
+        $option.setAttribute('value', '');
+        $option.setAttribute('selected', 'true');
+        $option.setAttribute('placeholder', 'true');
+        $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
+        const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
+        if (typeof this.$placeholder === 'string') {
+            $content.textContent = this.$placeholder;
+        }
+        else if (this.$placeholder instanceof Node) {
+            Array.from(this.$placeholder.childNodes).forEach(node => {
+                $content.appendChild(node.cloneNode(true));
+            });
+        }
+        $option.appendChild($content);
+        return $option;
+    }
+    _injectOptionIntoDOM($option) {
+        const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
+        if ($firstOption) {
+            this.insertBefore($option, $firstOption);
+        }
+        else {
+            this.appendChild($option);
+        }
+    }
     _setupEvents() {
         this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -353,7 +417,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         return fragment;
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
         return html `
@@ -377,6 +441,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     aria-activedescendant
                     role="combobox"
                     aria-controls="${this._selectOptionsId}"
+                    aria-labelledby="${this.assistiveTitleId}"
                 >
                     ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
                 </h-dropdown-toggler>
@@ -389,14 +454,18 @@ 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}>${html `${this._getClonedPlaceholderElement()}`}</div>
+                    <div class=${SELECT_CSS_CLASSES.selectLabel}>
+                        ${this.isDevSelectPlaceholderFlagEnabled ?
+            (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
+            html `${this._getClonedPlaceholderElement()}`}
+                    </div>
 
                     ${isSearchEnabled
             ? html ` <h-select-search
                               class=${SELECT_CSS_CLASSES.selectSearch}
                               ${ref(this.$search)}
                               .value=${this._searchValue}
-                              placeholder=${((_b = this.translations) === null || _b === void 0 ? void 0 : _b.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
+                              placeholder=${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.search) || SELECT_DEFAULT_TRANSLATIONS.SEARCH}
                               @search=${this._handleSearch}
                           ></h-select-search>`
             : nothing}
@@ -417,7 +486,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     ${this._searchNoResult()
             ? html ` <div>
                               <p class=${SELECT_CSS_CLASSES.selectNoResult}>
-                                  ${((_c = this.translations) === null || _c === void 0 ? void 0 : _c.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
+                                  ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.noResultsFor) || SELECT_DEFAULT_TRANSLATIONS.NO_RESULTS_FOR}:
                                   <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
                               </p>
                           </div>`
@@ -426,11 +495,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             ? html `
                               <section class=${SELECT_CSS_CLASSES.selectFooter}>
                                   <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>
-                                      ${((_d = this.translations) === null || _d === void 0 ? void 0 : _d.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
+                                      ${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.reset) || SELECT_DEFAULT_TRANSLATIONS.RESET}
                                   </button>
                                   <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @close=${this._closeSelect}
                                       ><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}
-                                          >${((_e = this.translations) === null || _e === void 0 ? void 0 : _e.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
+                                          >${((_f = this.translations) === null || _f === void 0 ? void 0 : _f.choose) || SELECT_DEFAULT_TRANSLATIONS.CHOOSE}</span
                                       >
                                   </h-select-close-btn>
                               </section>
@@ -504,6 +573,10 @@ __decorate([
     property({ type: String, attribute: 'assistive-title-id' }),
     __metadata("design:type", String)
 ], HSelect.prototype, "assistiveTitleId", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
 __decorate([
     property({
         converter: {

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

@@ -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;"}
+{"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;"}

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

@@ -8,4 +8,5 @@ export declare class SelectControlUtils {
     static appendHTMLOption($option: HOption, $list: HOptions, position?: number): void;
     static getFirstIndexSelectedOption(options: HOption[]): number;
     static getLastIndexOfSelectedOption(options: HOption[]): number;
+    static extractSelectValue($select: HTMLSelectElement): string | string[] | null | undefined;
 }

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

@@ -2,7 +2,7 @@ import { SELECT_RELATED_COMPONENTS_NAMES } from './components/select_components_
 
 class SelectControlUtils {
     static createHTMLOption(option) {
-        const { selected, value, disabled, hidden, content } = option;
+        const { selected, value, disabled, hidden, content, isPlaceholder } = option;
         const $option = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.option);
         $option.setAttribute('value', String(value));
         const $optionContent = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -14,14 +14,17 @@ class SelectControlUtils {
             $option.setAttribute('disabled', '');
         if (hidden)
             $option.setAttribute('hidden', '');
+        if (isPlaceholder)
+            $option.setAttribute('placeholder', 'true');
         return $option;
     }
     static syncHTMLOptionWithModel(option, $option) {
-        const { selected, value, disabled, hidden } = option;
+        const { selected, value, disabled, hidden, isPlaceholder } = option;
         $option.selected = selected;
         $option.value = value;
         $option.disabled = disabled;
         $option.hidden = hidden;
+        $option.toggleAttribute('placeholder', isPlaceholder);
     }
     static removeHTMLOptions($options, optionsValuesThatExists) {
         return $options.reduce((acc, $option) => {
@@ -46,6 +49,23 @@ class SelectControlUtils {
         const firstIndexInReversed = [...options].reverse().findIndex((option) => option.selected);
         return options.length - firstIndexInReversed - 1;
     }
+    static extractSelectValue($select) {
+        var _a;
+        const { selectedOptions } = $select;
+        const selectedValues = Array.from(selectedOptions).map((option) => option.value);
+        if (selectedValues.length === 0) {
+            return undefined;
+        }
+        const isPlaceholder = !$select.multiple && selectedOptions.length === 1 && ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.hasAttribute('placeholder'));
+        const isSingleEmptyValue = selectedValues.length === 1 && selectedValues[0] === '';
+        if (isPlaceholder && isSingleEmptyValue) {
+            return null;
+        }
+        if ($select.multiple) {
+            return selectedValues;
+        }
+        return selectedValues[0];
+    }
 }
 
 export { SelectControlUtils };

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/index.d.ts

@@ -136,6 +136,7 @@ export { HSearchHistoryLoadMore } from './components/form/search/subcomponents/h
 export { HSearchSuggestionContent } from './components/form/search/subcomponents/results/search_suggestion_content';
 export { HSearchProductContent } from './components/form/search/subcomponents/results/search_product_content';
 export { HSearchProducerContent } from './components/form/search/subcomponents/results/search_producer_content';
+export { SelectControlUtils } from './components/form/select/select_utils';
 export type { TSearchDisplayMode } from './components/form/search/search_types';
 export * from './components/form/search/search_constants';
 export { HToggle } from './components/toggle/toggle';

package/build/esm/packages/phoenix/src/index.js

@@ -22,6 +22,7 @@ export { ToggleElementAriaController } from './controllers/toggle_element_aria_c
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
 export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
 export { HDropdown } from './components/dropdown/dropdown.js';
+export { SelectControlUtils } from './components/form/select/select_utils.js';
 export { HSelect } from './components/form/select/select.js';
 export { HFile } from './components/form/file_picker/file/file.js';
 export { INPUT_CONTROL_CSS_CLASSES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_SIZES, INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC } from './components/form/input/input_constants.js';

package/build/esm/packages/phoenix/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.18.8",
+  "version": "1.18.10",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@splidejs/splide-extension-auto-scroll": "0.5.3"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.23.1",
+    "@dreamcommerce/utilities": "^1.23.2",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",