@shoper/phoenix_design_system 1.15.11-36 → 1.15.11-38

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 (65) 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 +23 -5
  4. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +31 -0
  6. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js +1 -2
  8. package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +88 -0
  10. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -0
  11. package/build/cjs/packages/phoenix/src/components/form/select/select.js +91 -29
  12. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/components/messages/base_message.js +0 -47
  14. package/build/cjs/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  15. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js +0 -3
  16. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  17. package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js +10 -0
  18. package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
  19. package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js +10 -0
  20. package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
  21. package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js +0 -2
  22. package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
  23. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +83 -38
  24. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  25. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +1 -0
  26. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +9 -2
  27. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  28. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +3 -0
  29. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +23 -5
  30. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  31. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +4 -0
  32. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +31 -0
  33. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  34. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +1 -2
  35. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  36. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +14 -0
  37. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +84 -0
  38. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -0
  39. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts +8 -0
  40. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js +3 -0
  41. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map +1 -0
  42. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +16 -6
  43. package/build/esm/packages/phoenix/src/components/form/select/select.js +91 -29
  44. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  45. package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +0 -9
  46. package/build/esm/packages/phoenix/src/components/messages/base_message.js +2 -49
  47. package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  48. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts +0 -1
  49. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +1 -3
  50. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  51. package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts +2 -0
  52. package/build/esm/packages/phoenix/src/components/messages/hints/hint.js +10 -0
  53. package/build/esm/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
  54. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts +2 -0
  55. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js +10 -0
  56. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
  57. package/build/esm/packages/phoenix/src/components/portal/portal_constants.js +1 -2
  58. package/build/esm/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
  59. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +6 -2
  60. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +1 -0
  61. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
  62. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +8 -3
  63. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +83 -38
  64. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  65. package/package.json +2 -2
@@ -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", [])
@@ -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;"}
@@ -7,7 +7,6 @@ var decorators = require('lit/decorators');
7
7
  require('@dreamcommerce/utilities');
8
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
- var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
11
10
  var global_constants = require('../../global_constants.js');
12
11
  var dropdown_constants = require('./dropdown_constants.js');
13
12
  var toggle_element_aria_controller = require('../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
@@ -16,6 +15,9 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
16
15
  constructor() {
17
16
  super();
18
17
  this.name = '';
18
+ this.ariaHasPopup = 'menu';
19
+ this.ariaControls = '';
20
+ this.role = 'button';
19
21
  this._setupTogglerAria = () => {
20
22
  this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
21
23
  if (this._$dropdown.isOpened)
@@ -23,11 +25,14 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
23
25
  host: this,
24
26
  initialAriaExpandedValue: this._$dropdown.isOpened()
25
27
  });
26
- this.setAttribute('aria-haspopup', 'true');
27
- if (this._$dropdown.id)
28
- this.setAttribute('aria-controls', this._$dropdown.id);
28
+ this.setAttribute('role', this.role);
29
+ this.setAttribute('aria-haspopup', this.ariaHasPopup);
30
+ if (this.ariaControls || this._$dropdown.id)
31
+ this.setAttribute('aria-controls', this.ariaControls || this._$dropdown.id);
29
32
  };
30
33
  this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
34
+ if (ev.key !== 'Enter' && ev.key !== ' ')
35
+ return;
31
36
  ev.stopImmediatePropagation();
32
37
  this._dispatchToggleDropdownEvent(ev);
33
38
  };
