@shoper/phoenix_design_system 1.18.23 → 1.18.24-1

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 +36 -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 +1 -1
  4. package/build/esm/packages/phoenix/src/components/form/select/select.js +36 -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,8 +42,8 @@ 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;
46
+ this.devCachedSelectOptions = false;
48
47
  this.translations = {};
49
48
  this._selectOptionsId = v4['default']();
50
49
  this._searchValue = '';
@@ -55,6 +54,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
55
54
  this._$dropdownContent = ref_js.createRef();
56
55
  this.$dropdownToggler = ref_js.createRef();
57
56
  this._selectContext = new context_provider_controller.ContextProviderController(this);
57
+ this.$placeholder = 'Select';
58
58
  this._updateOptions = () => {
59
59
  const $options = this._getOptions();
60
60
  this._$options = $options.reduce((acc, $option) => {
@@ -73,9 +73,19 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
73
73
  this._getOptions = () => {
74
74
  let $options;
75
75
  if (this.optionsList) {
76
- $options = this.optionsList.map((option) => {
77
- return select_utils.SelectControlUtils.createHTMLOption(select_option.SelectOption.create(option));
78
- });
76
+ if (this.devCachedSelectOptions) {
77
+ $options = [...this.optionsList].map((option) => select_utils.SelectControlUtils.createHTMLOption(select_option.SelectOption.create(option)));
78
+ if (!this.required && !this.multiple) {
79
+ const $domPlaceholder = this.querySelector('h-option[placeholder]');
80
+ if ($domPlaceholder)
81
+ $options.unshift($domPlaceholder);
82
+ }
83
+ }
84
+ else {
85
+ $options = this.optionsList.map((option) => {
86
+ return select_utils.SelectControlUtils.createHTMLOption(select_option.SelectOption.create(option));
87
+ });
88
+ }
79
89
  }
80
90
  else {
81
91
  $options = this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
@@ -112,28 +122,18 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
112
122
  });
113
123
  };
114
124
  this._updateLabelAria = (options) => {
115
- var _a, _b;
125
+ var _a;
116
126
  if (!this.$searchLabel)
117
127
  return;
118
128
  (_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
- }
129
+ const hasValidOptions = options.some((option) => !option.isPlaceholder);
130
+ if (!hasValidOptions)
131
+ return;
132
+ const valueLabelSpan = document.createElement('span');
133
+ valueLabelSpan.id = 'value-label';
134
+ valueLabelSpan.className = 'sr-only';
135
+ valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
136
+ this.$searchLabel.appendChild(valueLabelSpan);
137
137
  };
138
138
  this._handleOptionClicked = ({ detail }) => {
139
139
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -185,8 +185,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
185
185
  };
186
186
  const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
187
187
  $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
188
  if (this.multiple)
191
189
  this.type = select_constants.SELECT_TYPES.multiple;
192
190
  }
@@ -232,9 +230,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
232
230
  }
233
231
  if (changedProperties.has('optionsList')) {
234
232
  this._updateOptions();
235
- if (this.isDevSelectPlaceholderFlagEnabled) {
236
- this._addPlaceholderOptionIfNeeded();
237
- }
233
+ this._addPlaceholderOptionIfNeeded();
238
234
  }
239
235
  if (this._$optionsList.value) {
240
236
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -267,7 +263,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
267
263
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
268
264
  }
