@shoper/phoenix_design_system 1.18.6-0 → 1.18.6-2

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 (18) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +14 -22
  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/select.js +25 -15
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js +2 -1
  6. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/index.js +7 -7
  8. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts +1 -2
  9. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +15 -23
  10. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
  11. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +2 -1
  12. package/build/esm/packages/phoenix/src/components/form/select/select.js +25 -15
  13. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts +1 -0
  15. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js +2 -1
  16. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/index.js +1 -1
  18. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js CHANGED
@@ -20,31 +20,35 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
20
20
  this.selectedOptions$ = null;
21
21
  this.isMultiselect = false;
22
22
  this.searchDisabled = false;
23
- this.noDeselect = false;
24
23
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
25
24
  this._handleSelectedOptionChanged = (selectedOptions) => {
26
25
  selectedOptions.length
27
26
  ? this.classList.add(select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerSelected)
28
27
  : this.classList.remove(select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerSelected);
29
28
  };
30
- this._dispatchOptionDeselect = (option) => {
31
- this.emitCustomEvent(select_constants.SELECT_EVENT_NAMES.deselectOption, {
32
- detail: option.value
33
- });
34
- };
35
29
  }
36
30
  connectedCallback() {
37
31
  super.connectedCallback();
38
32
  this.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.toggler);
39
33
  this.classList.add(select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectToggler);
34
+ this._setupAriaAttributes();
40
35
  this._subscribeObserver();
41
36
  }
37
+ _setupAriaAttributes() {
38
+ const $select = this.closest('h-select');
39
+ this.setAttribute('aria-haspopup', 'listbox');
40
+ this.setAttribute('role', 'combobox');
41
+ this.setAttribute('aria-activedescendant', '');
42
+ if ($select) {
43
+ this.setAttribute('aria-required', $select.required ? 'true' : 'false');
44
+ this.setAttribute('aria-controls', $select.selectOptionsId);
45
+ }
46
+ }
42
47
  async _subscribeObserver() {
43
48
  var _a;
44
49
  this.isMultiselect = (await this._contextConsumer.consumeAsync(select_constants.SELECT_CONTEXTS.isMultiselect));
45
50
  this.selectedOptions$ = (await this._contextConsumer.consumeAsync(select_constants.SELECT_CONTEXTS.selectedOptions$));
46
51
  this.searchDisabled = (await this._contextConsumer.consumeAsync(select_constants.SELECT_CONTEXTS.searchDisabled));
47
- this.noDeselect = (await this._contextConsumer.consumeAsync(select_constants.SELECT_CONTEXTS.noDeselect));
48
52
  const options = (_a = this.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
49
53
  const minOptionsToShowSearch = 6;
50
54
  const isSearchEnabled = !this.searchDisabled && options.length > minOptionsToShowSearch;
@@ -67,20 +71,12 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
67
71
  var _a;
68
72
  if (!selectOptions.length)
69
73
  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>`}`;
74
+ // When showing tags (noDeselect = false), just show selected text in toggler
75
+ // Tags are rendered separately above the combobox
70
76
  return litHtml.html ` <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
71
- ${!this.noDeselect
72
- ? selectOptions.map((option) => litHtml.html ` <li>
73
- <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
74
- ${option.content}
75
-
76
- <h-tag-remove-button .optionName=${option.content}></h-tag-remove-button>
77
- </h-tag>
78
- </li>`)
79
- : litHtml.html ` <li>${selectOptions[0].content}</li>`}
77
+ <li>${selectOptions[0].content}</li>
80
78
  </ul>`;
81
79
  })}
