@shoper/phoenix_design_system 1.15.11-1 → 1.15.11-3

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 (19) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +96 -0
  2. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -0
  3. package/build/cjs/packages/phoenix/src/components/form/select/select.js +13 -4
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +21 -22
  6. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  7. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +15 -0
  8. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +92 -0
  9. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -0
  10. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts +8 -0
  11. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js +3 -0
  12. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map +1 -0
  13. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/select.js +13 -4
  15. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  16. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +1 -0
  17. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +21 -22
  18. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  19. package/package.json +1 -1
@@ -0,0 +1,96 @@
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
+ const isAWriteableCharacter = ev.key.length === 1;
31
+ if (isAWriteableCharacter)
32
+ this._openSelectAndGoToMatchedElement(ev);
33
+ };
34
+ this._openSelect = (event) => {
35
+ var _a;
36
+ event.preventDefault();
37
+ (_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
38
+ };
39
+ this._openSelectAndGoToFirstElement = async (event) => {
40
+ var _a;
41
+ event.preventDefault();
42
+ await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
43
+ const $firstOption = this._getAvailableOptions()[0];
44
+ if ($firstOption)
45
+ this._navigate($firstOption);
46
+ };
47
+ this._openSelectAndGoToLastElement = async (event) => {
48
+ var _a;
49
+ event.preventDefault();
50
+ await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
51
+ const $availableOptions = this._getAvailableOptions();
52
+ const $lastOption = $availableOptions[$availableOptions.length - 1];
53
+ if ($lastOption)
54
+ this._navigate($lastOption);
55
+ };
56
+ this._openSelectAndGoToMatchedElement = async (event) => {
57
+ var _a;
58
+ event.preventDefault();
59
+ await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
60
+ const $matchedOption = this._getAvailableOptions().find(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
61
+ if ($matchedOption)
62
+ this._navigate($matchedOption);
63
+ };
64
+ this._getAvailableOptions = () => {
65
+ return tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
66
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
67
+ });
68
+ };
69
+ this._findSelectedIndex = () => {
70
+ const selectedOptionIndex = this._getAvailableOptions().findIndex(($option) => $option.selected);
71
+ return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
72
+ };
73
+ this._navigate = ($newOption) => {
74
+ const $selectedOption = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f")[this._findSelectedIndex()];
75
+ utilities.UiDomUtils.makeUnnavigable($selectedOption);
76
+ const newOptionIndex = this._getAvailableOptions().findIndex(($option) => $newOption.value === $option.value);
77
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
78
+ utilities.UiDomUtils.makeNavigable($newOption);
79
+ $newOption.focus();
80
+ };
81
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
82
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
83
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
84
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
85
+ }
86
+ hostConnected() {
87
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
88
+ }
89
+ hostDisconnected() {
90
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
91
+ }
92
+ }
93
+ _SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
94
+
95
+ exports.SelectTogglerKeyboardController = SelectTogglerKeyboardController;
96
+ //# sourceMappingURL=select_toggler_keyboard_controller.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -29,6 +29,7 @@ var select_utils = require('./select_utils.js');
29
29
  var select_controller = require('./controllers/select_controller.js');
30
30
  var select_option_mapper = require('./model/select_option_mapper.js');
31
31
  var repeat = require('lit/directives/repeat');
32
+ var select_toggler_keyboard_controller = require('./controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js');
32
33
 
33
34
  exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
