@shoper/phoenix_design_system 1.18.22-1 → 1.18.22-3

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 (8) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +1 -1
  2. package/build/cjs/packages/phoenix/src/components/form/select/select.js +77 -8
  3. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  4. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +6 -0
  6. package/build/esm/packages/phoenix/src/components/form/select/select.js +77 -8
  7. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  8. package/package.json +2 -2
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js CHANGED
@@ -72,7 +72,7 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
72
72
  return litHtml.html `
73
73
  ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
74
74
  var _a;
75
- if (!selectOptions.length) {
75
+ if (!selectOptions.length || selectOptions[0].isPlaceholder) {
76
76
  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>`}`;
77
77
  }
78
78
  return litHtml.html ` <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -45,6 +45,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
45
45
  this.assistiveTitleId = '';
46
46
  this.isDevSelectPlaceholderFlagEnabled = false;
47
47
  this.isReactiveSelectionFlagEnabled = false;
48
+ this.isDevSelectPlaceholderTranslationFlagEnabled = false;
48
49
  this.translations = {};
49
50
  this._selectOptionsId = v4['default']();
50
51
  this._searchValue = '';
@@ -185,8 +186,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
185
186
  };
186
187
  const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
187
188
  $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
188
- const $placeholderEl = (_a = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
189
- this.$placeholder = $placeholderEl && ((_b = $placeholderEl.textContent) === null || _b === void 0 ? void 0 : _b.trim()) ? $placeholderEl : 'Select';
189
+ if (!this.isDevSelectPlaceholderTranslationFlagEnabled) {
190
+ const $placeholderEl = (_a = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
191
+ this.$placeholder = ($placeholderEl && ((_b = $placeholderEl.textContent) === null || _b === void 0 ? void 0 : _b.trim())) ? $placeholderEl : 'Select';
192
+ }
190
193
  if (this.multiple)
191
194
  this.type = select_constants.SELECT_TYPES.multiple;
192
195
  }
@@ -290,10 +293,63 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
290
293
  }
291
294
  firstUpdated(changedProperties) {
292
295
  super.firstUpdated(changedProperties);
296
+ if (this.isDevSelectPlaceholderTranslationFlagEnabled) {
297
+ this._initializePlaceholder();
298
+ }
293
299
  if (this.isReactiveSelectionFlagEnabled) {
294
300
  this._setupMutationObserver();
295
301
  }
296
302
  }
