@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,64 +1,37 @@
1
1
  import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import 'lit';
3
3
  import { UiDomUtils } from '@dreamcommerce/utilities';
4
+ import { KeystrokesController } from '../keystrokes_controller/keystrokes_controller.js';
4
5
  import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from './list_box_controller_constants.js';
5
6
 
6
- var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
7
+ var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
7
8
  class ListBoxKeyboardController {
8
9
  constructor({ host, $list, listItemSelector = '[role="option"]', orientation = LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical }) {
9
10
  _ListBoxKeyboardController_host.set(this, void 0);
10
11
  _ListBoxKeyboardController__$list.set(this, void 0);
12
+ _ListBoxKeyboardController_currentOptionIndex.set(this, void 0);
11
13
  _ListBoxKeyboardController__$options.set(this, void 0);
12
14
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
13
15
  _ListBoxKeyboardController_keys.set(this, void 0);
14
- this._handleKeyboardNavigation = (ev) => {
15
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
16
- this._handleArrowNavigation(ev);
17
- return;
18
- }
19
- this._handleWriteableCharacter(ev);
20
- };
21
16
  this._handleArrowNavigation = (event) => {
22
17
  event.preventDefault();
23
18
  const { key } = event;
24
- const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
25
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
26
- });
27
- const prevOptionIndex = this._findCurrentIndex();
19
+ const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
28
20
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
29
21
  if (newOptionIndex === undefined) {
30
- newOptionIndex = this._findCurrentIndex();
22
+ const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
23
+ newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
31
24
  }
32
- if (newOptionIndex === this.currentOptionIndex)
25
+ if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
33
26
  return;
34
27
  if (prevOptionIndex !== undefined) {
35
28
  const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
36
- $prevOption && UiDomUtils.makeUnnavigable($prevOption);
29
+ UiDomUtils.makeUnnavigable($prevOption);
37
30
  }
38
- this.currentOptionIndex = newOptionIndex;
39
- const $focusedOption = $availableOptions[newOptionIndex];
40
- if ($focusedOption) {
41
- UiDomUtils.makeNavigable($focusedOption);
42
- $focusedOption.focus();
43
- }
44
- };
45
- this._findCurrentIndex = () => {
46
- const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
47
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
48
- });
49
- const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
50
- return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
51
- };
52
- this._handleWriteableCharacter = (ev) => {
53
- var _a;
54
- const $searchInput = (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
55
- if (!$searchInput)
56
- return;
57
- $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
58
- };
59
- this.calculateSelectedOptionIndex = () => {
60
- const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
61
- this.currentOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
31
+ __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
32
+ const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
33
+ UiDomUtils.makeNavigable($focusedOption);
34
+ $focusedOption.focus();
62
35
  };
63
36
  __classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
64
37
  __classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -68,59 +41,40 @@ class ListBoxKeyboardController {
68
41
  __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
69
42
  }
70
43
  hostConnected() {
71
- __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
44
+ new KeystrokesController({
45
+ host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
46
+ keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
47
+ callback: this._handleArrowNavigation,
48
+ target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
49
+ });
72
50
  UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
73
51
  __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
74
52
  if (event.target !== __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
75
53
  return;
76
- if (this.currentOptionIndex === undefined)
54
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
77
55
  return;
78
- const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[this.currentOptionIndex];
56
+ const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
79
57
  UiDomUtils.makeUnnavigable($prevOption);
80
- this.currentOptionIndex = undefined;
58
+ __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
81
59
  });
82
60
  __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => UiDomUtils.makeUnnavigable($option));
83
61
  }
84
62
  _getPrevOptionIndex() {
85
- if (this.currentOptionIndex === undefined)
63
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
86
64
  return undefined;
87
- if (this.currentOptionIndex <= 0)
88
- return this.currentOptionIndex;
89
- if (this.currentOptionIndex <= 0)
90
- return this.currentOptionIndex;
91
- const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
92
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
93
- });
94
- if (!!$availableOptions[this.currentOptionIndex - 1])
95
- return this.currentOptionIndex - 1;
96
- // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
97
- const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
98
- if (newIndexOfCurrentlySelectedOption)
99
- return newIndexOfCurrentlySelectedOption - 1;
100
- return this.currentOptionIndex - 1;
65
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
66
+ return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
67
+ return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
101
68
  }
