@shoper/phoenix_design_system 1.18.2-1 → 1.18.2-10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +12 -31
  2. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +2 -2
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js +36 -3
  5. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  6. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts +0 -1
  7. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +13 -32
  8. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +2 -2
  10. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +1 -0
  11. package/build/esm/packages/phoenix/src/components/form/select/select.js +36 -3
  12. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  13. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js CHANGED
@@ -42,20 +42,6 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
42
42
  this._selectedOptionsObserver = new observer.Observer(this._handleSelectedOptionChanged);
43
43
  this.selectedOptions$.subscribe(this._selectedOptionsObserver);
44
44
  }
45
- _renderTogglerContent(option) {
46
- const parts = (option.content || '')
47
- .split('\n')
48
- .map((line) => line.trim())
49
- .filter((line) => line.length > 0);
50
- const name = parts[0] || '';
51
- const addon = parts.slice(1).join(' ');
52
- return litHtml.html `
53
- <div class="select-toggler__layout">
54
- <span class="select-toggler__name">${name}</span>
55
- ${addon ? litHtml.html `<span class="select-toggler__addon">${addon}</span>` : litHtml.nothing}
56
- </div>
57
- `;
58
- }
59
45
  disconnectedCallback() {
60
46
  var _a;
61
47
  super.disconnectedCallback();
@@ -67,24 +53,19 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
67
53
  return litHtml.html `
68
54
  ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
69
55
  var _a;
70
- if (!selectOptions.length) {
56
+ if (!selectOptions.length)
71
57
  return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : litHtml.html `<span class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
72
- }
73
- return litHtml.html `
74
- <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
75
- ${this.isMultiselect
76
- ? selectOptions.map((option) => {
77
- const content = this._renderTogglerContent(option);
78
- return litHtml.html `
79
- <li>
80
- <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
81
- ${content}
82
- <h-tag-remove-button></h-tag-remove-button>
83
- </h-tag>
84
- </li>`;
85
- })
86
- : litHtml.html `<li>${this._renderTogglerContent(selectOptions[0])}</li>`}
87
- </ul>`;
58
+ return litHtml.html ` <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
59
+ ${this.isMultiselect
60
+ ? selectOptions.map((option) => litHtml.html ` <li>
61
+ <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
62
+ ${option.content}
63
+
64
+ <h-tag-remove-button></h-tag-remove-button>
65
+ </h-tag>
66
+ </li>`)
67
+ : litHtml.html ` <li>${selectOptions[0].content}</li>`}
68
+ </ul>`;
88
69
  })}
89
70
 
90
71
  <h-icon icon-name="icon-chevron-down"></h-icon>
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/model/select_option_mapper.js CHANGED
@@ -10,12 +10,12 @@ 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 === 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');
17
17
  return select_option.SelectOption.create({
18
- value,
18
+ value: value || '',
19
19
  disabled: $option.hasAttribute('disabled'),
20
20
  hidden: $option.hasAttribute('hidden'),
21
21
  inactive: $option.hasAttribute('inactive'),
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -57,11 +57,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
57
57
  const $options = this._getOptions();
58
58
  this._$options = $options.reduce((acc, $option) => {
59
59
  const value = $option.getAttribute('value');
60
- if (!value)
60
+ if (value === undefined)
61
61
  throw Error('Select option must hava a value');
62
- if (acc.has(value))
62
+ if (acc.has(value || ''))
63
63
  throw Error('Select options must hava a unique values.');
64
- return acc.set(value, $option);
64
+ return acc.set(value || '', $option);
65
65
  }, new Map());
66
66
  const options = $options.map(select_option_mapper.SelectOptionMapper.toModel);
67
67
  this._selectController.options$.notify(options);
@@ -217,6 +217,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
217
217
  }
218
218
  if (changedProperties.has('optionsList')) {
219
219
  this._updateOptions();
220
+ this._addPlaceholderOptionIfNeeded();
220
221
  }
221
222
  if (this._$optionsList.value) {
222
223
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -265,6 +266,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
265
266
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
266
267
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
267
268
  this._updateOptions();
269
+ this._addPlaceholderOptionIfNeeded();
268
270
  this._setupEvents();
269
271
  }
270
272
  attributeChangedCallback(name, _old, value) {
@@ -277,6 +279,37 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
277
279
  this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
278
280
  }
279
281
  }