303
+ _initializePlaceholder() {
304
+ var _a;
305
+ this.$placeholder = (_a = this._extractPlaceholderFromTogglerSlot()) !== null && _a !== void 0 ? _a : 'Select';
306
+ this._updateExistingPlaceholderContent();
307
+ this._updateOptions();
308
+ }
309
+ _extractPlaceholderFromTogglerSlot() {
310
+ var _a;
311
+ if (!this.hasSlot(select_constants.SELECT_SLOT_NAMES.toggler)) {
312
+ return null;
313
+ }
314
+ const togglerTemplates = this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler);
315
+ if (!Array.isArray(togglerTemplates) || togglerTemplates.length === 0) {
316
+ return null;
317
+ }
318
+ const togglerElement = (_a = togglerTemplates[0].values) === null || _a === void 0 ? void 0 : _a[0];
319
+ if (!togglerElement) {
320
+ return null;
321
+ }
322
+ return this._findPlaceholder(togglerElement);
323
+ }
324
+ _findPlaceholder(container) {
325
+ var _a;
326
+ if (typeof container.querySelector !== 'function') {
327
+ return null;
328
+ }
329
+ const $placeholder = container.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
330
+ const containerFallback = ((_a = container.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? container : null;
331
+ return $placeholder || containerFallback;
332
+ }
333
+ _updateExistingPlaceholderContent() {
334
+ const $existingPlaceholderOption = this.querySelector('h-option[placeholder]');
335
+ if (!$existingPlaceholderOption)
336
+ return;
337
+ const $content = $existingPlaceholderOption.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
338
+ if (!$content)
339
+ return;
340
+ $content.replaceChildren();
341
+ this._injectPlaceholderContent($content, this.$placeholder);
342
+ }
343
+ _injectPlaceholderContent(container, placeholder) {
344
+ if (typeof placeholder === 'string') {
345
+ container.textContent = placeholder;
346
+ return;
347
+ }
348
+ if (placeholder instanceof Node) {
349
+ const clonedChildren = Array.from(placeholder.childNodes).map(node => node.cloneNode(true));
350
+ container.append(...clonedChildren);
351
+ }
352
+ }
297
353
  attributeChangedCallback(name, _old, value) {
298
354
  super.attributeChangedCallback(name, _old, value);
299
355
  switch (name) {
@@ -328,13 +384,18 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
328
384
  $option.setAttribute('placeholder', 'true');
329
385
  $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
330
386
  const $content = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
331
- if (typeof this.$placeholder === 'string') {
332
- $content.textContent = this.$placeholder;
387
+ if (this.isDevSelectPlaceholderTranslationFlagEnabled) {
388
+ this._injectPlaceholderContent($content, this.$placeholder);
333
389
  }
334
- else if (this.$placeholder instanceof Node) {
335
- Array.from(this.$placeholder.childNodes).forEach((node) => {
336
- $content.appendChild(node.cloneNode(true));
337
- });
390
+ else {
391
+ if (typeof this.$placeholder === 'string') {
392
+ $content.textContent = this.$placeholder;
393
+ }
394
+ else if (this.$placeholder instanceof Node) {
395
+ Array.from(this.$placeholder.childNodes).forEach((node) => {
396
+ $content.appendChild(node.cloneNode(true));
397
+ });
398
+ }
338
399
  }
339
400
  $option.appendChild($content);
340
401
  return $option;
@@ -641,6 +702,10 @@ tslib_es6.__decorate([
641
702
  decorators_js.property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
642
703
  tslib_es6.__metadata("design:type", Boolean)
643
704
  ], exports.HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
705
+ tslib_es6.__decorate([
706
+ decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-translation-flag-enabled' }),
707
+ tslib_es6.__metadata("design:type", Boolean)
708
+ ], exports.HSelect.prototype, "isDevSelectPlaceholderTranslationFlagEnabled", void 0);
644
709
  tslib_es6.__decorate([
645
710
  decorators_js.property({
646
711
  converter: {
@@ -666,6 +731,10 @@ tslib_es6.__decorate([
666
731
  decorators.state(),
667
732
  tslib_es6.__metadata("design:type", String)
668
733
  ], exports.HSelect.prototype, "_searchValue", void 0);
734
+ tslib_es6.__decorate([
735
+ decorators.state(),
736
+ tslib_es6.__metadata("design:type", Object)
737
+ ], exports.HSelect.prototype, "$placeholder", void 0);
669
738
  exports.HSelect = tslib_es6.__decorate([
670
739
  phoenix_custom_element.phoenixCustomElement('h-select'),
671
740
  tslib_es6.__metadata("design:paramtypes", [])
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.js CHANGED
@@ -68,7 +68,7 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
68
68
  return html `
69
69
  ${observe(this.selectedOptions$, (selectOptions) => {
70
70
  var _a;
71
- if (!selectOptions.length) {
71
+ if (!selectOptions.length || selectOptions[0].isPlaceholder) {
72
72
  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>`}`;
73
73
  }
74
74
  return html ` <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -25,6 +25,7 @@ export declare class HSelect extends PhoenixLightLitElement {
25
25
  assistiveTitleId: string;
26
26
  isDevSelectPlaceholderFlagEnabled: boolean;
27
27
  isReactiveSelectionFlagEnabled: boolean;
28
+ isDevSelectPlaceholderTranslationFlagEnabled: boolean;
28
29
  translations: Record<string, string>;
29
30
  private _selectOptionsId;
30
31
  get selectedIndex(): number;
@@ -54,6 +55,11 @@ export declare class HSelect extends PhoenixLightLitElement {
54
55
  private _focusElementAfterSelectOpened;
55
56
  connectedCallback(): void;
56
57
  firstUpdated(changedProperties: PropertyValues): void;
58
+ private _initializePlaceholder;
59
+ private _extractPlaceholderFromTogglerSlot;
60
+ private _findPlaceholder;
61
+ private _updateExistingPlaceholderContent;
62
+ private _injectPlaceholderContent;
57
63
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
58
64
  private _updateOptions;
59
65
  private _getOptions;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -41,6 +41,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
41
41
  this.assistiveTitleId = '';
42
42
  this.isDevSelectPlaceholderFlagEnabled = false;
43
43
  this.isReactiveSelectionFlagEnabled = false;
44
+ this.isDevSelectPlaceholderTranslationFlagEnabled = false;
44
45
  this.translations = {};
45
46
  this._selectOptionsId = v4();
46
47
  this._searchValue = '';
@@ -181,8 +182,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
181
182
  };
182
183
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
183
184
  $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
184
- const $placeholderEl = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
185
- this.$placeholder = $placeholderEl && ((_b = $placeholderEl.textContent) === null || _b === void 0 ? void 0 : _b.trim()) ? $placeholderEl : 'Select';
185
+ if (!this.isDevSelectPlaceholderTranslationFlagEnabled) {
186
+ const $placeholderEl = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
187
+ this.$placeholder = ($placeholderEl && ((_b = $placeholderEl.textContent) === null || _b === void 0 ? void 0 : _b.trim())) ? $placeholderEl : 'Select';
188
+ }
186
189
  if (this.multiple)
187
190
  this.type = SELECT_TYPES.multiple;
188
191
  }
@@ -286,10 +289,63 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
286
289
  }
287
290
  firstUpdated(changedProperties) {
288
291
  super.firstUpdated(changedProperties);
292
+ if (this.isDevSelectPlaceholderTranslationFlagEnabled) {
293
+ this._initializePlaceholder();
294
+ }
289
295
  if (this.isReactiveSelectionFlagEnabled) {
290
296
  this._setupMutationObserver();
291
297
  }
292
298
  }
299
+ _initializePlaceholder() {
300
+ var _a;
301
+ this.$placeholder = (_a = this._extractPlaceholderFromTogglerSlot()) !== null && _a !== void 0 ? _a : 'Select';
302
+ this._updateExistingPlaceholderContent();
303
+ this._updateOptions();
304
+ }
305
+ _extractPlaceholderFromTogglerSlot() {
306
+ var _a;
307
+ if (!this.hasSlot(SELECT_SLOT_NAMES.toggler)) {
308
+ return null;
309
+ }
310
+ const togglerTemplates = this.getSlot(SELECT_SLOT_NAMES.toggler);
311
+ if (!Array.isArray(togglerTemplates) || togglerTemplates.length === 0) {
312
+ return null;
313
+ }
314
+ const togglerElement = (_a = togglerTemplates[0].values) === null || _a === void 0 ? void 0 : _a[0];
315
+ if (!togglerElement) {
316
+ return null;
317
+ }
318
+ return this._findPlaceholder(togglerElement);
319
+ }
320
+ _findPlaceholder(container) {
321
+ var _a;
322
+ if (typeof container.querySelector !== 'function') {
323
+ return null;
324
+ }
325
+ const $placeholder = container.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
326
+ const containerFallback = ((_a = container.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? container : null;
327
+ return $placeholder || containerFallback;
328
+ }
329
+ _updateExistingPlaceholderContent() {
330
+ const $existingPlaceholderOption = this.querySelector('h-option[placeholder]');
331
+ if (!$existingPlaceholderOption)
332
+ return;
333
+ const $content = $existingPlaceholderOption.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
334
+ if (!$content)
335
+ return;
336
+ $content.replaceChildren();
337
+ this._injectPlaceholderContent($content, this.$placeholder);
338
+ }
339
+ _injectPlaceholderContent(container, placeholder) {
340
+ if (typeof placeholder === 'string') {
341
+ container.textContent = placeholder;
342
+ return;
343
+ }
344
+ if (placeholder instanceof Node) {
345
+ const clonedChildren = Array.from(placeholder.childNodes).map(node => node.cloneNode(true));
346
+ container.append(...clonedChildren);
347
+ }
348
+ }
293
349
  attributeChangedCallback(name, _old, value) {
294
350
  super.attributeChangedCallback(name, _old, value);
295
351
  switch (name) {
@@ -324,13 +380,18 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
324
380
  $option.setAttribute('placeholder', 'true');
325
381
  $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
326
382
  const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
327
- if (typeof this.$placeholder === 'string') {
328
- $content.textContent = this.$placeholder;
383
+ if (this.isDevSelectPlaceholderTranslationFlagEnabled) {
384
+ this._injectPlaceholderContent($content, this.$placeholder);
329
385
  }
330
- else if (this.$placeholder instanceof Node) {
331
- Array.from(this.$placeholder.childNodes).forEach((node) => {
332
- $content.appendChild(node.cloneNode(true));
333
- });
386
+ else {
387
+ if (typeof this.$placeholder === 'string') {
388
+ $content.textContent = this.$placeholder;
389
+ }
390
+ else if (this.$placeholder instanceof Node) {
391
+ Array.from(this.$placeholder.childNodes).forEach((node) => {
392
+ $content.appendChild(node.cloneNode(true));
393
+ });
394
+ }
334
395
  }
335
396
  $option.appendChild($content);
336
397
  return $option;
@@ -637,6 +698,10 @@ __decorate([
637
698
  property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
638
699
  __metadata("design:type", Boolean)
639
700
  ], HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
701
+ __decorate([
702
+ property({ type: Boolean, attribute: 'is-dev-select-placeholder-translation-flag-enabled' }),
703
+ __metadata("design:type", Boolean)
704
+ ], HSelect.prototype, "isDevSelectPlaceholderTranslationFlagEnabled", void 0);
640
705
  __decorate([
641
706
  property({
642
707
  converter: {
@@ -662,6 +727,10 @@ __decorate([
662
727
  state(),
663
728
  __metadata("design:type", String)
664
729
  ], HSelect.prototype, "_searchValue", void 0);
730
+ __decorate([
731
+ state(),
732
+ __metadata("design:type", Object)
733
+ ], HSelect.prototype, "$placeholder", void 0);
665
734
  HSelect = __decorate([
666
735
  phoenixCustomElement('h-select'),
667
736
  __metadata("design:paramtypes", [])
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.22-1",
5
+ "version": "1.18.22-3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "@splidejs/splide-extension-auto-scroll": "0.5.3"
32
32
  },
33
33
  "devDependencies": {
34
- "@dreamcommerce/utilities": "^1.23.2",
34
+ "@dreamcommerce/utilities": "^1.23.3",
35
35
  "@shoper/jest_config": "^0.0.0",
36
36
  "@shoper/tsconfig": "^0.0.0",
37
37
  "@splidejs/splide": "4.0.7",