@shoper/phoenix_design_system 1.15.11-2 → 1.15.11-21

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 (60) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +2 -9
  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 +1 -6
  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 +0 -30
  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 +2 -1
  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/select.js +11 -61
  10. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/messages/base_message.js +35 -4
  12. package/build/cjs/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js +6 -1
  14. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  15. package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js +7 -2
  16. package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
  17. package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js +2 -0
  18. package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
  19. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +15 -62
  20. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  21. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +0 -1
  22. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +2 -9
  23. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  24. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +0 -1
  25. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -6
  26. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  27. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +0 -4
  28. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +0 -30
  29. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  30. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +2 -1
  31. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  32. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -10
  33. package/build/esm/packages/phoenix/src/components/form/select/select.js +11 -61
  34. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  35. package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +4 -0
  36. package/build/esm/packages/phoenix/src/components/messages/base_message.js +36 -5
  37. package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  38. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts +2 -0
  39. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +5 -2
  40. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  41. package/build/esm/packages/phoenix/src/components/messages/base_message_content.d.ts +1 -0
  42. package/build/esm/packages/phoenix/src/components/messages/base_message_content.js +7 -2
  43. package/build/esm/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
  44. package/build/esm/packages/phoenix/src/components/portal/portal_constants.js +2 -1
  45. package/build/esm/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
  46. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +2 -6
  47. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +0 -1
  48. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
  49. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +3 -7
  50. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +15 -62
  51. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  52. package/package.json +1 -1
  53. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -90
  54. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
  55. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +0 -13
  56. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -86
  57. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
  58. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts +0 -8
  59. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js +0 -3
  60. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map +0 -1
@@ -32,7 +32,6 @@ 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;
36
35
  this._backdropController = new backdrop_controller.BackdropController();
37
36
  this._handleClickOutside = async (target) => {
38
37
  var _a, _b;
@@ -49,8 +48,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
49
48
  return;
50
49
  }
51
50
  await this.show();
52
- if (!this.noAutoFocus)
53
- this._focusOnFirstContentElement();
51
+ this._focusOnFirstContentElement();
54
52
  };
55
53
  this.show = async () => {
56
54
  if (this.opened)
@@ -178,8 +176,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
178
176
  const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
179
177
  if (isHoveredWithinDropdown && !this.opened) {
180
178
  await this.show();
181
- if (!this.noAutoFocus)
182
- this._focusOnFirstContentElement();
179
+ this._focusOnFirstContentElement();
183
180
  return;
184
181
  }
185
182
  if (!isHoveredWithinDropdown && this.opened)
@@ -469,10 +466,6 @@ tslib_es6.__decorate([
469
466
  decorators_js.property({ type: Boolean, attribute: 'prevent-focus-trap' }),
470
467
  tslib_es6.__metadata("design:type", Object)
471
468
  ], 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);
476
469
  exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
477
470
  phoenix_custom_element.phoenixCustomElement('h-dropdown'),
478
471
  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;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;"}
@@ -16,7 +16,6 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
16
16
  constructor() {
17
17
  super();
18
18
  this.name = '';
19
- this.ariaHasPopup = 'menu';
20
19
  this._setupTogglerAria = () => {
21
20
  this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
22
21
  if (this._$dropdown.isOpened)
@@ -24,7 +23,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
24
23
  host: this,
25
24
  initialAriaExpandedValue: this._$dropdown.isOpened()
26
25
  });
27
- this.setAttribute('aria-haspopup', this.ariaHasPopup);
26
+ this.setAttribute('aria-haspopup', 'true');
28
27
  if (this._$dropdown.id)
29
28
  this.setAttribute('aria-controls', this._$dropdown.id);
30
29
  };
@@ -61,10 +60,6 @@ tslib_es6.__decorate([
61
60
  decorators.property({ type: String, reflect: true }),
62
61
  tslib_es6.__metadata("design:type", Object)
63
62
  ], exports.HDropdownToggler.prototype, "name", void 0);