82
-
83
- <h-icon icon-name="icon-chevron-down"></h-icon>
84
80
  `;
85
81
  }
86
82
  };
@@ -96,10 +92,6 @@ tslib_es6.__decorate([
96
92
  decorators.state(),
97
93
  tslib_es6.__metadata("design:type", Boolean)
98
94
  ], exports.HSelectToggler.prototype, "searchDisabled", void 0);
99
- tslib_es6.__decorate([
100
- decorators.state(),
101
- tslib_es6.__metadata("design:type", Boolean)
102
- ], exports.HSelectToggler.prototype, "noDeselect", void 0);
103
95
  exports.HSelectToggler = tslib_es6.__decorate([
104
96
  phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.toggler)
105
97
  ], exports.HSelectToggler);
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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -15,7 +15,6 @@ var select_option$1 = require('./components/option/select_option.js');
15
15
  var select_option = require('./model/select_option.js');
16
16
  var select_constants = require('./select_constants.js');
17
17
  var observable_directive = require('../../../directives/observable_directive.js');
18
- var select_toggler = require('./components/toggler/select_toggler.js');
19
18
  var ref_js = require('lit-html/directives/ref.js');
20
19
  var context_provider_controller = require('../../../core/context/context_provider_controller.js');
21
20
  var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
@@ -31,6 +30,7 @@ var select_controller = require('./controllers/select_controller.js');
31
30
  var select_option_mapper = require('./model/select_option_mapper.js');
32
31
  var repeat = require('lit/directives/repeat');
33
32
  var select_toggler_keyboard_controller = require('./controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js');
33
+ var select_toggler = require('./components/toggler/select_toggler.js');
34
34
 
35
35
  exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
36
36
  constructor() {
@@ -44,7 +44,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
44
44
  this.noDeselect = false;
45
45
  this.assistiveTitleId = '';
46
46
  this.translations = {};
47
- this._selectOptionsId = v4['default']();
47
+ this.selectOptionsId = v4['default']();
48
48
  this._searchValue = '';
49
49
  this._$options = new Map();
50
50
  this.$dropdown = ref_js.createRef();
@@ -94,7 +94,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
94
94
  // Focus management: move focus to combobox when no options are selected
95
95
  const selectedOptions = this._selectController.selectedOptions$.getValue();
96
96
  if (!selectedOptions || selectedOptions.length === 0) {
97
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.focus();
97
+ (_a = this.$selectToggler) === null || _a === void 0 ? void 0 : _a.focus();
98
98
  }
99
99
  };
100
100
  this._updateOptionsView = (options) => {
@@ -145,11 +145,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
145
145
  var _a, _b, _c;
146
146
  this._searchValue = '';
147
147
  this.opened = false;
148
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
148
+ (_a = this.$selectToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
149
149
  const isBodyActive = document.activeElement === document.body;
150
150
  const isInnerElementActive = (_b = this._$dropdownContent.value) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
151
151
  if (isInnerElementActive || isBodyActive) {
152
- (_c = this.$dropdownToggler.value) === null || _c === void 0 ? void 0 : _c.focus();
152
+ (_c = this.$selectToggler) === null || _c === void 0 ? void 0 : _c.focus();
153
153
  }
154
154
  };
155
155
  this._manageSelectFocusAria = (ev) => {
@@ -159,7 +159,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
159
159
  return;
160
160
  const optionId = $target.id;
161
161
  if (optionId) {
162
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
162
+ (_a = this.$selectToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
163
163
  }
164
164
  };
165
165
  this._closeSelect = () => {
@@ -234,11 +234,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
234
234
  if (this.listBoxController) {
235
235
  this.listBoxController.calculateSelectedOptionIndex();
236
236
  }
237
- if (this._$optionsList.value && this.$dropdownToggler.value) {
237
+ if (this._$optionsList.value && this.$selectToggler) {
238
238
  (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
239
239
  this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
240
240
  host: this,
241
- $toggler: this.$dropdownToggler.value,
241
+ $toggler: this.$selectToggler,
242
242
  $list: this._$optionsList.value
243
243
  });
244
244
  }
@@ -263,6 +263,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
263
263
  }
264
264
  this.$searchLabel = document.querySelector(`[id="${this.assistiveTitleId}"]`);
265
265
  (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
266
+ this.$selectToggler = this.querySelector(`h-select-toggler`);
266
267
  this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
267
268
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
268
269
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
@@ -383,14 +384,23 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
383
384
  ${ref_js.ref(this.$dropdownToggler)}
384
385
  name="${this.controlName}"
385
386
  validation-container
386
- aria-haspopup="listbox"
387
- role="combobox"
388
- aria-required="${this.required ? 'true' : 'false'}"
389
- aria-activedescendant
390
- role="combobox"
391
- aria-controls="${this._selectOptionsId}"
392
387
  >
388
+ ${!this.noDeselect
389
+ ? lit.html `
390
+ <div class=${select_constants.SELECT_CSS_CLASSES.selectTags}>
391
+ ${observable_directive.observe(this._selectController.selectedOptions$, (selectOptions) => lit.html `
392
+ ${selectOptions.map((option) => lit.html `
393
+ <h-tag @remove=${() => this._handleOptionDeselect(new CustomEvent('deselect', { detail: option.value }))}>
394
+ ${option.content}
395
+ <h-tag-remove-button .optionName=${option.content}></h-tag-remove-button>
396
+ </h-tag>
397
+ `)}
398
+ `)}
399
+ </div>
400
+ `
401
+ : lit.nothing}
393
402
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
403
+ <h-icon icon-name="icon-chevron-down"></h-icon>
394
404
  </h-dropdown-toggler>
395
405
 
396
406
  <h-dropdown-content
@@ -416,7 +426,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
416
426
  <h-options
417
427
  class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
418
428
  aria-labelledby="${this.assistiveTitleId}"
419
- id="${this._selectOptionsId}"
429
+ id="${this.selectOptionsId}"
420
430
  ${ref_js.ref(this._$optionsList)}
421
431
  @optionClicked=${this._handleOptionClicked}
422
432
  @optionUpdated=${this._handleOptionUpdated}
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;"}
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,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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -39,7 +39,8 @@ const SELECT_CSS_CLASSES = {
39
39
  selectCloseMobileButton: `${baseSelectClass}__close-mobile-btn`,
40
40
  selectClearButton: `${baseSelectClass}__clear-btn`,
41
41
  selectCloseButton: `${baseSelectClass}__close-btn`,
42
- selectLabel: `${baseSelectClass}__label`
42
+ selectLabel: `${baseSelectClass}__label`,
43
+ selectTags: `${baseSelectClass}__tags`
43
44
  };
44
45
  const SELECT_DEFAULT_TRANSLATIONS = {
45
46
  NO_RESULTS_FOR: 'Brak wyników dla',
package/build/cjs/packages/phoenix/src/components/form/select/select_constants.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;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/cjs/packages/phoenix/src/index.js CHANGED
@@ -14,7 +14,6 @@ var select_options = require('./components/form/select/components/select_options
14
14
  var context_consumer_messages_names = require('./core/context/context_consumer_messages_names.js');
15
15
  var context_consumer_controller = require('./core/context/context_consumer_controller.js');
16
16
  var behavior_subject = require('./core/classes/behavior_subject/behavior_subject.js');
17
- var select_toggler = require('./components/form/select/components/toggler/select_toggler.js');
18
17
  var context_provider_controller = require('./core/context/context_provider_controller.js');
19
18
  var portal = require('./components/portal/portal.js');
20
19
  var portal_target = require('./components/portal/portal_target.js');
@@ -27,6 +26,7 @@ var dropdown_toggler = require('./components/dropdown/dropdown_toggler.js');
27
26
  var relative_position_controller = require('./controllers/relative_position_controller/relative_position_controller.js');
28
27
  var dropdown = require('./components/dropdown/dropdown.js');
29
28
  var select = require('./components/form/select/select.js');
29
+ var select_toggler = require('./components/form/select/components/toggler/select_toggler.js');
30
30
  var file = require('./components/form/file_picker/file/file.js');
31
31
  var input_constants = require('./components/form/input/input_constants.js');
32
32
  var file_picker = require('./components/form/file_picker/file_picker.js');
@@ -167,12 +167,6 @@ Object.defineProperty(exports, 'HOptions', {
167
167
  exports.WEB_COMPONENT_CONTEXT_EVENTS = context_consumer_messages_names.WEB_COMPONENT_CONTEXT_EVENTS;
168
168
  exports.ContextConsumerController = context_consumer_controller.ContextConsumerController;
169
169
  exports.BehaviorSubject = behavior_subject.BehaviorSubject;
170
- Object.defineProperty(exports, 'HSelectToggler', {
171
- enumerable: true,
172
- get: function () {
173
- return select_toggler.HSelectToggler;
174
- }
175
- });
176
170
  exports.ContextProviderController = context_provider_controller.ContextProviderController;
177
171
  Object.defineProperty(exports, 'HPortal', {
178
172
  enumerable: true,
@@ -215,6 +209,12 @@ Object.defineProperty(exports, 'HSelect', {
215
209
  return select.HSelect;
216
210
  }
217
211
  });
212
+ Object.defineProperty(exports, 'HSelectToggler', {
213
+ enumerable: true,
214
+ get: function () {
215
+ return select_toggler.HSelectToggler;
216
+ }
217
+ });
218
218
  Object.defineProperty(exports, 'HFile', {
219
219
  enumerable: true,
220
220
  get: function () {
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts CHANGED
@@ -6,13 +6,12 @@ export declare class HSelectToggler extends PhoenixLightLitElement {
6
6
  selectedOptions$: BehaviorSubject<SelectOption[]> | null;
7
7
  isMultiselect: boolean;
8
8
  searchDisabled: boolean;
9
- noDeselect: boolean;
10
9
  private _contextConsumer;
11
10
  private _selectedOptionsObserver;
12
11
  connectedCallback(): void;
12
+ private _setupAriaAttributes;
13
13
  private _subscribeObserver;
14
14
  private _handleSelectedOptionChanged;
15
- private _dispatchOptionDeselect;
16
15
  disconnectedCallback(): void;
17
16
  render(): TemplateResult | undefined;
18
17
  }
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js CHANGED
@@ -6,7 +6,7 @@ import { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } f
6
6
  import { Observer } from '../../../../../core/classes/observer/observer.js';
7
7
  import { html } from 'lit-html';
8
8
  import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
9
- import { SELECT_EVENT_NAMES, SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
9
+ import { SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
10
10
  import { observe } from '../../../../../directives/observable_directive.js';
11
11
  import { SELECT_TOGGLER_CSS_CLASSES } from './select_toggler_constants.js';
12
12
 
@@ -16,31 +16,35 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
16
16
  this.selectedOptions$ = null;
17
17
  this.isMultiselect = false;
18
18
  this.searchDisabled = false;
19
- this.noDeselect = false;
20
19
  this._contextConsumer = new ContextConsumerController(this);
21
20
  this._handleSelectedOptionChanged = (selectedOptions) => {
22
21
  selectedOptions.length
23
22
  ? this.classList.add(SELECT_TOGGLER_CSS_CLASSES.selectTogglerSelected)
24
23
  : this.classList.remove(SELECT_TOGGLER_CSS_CLASSES.selectTogglerSelected);
25
24
  };
26
- this._dispatchOptionDeselect = (option) => {
27
- this.emitCustomEvent(SELECT_EVENT_NAMES.deselectOption, {
28
- detail: option.value
29
- });
30
- };
31
25
  }
32
26
  connectedCallback() {
33
27
  super.connectedCallback();
34
28
  this.setAttribute('slot', SELECT_SLOT_NAMES.toggler);
35
29
  this.classList.add(SELECT_TOGGLER_CSS_CLASSES.selectToggler);
30
+ this._setupAriaAttributes();
36
31
  this._subscribeObserver();
37
32
  }
33
+ _setupAriaAttributes() {
34
+ const $select = this.closest('h-select');
35
+ this.setAttribute('aria-haspopup', 'listbox');
36
+ this.setAttribute('role', 'combobox');
37
+ this.setAttribute('aria-activedescendant', '');
38
+ if ($select) {
39
+ this.setAttribute('aria-required', $select.required ? 'true' : 'false');
40
+ this.setAttribute('aria-controls', $select.selectOptionsId);
41
+ }
42
+ }
38
43
  async _subscribeObserver() {
39
44
  var _a;
40
45
  this.isMultiselect = (await this._contextConsumer.consumeAsync(SELECT_CONTEXTS.isMultiselect));
41
46
  this.selectedOptions$ = (await this._contextConsumer.consumeAsync(SELECT_CONTEXTS.selectedOptions$));
42
47
  this.searchDisabled = (await this._contextConsumer.consumeAsync(SELECT_CONTEXTS.searchDisabled));
43
- this.noDeselect = (await this._contextConsumer.consumeAsync(SELECT_CONTEXTS.noDeselect));
44
48
  const options = (_a = this.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
45
49
  const minOptionsToShowSearch = 6;
46
50
  const isSearchEnabled = !this.searchDisabled && options.length > minOptionsToShowSearch;
@@ -63,20 +67,12 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
63
67
  var _a;
64
68
  if (!selectOptions.length)
65
69
  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>`}`;
70
+ // When showing tags (noDeselect = false), just show selected text in toggler
71
+ // Tags are rendered separately above the combobox
66
72
  return html ` <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