102
69
  _getNextOptionIndex() {
103
- if (this.currentOptionIndex === undefined)
70
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
104
71
  return undefined;
105
- const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
106
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
107
- });
108
- if (this.currentOptionIndex === $availableOptions.length - 1)
109
- return this.currentOptionIndex;
110
- if (this.currentOptionIndex > $availableOptions.length - 1) {
111
- // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
112
- const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
113
- if (newIndexOfCurrentlySelectedOption)
114
- return newIndexOfCurrentlySelectedOption + 1;
115
- return 0;
116
- }
117
- return this.currentOptionIndex + 1;
118
- }
119
- hostDisconnected() {
120
- __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
72
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
73
+ return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
74
+ return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
121
75
  }
122
76
  }
123
- _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
77
+ _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
124
78
 
125
79
  export { ListBoxKeyboardController };
126
80
  //# sourceMappingURL=list_box_keyboard_controller.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.15.11-4",
5
+ "version": "1.15.11-41",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -1,98 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
6
- require('lit');
7
- var utilities = require('@dreamcommerce/utilities');
8
-
9
- var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
10
- class SelectTogglerKeyboardController {
11
- constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
12
- _SelectTogglerKeyboardController_host.set(this, void 0);
13
- _SelectTogglerKeyboardController__$toggler.set(this, void 0);
14
- _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
15
- _SelectTogglerKeyboardController__$options.set(this, void 0);
16
- this._handleKeyboardNavigation = (ev) => {
17
- const arrowKeys = ['ArrowUp', 'ArrowDown'];
18
- if (arrowKeys.includes(ev.key)) {
19
- this._openSelect(ev);
20
- return;
21
- }
22
- if (ev.key === 'Home') {
23
- this._openSelectAndGoToFirstElement(ev);
24
- return;
25
- }
26
- if (ev.key === 'End') {
27
- this._openSelectAndGoToLastElement(ev);
28
- return;
29
- }
30
- if (ev.altKey || ev.shiftKey)
31
- return;
32
- const isAWriteableCharacter = ev.key.length === 1;
33
- if (isAWriteableCharacter)
34
- this._openSelectAndGoToMatchedElement(ev);
35
- };
36
- this._openSelect = (event) => {
37
- var _a;
38
- event.preventDefault();
39
- (_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
40
- };
41
- this._openSelectAndGoToFirstElement = async (event) => {
42
- var _a;
43
- event.preventDefault();
44
- await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
45
- const $firstOption = this._getAvailableOptions()[0];
46
- if ($firstOption)
47
- this._navigate($firstOption);
48
- };
49
- this._openSelectAndGoToLastElement = async (event) => {
50
- var _a;
51
- event.preventDefault();
52
- await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
53
- const $availableOptions = this._getAvailableOptions();
54
- const $lastOption = $availableOptions[$availableOptions.length - 1];
55
- if ($lastOption)
56
- this._navigate($lastOption);
57
- };
58
- this._openSelectAndGoToMatchedElement = async (event) => {
59
- var _a;
60
- event.preventDefault();
61
- await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
62
- const $matchedOption = this._getAvailableOptions().find(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
63
- if ($matchedOption)
64
- this._navigate($matchedOption);
65
- };
66
- this._getAvailableOptions = () => {
67
- return tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
68
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
69
- });
70
- };
71
- this._findSelectedIndex = () => {
72
- const selectedOptionIndex = this._getAvailableOptions().findIndex(($option) => $option.selected);
73
- return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
74
- };
75
- this._navigate = ($newOption) => {
76
- const $selectedOption = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f")[this._findSelectedIndex()];
77
- utilities.UiDomUtils.makeUnnavigable($selectedOption);
78
- const newOptionIndex = this._getAvailableOptions().findIndex(($option) => $newOption.value === $option.value);
79
- tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
80
- utilities.UiDomUtils.makeNavigable($newOption);
81
- $newOption.focus();
82
- };
83
- tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
84
- tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
85
- tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
86
- tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
87
- }
88
- hostConnected() {
89
- tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
90
- }
91
- hostDisconnected() {
92
- tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
93
- }
94
- }
95
- _SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
96
-
97
- exports.SelectTogglerKeyboardController = SelectTogglerKeyboardController;
98
- //# sourceMappingURL=select_toggler_keyboard_controller.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,15 +0,0 @@
1
- import { TSelectTogglerKeyboardControllerConstructorOptions } from './select_toggler_keyboard_controller_types';
2
- export declare class SelectTogglerKeyboardController {
3
- #private;
4
- constructor({ host, $toggler, $list, listItemSelector, }: TSelectTogglerKeyboardControllerConstructorOptions);
5
- hostConnected(): void;
6
- private _handleKeyboardNavigation;
7
- private _openSelect;
8
- private _openSelectAndGoToFirstElement;
9
- private _openSelectAndGoToLastElement;
10
- private _openSelectAndGoToMatchedElement;
11
- private _getAvailableOptions;
12
- private _findSelectedIndex;
13
- private _navigate;
14
- hostDisconnected(): void;
15
- }
@@ -1,94 +0,0 @@
1
- import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../../../external/tslib/tslib.es6.js';
2
- import 'lit';
3
- import { UiDomUtils } from '@dreamcommerce/utilities';
4
-
5
- var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
6
- class SelectTogglerKeyboardController {
7
- constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
8
- _SelectTogglerKeyboardController_host.set(this, void 0);
9
- _SelectTogglerKeyboardController__$toggler.set(this, void 0);
10
- _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
11
- _SelectTogglerKeyboardController__$options.set(this, void 0);
12
- this._handleKeyboardNavigation = (ev) => {
13
- const arrowKeys = ['ArrowUp', 'ArrowDown'];
14
- if (arrowKeys.includes(ev.key)) {
15
- this._openSelect(ev);
16
- return;
17
- }
18
- if (ev.key === 'Home') {
19
- this._openSelectAndGoToFirstElement(ev);
20
- return;
21
- }
22
- if (ev.key === 'End') {
23
- this._openSelectAndGoToLastElement(ev);
24
- return;
25
- }
26
- if (ev.altKey || ev.shiftKey)
27
- return;
28
- const isAWriteableCharacter = ev.key.length === 1;
29
- if (isAWriteableCharacter)
30
- this._openSelectAndGoToMatchedElement(ev);
31
- };
32
- this._openSelect = (event) => {
33
- var _a;
34
- event.preventDefault();
35
- (_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
36
- };
37
- this._openSelectAndGoToFirstElement = async (event) => {
38
- var _a;
39
- event.preventDefault();
40
- await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
41
- const $firstOption = this._getAvailableOptions()[0];
42
- if ($firstOption)
43
- this._navigate($firstOption);
44
- };
45
- this._openSelectAndGoToLastElement = async (event) => {
46
- var _a;
47
- event.preventDefault();
48
- await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
49
- const $availableOptions = this._getAvailableOptions();
50
- const $lastOption = $availableOptions[$availableOptions.length - 1];
51
- if ($lastOption)
52
- this._navigate($lastOption);
53
- };
54
- this._openSelectAndGoToMatchedElement = async (event) => {
55
- var _a;
56
- event.preventDefault();
57
- await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
58
- const $matchedOption = this._getAvailableOptions().find(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
59
- if ($matchedOption)
60
- this._navigate($matchedOption);
61
- };
62
- this._getAvailableOptions = () => {
63
- return __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
64
- return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
65
- });
66
- };
67
- this._findSelectedIndex = () => {
68
- const selectedOptionIndex = this._getAvailableOptions().findIndex(($option) => $option.selected);
69
- return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
70
- };
71
- this._navigate = ($newOption) => {
72
- const $selectedOption = __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f")[this._findSelectedIndex()];
73
- UiDomUtils.makeUnnavigable($selectedOption);
74
- const newOptionIndex = this._getAvailableOptions().findIndex(($option) => $newOption.value === $option.value);
75
- __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
76
- UiDomUtils.makeNavigable($newOption);
77
- $newOption.focus();
78
- };
79
- __classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
80
- __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
81
- __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
82
- __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
83
- }
84
- hostConnected() {
85
- __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
86
- }
87
- hostDisconnected() {
88
- __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
89
- }
90
- }
91
- _SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
92
-
93
- export { SelectTogglerKeyboardController };
94
- //# sourceMappingURL=select_toggler_keyboard_controller.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,qDAAyD;AACxH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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 +0,0 @@
1
- import { ReactiveControllerHost } from 'lit';
2
- import { HSelect } from "../../select";
3
- export declare type TSelectTogglerKeyboardControllerConstructorOptions = {
4
- host: ReactiveControllerHost & HSelect;
5
- $toggler: HTMLElement;
6
- $list: HTMLElement;
7
- listItemSelector?: string;
8
- };
@@ -1,3 +0,0 @@
1
- import 'lit';
2
- import '@phoenixRoot/components/form/select/select';
3
- //# sourceMappingURL=select_toggler_keyboard_controller_types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"select_toggler_keyboard_controller_types.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.ts"],"names":[],"mappings":"AAAA,OAAuC,KAAK,CAAC;AAC7C,OAAwB,4CAA4C,CAAC"}