269
265
  connectedCallback() {
270
- var _a;
266
+ var _a, _b;
271
267
  super.connectedCallback();
272
268
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
273
269
  if (!this.searchDisabled) {
@@ -282,10 +278,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
282
278
  this._selectController.options$.subscribe(this._optionsObserver);
283
279
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
284
280
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
285
- this._updateOptions();
286
- if (this.isDevSelectPlaceholderFlagEnabled) {
287
- this._addPlaceholderOptionIfNeeded();
281
+ const $placeholderEl = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
282
+ if ($placeholderEl && ((_b = $placeholderEl.textContent) === null || _b === void 0 ? void 0 : _b.trim())) {
283
+ this.$placeholder = $placeholderEl;
288
284
  }
285
+ this._updateOptions();
286
+ this._addPlaceholderOptionIfNeeded();
289
287
  this._setupEvents();
290
288
  }
291
289
  firstUpdated(changedProperties) {
@@ -514,11 +512,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
514
512
  >
515
513
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
516
514
 
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>
515
+ <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
522
516
 
523
517
  ${isSearchEnabled
524
518
  ? lit.html ` <h-select-search
@@ -633,14 +627,14 @@ tslib_es6.__decorate([
633
627
  decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
634
628
  tslib_es6.__metadata("design:type", String)
635
629
  ], 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
630
  tslib_es6.__decorate([
641
631
  decorators_js.property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
642
632
  tslib_es6.__metadata("design:type", Boolean)
643
633
  ], exports.HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
634
+ tslib_es6.__decorate([
635
+ decorators_js.property({ type: Boolean, attribute: 'dev_cached_select_options' }),
636
+ tslib_es6.__metadata("design:type", Boolean)
637
+ ], exports.HSelect.prototype, "devCachedSelectOptions", void 0);
644
638
  tslib_es6.__decorate([
645
639
  decorators_js.property({
646
640
  converter: {
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;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,8 +23,8 @@ 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;
27
+ devCachedSelectOptions: boolean;
28
28
  translations: Record<string, string>;
29
29
  private _selectOptionsId;
30
30
  get selectedIndex(): number;
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,8 +38,8 @@ 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;
42
+ this.devCachedSelectOptions = false;
44
43
  this.translations = {};
45
44
  this._selectOptionsId = v4();
46
45
  this._searchValue = '';
@@ -51,6 +50,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
51
50
  this._$dropdownContent = createRef();
52
51
  this.$dropdownToggler = createRef();
53
52
  this._selectContext = new ContextProviderController(this);
53
+ this.$placeholder = 'Select';
54
54
  this._updateOptions = () => {
55
55
  const $options = this._getOptions();
56
56
  this._$options = $options.reduce((acc, $option) => {
@@ -69,9 +69,19 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
69
69
  this._getOptions = () => {
70
70
  let $options;
71
71
  if (this.optionsList) {
72
- $options = this.optionsList.map((option) => {
73
- return SelectControlUtils.createHTMLOption(SelectOption.create(option));
74
- });
72
+ if (this.devCachedSelectOptions) {
73
+ $options = [...this.optionsList].map((option) => SelectControlUtils.createHTMLOption(SelectOption.create(option)));
74
+ if (!this.required && !this.multiple) {
75
+ const $domPlaceholder = this.querySelector('h-option[placeholder]');
76
+ if ($domPlaceholder)
77
+ $options.unshift($domPlaceholder);
78
+ }
79
+ }
80
+ else {
81
+ $options = this.optionsList.map((option) => {
82
+ return SelectControlUtils.createHTMLOption(SelectOption.create(option));
83
+ });
84
+ }
75
85
  }
76
86
  else {
77
87
  $options = this.hasSlot(SELECT_SLOT_NAMES.content)
@@ -108,28 +118,18 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
108
118
  });
109
119
  };
110
120
  this._updateLabelAria = (options) => {
111
- var _a, _b;
121
+ var _a;
112
122
  if (!this.$searchLabel)
113
123
  return;
114
124
  (_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
- }
125
+ const hasValidOptions = options.some((option) => !option.isPlaceholder);
126
+ if (!hasValidOptions)
127
+ return;
128
+ const valueLabelSpan = document.createElement('span');
129
+ valueLabelSpan.id = 'value-label';
130
+ valueLabelSpan.className = 'sr-only';
131
+ valueLabelSpan.textContent = options.reduce((totalSelectedContent, currentOption) => totalSelectedContent + currentOption.content, '');
132
+ this.$searchLabel.appendChild(valueLabelSpan);
133
133
  };
134
134
  this._handleOptionClicked = ({ detail }) => {
135
135
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -181,8 +181,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
181
181
  };
182
182
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
183
183
  $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
184
  if (this.multiple)
187
185
  this.type = SELECT_TYPES.multiple;
188
186
  }
@@ -228,9 +226,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
228
226
  }
229
227
  if (changedProperties.has('optionsList')) {
230
228
  this._updateOptions();
231
- if (this.isDevSelectPlaceholderFlagEnabled) {
232
- this._addPlaceholderOptionIfNeeded();
233
- }
229
+ this._addPlaceholderOptionIfNeeded();
234
230
  }
235
231
  if (this._$optionsList.value) {
236
232
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -263,7 +259,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
263
259
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
264
260
  }
265
261
  connectedCallback() {
266
- var _a;
262
+ var _a, _b;
267
263
  super.connectedCallback();
268
264
  this.classList.add(SELECT_CSS_CLASSES.select);
269
265
  if (!this.searchDisabled) {
@@ -278,10 +274,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
278
274
  this._selectController.options$.subscribe(this._optionsObserver);
279
275
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
280
276
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
281
- this._updateOptions();
282
- if (this.isDevSelectPlaceholderFlagEnabled) {
283
- this._addPlaceholderOptionIfNeeded();
277
+ const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
278
+ if ($placeholderEl && ((_b = $placeholderEl.textContent) === null || _b === void 0 ? void 0 : _b.trim())) {
279
+ this.$placeholder = $placeholderEl;
284
280
  }
281
+ this._updateOptions();
282
+ this._addPlaceholderOptionIfNeeded();
285
283
  this._setupEvents();
286
284
  }
287
285
  firstUpdated(changedProperties) {
@@ -510,11 +508,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
510
508
  >
511
509
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
512
510
 
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>
511
+ <div class=${SELECT_CSS_CLASSES.selectLabel}>${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)}</div>
518
512
 
519
513
  ${isSearchEnabled
520
514
  ? html ` <h-select-search
@@ -629,14 +623,14 @@ __decorate([
629
623
  property({ type: String, attribute: 'assistive-title-id' }),
630
624
  __metadata("design:type", String)
631
625
  ], 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
626
  __decorate([
637
627
  property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
638
628
  __metadata("design:type", Boolean)
639
629
  ], HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
630
+ __decorate([
631
+ property({ type: Boolean, attribute: 'dev_cached_select_options' }),
632
+ __metadata("design:type", Boolean)
633
+ ], HSelect.prototype, "devCachedSelectOptions", void 0);
640
634
  __decorate([
641
635
  property({
642
636
  converter: {
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;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-1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",