282
+ _addPlaceholderOptionIfNeeded() {
283
+ if (this.multiple)
284
+ return;
285
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
286
+ if (selectedOptions && selectedOptions.length > 0)
287
+ return;
288
+ const $existingPlaceholder = this.querySelector('h-option[data-placeholder]');
289
+ if ($existingPlaceholder)
290
+ return;
291
+ const $placeholderOption = document.createElement('h-option');
292
+ $placeholderOption.value = '';
293
+ $placeholderOption.selected = true;
294
+ $placeholderOption.setAttribute('data-placeholder', 'true');
295
+ $placeholderOption.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
296
+ const $optionContent = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
297
+ if (typeof this.$placeholder === 'string') {
298
+ $optionContent.textContent = this.$placeholder;
299
+ }
300
+ else {
301
+ $optionContent.innerHTML = this.$placeholder.innerHTML;
302
+ }
303
+ $placeholderOption.appendChild($optionContent);
304
+ const firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
305
+ if (firstOption) {
306
+ this.insertBefore($placeholderOption, firstOption);
307
+ }
308
+ else {
309
+ this.appendChild($placeholderOption);
310
+ }
311
+ this._updateOptions();
312
+ }
280
313
  _setupEvents() {
281
314
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
282
315
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
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;"}
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts CHANGED
@@ -11,7 +11,6 @@ export declare class HSelectToggler extends PhoenixLightLitElement {
11
11
  private _subscribeObserver;
12
12
  private _handleSelectedOptionChanged;
13
13
  private _dispatchOptionDeselect;
14
- private _renderTogglerContent;
15
14
  disconnectedCallback(): void;
16
15
  render(): TemplateResult | undefined;
17
16
  }
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js CHANGED
@@ -4,7 +4,7 @@ import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_el
4
4
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
5
5
  import { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
6
6
  import { Observer } from '../../../../../core/classes/observer/observer.js';
7
- import { html, nothing } from 'lit-html';
7
+ import { html } from 'lit-html';
8
8
  import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
9
9
  import { SELECT_EVENT_NAMES, SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
10
10
  import { observe } from '../../../../../directives/observable_directive.js';
@@ -38,20 +38,6 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
38
38
  this._selectedOptionsObserver = new Observer(this._handleSelectedOptionChanged);
39
39
  this.selectedOptions$.subscribe(this._selectedOptionsObserver);
40
40
  }
41
- _renderTogglerContent(option) {
42
- const parts = (option.content || '')
43
- .split('\n')
44
- .map((line) => line.trim())
45
- .filter((line) => line.length > 0);
46
- const name = parts[0] || '';
47
- const addon = parts.slice(1).join(' ');
48
- return html `
49
- <div class="select-toggler__layout">
50
- <span class="select-toggler__name">${name}</span>
51
- ${addon ? html `<span class="select-toggler__addon">${addon}</span>` : nothing}
52
- </div>
53
- `;
54
- }
55
41
  disconnectedCallback() {
56
42
  var _a;
57
43
  super.disconnectedCallback();
@@ -63,24 +49,19 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
63
49
  return html `
64
50
  ${observe(this.selectedOptions$, (selectOptions) => {
65
51
  var _a;
66
- if (!selectOptions.length) {
52
+ if (!selectOptions.length)
67
53
  return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : html `<span class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
68
- }
69
- return html `
70
- <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
71
- ${this.isMultiselect
72
- ? selectOptions.map((option) => {
73
- const content = this._renderTogglerContent(option);
74
- return html `
75
- <li>
76
- <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
77
- ${content}
78
- <h-tag-remove-button></h-tag-remove-button>
79
- </h-tag>
80
- </li>`;
81
- })
82
- : html `<li>${this._renderTogglerContent(selectOptions[0])}</li>`}
83
- </ul>`;
54
+ return html ` <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
55
+ ${this.isMultiselect
56
+ ? selectOptions.map((option) => html ` <li>
57
+ <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
58
+ ${option.content}
59
+
60
+ <h-tag-remove-button></h-tag-remove-button>
61
+ </h-tag>
62
+ </li>`)
63
+ : html ` <li>${selectOptions[0].content}</li>`}
64
+ </ul>`;
84
65
  })}
