@shoper/phoenix_design_system 1.15.11-16 → 1.15.11-17

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 (52) 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 +5 -23
  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 -31
  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 -2
  8. package/build/cjs/packages/phoenix/src/components/form/select/select.js +19 -78
  9. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  10. package/build/cjs/packages/phoenix/src/components/slider/slider.js +19 -0
  11. package/build/cjs/packages/phoenix/src/components/slider/slider.js.map +1 -1
  12. package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js +11 -0
  13. package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js.map +1 -0
  14. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +30 -76
  15. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  16. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +0 -1
  17. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +2 -9
  18. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +0 -3
  20. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +5 -23
  21. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  22. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +0 -4
  23. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +0 -31
  24. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  25. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +2 -2
  26. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +5 -14
  27. package/build/esm/packages/phoenix/src/components/form/select/select.js +19 -78
  28. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  29. package/build/esm/packages/phoenix/src/components/slider/slider.d.ts +3 -0
  30. package/build/esm/packages/phoenix/src/components/slider/slider.js +19 -0
  31. package/build/esm/packages/phoenix/src/components/slider/slider.js.map +1 -1
  32. package/build/esm/packages/phoenix/src/components/slider/slider_constants.d.ts +4 -0
  33. package/build/esm/packages/phoenix/src/components/slider/slider_constants.js +7 -0
  34. package/build/esm/packages/phoenix/src/components/slider/slider_constants.js.map +1 -0
  35. package/build/esm/packages/phoenix/src/components/slider/slider_types.d.ts +3 -0
  36. package/build/esm/packages/phoenix/src/components/slider/slider_types.js +2 -0
  37. package/build/esm/packages/phoenix/src/components/slider/slider_types.js.map +1 -1
  38. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +2 -6
  39. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +0 -1
  40. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
  41. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +3 -8
  42. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +30 -76
  43. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  44. package/package.json +2 -2
  45. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -98
  46. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
  47. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +0 -15
  48. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -94
  49. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
  50. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts +0 -8
  51. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js +0 -3
  52. 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;"}
@@ -7,6 +7,7 @@ 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');
10
11
  var global_constants = require('../../global_constants.js');
11
12
  var dropdown_constants = require('./dropdown_constants.js');
12
13
  var toggle_element_aria_controller = require('../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
@@ -15,9 +16,6 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
15
16
  constructor() {
16
17
  super();
17
18
  this.name = '';
18
- this.ariaHasPopup = 'menu';
19
- this.ariaControls = '';
20
- this.role = 'button';
21
19
  this._setupTogglerAria = () => {
22
20
  this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
23
21
  if (this._$dropdown.isOpened)
@@ -25,14 +23,11 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
25
23
  host: this,
26
24
  initialAriaExpandedValue: this._$dropdown.isOpened()
27
25
  });
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);
26
+ this.setAttribute('aria-haspopup', 'true');
27
+ if (this._$dropdown.id)
28
+ this.setAttribute('aria-controls', this._$dropdown.id);
32
29
  };
33
30
  this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
34
- if (ev.key !== 'Enter' && ev.key !== ' ')
35
- return;
36
31
  ev.stopImmediatePropagation();
37
32
  this._dispatchToggleDropdownEvent(ev);
38
33
  };
