@shoper/phoenix_design_system 1.15.6-1 → 1.15.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 (38) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +9 -2
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +6 -1
  4. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/search/search.js +0 -11
  6. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +30 -0
  8. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js +1 -2
  10. package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/form/select/select.js +41 -8
  12. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +62 -15
  14. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  15. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +1 -0
  16. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +9 -2
  17. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +1 -0
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +6 -1
  20. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  21. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +0 -1
  22. package/build/esm/packages/phoenix/src/components/form/search/search.js +0 -11
  23. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  24. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +4 -0
  25. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +30 -0
  26. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  27. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +1 -2
  28. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  29. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +6 -2
  30. package/build/esm/packages/phoenix/src/components/form/select/select.js +41 -8
  31. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  32. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +6 -2
  33. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +1 -0
  34. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
  35. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +7 -3
  36. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +62 -15
  37. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  38. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -32,6 +32,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
32
32
  this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
33
33
  this.id = v4['default']();
34
34
  this.preventFocusTrap = false;
35
+ this.noAutoFocus = false;
35
36
  this._backdropController = new backdrop_controller.BackdropController();
36
37
  this._handleClickOutside = async (target) => {
37
38
  var _a, _b;
@@ -48,7 +49,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
48
49
  return;
49
50
  }
50
51
  await this.show();
51
- this._focusOnFirstContentElement();
52
+ if (!this.noAutoFocus)
53
+ this._focusOnFirstContentElement();
52
54
  };
53
55
  this.show = async () => {
54
56
  if (this.opened)
@@ -176,7 +178,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
176
178
  const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
177
179
  if (isHoveredWithinDropdown && !this.opened) {
178
180
  await this.show();
179
- this._focusOnFirstContentElement();
181
+ if (!this.noAutoFocus)
182
+ this._focusOnFirstContentElement();
180
183
  return;
181
184
  }
182
185
  if (!isHoveredWithinDropdown && this.opened)
@@ -466,6 +469,10 @@ tslib_es6.__decorate([
466
469
  decorators_js.property({ type: Boolean, attribute: 'prevent-focus-trap' }),
467
470
  tslib_es6.__metadata("design:type", Object)
468
471
  ], exports.HDropdown.prototype, "preventFocusTrap", void 0);
472
+ tslib_es6.__decorate([
473
+ decorators_js.property({ type: Boolean, attribute: 'no-autofocus' }),
474
+ tslib_es6.__metadata("design:type", Object)
475
+ ], exports.HDropdown.prototype, "noAutoFocus", void 0);
469
476
  exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
470
477
  phoenix_custom_element.phoenixCustomElement('h-dropdown'),
471
478
  tslib_es6.__metadata("design:paramtypes", [])
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_toggler.js CHANGED
@@ -16,6 +16,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
16
16
  constructor() {
17
17
  super();
18
18
  this.name = '';
19
+ this.ariaHasPopup = 'menu';
19
20
  this._setupTogglerAria = () => {
20
21
  this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
21
22
  if (this._$dropdown.isOpened)
@@ -23,7 +24,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
23
24
  host: this,
24
25
  initialAriaExpandedValue: this._$dropdown.isOpened()
25
26
  });
26
- this.setAttribute('aria-haspopup', 'true');
27
+ this.setAttribute('aria-haspopup', this.ariaHasPopup);
27
28
  if (this._$dropdown.id)
28
29
  this.setAttribute('aria-controls', this._$dropdown.id);
29
30
  };
@@ -60,6 +61,10 @@ tslib_es6.__decorate([
60
61
  decorators.property({ type: String, reflect: true }),
61
62
  tslib_es6.__metadata("design:type", Object)
62
63
  ], exports.HDropdownToggler.prototype, "name", void 0);
64
+ tslib_es6.__decorate([
65
+ decorators.property({ type: String, attribute: 'aria-haspopup' }),
66
+ tslib_es6.__metadata("design:type", Object)
67
+ ], exports.HDropdownToggler.prototype, "ariaHasPopup", void 0);
63
68
  exports.HDropdownToggler = tslib_es6.__decorate([
64
69
  phoenix_custom_element.phoenixCustomElement('h-dropdown-toggler'),
65
70
  tslib_es6.__metadata("design:paramtypes", [])
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/search/search.js CHANGED
@@ -278,15 +278,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
278
278
  ev.preventDefault();
279
279
  }
280
280
  };