34
35
  constructor() {
@@ -43,7 +44,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
43
44
  this.ariaLabelledby = '';
44
45
  this._searchValue = '';
45
46
  this._$options = new Map();
46
- this._$dropdown = ref_js.createRef();
47
+ this.$dropdown = ref_js.createRef();
47
48
  this.$search = ref_js.createRef();
48
49
  this._$optionsList = ref_js.createRef();
49
50
  this._$dropdownContent = ref_js.createRef();
@@ -152,7 +153,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
152
153
  var _a;
153
154
  if (!this.opened)
154
155
  return;
155
- (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
156
+ (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
156
157
  };
157
158
  this._clearOptions = () => {
158
159
  this._selectController.deselectAll();
@@ -196,7 +197,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
196
197
  return Array.from(this._$options.values());
197
198
  }
198
199
  updated(changedProperties) {
199
- var _a;
200
+ var _a, _b;
200
201
  super.updated(changedProperties);
201
202
  if (changedProperties.has('opened')) {
202
203
  if (this.opened) {
@@ -220,6 +221,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
220
221
  if (this.listBoxController) {
221
222
  this.listBoxController.calculateSelectedOptionIndex();
222
223
  }
224
+ if (this._$optionsList.value && this._$dropdownToggler.value) {
225
+ (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
226
+ this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
227
+ host: this,
228
+ $toggler: this._$dropdownToggler.value,
229
+ $list: this._$optionsList.value
230
+ });
231
+ }
223
232
  }
224
233
  _focusElementAfterSelectOpened() {
225
234
  var _a;
@@ -346,7 +355,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
346
355
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
347
356
  return lit.html `
348
357
  <h-dropdown
349
- ${ref_js.ref(this._$dropdown)}
358
+ ${ref_js.ref(this.$dropdown)}
350
359
  @showed=${() => (this.opened = true)}
351
360
  @hidden=${this._handleDropdownHidden}
352
361
  name="${this.controlName}"
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -7,12 +7,11 @@ require('lit');
7
7
  var utilities = require('@dreamcommerce/utilities');
8
8
  var list_box_controller_constants = require('./list_box_controller_constants.js');
9
9
 
10
- var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
10
+ var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
11
11
  class ListBoxKeyboardController {
12
12
  constructor({ host, $list, listItemSelector = '[role="option"]', orientation = list_box_controller_constants.LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical }) {
13
13
  _ListBoxKeyboardController_host.set(this, void 0);
14
14
  _ListBoxKeyboardController__$list.set(this, void 0);
15
- _ListBoxKeyboardController_currentOptionIndex.set(this, void 0);
16
15
  _ListBoxKeyboardController__$options.set(this, void 0);
17
16
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
18
17
  _ListBoxKeyboardController_keys.set(this, void 0);
@@ -34,13 +33,13 @@ class ListBoxKeyboardController {
34
33
  if (newOptionIndex === undefined) {
35
34
  newOptionIndex = this._findCurrentIndex();
36
35
  }
37
- if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
36
+ if (newOptionIndex === this.currentOptionIndex)
38
37
  return;
39
38
  if (prevOptionIndex !== undefined) {
40
39
  const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
41
40
  $prevOption && utilities.UiDomUtils.makeUnnavigable($prevOption);
42
41
  }
43
- tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
42
+ this.currentOptionIndex = newOptionIndex;
44
43
  const $focusedOption = $availableOptions[newOptionIndex];
45
44
  if ($focusedOption) {
46
45
  utilities.UiDomUtils.makeNavigable($focusedOption);
@@ -63,7 +62,7 @@ class ListBoxKeyboardController {
63
62
  };
64
63
  this.calculateSelectedOptionIndex = () => {
65
64
  const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
66
- tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, selectedOptionIndex !== -1 ? selectedOptionIndex : 0, "f");
65
+ this.currentOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
67
66
  };
68
67
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
69
68
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -78,54 +77,54 @@ class ListBoxKeyboardController {
78
77
  tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
79
78
  if (event.target !== tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
80
79
  return;
81
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
80
+ if (this.currentOptionIndex === undefined)
82
81
  return;
83
- const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
82
+ const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[this.currentOptionIndex];
84
83
  utilities.UiDomUtils.makeUnnavigable($prevOption);
85
- tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
84
+ this.currentOptionIndex = undefined;
86
85
  });
87
86
  tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => utilities.UiDomUtils.makeUnnavigable($option));
88
87
  }
89
88
  _getPrevOptionIndex() {
90
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
89
+ if (this.currentOptionIndex === undefined)
91
90
  return undefined;
92
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
93
- return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
94
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
95
- return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
91
+ if (this.currentOptionIndex <= 0)
92
+ return this.currentOptionIndex;
93
+ if (this.currentOptionIndex <= 0)
94
+ return this.currentOptionIndex;
96
95
  const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
97
96
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
98
97
  });
99
- if (!!$availableOptions[tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1])
100
- return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
98
+ if (!!$availableOptions[this.currentOptionIndex - 1])
99
+ return this.currentOptionIndex - 1;
101
100
  // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
102
101
  const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
103
102
  if (newIndexOfCurrentlySelectedOption)
104
103
  return newIndexOfCurrentlySelectedOption - 1;
105
- return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
104
+ return this.currentOptionIndex - 1;
106
105
  }
107
106
  _getNextOptionIndex() {
108
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
107
+ if (this.currentOptionIndex === undefined)
109
108
  return undefined;
110
109
  const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
111
110
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
112
111
  });
113
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
114
- return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
115
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1) {
112
+ if (this.currentOptionIndex === $availableOptions.length - 1)
113
+ return this.currentOptionIndex;
114
+ if (this.currentOptionIndex > $availableOptions.length - 1) {
116
115
  // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
117
116
  const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
118
117
  if (newIndexOfCurrentlySelectedOption)
119
118
  return newIndexOfCurrentlySelectedOption + 1;
120
119
  return 0;
121
120
  }
122
- return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
121
+ return this.currentOptionIndex + 1;
123
122
  }
124
123
  hostDisconnected() {
125
124
  tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
126
125
  }
127
126
  }
128
- _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
127
+ _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
129
128
 
130
129
  exports.ListBoxKeyboardController = ListBoxKeyboardController;
131
130
  //# sourceMappingURL=list_box_keyboard_controller.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -0,0 +1,15 @@
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
+ }
@@ -0,0 +1,92 @@
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
+ const isAWriteableCharacter = ev.key.length === 1;
27
+ if (isAWriteableCharacter)
28
+ this._openSelectAndGoToMatchedElement(ev);
29
+ };
30
+ this._openSelect = (event) => {
31
+ var _a;
32
+ event.preventDefault();
33
+ (_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
34
+ };
35
+ this._openSelectAndGoToFirstElement = async (event) => {
36
+ var _a;
37
+ event.preventDefault();
38
+ await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
39
+ const $firstOption = this._getAvailableOptions()[0];
40
+ if ($firstOption)
41
+ this._navigate($firstOption);
42
+ };
43
+ this._openSelectAndGoToLastElement = async (event) => {
44
+ var _a;
45
+ event.preventDefault();
46
+ await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
47
+ const $availableOptions = this._getAvailableOptions();
48
+ const $lastOption = $availableOptions[$availableOptions.length - 1];
49
+ if ($lastOption)
50
+ this._navigate($lastOption);
51
+ };
52
+ this._openSelectAndGoToMatchedElement = async (event) => {
53
+ var _a;
54
+ event.preventDefault();
55
+ await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
56
+ const $matchedOption = this._getAvailableOptions().find(($option) => { var _a; return (_a = $option.innerText) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase()); });
57
+ if ($matchedOption)
58
+ this._navigate($matchedOption);
59
+ };
60
+ this._getAvailableOptions = () => {
61
+ return __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
62
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
63
+ });
64
+ };
65
+ this._findSelectedIndex = () => {
66
+ const selectedOptionIndex = this._getAvailableOptions().findIndex(($option) => $option.selected);
67
+ return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
68
+ };
69
+ this._navigate = ($newOption) => {
70
+ const $selectedOption = __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f")[this._findSelectedIndex()];
71
+ UiDomUtils.makeUnnavigable($selectedOption);
72
+ const newOptionIndex = this._getAvailableOptions().findIndex(($option) => $newOption.value === $option.value);
73
+ __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").listBoxController.currentOptionIndex = newOptionIndex;
74
+ UiDomUtils.makeNavigable($newOption);
75
+ $newOption.focus();
76
+ };
77
+ __classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
78
+ __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
79
+ __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
80
+ __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
81
+ }
82
+ hostConnected() {
83
+ __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
84
+ }
85
+ hostDisconnected() {
86
+ __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
87
+ }
88
+ }
89
+ _SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
90
+
91
+ export { SelectTogglerKeyboardController };
92
+ //# sourceMappingURL=select_toggler_keyboard_controller.js.map
@@ -0,0 +1 @@
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;"}
@@ -0,0 +1,8 @@
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
+ };
@@ -0,0 +1,3 @@
1
+ import 'lit';
2
+ import '@phoenixRoot/components/form/select/select';
3
+ //# sourceMappingURL=select_toggler_keyboard_controller_types.js.map
@@ -0,0 +1 @@
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"}
@@ -1,4 +1,5 @@
1
1
  import { PropertyValues, TemplateResult } from 'lit';
2
+ import { HDropdown } from "../../dropdown/dropdown";
2
3
  import { HOption } from "./components/option/select_option";
3
4
  import { HSelectSearch } from "./components/search/select_search";
4
5
  import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
@@ -30,13 +31,14 @@ export declare class HSelect extends PhoenixLightLitElement {
30
31
  private _searchValue;
31
32
  private _selectController;
32
33
  private _$options;
33
- private _$dropdown;
34
+ $dropdown: import("lit-html/directives/ref.js").Ref<HDropdown>;
34
35
  $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
35
36
  private _$optionsList;
36
37
  private _$dropdownContent;
37
38
  private _$dropdownToggler;
38
39
  private _selectContext;
39
40
  listBoxController: ListBoxKeyboardController;
41
+ private _selectTogglerKeyboardController;
40
42
  private _optionsObserver;
41
43
  private _selectedOptionsAriaObserver;
42
44
  private $placeholder;
@@ -25,6 +25,7 @@ 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';
28
29
 
29
30
  let HSelect = class HSelect extends PhoenixLightLitElement {
30
31
  constructor() {
@@ -39,7 +40,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
39
40
  this.ariaLabelledby = '';
40
41
  this._searchValue = '';
41
42
  this._$options = new Map();
42
- this._$dropdown = createRef();
43
+ this.$dropdown = createRef();
43
44
  this.$search = createRef();
44
45
  this._$optionsList = createRef();
45
46
  this._$dropdownContent = createRef();
@@ -148,7 +149,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
148
149
  var _a;
149
150
  if (!this.opened)
150
151
  return;
151
- (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
152
+ (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
152
153
  };
153
154
  this._clearOptions = () => {
154
155
  this._selectController.deselectAll();
@@ -192,7 +193,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
192
193
  return Array.from(this._$options.values());
193
194
  }
194
195
  updated(changedProperties) {
195
- var _a;
196
+ var _a, _b;
196
197
  super.updated(changedProperties);
197
198
  if (changedProperties.has('opened')) {
198
199
  if (this.opened) {
@@ -216,6 +217,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
216
217
  if (this.listBoxController) {
217
218
  this.listBoxController.calculateSelectedOptionIndex();
218
219
  }
220
+ if (this._$optionsList.value && this._$dropdownToggler.value) {
221
+ (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
222
+ this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
223
+ host: this,
224
+ $toggler: this._$dropdownToggler.value,
225
+ $list: this._$optionsList.value
226
+ });
227
+ }
219
228
  }
220
229
  _focusElementAfterSelectOpened() {
221
230
  var _a;
@@ -342,7 +351,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
342
351
  const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
343
352
  return html `
344
353
  <h-dropdown
345
- ${ref(this._$dropdown)}
354
+ ${ref(this.$dropdown)}
346
355
  @showed=${() => (this.opened = true)}
347
356
  @hidden=${this._handleDropdownHidden}
348
357
  name="${this.controlName}"
@@ -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;"}
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;AACA;"}
@@ -1,6 +1,7 @@
1
1
  import { IListboxController, TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
2
2
  export declare class ListBoxKeyboardController implements IListboxController {
3
3
  #private;
4
+ currentOptionIndex: number | undefined;
4
5
  constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
5
6
  hostConnected(): void;
6
7
  private _handleKeyboardNavigation;
@@ -3,12 +3,11 @@ import 'lit';
3
3
  import { UiDomUtils } from '@dreamcommerce/utilities';
4
4
  import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from './list_box_controller_constants.js';
5
5
 
6
- var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
6
+ var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
7
7
  class ListBoxKeyboardController {
8
8
  constructor({ host, $list, listItemSelector = '[role="option"]', orientation = LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical }) {
9
9
  _ListBoxKeyboardController_host.set(this, void 0);
10
10
  _ListBoxKeyboardController__$list.set(this, void 0);
11
- _ListBoxKeyboardController_currentOptionIndex.set(this, void 0);
12
11
  _ListBoxKeyboardController__$options.set(this, void 0);
13
12
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
14
13
  _ListBoxKeyboardController_keys.set(this, void 0);
@@ -30,13 +29,13 @@ class ListBoxKeyboardController {
30
29
  if (newOptionIndex === undefined) {
31
30
  newOptionIndex = this._findCurrentIndex();
32
31
  }
33
- if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
32
+ if (newOptionIndex === this.currentOptionIndex)
34
33
  return;
35
34
  if (prevOptionIndex !== undefined) {
36
35
  const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
37
36
  $prevOption && UiDomUtils.makeUnnavigable($prevOption);
38
37
  }
39
- __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
38
+ this.currentOptionIndex = newOptionIndex;
40
39
  const $focusedOption = $availableOptions[newOptionIndex];
41
40
  if ($focusedOption) {
42
41
  UiDomUtils.makeNavigable($focusedOption);
@@ -59,7 +58,7 @@ class ListBoxKeyboardController {
59
58
  };
60
59
  this.calculateSelectedOptionIndex = () => {
61
60
  const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
62
- __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, selectedOptionIndex !== -1 ? selectedOptionIndex : 0, "f");
61
+ this.currentOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
63
62
  };
64
63
  __classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
65
64
  __classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -74,54 +73,54 @@ class ListBoxKeyboardController {
74
73
  __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
75
74
  if (event.target !== __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
76
75
  return;
77
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
76
+ if (this.currentOptionIndex === undefined)
78
77
  return;
79
- const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
78
+ const $prevOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[this.currentOptionIndex];
80
79
  UiDomUtils.makeUnnavigable($prevOption);
81
- __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
80
+ this.currentOptionIndex = undefined;
82
81
  });
83
82
  __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => UiDomUtils.makeUnnavigable($option));
84
83
  }
85
84
  _getPrevOptionIndex() {
86
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
85
+ if (this.currentOptionIndex === undefined)
87
86
  return undefined;
88
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
89
- return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
90
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
91
- return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
87
+ if (this.currentOptionIndex <= 0)
88
+ return this.currentOptionIndex;
89
+ if (this.currentOptionIndex <= 0)
90
+ return this.currentOptionIndex;
92
91
  const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
93
92
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
94
93
  });
95
- if (!!$availableOptions[__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1])
96
- return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
94
+ if (!!$availableOptions[this.currentOptionIndex - 1])
95
+ return this.currentOptionIndex - 1;
97
96
  // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
98
97
  const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
99
98
  if (newIndexOfCurrentlySelectedOption)
100
99
  return newIndexOfCurrentlySelectedOption - 1;
101
- return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
100
+ return this.currentOptionIndex - 1;
102
101
  }
103
102
  _getNextOptionIndex() {
104
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
103
+ if (this.currentOptionIndex === undefined)
105
104
  return undefined;
106
105
  const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
107
106
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
108
107
  });
109
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
110
- return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
111
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1) {
108
+ if (this.currentOptionIndex === $availableOptions.length - 1)
109
+ return this.currentOptionIndex;
110
+ if (this.currentOptionIndex > $availableOptions.length - 1) {
112
111
  // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
113
112
  const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
114
113
  if (newIndexOfCurrentlySelectedOption)
115
114
  return newIndexOfCurrentlySelectedOption + 1;
116
115
  return 0;
117
116
  }
118
- return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
117
+ return this.currentOptionIndex + 1;
119
118
  }
120
119
  hostDisconnected() {
121
120
  __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
122
121
  }
123
122
  }
124
- _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
123
+ _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
125
124
 
126
125
  export { ListBoxKeyboardController };
127
126
  //# 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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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-1",
5
+ "version": "1.15.11-3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",