@@ -51,8 +46,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
51
46
  connectedCallback() {
52
47
  var _a;
53
48
  super.connectedCallback();
54
- this.setAttribute('tabindex', '0');
55
- this.addEventListener('keydown', this._dispatchToggleDropdownEventWithKeyboard);
49
+ this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
56
50
  this._setupTogglerAria();
57
51
  const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(dropdown_constants.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
58
52
  if (hasToggleOnHover) {
@@ -66,18 +60,6 @@ tslib_es6.__decorate([
66
60
  decorators.property({ type: String, reflect: true }),
67
61
  tslib_es6.__metadata("design:type", Object)
68
62
  ], 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);
81
63
  exports.HDropdownToggler = tslib_es6.__decorate([
82
64
  phoenix_custom_element.phoenixCustomElement('h-dropdown-toggler'),
83
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;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,11 +5,9 @@ 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');
12
- var dropdown_constants = require('../../../../dropdown/dropdown_constants.js');
13
11
  var debounce = require('../../../../../../../../external/lodash/debounce.js');
14
12
  var select_search_constants = require('./select_search_constants.js');
15
13
 
@@ -17,32 +15,6 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
17
15
  constructor() {
18
16
  super(...arguments);
19
17
  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
- };
46
18
  this._handleInputChange = debounce['default'](({ target }) => {
47
19
  this.value = target.value;
48
20
  this.emitCustomEvent(select_components_constatns.SELECT_SEARCH_EVENT_NAMES.search, {
@@ -53,9 +25,6 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
53
25
  connectedCallback() {
54
26
  super.connectedCallback();
55
27
  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);
59
28
  }
60
29
  render() {
61
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;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,7 +26,7 @@ exports.HOptions = class HOptions extends phoenix_light_lit_element.PhoenixLight
26
26
  });
27
27
  };
28
28
  this.setAttribute('role', 'listbox');
29
- this.setAttribute('aria-labelledby', 'dsf');
29
+ utilities.UiDomUtils.makeNavigable(this);
30
30
  this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
31
31
  this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
32
32
  }
@@ -18,7 +18,6 @@ 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');
22
21
  var dropdown_content = require('../../dropdown/dropdown_content.js');
23
22
  var dropdown_toggler = require('../../dropdown/dropdown_toggler.js');
24
23
  var dropdown = require('../../dropdown/dropdown.js');
@@ -30,7 +29,6 @@ var select_utils = require('./select_utils.js');
30
29
  var select_controller = require('./controllers/select_controller.js');
31
30
  var select_option_mapper = require('./model/select_option_mapper.js');
32
31
  var repeat = require('lit/directives/repeat');
33
- var select_toggler_keyboard_controller = require('./controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js');
34
32
 
35
33
  exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
36
34
  constructor() {
@@ -42,15 +40,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
42
40
  this.searchDisabled = false;
43
41
  this.type = select_constants.SELECT_TYPES.select;
44
42
  this.noDeselect = false;
45
- this.assistiveTitleId = '';
46
- this._selectOptionsId = v4['default']();
43
+ this.ariaLabelledby = '';
47
44
  this._searchValue = '';
48
45
  this._$options = new Map();
49
- this.$dropdown = ref_js.createRef();
50
- this.$search = ref_js.createRef();
46
+ this._$dropdown = ref_js.createRef();
47
+ this._$search = ref_js.createRef();
51
48
  this._$optionsList = ref_js.createRef();
52
49
  this._$dropdownContent = ref_js.createRef();
53
- this.$dropdownToggler = ref_js.createRef();
50
+ this._$dropdownToggler = ref_js.createRef();
54
51
  this._selectContext = new context_provider_controller.ContextProviderController(this);
55
52
  this._updateOptions = () => {
56
53
  const $options = this._getOptions();
@@ -108,18 +105,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
108
105
  this.updateOptionAriaAttribute($option);
109
106
  });
110
107
  };
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
- };
123
108
  this._handleOptionClicked = ({ detail }) => {
124
109
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
125
110
  return;
@@ -135,15 +120,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
135
120
  });
136
121
  };
137
122
  this._handleDropdownHidden = () => {
138
- var _a, _b, _c;
123
+ var _a;
139
124
  this._searchValue = '';
140
125
  this.opened = false;
141
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('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
- }
126
+ (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
147
127
  };
148
128
  this._manageSelectFocusAria = (ev) => {
149
129
  var _a;
@@ -152,14 +132,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
152
132
  return;
153
133
  const optionId = $target.id;
154
134
  if (optionId) {
155
- (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
135
+ (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
156
136
  }
157
137
  };
158
138
  this._closeSelect = () => {
159
139
  var _a;
160
140
  if (!this.opened)
161
141
  return;
162
- (_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();
163
143
  };
164
144
  this._clearOptions = () => {
165
145
  this._selectController.deselectAll();
@@ -203,7 +183,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
203
183
  return Array.from(this._$options.values());
204
184
  }
205
185
  updated(changedProperties) {
206
- var _a, _b;
207
186
  super.updated(changedProperties);
208
187
  if (changedProperties.has('opened')) {
209
188
  if (this.opened) {
@@ -217,52 +196,28 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
217
196
  if (changedProperties.has('optionsList')) {
218
197
  this._updateOptions();
219
198
  }
220
- if (this._$optionsList.value) {
221
- (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
222
- this.listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
199
+ if (this._$optionsList.value && !this._listBoxController)
200
+ this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
223
201
  host: this,
224
202
  $list: this._$optionsList.value
225
203
  });
226
- }
227
- if (this.listBoxController) {
228
- this.listBoxController.calculateSelectedOptionIndex();
229
- }
230
- if (this._$optionsList.value && this.$dropdownToggler.value) {
231
- (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
232
- this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
233
- host: this,
234
- $toggler: this.$dropdownToggler.value,
235
- $list: this._$optionsList.value
236
- });
237
- }
238
204
  }
239
205
  _focusElementAfterSelectOpened() {
240
- var _a;
241
- const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
242
- const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
243
- const $firstOption = $options.find(($option) => {
244
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
245
- });
246
- const $selectedOption = this.selectedOptions[0];
247
- const $optionToFocus = $selectedOption || $firstOption;
248
- $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();
249
209
  }
250
210
  connectedCallback() {
251
- var _a;
252
211
  super.connectedCallback();
253
212
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
254
213
  if (!this.searchDisabled) {
255
214
  this.classList.add(select_constants.SELECT_CSS_CLASSES.selectWithSearch);
256
215
  }
257
- this.$searchLabel = document.querySelector(`[id="${this.assistiveTitleId}"]`);
258
- (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
259
216
  this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
260
217
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
261
218
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
262
219
  this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
263
220
  this._selectController.options$.subscribe(this._optionsObserver);
264
- this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
265
- this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
266
221
  this._updateOptions();
267
222
  this._setupEvents();
268
223
  }
@@ -292,10 +247,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
292
247
  select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
293
248
  }
294
249
  updateOptionAriaAttribute($option) {
295
- if (!this.multiple) {
296
- const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
297
- $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
298
- }
299
250
  $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
300
251
  }
301
252
  _removeHTMLOptions(optionsValues) {
@@ -305,12 +256,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
305
256
  const option = this._selectController.getOption(value);
306
257
  if (!option)
307
258
  return;
308
- const $selectedOption = this._$options.get(option.value);
309
- const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
310
- if ($selectedOptionLink) {
311
- $selectedOptionLink.click();
312
- return;
313
- }
314
259
  this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
315
260
  if (!this.multiple)
316
261
  this._closeSelect();
@@ -361,25 +306,23 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
361
306
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
362
307
  return lit.html `
363
308
  <h-dropdown
364
- ${ref_js.ref(this.$dropdown)}
309
+ ${ref_js.ref(this._$dropdown)}
365
310
  @showed=${() => (this.opened = true)}
366
311
  @hidden=${this._handleDropdownHidden}
367
312
  name="${this.controlName}"
368
313
  offset=${this.offset}
369
314
  content-width="full"
370
315
  prevent-focus-trap
371
- no-autofocus
372
316
  >
373
317
  <h-dropdown-toggler
374
- ${ref_js.ref(this.$dropdownToggler)}
318
+ ${ref_js.ref(this._$dropdownToggler)}
375
319
  name="${this.controlName}"
376
320
  validation-container
377
321
  aria-haspopup="listbox"
378
322
  role="combobox"
379
323
  aria-required="${this.required ? 'true' : 'false'}"
380
324
  aria-activedescendant
381
- role="combobox"
382
- aria-controls="${this._selectOptionsId}"
325
+ aria-labelledby="${this.ariaLabelledby}"
383
326
  >
384
327
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}
385
328
  </h-dropdown-toggler>
@@ -397,7 +340,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
397
340
  ${isSearchEnabled
398
341
  ? lit.html ` <h-select-search
399
342
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
400
- ${ref_js.ref(this.$search)}
343
+ ${ref_js.ref(this._$search)}
401
344
  .value=${this._searchValue}
402
345
  @search=${this._handleSearch}
403
346
  ></h-select-search>`
@@ -405,8 +348,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
405
348
 
406
349
  <h-options
407
350
  class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
408
- aria-labelledby="${this.assistiveTitleId}"
409
- id="${this._selectOptionsId}"
410
351
  ${ref_js.ref(this._$optionsList)}
411
352
  @optionClicked=${this._handleOptionClicked}
412
353
  @optionUpdated=${this._handleOptionUpdated}
@@ -498,9 +439,9 @@ tslib_es6.__decorate([
498
439
  tslib_es6.__metadata("design:type", Boolean)
499
440
  ], exports.HSelect.prototype, "noDeselect", void 0);
500
441
  tslib_es6.__decorate([
501
- decorators_js.property({ type: String, attribute: 'assistive-title-id' }),
442
+ decorators_js.property({ type: String, attribute: 'aria-labelledby' }),
502
443
  tslib_es6.__metadata("design:type", String)
503
- ], exports.HSelect.prototype, "assistiveTitleId", void 0);
444
+ ], exports.HSelect.prototype, "ariaLabelledby", void 0);
504
445
  tslib_es6.__decorate([
505
446
  decorators.state(),
506
447
  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,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;"}
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;"}
@@ -8,6 +8,7 @@ var utilities = 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
10
  var splide_esm = require('../../../../../external/@splidejs/splide/dist/js/splide.esm.js');
11
+ var slider_constants = require('./slider_constants.js');
11
12
 
12
13
  exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLitElement {
13
14
  constructor() {
@@ -21,6 +22,22 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
21
22
  focus: 'center'
22
23
  };
23
24
  this._slider = null;
25
+ this._showFocusableNodes = (slideComponent) => {
26
+ this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
27
+ };
28
+ this._hideFocusableNodes = (slideComponent) => {
29
+ this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
30
+ };
31
+ this._handleFocusableNodes = (slideComponent, action) => {
32
+ if (!this._settings.focusableNodes)
33
+ return;
34
+ const focusableNodesArray = this._settings.focusableNodes.split(',').map((focusableNode) => focusableNode.trim());
35
+ focusableNodesArray.forEach((focusableNode) => {
36
+ const $focusableElements = [...slideComponent.slide.querySelectorAll(focusableNode)];
37
+ const newTabindex = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? '0' : '-1';
38
+ $focusableElements.forEach(($element) => $element.setAttribute('tabindex', newTabindex));
39
+ });
40
+ };
24
41
  }
25
42
  get sliderSettings() {
26
43
  return this._settings;
@@ -40,6 +57,8 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
40
57
  if (this._settings.mountOnConnectedCallback) {
41
58
  this._slider.mount();
42
59
  }
60
+ this._slider.on('visible', this._showFocusableNodes);
61
+ this._slider.on('hidden', this._hideFocusableNodes);
43
62
  }
44
63
  getSlider() {
45
64
  return this._slider;
@@ -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,yBAAyB,gEAAoE;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,yBAAyB,gEAAoE;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,11 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
6
+ show: 'show',
7
+ hide: 'hide'
8
+ };
9
+
10
+ exports.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS;
11
+ //# sourceMappingURL=slider_constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}