67
- ${!this.noDeselect
68
- ? selectOptions.map((option) => html ` <li>
69
- <h-tag @remove=${() => this._dispatchOptionDeselect(option)}>
70
- ${option.content}
71
-
72
- <h-tag-remove-button .optionName=${option.content}></h-tag-remove-button>
73
- </h-tag>
74
- </li>`)
75
- : html ` <li>${selectOptions[0].content}</li>`}
73
+ <li>${selectOptions[0].content}</li>
76
74
  </ul>`;
77
75
  })}
78
-
79
- <h-icon icon-name="icon-chevron-down"></h-icon>
80
76
  `;
81
77
  }
82
78
  };
@@ -92,10 +88,6 @@ __decorate([
92
88
  state(),
93
89
  __metadata("design:type", Boolean)
94
90
  ], HSelectToggler.prototype, "searchDisabled", void 0);
95
- __decorate([
96
- state(),
97
- __metadata("design:type", Boolean)
98
- ], HSelectToggler.prototype, "noDeselect", void 0);
99
91
  HSelectToggler = __decorate([
100
92
  phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.toggler)
101
93
  ], HSelectToggler);
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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -24,7 +24,7 @@ export declare class HSelect extends PhoenixLightLitElement {
24
24
  noDeselect: boolean;
25
25
  assistiveTitleId: string;
26
26
  translations: Record<string, string>;
27
- private _selectOptionsId;
27
+ selectOptionsId: string;
28
28
  get selectedIndex(): number;
29
29
  set selectedIndex(index: number);
30
30
  get selectedOptions(): (HOption | undefined)[];
@@ -46,6 +46,7 @@ export declare class HSelect extends PhoenixLightLitElement {
46
46
  private _selectedOptionsAriaObserver;
47
47
  private $placeholder;
48
48
  private $searchLabel;
49
+ private $selectToggler;
49
50
  constructor();
50
51
  updated(changedProperties: PropertyValues): void;
51
52
  private _focusElementAfterSelectOpened;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -11,7 +11,6 @@ import { HOption } from './components/option/select_option.js';
11
11
  import { SelectOption } from './model/select_option.js';
12
12
  import { SELECT_TYPES, SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_DEFAULT_TRANSLATIONS } from './select_constants.js';
13
13
  import { observe } from '../../../directives/observable_directive.js';
14
- import { HSelectToggler } from './components/toggler/select_toggler.js';
15
14
  import { createRef, ref } from 'lit-html/directives/ref.js';
16
15
  import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
17
16
  import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
@@ -27,6 +26,7 @@ import { SelectController } from './controllers/select_controller.js';
27
26
  import { SelectOptionMapper } from './model/select_option_mapper.js';
28
27
  import { repeat } from 'lit/directives/repeat';
29
28
  import { SelectTogglerKeyboardController } from './controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js';
29
+ import { HSelectToggler } from './components/toggler/select_toggler.js';
30
30
 
31
31
  let HSelect = class HSelect extends PhoenixLightLitElement {
32
32
  constructor() {
@@ -40,7 +40,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
40
40
  this.noDeselect = false;
41
41
  this.assistiveTitleId = '';
42
42
  this.translations = {};
43
- this._selectOptionsId = v4();
43
+ this.selectOptionsId = v4();
44
44
  this._searchValue = '';
45
45
  this._$options = new Map();
46
46
  this.$dropdown = createRef();
@@ -90,7 +90,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
90
90
  // Focus management: move focus to combobox when no options are selected
91
91
  const selectedOptions = this._selectController.selectedOptions$.getValue();
92
92
  if (!selectedOptions || selectedOptions.length === 0) {
93
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.focus();
93
+ (_a = this.$selectToggler) === null || _a === void 0 ? void 0 : _a.focus();
94
94
  }
95
95
  };
96
96
  this._updateOptionsView = (options) => {
@@ -141,11 +141,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
141
141
  var _a, _b, _c;
142
142
  this._searchValue = '';
143
143
  this.opened = false;
144
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
144
+ (_a = this.$selectToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
145
145
  const isBodyActive = document.activeElement === document.body;
146
146
  const isInnerElementActive = (_b = this._$dropdownContent.value) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
147
147
  if (isInnerElementActive || isBodyActive) {
148
- (_c = this.$dropdownToggler.value) === null || _c === void 0 ? void 0 : _c.focus();
148
+ (_c = this.$selectToggler) === null || _c === void 0 ? void 0 : _c.focus();
149
149
  }
150
150
  };
151
151
  this._manageSelectFocusAria = (ev) => {
@@ -155,7 +155,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
155
155
  return;
156
156
  const optionId = $target.id;
157
157
  if (optionId) {
158
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
158
+ (_a = this.$selectToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
159
159
  }
160
160
  };
161
161
  this._closeSelect = () => {
@@ -230,11 +230,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
230
230
  if (this.listBoxController) {
231
231
  this.listBoxController.calculateSelectedOptionIndex();
232
232
  }
233
- if (this._$optionsList.value && this.$dropdownToggler.value) {
233
+ if (this._$optionsList.value && this.$selectToggler) {
234
234
  (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
235
235
  this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
236
236
  host: this,
237
- $toggler: this.$dropdownToggler.value,
237
+ $toggler: this.$selectToggler,
238
238
  $list: this._$optionsList.value
239
239
  });
240
240
  }
@@ -259,6 +259,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
259
259
  }
260
260
  this.$searchLabel = document.querySelector(`[id="${this.assistiveTitleId}"]`);
261
261
  (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
262
+ this.$selectToggler = this.querySelector(`h-select-toggler`);
262
263
  this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
263
264
  this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
264
265
  this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
@@ -379,14 +380,23 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
379
380
  ${ref(this.$dropdownToggler)}
380
381
  name="${this.controlName}"
381
382
  validation-container
382
- aria-haspopup="listbox"
383
- role="combobox"
384
- aria-required="${this.required ? 'true' : 'false'}"
385
- aria-activedescendant
386
- role="combobox"
387
- aria-controls="${this._selectOptionsId}"
388
383
  >
384
+ ${!this.noDeselect
385
+ ? html `
386
+ <div class=${SELECT_CSS_CLASSES.selectTags}>
387
+ ${observe(this._selectController.selectedOptions$, (selectOptions) => html `
388
+ ${selectOptions.map((option) => html `
389
+ <h-tag @remove=${() => this._handleOptionDeselect(new CustomEvent('deselect', { detail: option.value }))}>
390
+ ${option.content}
391
+ <h-tag-remove-button .optionName=${option.content}></h-tag-remove-button>
392
+ </h-tag>
393
+ `)}
394
+ `)}
395
+ </div>
396
+ `
397
+ : nothing}
389
398
  ${this.getSlot(SELECT_SLOT_NAMES.toggler)}
399
+ <h-icon icon-name="icon-chevron-down"></h-icon>
390
400
  </h-dropdown-toggler>
391
401
 
392
402
  <h-dropdown-content
@@ -412,7 +422,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
412
422
  <h-options
413
423
  class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
414
424
  aria-labelledby="${this.assistiveTitleId}"
415
- id="${this._selectOptionsId}"
425
+ id="${this.selectOptionsId}"
416
426
  ${ref(this._$optionsList)}
417
427
  @optionClicked=${this._handleOptionClicked}
418
428
  @optionUpdated=${this._handleOptionUpdated}
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;"}
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,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;"}
package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts CHANGED
@@ -36,6 +36,7 @@ export declare const SELECT_CSS_CLASSES: {
36
36
  readonly selectClearButton: "select__clear-btn";
37
37
  readonly selectCloseButton: "select__close-btn";
38
38
  readonly selectLabel: "select__label";
39
+ readonly selectTags: "select__tags";
39
40
  };
40
41
  export declare const SELECT_DEFAULT_TRANSLATIONS: {
41
42
  readonly NO_RESULTS_FOR: "Brak wyników dla";
package/build/esm/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -35,7 +35,8 @@ const SELECT_CSS_CLASSES = {
35
35
  selectCloseMobileButton: `${baseSelectClass}__close-mobile-btn`,
36
36
  selectClearButton: `${baseSelectClass}__clear-btn`,
37
37
  selectCloseButton: `${baseSelectClass}__close-btn`,
38
- selectLabel: `${baseSelectClass}__label`
38
+ selectLabel: `${baseSelectClass}__label`,
39
+ selectTags: `${baseSelectClass}__tags`
39
40
  };
40
41
  const SELECT_DEFAULT_TRANSLATIONS = {
41
42
  NO_RESULTS_FOR: 'Brak wyników dla',
package/build/esm/packages/phoenix/src/components/form/select/select_constants.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;"}
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;"}
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -10,7 +10,6 @@ export { HOptions } from './components/form/select/components/select_options.js'
10
10
  export { WEB_COMPONENT_CONTEXT_EVENTS } from './core/context/context_consumer_messages_names.js';
11
11
  export { ContextConsumerController } from './core/context/context_consumer_controller.js';
12
12
  export { BehaviorSubject } from './core/classes/behavior_subject/behavior_subject.js';
13
- export { HSelectToggler } from './components/form/select/components/toggler/select_toggler.js';
14
13
  export { ContextProviderController } from './core/context/context_provider_controller.js';
15
14
  export { HPortal } from './components/portal/portal.js';
16
15
  export { HPortalTarget } from './components/portal/portal_target.js';
@@ -23,6 +22,7 @@ export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
23
22
  export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
24
23
  export { HDropdown } from './components/dropdown/dropdown.js';
25
24
  export { HSelect } from './components/form/select/select.js';
25
+ export { HSelectToggler } from './components/form/select/components/toggler/select_toggler.js';
26
26
  export { HFile } from './components/form/file_picker/file/file.js';
27
27
  export { INPUT_CONTROL_CSS_CLASSES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_SIZES, INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC } from './components/form/input/input_constants.js';
28
28
  export { HFilePicker } from './components/form/file_picker/file_picker.js';
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-0",
5
+ "version": "1.18.6-2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",