@shoper/phoenix_design_system 1.15.11-4 → 1.15.11-41

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 (54) 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 +10 -59
  10. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/slider/slider.js +22 -0
  12. package/build/cjs/packages/phoenix/src/components/slider/slider.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js +11 -0
  14. package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js.map +1 -0
  15. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +30 -76
  16. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +0 -1
  18. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +2 -9
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  20. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +0 -1
  21. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -6
  22. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  23. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +0 -4
  24. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +0 -30
  25. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  26. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +2 -1
  27. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  28. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -10
  29. package/build/esm/packages/phoenix/src/components/form/select/select.js +10 -59
  30. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  31. package/build/esm/packages/phoenix/src/components/slider/slider.d.ts +4 -0
  32. package/build/esm/packages/phoenix/src/components/slider/slider.js +23 -1
  33. package/build/esm/packages/phoenix/src/components/slider/slider.js.map +1 -1
  34. package/build/esm/packages/phoenix/src/components/slider/slider_constants.d.ts +4 -0
  35. package/build/esm/packages/phoenix/src/components/slider/slider_constants.js +7 -0
  36. package/build/esm/packages/phoenix/src/components/slider/slider_constants.js.map +1 -0
  37. package/build/esm/packages/phoenix/src/components/slider/slider_types.d.ts +3 -0
  38. package/build/esm/packages/phoenix/src/components/slider/slider_types.js +2 -0
  39. package/build/esm/packages/phoenix/src/components/slider/slider_types.js.map +1 -1
  40. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +2 -6
  41. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +0 -1
  42. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
  43. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +3 -8
  44. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +30 -76
  45. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  46. package/package.json +1 -1
  47. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -98
  48. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
  49. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +0 -15
  50. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -94
  51. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
  52. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts +0 -8
  53. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js +0 -3
  54. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,7 +1,6 @@
1
1
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
2
  export declare class HDropdownToggler extends PhoenixLightLitElement {
3
3
  name: string;
4
- ariaHasPopup: string;
5
4
  private _btnController;
6
5
  private _toggleElementAriaController;
7
6
  private _$dropdown;
@@ -12,7 +12,6 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
12
12
  constructor() {
13
13
  super();
14
14
  this.name = '';
15
- this.ariaHasPopup = 'menu';
16
15
  this._setupTogglerAria = () => {
17
16
  this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
18
17
  if (this._$dropdown.isOpened)
@@ -20,7 +19,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
20
19
  host: this,
21
20
  initialAriaExpandedValue: this._$dropdown.isOpened()
22
21
  });
23
- this.setAttribute('aria-haspopup', this.ariaHasPopup);
22
+ this.setAttribute('aria-haspopup', 'true');
24
23
  if (this._$dropdown.id)
25
24
  this.setAttribute('aria-controls', this._$dropdown.id);
26
25
  };
@@ -57,10 +56,6 @@ __decorate([
57
56
  property({ type: String, reflect: true }),
58
57
  __metadata("design:type", Object)
59
58
  ], HDropdownToggler.prototype, "name", void 0);
