@shoper/phoenix_design_system 1.18.6-7 → 1.18.7-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 (20) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js +2 -1
  2. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +3 -2
  4. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/select/select.js +59 -6
  6. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js +5 -2
  8. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts +1 -0
  10. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js +2 -1
  11. package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +3 -2
  13. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.d.ts +1 -0
  15. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +5 -0
  16. package/build/esm/packages/phoenix/src/components/form/select/select.js +59 -6
  17. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js +5 -2
  19. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  20. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js CHANGED
@@ -3,13 +3,14 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  class SelectOption {
6
- constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
6
+ constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
7
7
  this.value = value;
8
8
  this.selected = selected;
9
9
  this.hidden = hidden;
10
10
  this.disabled = disabled;
11
11
  this.content = content;
12
12
  this.inactive = inactive;
13
+ this.isPlaceholder = isPlaceholder;
13
14
  }
14
15
  static create(options) {
15
16
  return new SelectOption(options);
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option.js.map CHANGED
@@ -1 +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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js CHANGED
@@ -10,7 +10,7 @@ class SelectOptionMapper {
10
10
  const $optionContent = $option.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
11
11
  const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
12
12
  const value = $option.getAttribute('value');
13
- if (!value)
13
+ if (value === null || value === undefined)
14
14
  throw new Error('h-option must contain a unique value');
15
15
  if (!optionContentText)
16
16
  throw new Error('h-options must contains a h-option-content element inside');
@@ -20,7 +20,8 @@ class SelectOptionMapper {
20
20
  hidden: $option.hasAttribute('hidden'),
21
21
  inactive: $option.hasAttribute('inactive'),
22
22
  content: optionContentText,
23
- selected: $option.hasAttribute('selected')
23
+ selected: $option.hasAttribute('selected'),
24
+ isPlaceholder: $option.hasAttribute('placeholder')
24
25
  });
25
26
  }
26
27
  }
package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map CHANGED
@@ -1 +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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -43,6 +43,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
43
43
  this.type = select_constants.SELECT_TYPES.select;
44
44
  this.noDeselect = false;
45
45
  this.assistiveTitleId = '';
46
+ this.isDevSelectPlaceholderFlagEnabled = false;
46
47
  this.translations = {};
47
48
  this._selectOptionsId = v4['default']();
48
49
  this._searchValue = '';
@@ -57,7 +58,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
57
58
  const $options = this._getOptions();