85
66
 
86
67
  <h-icon icon-name="icon-chevron-down"></h-icon>
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_mapper.js CHANGED
@@ -6,12 +6,12 @@ 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 === 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');
13
13
  return SelectOption.create({
14
- value,
14
+ value: value || '',
15
15
  disabled: $option.hasAttribute('disabled'),
16
16
  hidden: $option.hasAttribute('hidden'),
17
17
  inactive: $option.hasAttribute('inactive'),
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -53,6 +53,7 @@ export declare class HSelect extends PhoenixLightLitElement {
53
53
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
54
54
  private _updateOptions;
55
55
  private _getOptions;
56
+ private _addPlaceholderOptionIfNeeded;
56
57
  private _setupEvents;
57
58
  private _handleOptionDeselect;
58
59
  private _updateOptionsView;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -53,11 +53,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
53
53
  const $options = this._getOptions();
54
54
  this._$options = $options.reduce((acc, $option) => {
55
55
  const value = $option.getAttribute('value');
56
- if (!value)
56
+ if (value === undefined)
57
57
  throw Error('Select option must hava a value');
58
- if (acc.has(value))
58
+ if (acc.has(value || ''))
59
59
  throw Error('Select options must hava a unique values.');
60
- return acc.set(value, $option);
60
+ return acc.set(value || '', $option);
61
61
  }, new Map());
62
62
  const options = $options.map(SelectOptionMapper.toModel);
63
63
  this._selectController.options$.notify(options);
@@ -213,6 +213,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
213
213
  }
214
214
  if (changedProperties.has('optionsList')) {
215
215
  this._updateOptions();
216
+ this._addPlaceholderOptionIfNeeded();
216
217
  }
217
218
  if (this._$optionsList.value) {
218
219
  (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
@@ -261,6 +262,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
261
262
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
262
263
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
263
264
  this._updateOptions();
265
+ this._addPlaceholderOptionIfNeeded();
264
266
  this._setupEvents();
265
267
  }
266
268
  attributeChangedCallback(name, _old, value) {
@@ -273,6 +275,37 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
273
275
  this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
274
276
  }
275
277
  }
278
+ _addPlaceholderOptionIfNeeded() {
279
+ if (this.multiple)
280
+ return;
281
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
282
+ if (selectedOptions && selectedOptions.length > 0)
283
+ return;
284
+ const $existingPlaceholder = this.querySelector('h-option[data-placeholder]');
285
+ if ($existingPlaceholder)
286
+ return;
287
+ const $placeholderOption = document.createElement('h-option');
288
+ $placeholderOption.value = '';
289
+ $placeholderOption.selected = true;
290
+ $placeholderOption.setAttribute('data-placeholder', 'true');
291
+ $placeholderOption.setAttribute('slot', SELECT_SLOT_NAMES.content);
292
+ const $optionContent = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
293
+ if (typeof this.$placeholder === 'string') {
294
+ $optionContent.textContent = this.$placeholder;
295
+ }
296
+ else {
297
+ $optionContent.innerHTML = this.$placeholder.innerHTML;
298
+ }
299
+ $placeholderOption.appendChild($optionContent);
300
+ const firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
301
+ if (firstOption) {
302
+ this.insertBefore($placeholderOption, firstOption);
303
+ }
304
+ else {
305
+ this.appendChild($placeholderOption);
306
+ }
307
+ this._updateOptions();
308
+ }
276
309
  _setupEvents() {
277
310
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
278
311
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
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;"}
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.2-1",
5
+ "version": "1.18.2-10",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",