60
- __decorate([
61
- property({ type: String, attribute: 'aria-haspopup' }),
62
- __metadata("design:type", Object)
63
- ], HDropdownToggler.prototype, "ariaHasPopup", void 0);
64
59
  HDropdownToggler = __decorate([
65
60
  phoenixCustomElement('h-dropdown-toggler'),
66
61
  __metadata("design:paramtypes", [])
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -2,11 +2,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
2
2
  import { TemplateResult } from 'lit';
3
3
  export declare class HSelectSearch extends PhoenixLightLitElement {
4
4
  value: string;
5
- private _$selectOptions;
6
5
  connectedCallback(): void;
7
- private _handleSearchKeydown;
8
- private _handleDispatchEventOnOptionsList;
9
- private _handleFocusOptionOnArrowNavigation;
10
6
  private _handleInputChange;
11
7
  protected render(): TemplateResult;
12
8
  }
@@ -1,7 +1,6 @@
1
1
  import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
2
2
  import { html } from 'lit';
3
3
  import { property } from 'lit/decorators';
4
- import '@dreamcommerce/utilities';
5
4
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
6
5
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
7
6
  import { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
@@ -12,32 +11,6 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
12
11
  constructor() {
13
12
  super(...arguments);
14
13
  this.value = '';
15
- this._$selectOptions = null;
16
- this._handleSearchKeydown = (ev) => {
17
- if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
18
- return;
19
- this._handleFocusOptionOnArrowNavigation();
20
- this._handleDispatchEventOnOptionsList(ev);
21
- };
22
- this._handleDispatchEventOnOptionsList = (ev) => {
23
- var _a;
24
- const arrowNavigationEvent = new KeyboardEvent('keydown', {
25
- key: ev.key
26
- });
27
- (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
28
- };
29
- this._handleFocusOptionOnArrowNavigation = () => {
30
- const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
31
- const $availableOptions = $options.filter(($option) => {
32
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
33
- });
34
- const $firstOption = $availableOptions.find(($option) => {
35
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
36
- });
37
- const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
38
- const $optionToFocus = $selectedOption || $firstOption;
39
- $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
40
- };
41
14
  this._handleInputChange = debounce_1(({ target }) => {
42
15
  this.value = target.value;
43
16
  this.emitCustomEvent(SELECT_SEARCH_EVENT_NAMES.search, {
@@ -48,9 +21,6 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
48
21
  connectedCallback() {
49
22
  super.connectedCallback();
50
23
  this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
51
- // to musisz zrobić inaczej, bo jest kilka selectów na stronie
52
- this._$selectOptions = document.querySelector('h-options');
53
- this.addEventListener('keydown', this._handleSearchKeydown);
54
24
  }
55
25
  render() {
56
26
  return html `
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
2
- import '@dreamcommerce/utilities';
2
+ import { UiDomUtils } from '@dreamcommerce/utilities';
3
3
  import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
4
  import { phoenixCustomElement } from '../../../../core/decorators/phoenix_custom_element.js';
5
5
  import { SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
@@ -22,6 +22,7 @@ let HOptions = class HOptions extends PhoenixLightLitElement {
22
22
  });
23
23
  };
24
24
  this.setAttribute('role', 'listbox');
25
+ UiDomUtils.makeNavigable(this);
25
26
  this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
26
27
  this.addEventListener(SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
27
28
  }
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,8 +1,5 @@
1
1
  import { PropertyValues, TemplateResult } from 'lit';
2
- import { HDropdown } from "../../dropdown/dropdown";
3
2
  import { HOption } from "./components/option/select_option";
4
- import { HSelectSearch } from "./components/search/select_search";
5
- import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
6
3
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
7
4
  import { SelectOption } from "./model/select_option";
8
5
  import type { TSelectType } from "./select_types";
@@ -31,18 +28,15 @@ export declare class HSelect extends PhoenixLightLitElement {
31
28
  private _searchValue;
32
29
  private _selectController;
33
30
  private _$options;
34
- $dropdown: import("lit-html/directives/ref.js").Ref<HDropdown>;
35
- $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
31
+ private _$dropdown;
32
+ private _$search;
36
33
  private _$optionsList;
37
34
  private _$dropdownContent;
38
35
  private _$dropdownToggler;
39
36
  private _selectContext;
40
- listBoxController: ListBoxKeyboardController;
41
- private _selectTogglerKeyboardController;
37
+ private _listBoxController;
42
38
  private _optionsObserver;
43
- private _selectedOptionsAriaObserver;
44
39
  private $placeholder;
45
- private $searchLabel;
46
40
  constructor();
47
41
  updated(changedProperties: PropertyValues): void;
48
42
  private _focusElementAfterSelectOpened;
@@ -53,7 +47,6 @@ export declare class HSelect extends PhoenixLightLitElement {
53
47
  private _setupEvents;
54
48
  private _handleOptionDeselect;
55
49
  private _updateOptionsView;
56
- private _updateLabelAria;
57
50
  private _appendNewHTMLOption;
58
51
  updateOptionAriaAttribute($option: HOption): void;
59
52
  private _removeHTMLOptions;
@@ -25,7 +25,6 @@ import { SelectControlUtils } from './select_utils.js';
25
25
  import { SelectController } from './controllers/select_controller.js';
26
26
  import { SelectOptionMapper } from './model/select_option_mapper.js';
27
27
  import { repeat } from 'lit/directives/repeat';
28
- import { SelectTogglerKeyboardController } from './controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js';
29
28
 
30
29
  let HSelect = class HSelect extends PhoenixLightLitElement {
31
30
  constructor() {
@@ -40,8 +39,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
40
39
  this.ariaLabelledby = '';
41
40
  this._searchValue = '';
42
41
  this._$options = new Map();
43
- this.$dropdown = createRef();
44
- this.$search = createRef();
42
+ this._$dropdown = createRef();
43
+ this._$search = createRef();
45
44
  this._$optionsList = createRef();
46
45
  this._$dropdownContent = createRef();
47
46
  this._$dropdownToggler = createRef();
@@ -102,18 +101,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
102
101
  this.updateOptionAriaAttribute($option);
103
102
  });
104
103
  };
105
- this._updateLabelAria = (options) => {
106
- var _a, _b;
107
- if (!this.$searchLabel)
108
- return;
109
- (_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
110
- this.$searchLabel.innerHTML = `
111
- ${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
112
- <span id="value-label" class="sr-only">
113
- ${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
114
- </span>
115
- `;
116
- };
117
104
  this._handleOptionClicked = ({ detail }) => {
118
105
  if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
119
106
  return;
@@ -148,7 +135,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
148
135
  var _a;
149
136
  if (!this.opened)
150
137
  return;
151
- (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
138
+ (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
152
139
  };
153
140
  this._clearOptions = () => {
154
141
  this._selectController.deselectAll();
@@ -192,7 +179,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
192
179
  return Array.from(this._$options.values());
193
180
  }
194
181
  updated(changedProperties) {
195
- var _a, _b;
196
182
  super.updated(changedProperties);
197
183
  if (changedProperties.has('opened')) {
198
184
  if (this.opened) {
@@ -206,52 +192,28 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
206
192
  if (changedProperties.has('optionsList')) {
207
193
  this._updateOptions();
208
194
  }
209
- if (this._$optionsList.value) {
210
- (_a = this.listBoxController) === null || _a === void 0 ? void 0 : _a.hostDisconnected();
211
- this.listBoxController = new ListBoxKeyboardController({
212
- host: this,
213
- $list: this._$optionsList.value
214
- });
215
- }
216
- if (this.listBoxController) {
217
- this.listBoxController.calculateSelectedOptionIndex();
218
- }
219
- if (this._$optionsList.value && this._$dropdownToggler.value) {
220
- (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
221
- this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
195
+ if (this._$optionsList.value && !this._listBoxController)
196
+ this._listBoxController = new ListBoxKeyboardController({
222
197
  host: this,
223
- $toggler: this._$dropdownToggler.value,
224
198
  $list: this._$optionsList.value
225
199
  });
226
- }
227
200
  }
228
201
  _focusElementAfterSelectOpened() {
229
- var _a;
230
- const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
231
- const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
232
- const $firstOption = $options.find(($option) => {
233
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
234
- });
235
- const $selectedOption = this.selectedOptions[0];
236
- const $optionToFocus = $selectedOption || $firstOption;
237
- $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
202
+ var _a, _b;
203
+ const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
204
+ $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
238
205
  }
239
206
  connectedCallback() {
240
- var _a;
241
207
  super.connectedCallback();
242
208
  this.classList.add(SELECT_CSS_CLASSES.select);
243
209
  if (!this.searchDisabled) {
244
210
  this.classList.add(SELECT_CSS_CLASSES.selectWithSearch);
245
211
  }
246
- this.$searchLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
247
- (_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
248
212
  this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
249
213
  this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
250
214
  this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
251
215
  this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
252
216
  this._selectController.options$.subscribe(this._optionsObserver);
253
- this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
254
- this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
255
217
  this._updateOptions();
256
218
  this._setupEvents();
257
219
  }
@@ -281,10 +243,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
281
243
  SelectControlUtils.appendHTMLOption($option, $list, position);
282
244
  }
283
245
  updateOptionAriaAttribute($option) {
284
- if (!this.multiple) {
285
- const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
286
- $options.forEach(($option) => ($option.removeAttribute('aria-selected')));
287
- }
288
246
  $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
289
247
  }
290
248
  _removeHTMLOptions(optionsValues) {
@@ -294,12 +252,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
294
252
  const option = this._selectController.getOption(value);
295
253
  if (!option)
296
254
  return;
297
- const $selectedOption = this._$options.get(option.value);
298
- const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
299
- if ($selectedOptionLink) {
300
- $selectedOptionLink.click();
301
- return;
302
- }
303
255
  this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
304
256
  if (!this.multiple)
305
257
  this._closeSelect();
@@ -350,14 +302,13 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
350
302
  const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
351
303
  return html `
352
304
  <h-dropdown
353
- ${ref(this.$dropdown)}
305
+ ${ref(this._$dropdown)}
354
306
  @showed=${() => (this.opened = true)}
355
307
  @hidden=${this._handleDropdownHidden}
356
308
  name="${this.controlName}"
357
309
  offset=${this.offset}
358
310
  content-width="full"
359
311
  prevent-focus-trap
360
- no-autofocus
361
312
  >
362
313
  <h-dropdown-toggler
363
314
  ${ref(this._$dropdownToggler)}
@@ -385,7 +336,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
385
336
  ${isSearchEnabled
386
337
  ? html ` <h-select-search
387
338
  class=${SELECT_CSS_CLASSES.selectSearch}
388
- ${ref(this.$search)}
339
+ ${ref(this._$search)}
389
340
  .value=${this._searchValue}
390
341
  @search=${this._handleSearch}
391
342
  ></h-select-search>`
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -8,5 +8,9 @@ export declare class HSlider extends PhoenixLightLitElement {
8
8
  private _settings;
9
9
  private _slider;
10
10
  connectedCallback(): void;
11
+ private _showFocusableNodes;
12
+ private _hideFocusableNodes;
13
+ private _handleFocusableNodes;
11
14
  getSlider(): ISlider | null;
15
+ disconnectedCallback(): void;
12
16
  }
@@ -1,9 +1,10 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { property } from 'lit/decorators';
3
- import { JsonUtils } from '@dreamcommerce/utilities';
3
+ import { UiDomUtils, JsonUtils } from '@dreamcommerce/utilities';
4
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
6
  import { Splide } from '../../../../../external/@splidejs/splide/dist/js/splide.esm.js';
7
+ import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants.js';
7
8
 
8
9
  let HSlider = class HSlider extends PhoenixLightLitElement {
9
10
  constructor() {
@@ -17,6 +18,19 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
17
18
  focus: 'center'
18
19
  };
19
20
  this._slider = null;
21
+ this._showFocusableNodes = (slideComponent) => {
22
+ this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
23
+ };
24
+ this._hideFocusableNodes = (slideComponent) => {
25
+ this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
26
+ };
27
+ this._handleFocusableNodes = ({ slide }, action) => {
28
+ const $focusableElements = UiDomUtils.getFocusableElements(slide);
29
+ if ($focusableElements.length === 0)
30
+ return;
31
+ const newTabindex = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? '0' : '-1';
32
+ $focusableElements.forEach(($element) => $element.setAttribute('tabindex', newTabindex));
33
+ };
20
34
  }
21
35
  get sliderSettings() {
22
36
  return this._settings;
@@ -36,10 +50,18 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
36
50
  if (this._settings.mountOnConnectedCallback) {
37
51
  this._slider.mount();
38
52
  }
53
+ this._slider.on('visible', this._showFocusableNodes);
54
+ this._slider.on('hidden', this._hideFocusableNodes);
39
55
  }
40
56
  getSlider() {
41
57
  return this._slider;
42
58
  }
59
+ disconnectedCallback() {
60
+ var _a, _b;
61
+ super.disconnectedCallback();
62
+ (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
63
+ (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
64
+ }
43
65
  };
44
66
  __decorate([
45
67
  property({ reflect: true }),
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4 @@
1
+ export declare const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS: {
2
+ readonly show: "show";
3
+ readonly hide: "hide";
4
+ };
@@ -0,0 +1,7 @@
1
+ const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
2
+ show: 'show',
3
+ hide: 'hide'
4
+ };
5
+
6
+ export { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS };
7
+ //# 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;"}
@@ -1,6 +1,9 @@
1
1
  import { Options, Splide } from '@splidejs/splide';
2
+ import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants';
3
+ import { Any } from 'ts-toolbelt';
2
4
  export interface ISlider extends Splide {
3
5
  }
4
6
  export interface ISliderOptions extends Options {
5
7
  mountOnConnectedCallback: boolean;
6
8
  }
9
+ export declare type THandleNodesOption = typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS[Any.Keys<typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS>];
@@ -1,2 +1,4 @@
1
1
  import '@splidejs/splide';
2
+ import './slider_constants';
3
+ import 'ts-toolbelt';
2
4
  //# sourceMappingURL=slider_types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC"}
1
+ {"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC;AACnD,OAAsD,oBAAoB,CAAC;AAC3E,OAAoB,aAAa,CAAC"}
@@ -1,14 +1,10 @@
1
1
  import { Any } from 'ts-toolbelt';
2
- import { ReactiveController, ReactiveControllerHost } from 'lit';
2
+ import { ReactiveControllerHost } from 'lit';
3
3
  import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
4
- import { HSelect } from "../../components/form/select/select";
5
4
  export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
6
5
  export declare type TListBoxKeyboardControllerConstructorOptions = {
7
- host: ReactiveControllerHost & HSelect;
6
+ host: ReactiveControllerHost & HTMLElement;
8
7
  $list: HTMLElement;
9
8
  listItemSelector?: string;
10
9
  orientation?: TListBoxKeyboardNavigationDirection;
11
10
  };
12
- export interface IListboxController extends ReactiveController {
13
- calculateSelectedOptionIndex(): void;
14
- }
@@ -1,5 +1,4 @@
1
1
  import 'ts-toolbelt';
2
2
  import 'lit';
3
3
  import '@phoenixRoot/controllers/list_box_controller/list_box_controller_constants';
4
- import '@phoenixRoot/components/form/select/select';
5
4
  //# sourceMappingURL=list_box_controller_types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAA2D,KAAK,CAAC;AACjE,OAAwD,4EAA4E,CAAC;AACrI,OAAwB,4CAA4C,CAAC"}
1
+ {"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,KAAK,CAAC;AAC7C,OAAwD,4EAA4E,CAAC"}
@@ -1,15 +1,10 @@
1
- import { IListboxController, TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
2
- export declare class ListBoxKeyboardController implements IListboxController {
1
+ import { ReactiveController } from 'lit';
2
+ import { TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
3
+ export declare class ListBoxKeyboardController implements ReactiveController {
3
4
  #private;
4
- currentOptionIndex: number | undefined;
5
5
  constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
6
6
  hostConnected(): void;
7
- private _handleKeyboardNavigation;
8
7
  private _handleArrowNavigation;
9
- private _findCurrentIndex;
10
- private _handleWriteableCharacter;
11
- calculateSelectedOptionIndex: () => void;
12
8
  private _getPrevOptionIndex;
13
9
  private _getNextOptionIndex;
14
- hostDisconnected(): void;
15
10
  }