64
- tslib_es6.__decorate([
65
- decorators.property({ type: String, attribute: 'aria-haspopup' }),
66
- tslib_es6.__metadata("design:type", Object)
67
- ], exports.HDropdownToggler.prototype, "ariaHasPopup", void 0);
68
63
  exports.HDropdownToggler = tslib_es6.__decorate([
69
64
  phoenix_custom_element.phoenixCustomElement('h-dropdown-toggler'),
70
65
  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;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;"}
@@ -5,7 +5,6 @@ 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');
9
8
  var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
10
9
  var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
11
10
  var select_components_constatns = require('../select_components_constatns.js');
@@ -16,32 +15,6 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
16
15
  constructor() {
17
16
  super(...arguments);
18
17
  this.value = '';
19
- this._$selectOptions = null;
20
- this._handleSearchKeydown = (ev) => {
21
- if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
22
- return;
23
- this._handleFocusOptionOnArrowNavigation();
24
- this._handleDispatchEventOnOptionsList(ev);
25
- };
26
- this._handleDispatchEventOnOptionsList = (ev) => {
27
- var _a;
28
- const arrowNavigationEvent = new KeyboardEvent('keydown', {
29
- key: ev.key
30
- });
31
- (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
32
- };
33
- this._handleFocusOptionOnArrowNavigation = () => {
34
- const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
35
- const $availableOptions = $options.filter(($option) => {
36
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
37
- });
38
- const $firstOption = $availableOptions.find(($option) => {
39
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
40
- });
41
- const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
42
- const $optionToFocus = $selectedOption || $firstOption;
43
- $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
44
- };
45
18
  this._handleInputChange = debounce['default'](({ target }) => {
46
19
  this.value = target.value;
47
20
  this.emitCustomEvent(select_components_constatns.SELECT_SEARCH_EVENT_NAMES.search, {
@@ -52,9 +25,6 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
52
25
  connectedCallback() {
53
26
  super.connectedCallback();
54
27
  this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
55
- // to musisz zrobić inaczej, bo jest kilka selectów na stronie
56
- this._$selectOptions = document.querySelector('h-options');
57
- this.addEventListener('keydown', this._handleSearchKeydown);
58
28
  }
59
29
  render() {
60
30
  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;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;"}
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;"}
@@ -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
- require('@dreamcommerce/utilities');
6
+ var utilities = 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,6 +26,7 @@ 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);
29
30
  this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
30
31
  this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
31
32
  }
@@ -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;"}
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;"}
@@ -29,7 +29,6 @@ var select_utils = require('./select_utils.js');
29
29
  var select_controller = require('./controllers/select_controller.js');
30
30
  var select_option_mapper = require('./model/select_option_mapper.js');
31
31
  var repeat = require('lit/directives/repeat');
32
- var select_toggler_keyboard_controller = require('./controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js');
33
32
 
34
33
  exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
35
34
  constructor() {
@@ -44,8 +43,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
44
43
  this.ariaLabelledby = '';
45
44
  this._searchValue = '';
46
45
  this._$options = new Map();
47
- this.$dropdown = ref_js.createRef();
48
- this.$search = ref_js.createRef();
46
+ this._$dropdown = ref_js.createRef();
47
+ this._$search = ref_js.createRef();
49
48
  this._$optionsList = ref_js.createRef();
50
49
  this._$dropdownContent = ref_js.createRef();
51
50
  this._$dropdownToggler = ref_js.createRef();
@@ -106,18 +105,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
106
105
  this.updateOptionAriaAttribute($option);
107
106
  });
108
107
  };
109
- this._updateLabelAria = (options) => {
110
- var _a, _b;
111
- if (!this.$searchLabel)
112
- return;
113
- (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
114
- this.$searchLabel.innerHTML = `
115
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
116
- <span id="value-label" class="sr-only">
117
- ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
118
- </span>
119
- `;
120
- };
121
108
  this._handleOptionClicked = ({ detail }) => {
122
109
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
123
110
  return;
@@ -133,11 +120,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
133
120
  });
134
121
  };
135
122
  this._handleDropdownHidden = () => {
136
- var _a, _b;
123
+ var _a;
137
124
  this._searchValue = '';
138
125
  this.opened = false;
139
126
  (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
140
- (_b = this._$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.focus();
141
127
  };
142
128
  this._manageSelectFocusAria = (ev) => {
143
129
  var _a;
@@ -153,7 +139,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
153
139
  var _a;
154
140
  if (!this.opened)
155
141
  return;
156
- (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
142
+ (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
157
143
  };
158
144
  this._clearOptions = () => {
159
145
  this._selectController.deselectAll();
@@ -197,7 +183,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
197
183
  return Array.from(this._$options.values());
198
184
  }
199
185
  updated(changedProperties) {
200
- var _a;
201
186
  super.updated(changedProperties);
202
187
  if (changedProperties.has('opened')) {
203
188
  if (this.opened) {
@@ -211,52 +196,28 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
211
196
  if (changedProperties.has('optionsList')) {
212
197
  this._updateOptions();
213
198
  }
214
- if (this._$optionsList.value) {
215
- (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
216
- this.listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
199
+ if (this._$optionsList.value && !this._listBoxController)
200
+ this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
217
201
  host: this,
218
202
  $list: this._$optionsList.value
219
203
  });
220
- }
221
- if (this.listBoxController) {
222
- this.listBoxController.calculateSelectedOptionIndex();
223
- }
224
204
  }
225
205
  _focusElementAfterSelectOpened() {
226
- var _a;
227
- const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
228
- const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
229
- const $firstOption = $options.find(($option) => {
230
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
231
- });
232
- const $selectedOption = this.selectedOptions[0];
233
- const $optionToFocus = $selectedOption || $firstOption;
234
- $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
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();
235
209
  }
236
210
  connectedCallback() {
237
- var _a, _b;
238
211
  super.connectedCallback();
239
212
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
240
213
  if (!this.searchDisabled) {
241
214
  this.classList.add(select_constants.SELECT_CSS_CLASSES.selectWithSearch);
242
215
  }
243
- this.$searchLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
244
- (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
245
216
  this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
246
217
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
247
218
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
248
219
  this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
249
220
  this._selectController.options$.subscribe(this._optionsObserver);
250
- this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
251
- this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
252
- if (this._$optionsList.value && this._$dropdownToggler.value) {
253
- (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
254
- this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
255
- host: this,
256
- $toggler: this._$dropdownToggler.value,
257
- $list: this._$optionsList.value
258
- });
259
- }
260
221
  this._updateOptions();
261
222
  this._setupEvents();
262
223
  }
@@ -286,10 +247,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
286
247
  select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
287
248
  }
288
249
  updateOptionAriaAttribute($option) {
289
- if (!this.multiple) {
290
- const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
291
- $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
292
- }
293
250
  $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
294
251
  }
295
252
  _removeHTMLOptions(optionsValues) {
@@ -299,12 +256,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
299
256
  const option = this._selectController.getOption(value);
300
257
  if (!option)
301
258
  return;
302
- const $selectedOption = this._$options.get(option.value);
303
- const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
304
- if ($selectedOptionLink) {
305
- $selectedOptionLink.click();
306
- return;
307
- }
308
259
  this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
309
260
  if (!this.multiple)
310
261
  this._closeSelect();
@@ -355,14 +306,13 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
355
306
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
356
307
  return lit.html `
357
308
  <h-dropdown
358
- ${ref_js.ref(this.$dropdown)}
309
+ ${ref_js.ref(this._$dropdown)}
359
310
  @showed=${() => (this.opened = true)}
360
311
  @hidden=${this._handleDropdownHidden}
361
312
  name="${this.controlName}"
362
313
  offset=${this.offset}
363
314
  content-width="full"
364
315
  prevent-focus-trap
365
- no-autofocus
366
316
  >
367
317
  <h-dropdown-toggler
368
318
  ${ref_js.ref(this._$dropdownToggler)}
@@ -390,7 +340,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
390
340
  ${isSearchEnabled
391
341
  ? lit.html ` <h-select-search
392
342
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
393
- ${ref_js.ref(this.$search)}
343
+ ${ref_js.ref(this._$search)}
394
344
  .value=${this._searchValue}
395
345
  @search=${this._handleSearch}
396
346
  ></h-select-search>`
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -20,12 +20,20 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
20
20
  this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
21
21
  this.mouseonly = false;
22
22
  this.tabindex = '-1';
23
+ this._handleChildrenAriaAttributes = () => {
24
+ if (!this._$baseMessageContent)
25
+ return;
26
+ [...this.children].forEach((child) => {
27
+ if (base_message_constants.LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()))
28
+ return;
29
+ child.setAttribute('aria-describedby', this._$baseMessageContent.id);
30
+ });
31
+ };
23
32
  this._setupEventListeners = () => {
24
- this.addEventListener('mouseenter', this.open);
25
- this.addEventListener('mouseleave', this.close);
33
+ document.addEventListener('mouseover', this._toggleTooltipFromEvent);
26
34
  if (!this.mouseonly) {
27
- this.addEventListener('focusin', this.open);
28
- this.addEventListener('focusout', this.close);
35
+ document.addEventListener('focusin', this.open);
36
+ document.addEventListener('focusout', this.close);
29
37
  }
30
38
  };
31
39
  this._positionMessage = () => {
@@ -34,6 +42,19 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
34
42
  (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.setAttribute('direction', this._positionController.position(true));
35
43
  });
36
44
  };
45
+ this._toggleTooltipFromEvent = (ev) => {
46
+ var _a;
47
+ if (!ev.target)
48
+ return;
49
+ const $target = ev.target;
50
+ const isInsideMessageContent = $target.closest && $target.closest(`[id="${(_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.id}"]`);
51
+ const isInsideMessageContainer = !!this.contains($target);
52
+ if (!isInsideMessageContent && !isInsideMessageContainer) {
53
+ this.close();
54
+ return;
55
+ }
56
+ this.open();
57
+ };
37
58
  this.open = () => {
38
59
  this._tooltipOpenTime = Date.now();
39
60
  clearTimeout(this._closeTimeout);
@@ -84,6 +105,8 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
84
105
  });
85
106
  this.setAttribute('tabindex', this.tabindex);
86
107
  this._setupEventListeners();
108
+ this._$baseMessageContent = [...this.children].find((child) => base_message_constants.LIST_OF_MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
109
+ this._handleChildrenAriaAttributes();
87
110
  }
88
111
  static _appendMessagePortal() {
89
112
  const $messagePortalTarget = document.querySelector(`[name="${base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME}"]`);
@@ -93,6 +116,14 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
93
116
  $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME);
94
117
  document.body.appendChild($portalTarget);
95
118
  }
119
+ disconnectedCallback() {
120
+ super.disconnectedCallback();
121
+ document.removeEventListener('mouseover', this._toggleTooltipFromEvent);
122
+ if (!this.mouseonly) {
123
+ document.removeEventListener('focusin', this.open);
124
+ document.removeEventListener('focusout', this.close);
125
+ }
126
+ }
96
127
  }
97
128
  tslib_es6.__decorate([
98
129
  decorators.property({ type: Boolean, reflect: true }),
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var portal_constants = require('../portal/portal_constants.js');
5
6
  var hint_constants = require('./hints/hint_constants.js');
6
7
  var tooltip_constants = require('./tooltips/tooltip_constants.js');
7
8
 
@@ -12,10 +13,14 @@ const DEFAULT_MESSAGE_OFFSET = 10;
12
13
  const MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
13
14
  const MESSAGE_SHOW_DELAY_IN_MS = 100;
14
15
  const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
15
- const MESSAGE_CLOSE_DELAY_IN_MS = 500;
16
+ const MESSAGE_CLOSE_DELAY_IN_MS = 500;
17
+ const LIST_OF_MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
18
+ const LIST_OF_MESSAGE_CHILDREN = [...LIST_OF_MESSAGE_CONTENT_ELEMENTS, portal_constants.PORTAL_COMPONENT_NAME];
16
19
 
17
20
  exports.DEFAULT_MESSAGE_OFFSET = DEFAULT_MESSAGE_OFFSET;
18
21
  exports.DEFAULT_MESSAGE_PORTAL_NAME = DEFAULT_MESSAGE_PORTAL_NAME;
22
+ exports.LIST_OF_MESSAGE_CHILDREN = LIST_OF_MESSAGE_CHILDREN;
23
+ exports.LIST_OF_MESSAGE_CONTENT_ELEMENTS = LIST_OF_MESSAGE_CONTENT_ELEMENTS;
19
24
  exports.MESSAGE_CLOSE_DELAY_IN_MS = MESSAGE_CLOSE_DELAY_IN_MS;
20
25
  exports.MESSAGE_CONTENT_ELEMENTS = MESSAGE_CONTENT_ELEMENTS;
21
26
  exports.MESSAGE_CONTENT_SLOT_NAME = MESSAGE_CONTENT_SLOT_NAME;
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var decorators = require('lit/decorators');
7
7
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
+ var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
8
9
  var portal_constants = require('../portal/portal_constants.js');
9
10
  var base_message_constants = require('./base_message_constants.js');
10
11
 
@@ -12,6 +13,7 @@ class BaseMessageContent extends phoenix_light_lit_element.PhoenixLightLitElemen
12
13
  constructor() {
13
14
  super();
14
15
  this.portalTarget = base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME;
16
+ this.id = v4['default']();
15
17
  this.slot = base_message_constants.MESSAGE_CONTENT_SLOT_NAME;
16
18
  }
17
19
  connectedCallback() {
@@ -20,13 +22,16 @@ class BaseMessageContent extends phoenix_light_lit_element.PhoenixLightLitElemen
20
22
  }
21
23
  _setupAriaAttributes() {
22
24
  this.setAttribute('role', 'tooltip');
23
- this.setAttribute('inert', '');
24
25
  }
25
26
  }
26
27
  tslib_es6.__decorate([
27
28
  decorators.property({ type: String, attribute: portal_constants.PORTAL_TARGET_ATTRIBUTE_NAME }),
28
29
  tslib_es6.__metadata("design:type", Object)
29
- ], BaseMessageContent.prototype, "portalTarget", void 0);
30
+ ], BaseMessageContent.prototype, "portalTarget", void 0);
31
+ tslib_es6.__decorate([
32
+ decorators.property({ type: String, reflect: true }),
33
+ tslib_es6.__metadata("design:type", Object)
34
+ ], BaseMessageContent.prototype, "id", void 0);
30
35
 
31
36
  exports.BaseMessageContent = BaseMessageContent;
32
37
  //# sourceMappingURL=base_message_content.js.map
@@ -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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;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,9 +7,11 @@ const PORTAL_EVENTS = {
7
7
  close: 'close'
8
8
  };
9
9
  const PORTAL_TARGET_NAME_PROP = 'name';
10
+ const PORTAL_COMPONENT_NAME = 'h-portal';
10
11
  const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
11
12
  const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
12
13
 
14
+ exports.PORTAL_COMPONENT_NAME = PORTAL_COMPONENT_NAME;
13
15
  exports.PORTAL_EVENTS = PORTAL_EVENTS;
14
16
  exports.PORTAL_TARGET_ATTRIBUTE_NAME = PORTAL_TARGET_ATTRIBUTE_NAME;
15
17
  exports.PORTAL_TARGET_COMPONENT_NAME = PORTAL_TARGET_COMPONENT_NAME;
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}