@shoper/phoenix_design_system 1.18.23 → 1.18.24-0

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
  1. package/build/cjs/packages/phoenix/src/components/form/select/select.js +24 -42
  2. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  3. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +0 -1
  4. package/build/esm/packages/phoenix/src/components/form/select/select.js +24 -42
  5. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  6. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -34,7 +34,6 @@ var select_toggler_keyboard_controller = require('./controllers/select_toggler_k
34
34
 
35
35
  exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
36
36
  constructor() {
37
- var _a;
38
37
  super();
39
38
  this.multiple = false;
40
39
  this.opened = false;
@@ -43,7 +42,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
43
42
  this.type = select_constants.SELECT_TYPES.select;
44
43
  this.noDeselect = false;
45
44
  this.assistiveTitleId = '';
46
- this.isDevSelectPlaceholderFlagEnabled = false;
47
45
  this.isReactiveSelectionFlagEnabled = false;
48
46
  this.translations = {};
49
47
  this._selectOptionsId = v4['default']();
@@ -55,6 +53,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
55
53
  this._$dropdownContent = ref_js.createRef();
56
54
  this.$dropdownToggler = ref_js.createRef();
57
55
  this._selectContext = new context_provider_controller.ContextProviderController(this);
56
+ this.$placeholder = 'Select';
58
57
  this._updateOptions = () => {
59
58
  const $options = this._getOptions();
60
59
  this._$options = $options.reduce((acc, $option) => {
@@ -73,9 +72,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
73
72
  this._getOptions = () => {
74
73
  let $options;
75
74
  if (this.optionsList) {
76
- $options = this.optionsList.map((option) => {
77
- return select_utils.SelectControlUtils.createHTMLOption(select_option.SelectOption.create(option));
78
- });
75
+ $options = [...this.optionsList].map((option) => select_utils.SelectControlUtils.createHTMLOption(select_option.SelectOption.create(option)));
76
+ if (!this.required && !this.multiple) {
77
+ const $domPlaceholder = this.querySelector('h-option[placeholder]');
78
+ if ($domPlaceholder)
79
+ $options.unshift($domPlaceholder);
80
+ }
79
81
  }
80
82
  else {
81
83
  $options = this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
@@ -112,28 +114,18 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
112
114
  });
113
115
  };
114
116
  this._updateLabelAria = (options) => {
115
- var _a, _b;
117
+ var _a;
116
118
  if (!this.$searchLabel)
117
119
  return;
118
120
  (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
119
- if (this.isDevSelectPlaceholderFlagEnabled) {
120
- const hasValidOptions = options.some((option) => !option.isPlaceholder);
121
- if (!hasValidOptions)
122
- return;
123
- const valueLabelSpan = document.createElement('span');
124
- valueLabelSpan.id = 'value-label';
125
- valueLabelSpan.className = 'sr-only';
126
- valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
127
- this.$searchLabel.appendChild(valueLabelSpan);
128
- }
129
- else {
130
- this.$searchLabel.innerHTML = `
131
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
132
- <span id="value-label" class="sr-only">
133
- ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
134
- </span>
135
- `;
136
- }
121
+ const hasValidOptions = options.some((option) => !option.isPlaceholder);
122
+ if (!hasValidOptions)
123
+ return;
124
+ const valueLabelSpan = document.createElement('span');
125
+ valueLabelSpan.id = 'value-label';
126
+ valueLabelSpan.className = 'sr-only';
127
+ valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
128
+ this.$searchLabel.appendChild(valueLabelSpan);
137
129
  };
138
130
  this._handleOptionClicked = ({ detail }) => {
139
131
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -185,8 +177,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
185
177
  };
186
178
  const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
187
179
  $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
188
- const $placeholderEl = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
189
- this.$placeholder = $placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? $placeholderEl : 'Select';
190
180
  if (this.multiple)
191
181
  this.type = select_constants.SELECT_TYPES.multiple;
192
182
  }
@@ -232,9 +222,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
232
222
  }
233
223
  if (changedProperties.has('optionsList')) {
234
224
  this._updateOptions();
235
- if (this.isDevSelectPlaceholderFlagEnabled) {
236
- this._addPlaceholderOptionIfNeeded();
237
- }
225
+ this._addPlaceholderOptionIfNeeded();
238
226
  }
239
227
  if (this._$optionsList.value) {
240
228
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -267,7 +255,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
267
255
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
268
256
  }
269
257
  connectedCallback() {
270
- var _a;
258
+ var _a, _b;
271
259
  super.connectedCallback();
272
260
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
273
261
  if (!this.searchDisabled) {
@@ -282,10 +270,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
282
270
  this._selectController.options$.subscribe(this._optionsObserver);
283
271
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
284
272
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
285
- this._updateOptions();
286
- if (this.isDevSelectPlaceholderFlagEnabled) {
287
- this._addPlaceholderOptionIfNeeded();
273
+ const $placeholderEl = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
274
+ if ($placeholderEl && ((_b = $placeholderEl.textContent) === null || _b === void 0 ? void 0 : _b.trim())) {
275
+ this.$placeholder = $placeholderEl;
288
276
  }
277
+ this._updateOptions();
278
+ this._addPlaceholderOptionIfNeeded();
289
279
  this._setupEvents();
290
280
  }
291
281
  firstUpdated(changedProperties) {
@@ -514,11 +504,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
514
504
  >
515
505
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
516
506
 
517
- <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>
518
- ${this.isDevSelectPlaceholderFlagEnabled
519
- ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
520
- : lit.html `${this._getClonedPlaceholderElement()}`}
521
- </div>
507
+ <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
522
508
 
523
509
  ${isSearchEnabled
524
510
  ? lit.html ` <h-select-search
@@ -633,10 +619,6 @@ tslib_es6.__decorate([
633
619
  decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
634
620
  tslib_es6.__metadata("design:type", String)
635
621
  ], exports.HSelect.prototype, "assistiveTitleId", void 0);
636
- tslib_es6.__decorate([
637
- decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
638
- tslib_es6.__metadata("design:type", Boolean)
639
- ], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
640
622
  tslib_es6.__decorate([
641
623
  decorators_js.property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
642
624
  tslib_es6.__metadata("design:type", Boolean)
package/build/cjs/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;"}
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -23,7 +23,6 @@ export declare class HSelect extends PhoenixLightLitElement {
23
23
  optionsList?: TSelectOption[];
24
24
  noDeselect: boolean;
25
25
  assistiveTitleId: string;
26
- isDevSelectPlaceholderFlagEnabled: boolean;
27
26
  isReactiveSelectionFlagEnabled: boolean;
28
27
  translations: Record<string, string>;
29
28
  private _selectOptionsId;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -30,7 +30,6 @@ import { SelectTogglerKeyboardController } from './controllers/select_toggler_ke
30
30
 
31
31
  let HSelect = class HSelect extends PhoenixLightLitElement {
32
32
  constructor() {
33
- var _a;
34
33
  super();
35
34
  this.multiple = false;
36
35
  this.opened = false;
@@ -39,7 +38,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
39
38
  this.type = SELECT_TYPES.select;
40
39
  this.noDeselect = false;
41
40
  this.assistiveTitleId = '';
42
- this.isDevSelectPlaceholderFlagEnabled = false;
43
41
  this.isReactiveSelectionFlagEnabled = false;
44
42
  this.translations = {};
45
43
  this._selectOptionsId = v4();
@@ -51,6 +49,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
51
49
  this._$dropdownContent = createRef();
52
50
  this.$dropdownToggler = createRef();
53
51
  this._selectContext = new ContextProviderController(this);
52
+ this.$placeholder = 'Select';
54
53
  this._updateOptions = () => {
55
54
  const $options = this._getOptions();
56
55
  this._$options = $options.reduce((acc, $option) => {
@@ -69,9 +68,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
69
68
  this._getOptions = () => {
70
69
  let $options;
71
70
  if (this.optionsList) {
72
- $options = this.optionsList.map((option) => {
73
- return SelectControlUtils.createHTMLOption(SelectOption.create(option));
74
- });
71
+ $options = [...this.optionsList].map((option) => SelectControlUtils.createHTMLOption(SelectOption.create(option)));
72
+ if (!this.required && !this.multiple) {
73
+ const $domPlaceholder = this.querySelector('h-option[placeholder]');
74
+ if ($domPlaceholder)
75
+ $options.unshift($domPlaceholder);
76
+ }
75
77
  }
76
78
  else {
77
79
  $options = this.hasSlot(SELECT_SLOT_NAMES.content)
@@ -108,28 +110,18 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
108
110
  });
109
111
  };
110
112
  this._updateLabelAria = (options) => {
111
- var _a, _b;
113
+ var _a;
112
114
  if (!this.$searchLabel)
113
115
  return;
114
116
  (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
115
- if (this.isDevSelectPlaceholderFlagEnabled) {
116
- const hasValidOptions = options.some((option) => !option.isPlaceholder);
117
- if (!hasValidOptions)
118
- return;
119
- const valueLabelSpan = document.createElement('span');
120
- valueLabelSpan.id = 'value-label';
121
- valueLabelSpan.className = 'sr-only';
122
- valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
123
- this.$searchLabel.appendChild(valueLabelSpan);
124
- }
125
- else {
126
- this.$searchLabel.innerHTML = `
127
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
128
- <span id="value-label" class="sr-only">
129
- ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
130
- </span>
131
- `;
132
- }
117
+ const hasValidOptions = options.some((option) => !option.isPlaceholder);
118
+ if (!hasValidOptions)
119
+ return;
120
+ const valueLabelSpan = document.createElement('span');
121
+ valueLabelSpan.id = 'value-label';
122
+ valueLabelSpan.className = 'sr-only';
123
+ valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
124
+ this.$searchLabel.appendChild(valueLabelSpan);
133
125
  };
134
126
  this._handleOptionClicked = ({ detail }) => {
135
127
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -181,8 +173,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
181
173
  };
182
174
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
183
175
  $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
184
- const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
185
- this.$placeholder = $placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? $placeholderEl : 'Select';
186
176
  if (this.multiple)
187
177
  this.type = SELECT_TYPES.multiple;
188
178
  }
@@ -228,9 +218,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
228
218
  }
229
219
  if (changedProperties.has('optionsList')) {
230
220
  this._updateOptions();
231
- if (this.isDevSelectPlaceholderFlagEnabled) {
232
- this._addPlaceholderOptionIfNeeded();
233
- }
221
+ this._addPlaceholderOptionIfNeeded();
234
222
  }
235
223
  if (this._$optionsList.value) {
236
224
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -263,7 +251,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
263
251
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
264
252
  }
265
253
  connectedCallback() {
266
- var _a;
254
+ var _a, _b;
267
255
  super.connectedCallback();
268
256
  this.classList.add(SELECT_CSS_CLASSES.select);
269
257
  if (!this.searchDisabled) {
@@ -278,10 +266,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
278
266
  this._selectController.options$.subscribe(this._optionsObserver);
279
267
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
280
268
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
281
- this._updateOptions();
282
- if (this.isDevSelectPlaceholderFlagEnabled) {
283
- this._addPlaceholderOptionIfNeeded();
269
+ const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
270
+ if ($placeholderEl && ((_b = $placeholderEl.textContent) === null || _b === void 0 ? void 0 : _b.trim())) {
271
+ this.$placeholder = $placeholderEl;
284
272
  }
273
+ this._updateOptions();
274
+ this._addPlaceholderOptionIfNeeded();
285
275
  this._setupEvents();
286
276
  }
287
277
  firstUpdated(changedProperties) {
@@ -510,11 +500,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
510
500
  >
511
501
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
512
502
 
513
- <div class=${SELECT_CSS_CLASSES.selectLabel}>
514
- ${this.isDevSelectPlaceholderFlagEnabled
515
- ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
516
- : html `${this._getClonedPlaceholderElement()}`}
517
- </div>
503
+ <div class=${SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
518
504
 
519
505
  ${isSearchEnabled
520
506
  ? html ` <h-select-search
@@ -629,10 +615,6 @@ __decorate([
629
615
  property({ type: String, attribute: 'assistive-title-id' }),
630
616
  __metadata("design:type", String)
631
617
  ], HSelect.prototype, "assistiveTitleId", void 0);
632
- __decorate([
633
- property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
634
- __metadata("design:type", Boolean)
635
- ], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
636
618
  __decorate([
637
619
  property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
638
620
  __metadata("design:type", Boolean)
package/build/esm/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.18.23",
5
+ "version": "1.18.24-0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",