281
- this._resetSearchOnFocusOutside = (ev) => {
282
- const $target = ev.target;
283
- const isContainedWithinSearch = this === $target || this.contains($target);
284
- if (!isContainedWithinSearch) {
285
- this._resetSearchView();
286
- this._removeSearchKeyboardNavigation();
287
- document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
288
- }
289
- };
290
281
  this._setupAriaAttributes = () => {
291
282
  var _a;
292
283
  if (this._translations.openSearchButtonAriaLabel) {
@@ -334,7 +325,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
334
325
  super.disconnectedCallback();
335
326
  document.removeEventListener('click', this._hideSuggesterOnClickOutside);
336
327
  document.removeEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
337
- document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
338
328
  window.removeEventListener('resize', this._switchTypeOfSearchView);
339
329
  this._searchForm.removeEventListener('keydown', this._preventSubmitOnSearchClear);
340
330
  }
@@ -379,7 +369,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
379
369
  document.addEventListener('keydown', this._bindKeys);
380
370
  document.addEventListener('keyup', this._handleSearchTabNavigation);
381
371
  document.addEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
382
- document.addEventListener('focusin', this._resetSearchOnFocusOutside);
383
372
  });
384
373
  this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, (ev) => {
385
374
  const shouldShowMessage = ev.detail.searchPhrase !== '';
package/build/cjs/packages/phoenix/src/components/form/search/search.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,iBAAiB,wDAA4D;AAC7E,mBAAmB,qEAA6E;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,wDAA4D;AAC7E,mBAAmB,qEAA6E;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/search/select_search.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
6
6
  var lit = require('lit');
7
7
  var decorators = require('lit/decorators');
8
+ require('@dreamcommerce/utilities');
8
9
  var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
10
  var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
10
11
  var select_components_constatns = require('../select_components_constatns.js');
@@ -15,6 +16,32 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
15
16
  constructor() {
16
17
  super(...arguments);
17
18
  this.value = '';
19
+ this._$selectOptions = null;
20
+ this._handleSearchKeydown = (ev) => {
21
+ if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
22
+ return;
23
+ this._handleFocusOptionOnArrowNavigation();
24
+ this._handleDispatchEventOnOptionsList(ev);
25
+ };
26
+ this._handleDispatchEventOnOptionsList = (ev) => {
27
+ var _a;
28
+ const arrowNavigationEvent = new KeyboardEvent('keydown', {
29
+ key: ev.key
30
+ });
31
+ (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
32
+ };
33
+ this._handleFocusOptionOnArrowNavigation = () => {
34
+ const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
35
+ const $availableOptions = $options.filter(($option) => {
36
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
37
+ });
38
+ const $firstOption = $availableOptions.find(($option) => {
39
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
40
+ });
41
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
42
+ const $optionToFocus = $selectedOption || $firstOption;
43
+ $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
44
+ };
18
45
  this._handleInputChange = debounce['default'](({ target }) => {
19
46
  this.value = target.value;
20
47
  this.emitCustomEvent(select_components_constatns.SELECT_SEARCH_EVENT_NAMES.search, {
@@ -25,6 +52,9 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
25
52
  connectedCallback() {
26
53
  super.connectedCallback();
27
54
  this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
55
+ // to musisz zrobić inaczej, bo jest kilka selectów na stronie
56
+ this._$selectOptions = document.querySelector('h-options');
57
+ this.addEventListener('keydown', this._handleSearchKeydown);
28
58
  }
29
59
  render() {
30
60
  return lit.html `
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/select_options.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
6
- var utilities = require('@dreamcommerce/utilities');
6
+ require('@dreamcommerce/utilities');
7
7
  var phoenix_light_lit_element = require('../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
8
  var phoenix_custom_element = require('../../../../core/decorators/phoenix_custom_element.js');
9
9
  var select_components_constatns = require('./select_components_constatns.js');
@@ -26,7 +26,6 @@ exports.HOptions = class HOptions extends phoenix_light_lit_element.PhoenixLight
26
26
  });
27
27
  };
28
28
  this.setAttribute('role', 'listbox');
29
- utilities.UiDomUtils.makeNavigable(this);
30
29
  this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
31
30
  this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
32
31
  }
package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -44,7 +44,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
44
44
  this._searchValue = '';
45
45
  this._$options = new Map();
46
46
  this._$dropdown = ref_js.createRef();
47
- this._$search = ref_js.createRef();
47
+ this.$search = ref_js.createRef();
48
48
  this._$optionsList = ref_js.createRef();
49
49
  this._$dropdownContent = ref_js.createRef();
50
50
  this._$dropdownToggler = ref_js.createRef();
@@ -105,6 +105,19 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
105
105
  this.updateOptionAriaAttribute($option);
106
106
  });
107
107
  };
108
+ this._updateLabelAria = (options) => {
109
+ var _a;
110
+ const ariaLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
111
+ (_a = ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
112
+ if (ariaLabel) {
113
+ ariaLabel.innerHTML = `
114
+ ${ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.innerHTML}
115
+ <span id="value-label" class="sr-only">
116
+ ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
117
+ </span>
118
+ `;
119
+ }
120
+ };
108
121
  this._handleOptionClicked = ({ detail }) => {
109
122
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
110
123
  return;
@@ -120,10 +133,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
120
133
  });
121
134
  };
122
135
  this._handleDropdownHidden = () => {
123
- var _a;
136
+ var _a, _b;
124
137
  this._searchValue = '';
125
138
  this.opened = false;
126
139
  (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
140
+ (_b = this._$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.focus();
127
141
  };
128
142
  this._manageSelectFocusAria = (ev) => {
129
143
  var _a;
@@ -183,6 +197,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
183
197
  return Array.from(this._$options.values());
184
198
  }
185
199
  updated(changedProperties) {
200
+ var _a;
186
201
  super.updated(changedProperties);
187
202
  if (changedProperties.has('opened')) {
188
203
  if (this.opened) {
@@ -196,16 +211,27 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
196
211
  if (changedProperties.has('optionsList')) {
197
212
  this._updateOptions();
198
213
  }
199
- if (this._$optionsList.value && !this._listBoxController)
200
- this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
214
+ if (this._$optionsList.value) {
215
+ (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
216
+ this.listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
201
217
  host: this,
202
218
  $list: this._$optionsList.value
203
219
  });
220
+ }
221
+ if (this.listBoxController) {
222
+ this.listBoxController.calculateSelectedOptionIndex();
223
+ }
204
224
  }
205
225
  _focusElementAfterSelectOpened() {
206
- var _a, _b;
207
- const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
208
- $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
226
+ var _a;
227
+ const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
228
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
229
+ const $firstOption = $options.find(($option) => {
230
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
231
+ });
232
+ const $selectedOption = this.selectedOptions[0];
233
+ const $optionToFocus = $selectedOption || $firstOption;
234
+ $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
209
235
  }
210
236
  connectedCallback() {
211
237
  super.connectedCallback();
@@ -218,6 +244,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
218
244
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
219
245
  this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
220
246
  this._selectController.options$.subscribe(this._optionsObserver);
247
+ this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
248
+ this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
221
249
  this._updateOptions();
222
250
  this._setupEvents();
223
251
  }
@@ -247,6 +275,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
247
275
  select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
248
276
  }
249
277
  updateOptionAriaAttribute($option) {
278
+ if (!this.multiple) {
279
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
280
+ $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
281
+ }
250
282
  $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
251
283
  }
252
284
  _removeHTMLOptions(optionsValues) {
@@ -313,6 +345,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
313
345
  offset=${this.offset}
314
346
  content-width="full"
315
347
  prevent-focus-trap
348
+ no-autofocus
316
349
  >
317
350
  <h-dropdown-toggler
318
351
  ${ref_js.ref(this._$dropdownToggler)}
@@ -340,7 +373,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
340
373
  ${isSearchEnabled
341
374
  ? lit.html ` <h-select-search
342
375
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
343
- ${ref_js.ref(this._$search)}
376
+ ${ref_js.ref(this.$search)}
344
377
  .value=${this._searchValue}
345
378
  @search=${this._handleSearch}
346
379
  ></h-select-search>`
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  require('lit');
7
7
  var utilities = require('@dreamcommerce/utilities');
8
- var keystrokes_controller = require('../keystrokes_controller/keystrokes_controller.js');
9
8
  var list_box_controller_constants = require('./list_box_controller_constants.js');
10
9
 
11
10
  var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
@@ -17,25 +16,54 @@ class ListBoxKeyboardController {
17
16
  _ListBoxKeyboardController__$options.set(this, void 0);
18
17
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
19
18
  _ListBoxKeyboardController_keys.set(this, void 0);
19
+ this._handleKeyboardNavigation = (ev) => {
20
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
21
+ this._handleArrowNavigation(ev);
22
+ return;
23
+ }
24
+ this._handleWriteableCharacter(ev);
25
+ };
20
26
  this._handleArrowNavigation = (event) => {
21
27
  event.preventDefault();
22
28
  const { key } = event;
23
- const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
29
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
30
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
31
+ });
32
+ const prevOptionIndex = this._findCurrentIndex();
24
33
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
25
34
  if (newOptionIndex === undefined) {
26
- const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
27
- newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
35
+ newOptionIndex = this._findCurrentIndex();
28
36
  }
29
37
  if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
30
38
  return;
31
39
  if (prevOptionIndex !== undefined) {
32
40
  const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
33
- utilities.UiDomUtils.makeUnnavigable($prevOption);
41
+ $prevOption && utilities.UiDomUtils.makeUnnavigable($prevOption);
34
42
  }
35
43
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
36
- const $focusedOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
37
- utilities.UiDomUtils.makeNavigable($focusedOption);
38
- $focusedOption.focus();
44
+ const $focusedOption = $availableOptions[newOptionIndex];
45
+ if ($focusedOption) {
46
+ utilities.UiDomUtils.makeNavigable($focusedOption);
47
+ $focusedOption.focus();
48
+ }
49
+ };
50
+ this._findCurrentIndex = () => {
51
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
52
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
53
+ });
54
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
55
+ return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
56
+ };
57
+ this._handleWriteableCharacter = (ev) => {
58
+ var _a;
59
+ const $searchInput = (_a = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
60
+ if (!$searchInput)
61
+ return;
62
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
63
+ };
64
+ this.calculateSelectedOptionIndex = () => {
65
+ const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
66
+ tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, selectedOptionIndex !== -1 ? selectedOptionIndex : 0, "f");
39
67
  };
40
68
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
41
69
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -45,12 +73,7 @@ class ListBoxKeyboardController {
45
73
  tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
46
74
  }
47
75
  hostConnected() {
48
- new keystrokes_controller.KeystrokesController({
49
- host: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
50
- keys: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
51
- callback: this._handleArrowNavigation,
52
- target: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
53
- });
76
+ tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
54
77
  utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
55
78
  tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
56
79
  if (event.target !== tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
@@ -68,15 +91,39 @@ class ListBoxKeyboardController {
68
91
  return undefined;
69
92
  if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
70
93
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
94
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
95
+ return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
96
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
97
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
98
+ });
99
+ if (!!$availableOptions[tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1])
100
+ return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
101
+ // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
102
+ const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
103
+ if (newIndexOfCurrentlySelectedOption)
104
+ return newIndexOfCurrentlySelectedOption - 1;
71
105
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
72
106
  }
73
107
  _getNextOptionIndex() {
74
108
  if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
75
109
  return undefined;
76
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
110
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
111
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
112
+ });
113
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
77
114
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
115
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1) {
116
+ // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
117
+ const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
118
+ if (newIndexOfCurrentlySelectedOption)
119
+ return newIndexOfCurrentlySelectedOption + 1;
120
+ return 0;
121
+ }
78
122
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
79
123
  }
124
+ hostDisconnected() {
125
+ tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
126
+ }
80
127
  }
81
128
  _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
82
129
 
package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
17
17
  mobilePosition: TMobileElementPosition;
18
18
  id: string;
19
19
  preventFocusTrap: boolean;
20
+ noAutoFocus: boolean;
20
21
  $dropdownToggler: HDropdownToggler | null;
21
22
  $dropdownContent: HDropdownContent | null;
22
23
  $nestedDropdownContentElements?: HDropdownContent[];
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -28,6 +28,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
28
28
  this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
29
29
  this.id = v4();
30
30
  this.preventFocusTrap = false;
31
+ this.noAutoFocus = false;
31
32
  this._backdropController = new BackdropController();
32
33
  this._handleClickOutside = async (target) => {
33
34
  var _a, _b;
@@ -44,7 +45,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
44
45
  return;
45
46
  }
46
47
  await this.show();
47
- this._focusOnFirstContentElement();
48
+ if (!this.noAutoFocus)
49
+ this._focusOnFirstContentElement();
48
50
  };
49
51
  this.show = async () => {
50
52
  if (this.opened)
@@ -172,7 +174,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
172
174
  const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
173
175
  if (isHoveredWithinDropdown && !this.opened) {
174
176
  await this.show();
175
- this._focusOnFirstContentElement();
177
+ if (!this.noAutoFocus)
178
+ this._focusOnFirstContentElement();
176
179
  return;
177
180
  }
178
181
  if (!isHoveredWithinDropdown && this.opened)
@@ -462,6 +465,10 @@ __decorate([
462
465
  property({ type: Boolean, attribute: 'prevent-focus-trap' }),
463
466
  __metadata("design:type", Object)
464
467
  ], HDropdown.prototype, "preventFocusTrap", void 0);
468
+ __decorate([
469
+ property({ type: Boolean, attribute: 'no-autofocus' }),
470
+ __metadata("design:type", Object)
471
+ ], HDropdown.prototype, "noAutoFocus", void 0);
465
472
  HDropdown = HDropdown_1 = __decorate([
466
473
  phoenixCustomElement('h-dropdown'),
467
474
  __metadata("design:paramtypes", [])
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_toggler.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
2
  export declare class HDropdownToggler extends PhoenixLightLitElement {
3
3
  name: string;
4
+ ariaHasPopup: string;
4
5
  private _btnController;
5
6
  private _toggleElementAriaController;
6
7
  private _$dropdown;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -12,6 +12,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
12
12
  constructor() {
13
13
  super();
14
14
  this.name = '';
15
+ this.ariaHasPopup = 'menu';
15
16
  this._setupTogglerAria = () => {
16
17
  this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
17
18
  if (this._$dropdown.isOpened)
@@ -19,7 +20,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
19
20
  host: this,
20
21
  initialAriaExpandedValue: this._$dropdown.isOpened()
21
22
  });
22
- this.setAttribute('aria-haspopup', 'true');
23
+ this.setAttribute('aria-haspopup', this.ariaHasPopup);
23
24
  if (this._$dropdown.id)
24
25
  this.setAttribute('aria-controls', this._$dropdown.id);
25
26
  };
@@ -56,6 +57,10 @@ __decorate([
56
57
  property({ type: String, reflect: true }),
57
58
  __metadata("design:type", Object)
58
59
  ], HDropdownToggler.prototype, "name", void 0);
60
+ __decorate([
61
+ property({ type: String, attribute: 'aria-haspopup' }),
62
+ __metadata("design:type", Object)
63
+ ], HDropdownToggler.prototype, "ariaHasPopup", void 0);
59
64
  HDropdownToggler = __decorate([
60
65
  phoenixCustomElement('h-dropdown-toggler'),
61
66
  __metadata("design:paramtypes", [])
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/search/search.d.ts CHANGED
@@ -72,7 +72,6 @@ export declare class HSearch extends PhoenixLightLitElement {
72
72
  private _switchTypeOfSearchView;
73
73
  private _isSuggesterLayerVisible;
74
74
  private _preventSubmitOnSearchClear;
75
- private _resetSearchOnFocusOutside;
76
75
  private _setupAriaAttributes;
77
76
  private _handleOpenSearch;
78
77
  private _handleOpenSearchWithKeyboard;
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -274,15 +274,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
274
274
  ev.preventDefault();
275
275
  }
276
276
  };
277
- this._resetSearchOnFocusOutside = (ev) => {
278
- const $target = ev.target;
279
- const isContainedWithinSearch = this === $target || this.contains($target);
280
- if (!isContainedWithinSearch) {
281
- this._resetSearchView();
282
- this._removeSearchKeyboardNavigation();
283
- document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
284
- }
285
- };
286
277
  this._setupAriaAttributes = () => {
287
278
  var _a;
288
279
  if (this._translations.openSearchButtonAriaLabel) {
@@ -330,7 +321,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
330
321
  super.disconnectedCallback();
331
322
  document.removeEventListener('click', this._hideSuggesterOnClickOutside);
332
323
  document.removeEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
333
- document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
334
324
  window.removeEventListener('resize', this._switchTypeOfSearchView);
335
325
  this._searchForm.removeEventListener('keydown', this._preventSubmitOnSearchClear);
336
326
  }
@@ -375,7 +365,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
375
365
  document.addEventListener('keydown', this._bindKeys);
376
366
  document.addEventListener('keyup', this._handleSearchTabNavigation);
377
367
  document.addEventListener('keydown', this._preventScrollingOnSearchContentBrowsing);
378
- document.addEventListener('focusin', this._resetSearchOnFocusOutside);
379
368
  });
380
369
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.keyup, (ev) => {
381
370
  const shouldShowMessage = ev.detail.searchPhrase !== '';
package/build/esm/packages/phoenix/src/components/form/search/search.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,eAAe,wDAA4D;AAC3E,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,wDAA4D;AAC3E,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/search/select_search.d.ts CHANGED
@@ -2,7 +2,11 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
2
2
  import { TemplateResult } from 'lit';
3
3
  export declare class HSelectSearch extends PhoenixLightLitElement {
4
4
  value: string;
5
+ private _$selectOptions;
5
6
  connectedCallback(): void;
7
+ private _handleSearchKeydown;
8
+ private _handleDispatchEventOnOptionsList;
9
+ private _handleFocusOptionOnArrowNavigation;
6
10
  private _handleInputChange;
7
11
  protected render(): TemplateResult;
8
12
  }
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
2
2
  import { html } from 'lit';
3
3
  import { property } from 'lit/decorators';
4
+ import '@dreamcommerce/utilities';
4
5
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
6
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
6
7
  import { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
@@ -11,6 +12,32 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
11
12
  constructor() {
12
13
  super(...arguments);
13
14
  this.value = '';
15
+ this._$selectOptions = null;
16
+ this._handleSearchKeydown = (ev) => {
17
+ if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
18
+ return;
19
+ this._handleFocusOptionOnArrowNavigation();
20
+ this._handleDispatchEventOnOptionsList(ev);
21
+ };
22
+ this._handleDispatchEventOnOptionsList = (ev) => {
23
+ var _a;
24
+ const arrowNavigationEvent = new KeyboardEvent('keydown', {
25
+ key: ev.key
26
+ });
27
+ (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
28
+ };
29
+ this._handleFocusOptionOnArrowNavigation = () => {
30
+ const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
31
+ const $availableOptions = $options.filter(($option) => {
32
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
33
+ });
34
+ const $firstOption = $availableOptions.find(($option) => {
35
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
36
+ });
37
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
38
+ const $optionToFocus = $selectedOption || $firstOption;
39
+ $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
40
+ };
14
41
  this._handleInputChange = debounce_1(({ target }) => {
15
42
  this.value = target.value;
16
43
  this.emitCustomEvent(SELECT_SEARCH_EVENT_NAMES.search, {
@@ -21,6 +48,9 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
21
48
  connectedCallback() {
22
49
  super.connectedCallback();
23
50
  this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
51
+ // to musisz zrobić inaczej, bo jest kilka selectów na stronie
52
+ this._$selectOptions = document.querySelector('h-options');
53
+ this.addEventListener('keydown', this._handleSearchKeydown);
24
54
  }
25
55
  render() {
26
56
  return html `
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select_options.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
2
- import { UiDomUtils } from '@dreamcommerce/utilities';
2
+ import '@dreamcommerce/utilities';
3
3
  import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
4
  import { phoenixCustomElement } from '../../../../core/decorators/phoenix_custom_element.js';
5
5
  import { SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
@@ -22,7 +22,6 @@ let HOptions = class HOptions extends PhoenixLightLitElement {
22
22
  });
23
23
  };
24
24
  this.setAttribute('role', 'listbox');
25
- UiDomUtils.makeNavigable(this);
26
25
  this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
27
26
  this.addEventListener(SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
28
27
  }
package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -1,5 +1,7 @@
1
1
  import { PropertyValues, TemplateResult } from 'lit';
2
2
  import { HOption } from "./components/option/select_option";
3
+ import { HSelectSearch } from "./components/search/select_search";
4
+ import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
3
5
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
4
6
  import { SelectOption } from "./model/select_option";
5
7
  import type { TSelectType } from "./select_types";
@@ -29,13 +31,14 @@ export declare class HSelect extends PhoenixLightLitElement {
29
31
  private _selectController;
30
32
  private _$options;
31
33
  private _$dropdown;
32
- private _$search;
34
+ $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
33
35
  private _$optionsList;
34
36
  private _$dropdownContent;
35
37
  private _$dropdownToggler;
36
38
  private _selectContext;
37
- private _listBoxController;
39
+ listBoxController: ListBoxKeyboardController;
38
40
  private _optionsObserver;
41
+ private _selectedOptionsAriaObserver;
39
42
  private $placeholder;
40
43
  constructor();
41
44
  updated(changedProperties: PropertyValues): void;
@@ -47,6 +50,7 @@ export declare class HSelect extends PhoenixLightLitElement {
47
50
  private _setupEvents;
48
51
  private _handleOptionDeselect;
49
52
  private _updateOptionsView;
53
+ private _updateLabelAria;
50
54
  private _appendNewHTMLOption;
51
55
  updateOptionAriaAttribute($option: HOption): void;
52
56
  private _removeHTMLOptions;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -40,7 +40,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
40
40
  this._searchValue = '';
41
41
  this._$options = new Map();
42
42
  this._$dropdown = createRef();
43
- this._$search = createRef();
43
+ this.$search = createRef();
44
44
  this._$optionsList = createRef();
45
45
  this._$dropdownContent = createRef();
46
46
  this._$dropdownToggler = createRef();
@@ -101,6 +101,19 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
101
101
  this.updateOptionAriaAttribute($option);
102
102
  });
103
103
  };
104
+ this._updateLabelAria = (options) => {
105
+ var _a;
106
+ const ariaLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
107
+ (_a = ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
108
+ if (ariaLabel) {
109
+ ariaLabel.innerHTML = `
110
+ ${ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.innerHTML}
111
+ <span id="value-label" class="sr-only">
112
+ ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
113
+ </span>
114
+ `;
115
+ }
116
+ };
104
117
  this._handleOptionClicked = ({ detail }) => {
105
118
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
106
119
  return;
@@ -116,10 +129,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
116
129
  });
117
130
  };
118
131
  this._handleDropdownHidden = () => {
119
- var _a;
132
+ var _a, _b;
120
133
  this._searchValue = '';
121
134
  this.opened = false;
122
135
  (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
136
+ (_b = this._$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.focus();
123
137
  };
124
138
  this._manageSelectFocusAria = (ev) => {
125
139
  var _a;
@@ -179,6 +193,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
179
193
  return Array.from(this._$options.values());
180
194
  }
181
195
  updated(changedProperties) {
196
+ var _a;
182
197
  super.updated(changedProperties);
183
198
  if (changedProperties.has('opened')) {
184
199
  if (this.opened) {
@@ -192,16 +207,27 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
192
207
  if (changedProperties.has('optionsList')) {
193
208
  this._updateOptions();
194
209
  }
195
- if (this._$optionsList.value && !this._listBoxController)
196
- this._listBoxController = new ListBoxKeyboardController({
210
+ if (this._$optionsList.value) {
211
+ (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
212
+ this.listBoxController = new ListBoxKeyboardController({
197
213
  host: this,
198
214
  $list: this._$optionsList.value
199
215
  });
216
+ }
217
+ if (this.listBoxController) {
218
+ this.listBoxController.calculateSelectedOptionIndex();
219
+ }
200
220
  }
201
221
  _focusElementAfterSelectOpened() {
202
- var _a, _b;
203
- const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
204
- $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
222
+ var _a;
223
+ const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
224
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
225
+ const $firstOption = $options.find(($option) => {
226
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
227
+ });
228
+ const $selectedOption = this.selectedOptions[0];
229
+ const $optionToFocus = $selectedOption || $firstOption;
230
+ $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
205
231
  }
206
232
  connectedCallback() {
207
233
  super.connectedCallback();
@@ -214,6 +240,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
214
240
  this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
215
241
  this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
216
242
  this._selectController.options$.subscribe(this._optionsObserver);
243
+ this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
244
+ this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
217
245
  this._updateOptions();
218
246
  this._setupEvents();
219
247
  }
@@ -243,6 +271,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
243
271
  SelectControlUtils.appendHTMLOption($option, $list, position);
244
272
  }
245
273
  updateOptionAriaAttribute($option) {
274
+ if (!this.multiple) {
275
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
276
+ $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
277
+ }
246
278
  $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
247
279
  }
248
280
  _removeHTMLOptions(optionsValues) {
@@ -309,6 +341,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
309
341
  offset=${this.offset}
310
342
  content-width="full"
311
343
  prevent-focus-trap
344
+ no-autofocus
312
345
  >
313
346
  <h-dropdown-toggler
314
347
  ${ref(this._$dropdownToggler)}
@@ -336,7 +369,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
336
369
  ${isSearchEnabled
337
370
  ? html ` <h-select-search
338
371
  class=${SELECT_CSS_CLASSES.selectSearch}
339
- ${ref(this._$search)}
372
+ ${ref(this.$search)}
340
373
  .value=${this._searchValue}
341
374
  @search=${this._handleSearch}
342
375
  ></h-select-search>`
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/list_box_controller/list_box_controller_types.d.ts CHANGED
@@ -1,10 +1,14 @@
1
1
  import { Any } from 'ts-toolbelt';
2
- import { ReactiveControllerHost } from 'lit';
2
+ import { ReactiveController, ReactiveControllerHost } from 'lit';
3
3
  import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
4
+ import { HSelect } from "../../components/form/select/select";
4
5
  export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
5
6
  export declare type TListBoxKeyboardControllerConstructorOptions = {
6
- host: ReactiveControllerHost & HTMLElement;
7
+ host: ReactiveControllerHost & HSelect;
7
8
  $list: HTMLElement;
8
9
  listItemSelector?: string;
9
10
  orientation?: TListBoxKeyboardNavigationDirection;
10
11
  };
12
+ export interface IListboxController extends ReactiveController {
13
+ calculateSelectedOptionIndex(): void;
14
+ }
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import 'ts-toolbelt';
2
2
  import 'lit';
3
3
  import '@phoenixRoot/controllers/list_box_controller/list_box_controller_constants';
4
+ import '@phoenixRoot/components/form/select/select';
4
5
  //# sourceMappingURL=list_box_controller_types.js.map
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,KAAK,CAAC;AAC7C,OAAwD,4EAA4E,CAAC"}
1
+ {"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAA2D,KAAK,CAAC;AACjE,OAAwD,4EAA4E,CAAC;AACrI,OAAwB,4CAA4C,CAAC"}
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts CHANGED
@@ -1,10 +1,14 @@
1
- import { ReactiveController } from 'lit';
2
- import { TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
3
- export declare class ListBoxKeyboardController implements ReactiveController {
1
+ import { IListboxController, TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
2
+ export declare class ListBoxKeyboardController implements IListboxController {
4
3
  #private;
5
4
  constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
6
5
  hostConnected(): void;
6
+ private _handleKeyboardNavigation;
7
7
  private _handleArrowNavigation;
8
+ private _findCurrentIndex;
9
+ private _handleWriteableCharacter;
10
+ calculateSelectedOptionIndex: () => void;
8
11
  private _getPrevOptionIndex;
9
12
  private _getNextOptionIndex;
13
+ hostDisconnected(): void;
10
14
  }
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import 'lit';
3
3
  import { UiDomUtils } from '@dreamcommerce/utilities';
4
- import { KeystrokesController } from '../keystrokes_controller/keystrokes_controller.js';
5
4
  import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from './list_box_controller_constants.js';
6
5
 
7
6
  var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
@@ -13,25 +12,54 @@ class ListBoxKeyboardController {
13
12
  _ListBoxKeyboardController__$options.set(this, void 0);
14
13
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
15
14
  _ListBoxKeyboardController_keys.set(this, void 0);
15
+ this._handleKeyboardNavigation = (ev) => {
16
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
17
+ this._handleArrowNavigation(ev);
18
+ return;
19
+ }
20
+ this._handleWriteableCharacter(ev);
21
+ };
16
22
  this._handleArrowNavigation = (event) => {
17
23
  event.preventDefault();
18
24
  const { key } = event;
19
- const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
25
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
26
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
27
+ });
28
+ const prevOptionIndex = this._findCurrentIndex();
20
29
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
21
30
  if (newOptionIndex === undefined) {
22
- const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
23
- newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
31
+ newOptionIndex = this._findCurrentIndex();
24
32
  }
25
33
  if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
26
34
  return;
27
35
  if (prevOptionIndex !== undefined) {
28
36
  const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
29
- UiDomUtils.makeUnnavigable($prevOption);
37
+ $prevOption && UiDomUtils.makeUnnavigable($prevOption);
30
38
  }
31
39
  __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
32
- const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
33
- UiDomUtils.makeNavigable($focusedOption);
34
- $focusedOption.focus();
40
+ const $focusedOption = $availableOptions[newOptionIndex];
41
+ if ($focusedOption) {
42
+ UiDomUtils.makeNavigable($focusedOption);
43
+ $focusedOption.focus();
44
+ }
45
+ };
46
+ this._findCurrentIndex = () => {
47
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
48
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
49
+ });
50
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
51
+ return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
52
+ };
53
+ this._handleWriteableCharacter = (ev) => {
54
+ var _a;
55
+ const $searchInput = (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
56
+ if (!$searchInput)
57
+ return;
58
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
59
+ };
60
+ this.calculateSelectedOptionIndex = () => {
61
+ const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
62
+ __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, selectedOptionIndex !== -1 ? selectedOptionIndex : 0, "f");
35
63
  };
36
64
  __classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
37
65
  __classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -41,12 +69,7 @@ class ListBoxKeyboardController {
41
69
  __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
42
70
  }
43
71
  hostConnected() {
44
- new KeystrokesController({
45
- host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
46
- keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
47
- callback: this._handleArrowNavigation,
48
- target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
49
- });
72
+ __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
50
73
  UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
51
74
  __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
52
75
  if (event.target !== __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
@@ -64,15 +87,39 @@ class ListBoxKeyboardController {
64
87
  return undefined;
65
88
  if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
66
89
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
90
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
91
+ return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
92
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
93
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
94
+ });
95
+ if (!!$availableOptions[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1])
96
+ return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
97
+ // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
98
+ const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
99
+ if (newIndexOfCurrentlySelectedOption)
100
+ return newIndexOfCurrentlySelectedOption - 1;
67
101
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
68
102
  }
69
103
  _getNextOptionIndex() {
70
104
  if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
71
105
  return undefined;
72
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
106
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
107
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
108
+ });
109
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
73
110
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
111
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1) {
112
+ // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
113
+ const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
114
+ if (newIndexOfCurrentlySelectedOption)
115
+ return newIndexOfCurrentlySelectedOption + 1;
116
+ return 0;
117
+ }
74
118
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
75
119
  }
120
+ hostDisconnected() {
121
+ __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
122
+ }
76
123
  }
77
124
  _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
78
125
 
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.15.6-1",
5
+ "version": "1.15.6-2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",