@@ -46,7 +51,8 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
46
51
  connectedCallback() {
47
52
  var _a;
48
53
  super.connectedCallback();
49
- this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
54
+ this.setAttribute('tabindex', '0');
55
+ this.addEventListener('keydown', this._dispatchToggleDropdownEventWithKeyboard);
50
56
  this._setupTogglerAria();
51
57
  const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(dropdown_constants.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
52
58
  if (hasToggleOnHover) {
@@ -60,6 +66,18 @@ tslib_es6.__decorate([
60
66
  decorators.property({ type: String, reflect: true }),
61
67
  tslib_es6.__metadata("design:type", Object)
62
68
  ], exports.HDropdownToggler.prototype, "name", void 0);
69
+ tslib_es6.__decorate([
70
+ decorators.property({ type: String, attribute: 'aria-haspopup' }),
71
+ tslib_es6.__metadata("design:type", Object)
72
+ ], exports.HDropdownToggler.prototype, "ariaHasPopup", void 0);
73
+ tslib_es6.__decorate([
74
+ decorators.property({ type: String, attribute: 'aria-controls' }),
75
+ tslib_es6.__metadata("design:type", Object)
76
+ ], exports.HDropdownToggler.prototype, "ariaControls", void 0);
77
+ tslib_es6.__decorate([
78
+ decorators.property({ type: String }),
79
+ tslib_es6.__metadata("design:type", Object)
80
+ ], exports.HDropdownToggler.prototype, "role", void 0);
63
81
  exports.HDropdownToggler = tslib_es6.__decorate([
64
82
  phoenix_custom_element.phoenixCustomElement('h-dropdown-toggler'),
65
83
  tslib_es6.__metadata("design:paramtypes", [])
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -5,9 +5,11 @@ 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');
12
+ var dropdown_constants = require('../../../../dropdown/dropdown_constants.js');
11
13
  var debounce = require('../../../../../../../../external/lodash/debounce.js');
12
14
  var select_search_constants = require('./select_search_constants.js');
13
15
 
@@ -15,6 +17,32 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
15
17
  constructor() {
16
18
  super(...arguments);
17
19
  this.value = '';
20
+ this._$selectOptions = null;
21
+ this._handleSearchKeydown = (ev) => {
22
+ if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
23
+ return;
24
+ this._handleFocusOptionOnArrowNavigation();
25
+ this._handleDispatchEventOnOptionsList(ev);
26
+ };
27
+ this._handleDispatchEventOnOptionsList = (ev) => {
28
+ var _a;
29
+ const arrowNavigationEvent = new KeyboardEvent('keydown', {
30
+ key: ev.key
31
+ });
32
+ (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
33
+ };
34
+ this._handleFocusOptionOnArrowNavigation = () => {
35
+ const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
36
+ const $availableOptions = $options.filter(($option) => {
37
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
38
+ });
39
+ const $firstOption = $availableOptions.find(($option) => {
40
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
41
+ });
42
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
43
+ const $optionToFocus = $selectedOption || $firstOption;
44
+ $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
45
+ };
18
46
  this._handleInputChange = debounce['default'](({ target }) => {
19
47
  this.value = target.value;
20
48
  this.emitCustomEvent(select_components_constatns.SELECT_SEARCH_EVENT_NAMES.search, {
@@ -25,6 +53,9 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
25
53
  connectedCallback() {
26
54
  super.connectedCallback();
27
55
  this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
56
+ const $selectOptionsContainer = this.closest(dropdown_constants.DROPDOWN_CONTENT_NAME);
57
+ this._$selectOptions = $selectOptionsContainer === null || $selectOptionsContainer === void 0 ? void 0 : $selectOptionsContainer.querySelector('h-options');
58
+ this.addEventListener('keydown', this._handleSearchKeydown);
28
59
  }
29
60
  render() {
30
61
  return lit.html `
@@ -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;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;"}
@@ -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
  }
@@ -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;"}
@@ -0,0 +1,88 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
6
+ require('lit');
7
+ require('@dreamcommerce/utilities');
8
+
9
+ var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
10
+ class SelectTogglerKeyboardController {
11
+ constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
12
+ _SelectTogglerKeyboardController_host.set(this, void 0);
13
+ _SelectTogglerKeyboardController__$toggler.set(this, void 0);
14
+ _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
15
+ _SelectTogglerKeyboardController__$options.set(this, void 0);
16
+ this._handleKeyboardNavigation = (ev) => {
17
+ const arrowKeys = ['ArrowUp', 'ArrowDown'];
18
+ if (arrowKeys.includes(ev.key)) {
19
+ this._openSelect(ev);
20
+ return;
21
+ }
22
+ if (ev.key === 'Home') {
23
+ this._openSelectAndGoToFirstElement(ev);
24
+ return;
25
+ }
26
+ if (ev.key === 'End') {
27
+ this._openSelectAndGoToLastElement(ev);
28
+ return;
29
+ }
30
+ if (ev.altKey || ev.shiftKey)
31
+ return;
32
+ const isAWriteableCharacter = ev.key.length === 1;
33
+ if (isAWriteableCharacter)
34
+ this._openSelectAndGoToMatchedElement(ev);
35
+ };
36
+ this._openSelect = (event) => {
37
+ var _a;
38
+ event.preventDefault();
39
+ (_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
40
+ };
41
+ this._openSelectAndGoToFirstElement = async (event) => {
42
+ var _a;
43
+ event.preventDefault();
44
+ await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
45
+ this._navigate(0);
46
+ };
47
+ this._openSelectAndGoToLastElement = async (event) => {
48
+ var _a;
49
+ event.preventDefault();
50
+ await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
51
+ const $availableOptions = this._getAvailableOptions();
52
+ this._navigate($availableOptions.length - 1);
53
+ };
54
+ this._openSelectAndGoToMatchedElement = async (event) => {
55
+ var _a;
56
+ event.preventDefault();
57
+ await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
58
+ const matchedOptionIndex = this._getAvailableOptions().findIndex(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
59
+ if (matchedOptionIndex)
60
+ this._navigate(matchedOptionIndex);
61
+ };
62
+ this._getAvailableOptions = () => {
63
+ return tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
64
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
65
+ });
66
+ };
67
+ this._navigate = (newOptionIndex) => {
68
+ const $newOption = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").options[newOptionIndex];
69
+ if (!$newOption)
70
+ return;
71
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").manageSelectVirtualFocus($newOption);
72
+ };
73
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
74
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
75
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
76
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
77
+ }
78
+ hostConnected() {
79
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
80
+ }
81
+ hostDisconnected() {
82
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
83
+ }
84
+ }
85
+ _SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
86
+
87
+ exports.SelectTogglerKeyboardController = SelectTogglerKeyboardController;
88
+ //# sourceMappingURL=select_toggler_keyboard_controller.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -18,6 +18,7 @@ var observable_directive = require('../../../directives/observable_directive.js'
18
18
  var select_toggler = require('./components/toggler/select_toggler.js');
19
19
  var ref_js = require('lit-html/directives/ref.js');
20
20
  var context_provider_controller = require('../../../core/context/context_provider_controller.js');
21
+ var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
21
22
  var dropdown_content = require('../../dropdown/dropdown_content.js');
22
23
  var dropdown_toggler = require('../../dropdown/dropdown_toggler.js');
23
24
  var dropdown = require('../../dropdown/dropdown.js');
@@ -29,6 +30,7 @@ var select_utils = require('./select_utils.js');
29
30
  var select_controller = require('./controllers/select_controller.js');
30
31
  var select_option_mapper = require('./model/select_option_mapper.js');
31
32
  var repeat = require('lit/directives/repeat');
33
+ var select_toggler_keyboard_controller = require('./controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js');
32
34
 
33
35
  exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
34
36
  constructor() {
@@ -40,14 +42,15 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
40
42
  this.searchDisabled = false;
41
43
  this.type = select_constants.SELECT_TYPES.select;
42
44
  this.noDeselect = false;
43
- this.ariaLabelledby = '';
45
+ this.assistiveTitleId = '';
46
+ this._selectOptionsId = v4['default']();
44
47
  this._searchValue = '';
45
48
  this._$options = new Map();
46
- this._$dropdown = ref_js.createRef();
47
- this._$search = ref_js.createRef();
49
+ this.$dropdown = ref_js.createRef();
50
+ this.$search = ref_js.createRef();
48
51
  this._$optionsList = ref_js.createRef();
49
52
  this._$dropdownContent = ref_js.createRef();
50
- this._$dropdownToggler = ref_js.createRef();
53
+ this.$dropdownToggler = ref_js.createRef();
51
54
  this._selectContext = new context_provider_controller.ContextProviderController(this);
52
55
  this._updateOptions = () => {
53
56
  const $options = this._getOptions();
@@ -105,6 +108,18 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
105
108
  this.updateOptionAriaAttribute($option);
106
109
  });
107
110
  };
111
+ this._updateLabelAria = (options) => {
112
+ var _a, _b;
113
+ if (!this.$searchLabel)
114
+ return;
115
+ (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
116
+ this.$searchLabel.innerHTML = `
117
+ ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
118
+ <span id="value-label" class="sr-only">
119
+ ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
120
+ </span>
121
+ `;
122
+ };
108
123
  this._handleOptionClicked = ({ detail }) => {
109
124
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
110
125
  return;
@@ -120,26 +135,36 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
120
135
  });
121
136
  };
122
137
  this._handleDropdownHidden = () => {
123
- var _a;
138
+ var _a, _b, _c;
124
139
  this._searchValue = '';
125
140
  this.opened = false;
126
- (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
141
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-activedescendant');
142
+ const isBodyActive = document.activeElement === document.body;
143
+ const isInnerElementActive = (_b = this._$dropdownContent.value) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
144
+ if (isInnerElementActive || isBodyActive) {
145
+ (_c = this.$dropdownToggler.value) === null || _c === void 0 ? void 0 : _c.focus();
146
+ }
127
147
  };
128
- this._manageSelectFocusAria = (ev) => {
129
- var _a;
130
- const $target = ev.target;
131
- if (!$target)
132
- return;
133
- const optionId = $target.id;
134
- if (optionId) {
135
- (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
148
+ this._handleDropdownShowed = () => {
149
+ this.opened = true;
150
+ const $activeDescendant = this.options.find((option) => option.selected);
151
+ if ($activeDescendant) {
152
+ this.manageSelectVirtualFocus($activeDescendant);
136
153
  }
137
154
  };
155
+ this.manageSelectVirtualFocus = ($newOption) => {
156
+ var _a;
157
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $newOption.id);
158
+ this.options.forEach((option) => {
159
+ option.classList.remove('select-option_virtually-focused');
160
+ });
161
+ $newOption.classList.add('select-option_virtually-focused');
162
+ };
138
163
  this._closeSelect = () => {
139
164
  var _a;
140
165
  if (!this.opened)
141
166
  return;
142
- (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
167
+ (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
143
168
  };
144
169
  this._clearOptions = () => {
145
170
  this._selectController.deselectAll();
@@ -183,6 +208,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
183
208
  return Array.from(this._$options.values());
184
209
  }
185
210
  updated(changedProperties) {
211
+ var _a, _b;
186
212
  super.updated(changedProperties);
187
213
  if (changedProperties.has('opened')) {
188
214
  if (this.opened) {
@@ -196,28 +222,52 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
196
222
  if (changedProperties.has('optionsList')) {
197
223
  this._updateOptions();
198
224
  }
199
- if (this._$optionsList.value && !this._listBoxController)
200
- this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
225
+ if (this._$optionsList.value) {
226
+ (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
227
+ this.listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
228
+ host: this,
229
+ $list: this._$optionsList.value
230
+ });
231
+ }
232
+ if (this.listBoxController) {
233
+ this.listBoxController.calculateSelectedOptionIndex();
234
+ }
235
+ if (this._$optionsList.value && this.$dropdownToggler.value) {
236
+ (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
237
+ this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
201
238
  host: this,
239
+ $toggler: this.$dropdownToggler.value,
202
240
  $list: this._$optionsList.value
203
241
  });
242
+ }
204
243
  }
205
244
  _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();
245
+ var _a;
246
+ const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
247
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
248
+ const $firstOption = $options.find(($option) => {
249
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
250
+ });
251
+ const $selectedOption = this.selectedOptions[0];
252
+ const $optionToFocus = $selectedOption || $firstOption;
253
+ $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
209
254
  }
210
255
  connectedCallback() {
256
+ var _a;
211
257
  super.connectedCallback();
212
258
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
213
259
  if (!this.searchDisabled) {
214
260
  this.classList.add(select_constants.SELECT_CSS_CLASSES.selectWithSearch);
215
261
  }
262
+ this.$searchLabel = document.querySelector(`[id="${this.assistiveTitleId}"]`);
263
+ (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
216
264
  this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
217
265
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
218
266
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
219
267
  this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
220
268
  this._selectController.options$.subscribe(this._optionsObserver);
269
+ this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
270
+ this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
221
271
  this._updateOptions();
222
272
  this._setupEvents();
223
273
  }
@@ -247,6 +297,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
247
297
  select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
248
298
  }
249
299
  updateOptionAriaAttribute($option) {
300
+ if (!this.multiple) {
301
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
302
+ $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
303
+ }
250
304
  $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
251
305
  }
252
306
  _removeHTMLOptions(optionsValues) {
@@ -256,6 +310,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
256
310
  const option = this._selectController.getOption(value);
257
311
  if (!option)
258
312
  return;
313
+ const $selectedOption = this._$options.get(option.value);
314
+ const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
315
+ if ($selectedOptionLink) {
316
+ $selectedOptionLink.click();
317
+ return;
318
+ }
259
319
  this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
260
320
  if (!this.multiple)
261
321
  this._closeSelect();
@@ -306,23 +366,24 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
306
366
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
307
367
  return lit.html `
308
368
  <h-dropdown
309
- ${ref_js.ref(this._$dropdown)}
310
- @showed=${() => (this.opened = true)}
369
+ ${ref_js.ref(this.$dropdown)}
370
+ @showed=${this._handleDropdownShowed}
311
371
  @hidden=${this._handleDropdownHidden}
312
372
  name="${this.controlName}"
313
373
  offset=${this.offset}
314
374
  content-width="full"
315
375
  prevent-focus-trap
376
+ no-autofocus
316
377
  >
317
378
  <h-dropdown-toggler
318
- ${ref_js.ref(this._$dropdownToggler)}
379
+ ${ref_js.ref(this.$dropdownToggler)}
319
380
  name="${this.controlName}"
320
381
  validation-container
321
382
  aria-haspopup="listbox"
322
383
  role="combobox"
323
384
  aria-required="${this.required ? 'true' : 'false'}"
324
- aria-activedescendant
325
- aria-labelledby="${this.ariaLabelledby}"
385
+ role="combobox"
386
+ aria-controls="${this._selectOptionsId}"
326
387
  >
327
388
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
328
389
  </h-dropdown-toggler>
@@ -331,7 +392,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
331
392
  class="${select_constants.SELECT_CSS_CLASSES.selectContent} ${this.error ? select_constants.SELECT_CSS_CLASSES.selectContentError : ''}"
332
393
  ${ref_js.ref(this._$dropdownContent)}
333
394
  name="${this.controlName}"
334
- @focusin="${this._manageSelectFocusAria}"
335
395
  >
336
396
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
337
397
 
@@ -340,7 +400,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
340
400
  ${isSearchEnabled
341
401
  ? lit.html ` <h-select-search
342
402
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
343
- ${ref_js.ref(this._$search)}
403
+ ${ref_js.ref(this.$search)}
344
404
  .value=${this._searchValue}
345
405
  @search=${this._handleSearch}
346
406
  ></h-select-search>`
@@ -348,6 +408,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
348
408
 
349
409
  <h-options
350
410
  class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
411
+ aria-labelledby="${this.assistiveTitleId}"
412
+ id="${this._selectOptionsId}"
351
413
  ${ref_js.ref(this._$optionsList)}
352
414
  @optionClicked=${this._handleOptionClicked}
353
415
  @optionUpdated=${this._handleOptionUpdated}
@@ -439,9 +501,9 @@ tslib_es6.__decorate([
439
501
  tslib_es6.__metadata("design:type", Boolean)
440
502
  ], exports.HSelect.prototype, "noDeselect", void 0);
441
503
  tslib_es6.__decorate([
442
- decorators_js.property({ type: String, attribute: 'aria-labelledby' }),
504
+ decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
443
505
  tslib_es6.__metadata("design:type", String)
444
- ], exports.HSelect.prototype, "ariaLabelledby", void 0);
506
+ ], exports.HSelect.prototype, "assistiveTitleId", void 0);
445
507
  tslib_es6.__decorate([
446
508
  decorators.state(),
447
509
  tslib_es6.__metadata("design:type", String)
@@ -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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}