58
59
  this._$options = $options.reduce((acc, $option) => {
59
60
  const value = $option.getAttribute('value');
60
- if (!value)
61
+ if (value === null || value === undefined)
61
62
  throw Error('Select option must hava a value');
62
63
  if (acc.has(value))
63
64
  throw Error('Select options must hava a unique values.');
@@ -114,12 +115,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
114
115
  if (!this.$searchLabel)
115
116
  return;
116
117
  (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
117
- this.$searchLabel.innerHTML = `
118
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
119
- <span id="value-label" class="sr-only">
118
+ const valueLabel = options.some((option) => !option.isPlaceholder)
119
+ ? `<span id="value-label" class="sr-only">
120
120
  ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
121
- </span>
122
- `;
121
+ </span>`
122
+ : '';
123
+ this.$searchLabel.innerHTML = `${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML} ${valueLabel}`;
123
124
  };
124
125
  this._handleOptionClicked = ({ detail }) => {
125
126
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -217,6 +218,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
217
218
  }
218
219
  if (changedProperties.has('optionsList')) {
219
220
  this._updateOptions();
221
+ if (this.isDevSelectPlaceholderFlagEnabled) {
222
+ this._addPlaceholderOptionIfNeeded();
223
+ }
220
224
  }
221
225
  if (this._$optionsList.value) {
222
226
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -265,6 +269,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
265
269
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
266
270
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
267
271
  this._updateOptions();
272
+ if (this.isDevSelectPlaceholderFlagEnabled) {
273
+ this._addPlaceholderOptionIfNeeded();
274
+ }
268
275
  this._setupEvents();
269
276
  }
270
277
  attributeChangedCallback(name, _old, value) {
@@ -277,6 +284,48 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
277
284
  this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
278
285
  }
279
286
  }
287
+ _addPlaceholderOptionIfNeeded() {
288
+ if (!this._canAddPlaceholder)
289
+ return;
290
+ const $placeholderOption = this._createPlaceholderOptionFactory();
291
+ this._injectOptionIntoDOM($placeholderOption);
292
+ this._updateOptions();
293
+ }
294
+ get _canAddPlaceholder() {
295
+ var _a;
296
+ if (this.multiple)
297
+ return false;
298
+ const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
299
+ if (hasSelection)
300
+ return false;
301
+ const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
302
+ return !hasExistingPlaceholder;
303
+ }
304
+ _createPlaceholderOptionFactory() {
305
+ const $option = document.createElement('h-option');
306
+ $option.setAttribute('value', '');
307
+ $option.setAttribute('selected', 'true');
308
+ $option.setAttribute('placeholder', 'true');
309
+ $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
310
+ const $content = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
311
+ if (typeof this.$placeholder === 'string') {
312
+ $content.textContent = this.$placeholder;
313
+ }
314
+ else {
315
+ $content.innerHTML = this.$placeholder.innerHTML;
316
+ }
317
+ $option.appendChild($content);
318
+ return $option;
319
+ }
320
+ _injectOptionIntoDOM($option) {
321
+ const $firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
322
+ if ($firstOption) {
323
+ this.insertBefore($option, $firstOption);
324
+ }
325
+ else {
326
+ this.appendChild($option);
327
+ }
328
+ }
280
329
  _setupEvents() {
281
330
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
282
331
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -508,6 +557,10 @@ tslib_es6.__decorate([
508
557
  decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
509
558
  tslib_es6.__metadata("design:type", String)
510
559
  ], exports.HSelect.prototype, "assistiveTitleId", void 0);
560
+ tslib_es6.__decorate([
561
+ decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
562
+ tslib_es6.__metadata("design:type", Boolean)
563
+ ], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
511
564
  tslib_es6.__decorate([
512
565
  decorators_js.property({
513
566
  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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js CHANGED
@@ -6,7 +6,7 @@ var select_components_constatns = require('./components/select_components_consta
6
6
 
7
7
  class SelectControlUtils {
8
8
  static createHTMLOption(option) {
9
- const { selected, value, disabled, hidden, content } = option;
9
+ const { selected, value, disabled, hidden, content, isPlaceholder } = option;
10
10
  const $option = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
11
11
  $option.setAttribute('value', String(value));
12
12
  const $optionContent = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -18,14 +18,17 @@ class SelectControlUtils {
18
18
  $option.setAttribute('disabled', '');
19
19
  if (hidden)
20
20
  $option.setAttribute('hidden', '');
21
+ if (isPlaceholder)
22
+ $option.setAttribute('placeholder', 'true');
21
23
  return $option;
22
24
  }
23
25
  static syncHTMLOptionWithModel(option, $option) {
24
- const { selected, value, disabled, hidden } = option;
26
+ const { selected, value, disabled, hidden, isPlaceholder } = option;
25
27
  $option.selected = selected;
26
28
  $option.value = value;
27
29
  $option.disabled = disabled;
28
30
  $option.hidden = hidden;
31
+ $option.toggleAttribute('placeholder', isPlaceholder);
29
32
  }
30
33
  static removeHTMLOptions($options, optionsValuesThatExists) {
31
34
  return $options.reduce((acc, $option) => {
package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map CHANGED
@@ -1 +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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare class SelectOption {
6
6
  inactive: boolean;
7
7
  hidden: boolean;
8
8
  content: string;
9
+ isPlaceholder: boolean;
9
10
  private constructor();
10
11
  static create(options: TSelectOptionConstructorOptions): SelectOption;
11
12
  }
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js CHANGED
@@ -1,11 +1,12 @@
1
1
  class SelectOption {
2
- constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
2
+ constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false, isPlaceholder = false }) {
3
3
  this.value = value;
4
4
  this.selected = selected;
5
5
  this.hidden = hidden;
6
6
  this.disabled = disabled;
7
7
  this.content = content;
8
8
  this.inactive = inactive;
9
+ this.isPlaceholder = isPlaceholder;
9
10
  }
10
11
  static create(options) {
11
12
  return new SelectOption(options);
package/build/esm/packages/phoenix/src/components/form/select/model/select_option.js.map CHANGED
@@ -1 +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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js CHANGED
@@ -6,7 +6,7 @@ class SelectOptionMapper {
6
6
  const $optionContent = $option.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
7
7
  const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
8
8
  const value = $option.getAttribute('value');
9
- if (!value)
9
+ if (value === null || value === undefined)
10
10
  throw new Error('h-option must contain a unique value');
11
11
  if (!optionContentText)
12
12
  throw new Error('h-options must contains a h-option-content element inside');
@@ -16,7 +16,8 @@ class SelectOptionMapper {
16
16
  hidden: $option.hasAttribute('hidden'),
17
17
  inactive: $option.hasAttribute('inactive'),
18
18
  content: optionContentText,
19
- selected: $option.hasAttribute('selected')
19
+ selected: $option.hasAttribute('selected'),
20
+ isPlaceholder: $option.hasAttribute('placeholder')
20
21
  });
21
22
  }
22
23
  }
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map CHANGED
@@ -1 +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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.d.ts CHANGED
@@ -5,5 +5,6 @@ export declare type TSelectOption = {
5
5
  disabled?: boolean;
6
6
  hidden?: boolean;
7
7
  inactive?: boolean;
8
+ isPlaceholder?: boolean;
8
9
  };
9
10
  export declare type TSelectOptionConstructorOptions = TSelectOption;
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -23,6 +23,7 @@ export declare class HSelect extends PhoenixLightLitElement {
23
23
  optionsList?: TSelectOption[];
24
24
  noDeselect: boolean;
25
25
  assistiveTitleId: string;
26
+ isDevSelectPlaceholderFlagEnabled: boolean;
26
27
  translations: Record<string, string>;
27
28
  private _selectOptionsId;
28
29
  get selectedIndex(): number;
@@ -53,6 +54,10 @@ export declare class HSelect extends PhoenixLightLitElement {
53
54
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
54
55
  private _updateOptions;
55
56
  private _getOptions;
57
+ private _addPlaceholderOptionIfNeeded;
58
+ private get _canAddPlaceholder();
59
+ private _createPlaceholderOptionFactory;
60
+ private _injectOptionIntoDOM;
56
61
  private _setupEvents;
57
62
  private _handleOptionDeselect;
58
63
  private _updateOptionsView;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -39,6 +39,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
39
39
  this.type = SELECT_TYPES.select;
40
40
  this.noDeselect = false;
41
41
  this.assistiveTitleId = '';
42
+ this.isDevSelectPlaceholderFlagEnabled = false;
42
43
  this.translations = {};
43
44
  this._selectOptionsId = v4();
44
45
  this._searchValue = '';
@@ -53,7 +54,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
53
54
  const $options = this._getOptions();
54
55
  this._$options = $options.reduce((acc, $option) => {
55
56
  const value = $option.getAttribute('value');
56
- if (!value)
57
+ if (value === null || value === undefined)
57
58
  throw Error('Select option must hava a value');
58
59
  if (acc.has(value))
59
60
  throw Error('Select options must hava a unique values.');
@@ -110,12 +111,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
110
111
  if (!this.$searchLabel)
111
112
  return;
112
113
  (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
113
- this.$searchLabel.innerHTML = `
114
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
115
- <span id="value-label" class="sr-only">
114
+ const valueLabel = options.some((option) => !option.isPlaceholder)
115
+ ? `<span id="value-label" class="sr-only">
116
116
  ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
117
- </span>
118
- `;
117
+ </span>`
118
+ : '';
119
+ this.$searchLabel.innerHTML = `${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML} ${valueLabel}`;
119
120
  };
120
121
  this._handleOptionClicked = ({ detail }) => {
121
122
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
@@ -213,6 +214,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
213
214
  }
214
215
  if (changedProperties.has('optionsList')) {
215
216
  this._updateOptions();
217
+ if (this.isDevSelectPlaceholderFlagEnabled) {
218
+ this._addPlaceholderOptionIfNeeded();
219
+ }
216
220
  }
217
221
  if (this._$optionsList.value) {
218
222
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -261,6 +265,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
261
265
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
262
266
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
263
267
  this._updateOptions();
268
+ if (this.isDevSelectPlaceholderFlagEnabled) {
269
+ this._addPlaceholderOptionIfNeeded();
270
+ }
264
271
  this._setupEvents();
265
272
  }
266
273
  attributeChangedCallback(name, _old, value) {
@@ -273,6 +280,48 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
273
280
  this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
274
281
  }
275
282
  }
283
+ _addPlaceholderOptionIfNeeded() {
284
+ if (!this._canAddPlaceholder)
285
+ return;
286
+ const $placeholderOption = this._createPlaceholderOptionFactory();
287
+ this._injectOptionIntoDOM($placeholderOption);
288
+ this._updateOptions();
289
+ }
290
+ get _canAddPlaceholder() {
291
+ var _a;
292
+ if (this.multiple)
293
+ return false;
294
+ const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
295
+ if (hasSelection)
296
+ return false;
297
+ const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
298
+ return !hasExistingPlaceholder;
299
+ }
300
+ _createPlaceholderOptionFactory() {
301
+ const $option = document.createElement('h-option');
302
+ $option.setAttribute('value', '');
303
+ $option.setAttribute('selected', 'true');
304
+ $option.setAttribute('placeholder', 'true');
305
+ $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
306
+ const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
307
+ if (typeof this.$placeholder === 'string') {
308
+ $content.textContent = this.$placeholder;
309
+ }
310
+ else {
311
+ $content.innerHTML = this.$placeholder.innerHTML;
312
+ }
313
+ $option.appendChild($content);
314
+ return $option;
315
+ }
316
+ _injectOptionIntoDOM($option) {
317
+ const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
318
+ if ($firstOption) {
319
+ this.insertBefore($option, $firstOption);
320
+ }
321
+ else {
322
+ this.appendChild($option);
323
+ }
324
+ }
276
325
  _setupEvents() {
277
326
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
278
327
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -504,6 +553,10 @@ __decorate([
504
553
  property({ type: String, attribute: 'assistive-title-id' }),
505
554
  __metadata("design:type", String)
506
555
  ], HSelect.prototype, "assistiveTitleId", void 0);
556
+ __decorate([
557
+ property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
558
+ __metadata("design:type", Boolean)
559
+ ], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
507
560
  __decorate([
508
561
  property({
509
562
  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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/select_utils.js CHANGED
@@ -2,7 +2,7 @@ import { SELECT_RELATED_COMPONENTS_NAMES } from './components/select_components_
2
2
 
3
3
  class SelectControlUtils {
4
4
  static createHTMLOption(option) {
5
- const { selected, value, disabled, hidden, content } = option;
5
+ const { selected, value, disabled, hidden, content, isPlaceholder } = option;
6
6
  const $option = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.option);
7
7
  $option.setAttribute('value', String(value));
8
8
  const $optionContent = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -14,14 +14,17 @@ class SelectControlUtils {
14
14
  $option.setAttribute('disabled', '');
15
15
  if (hidden)
16
16
  $option.setAttribute('hidden', '');
17
+ if (isPlaceholder)
18
+ $option.setAttribute('placeholder', 'true');
17
19
  return $option;
18
20
  }
19
21
  static syncHTMLOptionWithModel(option, $option) {
20
- const { selected, value, disabled, hidden } = option;
22
+ const { selected, value, disabled, hidden, isPlaceholder } = option;
21
23
  $option.selected = selected;
22
24
  $option.value = value;
23
25
  $option.disabled = disabled;
24
26
  $option.hidden = hidden;
27
+ $option.toggleAttribute('placeholder', isPlaceholder);
25
28
  }
26
29
  static removeHTMLOptions($options, optionsValuesThatExists) {
27
30
  return $options.reduce((acc, $option) => {
package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map CHANGED
@@ -1 +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;"}
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;"}
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.6-7",
5
+ "version": "1.18.7-0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",