@shoper/phoenix_design_system 1.15.11-35 → 1.15.11-37

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 +90 -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 +86 -21
  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 -53
  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 +1 -6
  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 +78 -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 +86 -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 +15 -5
  43. package/build/esm/packages/phoenix/src/components/form/select/select.js +86 -21
  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 -55
  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 -2
  49. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +2 -5
  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 +78 -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,90 @@
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
+ var _a;
69
+ const $newOption = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").options[newOptionIndex];
70
+ if (!$newOption)
71
+ return;
72
+ (_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $newOption.id);
73
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
74
+ };
75
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
76
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
77
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
78
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
79
+ }
80
+ hostConnected() {
81
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
82
+ }
83
+ hostDisconnected() {
84
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
85
+ }
86
+ }
87
+ _SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
88
+
89
+ exports.SelectTogglerKeyboardController = SelectTogglerKeyboardController;
90
+ //# 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;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,10 +135,22 @@ 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
+ }
147
+ };
148
+ this._handleDropdownShowed = () => {
149
+ var _a;
150
+ this.opened = true;
151
+ const $activeDescendant = this.options.find((option) => option.selected);
152
+ if ($activeDescendant)
153
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', $activeDescendant.id);
127
154
  };
128
155
  this._manageSelectFocusAria = (ev) => {
129
156
  var _a;
@@ -132,14 +159,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
132
159
  return;
133
160
  const optionId = $target.id;
134
161
  if (optionId) {
135
- (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
162
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
136
163
  }
137
164
  };
138
165
  this._closeSelect = () => {
139
166
  var _a;
140
167
  if (!this.opened)
141
168
  return;
142
- (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
169
+ (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
143
170
  };
144
171
  this._clearOptions = () => {
145
172
  this._selectController.deselectAll();
@@ -183,6 +210,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
183
210
  return Array.from(this._$options.values());
184
211
  }
185
212
  updated(changedProperties) {
213
+ var _a, _b;
186
214
  super.updated(changedProperties);
187
215
  if (changedProperties.has('opened')) {
188
216
  if (this.opened) {
@@ -196,28 +224,52 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
196
224
  if (changedProperties.has('optionsList')) {
197
225
  this._updateOptions();
198
226
  }
199
- if (this._$optionsList.value && !this._listBoxController)
200
- this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
227
+ if (this._$optionsList.value) {
228
+ (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
229
+ this.listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
201
230
  host: this,
202
231
  $list: this._$optionsList.value
203
232
  });
233
+ }
234
+ if (this.listBoxController) {
235
+ this.listBoxController.calculateSelectedOptionIndex();
236
+ }
237
+ if (this._$optionsList.value && this.$dropdownToggler.value) {
238
+ (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
239
+ this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
240
+ host: this,
241
+ $toggler: this.$dropdownToggler.value,
242
+ $list: this._$optionsList.value
243
+ });
244
+ }
204
245
  }
205
246
  _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();
247
+ var _a;
248
+ const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
249
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
250
+ const $firstOption = $options.find(($option) => {
251
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
252
+ });
253
+ const $selectedOption = this.selectedOptions[0];
254
+ const $optionToFocus = $selectedOption || $firstOption;
255
+ $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
209
256
  }
210
257
  connectedCallback() {
258
+ var _a;
211
259
  super.connectedCallback();
212
260
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
213
261
  if (!this.searchDisabled) {
214
262
  this.classList.add(select_constants.SELECT_CSS_CLASSES.selectWithSearch);
215
263
  }
264
+ this.$searchLabel = document.querySelector(`[id="${this.assistiveTitleId}"]`);
265
+ (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
216
266
  this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
217
267
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
218
268
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
219
269
  this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
220
270
  this._selectController.options$.subscribe(this._optionsObserver);
271
+ this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
272
+ this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
221
273
  this._updateOptions();
222
274
  this._setupEvents();
223
275
  }
@@ -247,6 +299,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
247
299
  select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
248
300
  }
249
301
  updateOptionAriaAttribute($option) {
302
+ if (!this.multiple) {
303
+ const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
304
+ $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
305
+ }
250
306
  $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
251
307
  }
252
308
  _removeHTMLOptions(optionsValues) {
@@ -256,6 +312,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
256
312
  const option = this._selectController.getOption(value);
257
313
  if (!option)
258
314
  return;
315
+ const $selectedOption = this._$options.get(option.value);
316
+ const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
317
+ if ($selectedOptionLink) {
318
+ $selectedOptionLink.click();
319
+ return;
320
+ }
259
321
  this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
260
322
  if (!this.multiple)
261
323
  this._closeSelect();
@@ -306,23 +368,24 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
306
368
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
307
369
  return lit.html `
308
370
  <h-dropdown
309
- ${ref_js.ref(this._$dropdown)}
310
- @showed=${() => (this.opened = true)}
371
+ ${ref_js.ref(this.$dropdown)}
372
+ @showed=${this._handleDropdownShowed}
311
373
  @hidden=${this._handleDropdownHidden}
312
374
  name="${this.controlName}"
313
375
  offset=${this.offset}
314
376
  content-width="full"
315
377
  prevent-focus-trap
378
+ no-autofocus
316
379
  >
317
380
  <h-dropdown-toggler
318
- ${ref_js.ref(this._$dropdownToggler)}
381
+ ${ref_js.ref(this.$dropdownToggler)}
319
382
  name="${this.controlName}"
320
383
  validation-container
321
384
  aria-haspopup="listbox"
322
385
  role="combobox"
323
386
  aria-required="${this.required ? 'true' : 'false'}"
324
- aria-activedescendant
325
- aria-labelledby="${this.ariaLabelledby}"
387
+ role="combobox"
388
+ aria-controls="${this._selectOptionsId}"
326
389
  >
327
390
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
328
391
  </h-dropdown-toggler>
@@ -340,7 +403,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
340
403
  ${isSearchEnabled
341
404
  ? lit.html ` <h-select-search
342
405
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
343
- ${ref_js.ref(this._$search)}
406
+ ${ref_js.ref(this.$search)}
344
407
  .value=${this._searchValue}
345
408
  @search=${this._handleSearch}
346
409
  ></h-select-search>`
@@ -348,6 +411,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
348
411
 
349
412
  <h-options
350
413
  class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
414
+ aria-labelledby="${this.assistiveTitleId}"
415
+ id="${this._selectOptionsId}"
351
416
  ${ref_js.ref(this._$optionsList)}
352
417
  @optionClicked=${this._handleOptionClicked}
353
418
  @optionUpdated=${this._handleOptionUpdated}
@@ -439,9 +504,9 @@ tslib_es6.__decorate([
439
504
  tslib_es6.__metadata("design:type", Boolean)
440
505
  ], exports.HSelect.prototype, "noDeselect", void 0);
441
506
  tslib_es6.__decorate([
442
- decorators_js.property({ type: String, attribute: 'aria-labelledby' }),
507
+ decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
443
508
  tslib_es6.__metadata("design:type", String)
444
- ], exports.HSelect.prototype, "ariaLabelledby", void 0);
509
+ ], exports.HSelect.prototype, "assistiveTitleId", void 0);
445
510
  tslib_es6.__decorate([
446
511
  decorators.state(),
447
512
  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;AACA;AACA;AACA;"}