@shoper/phoenix_design_system 1.15.11-2 → 1.15.11-4

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 (15) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +25 -17
  2. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/select.js +11 -12
  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 +2 -0
  8. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +25 -17
  9. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -1
  10. package/build/esm/packages/phoenix/src/components/form/select/select.js +11 -12
  11. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +1 -0
  13. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +21 -22
  14. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  15. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js CHANGED
@@ -21,10 +21,14 @@ class SelectTogglerKeyboardController {
21
21
  }
22
22
  if (ev.key === 'Home') {
23
23
  this._openSelectAndGoToFirstElement(ev);
24
+ return;
24
25
  }
25
26
  if (ev.key === 'End') {
26
27
  this._openSelectAndGoToLastElement(ev);
28
+ return;
27
29
  }
30
+ if (ev.altKey || ev.shiftKey)
31
+ return;
28
32
  const isAWriteableCharacter = ev.key.length === 1;
29
33
  if (isAWriteableCharacter)
30
34
  this._openSelectAndGoToMatchedElement(ev);
@@ -39,39 +43,43 @@ class SelectTogglerKeyboardController {
39
43
  event.preventDefault();
40
44
  await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
41
45
  const $firstOption = this._getAvailableOptions()[0];
42
- if ($firstOption) {
43
- utilities.UiDomUtils.makeNavigable($firstOption);
44
- $firstOption.focus();
45
- }
46
+ if ($firstOption)
47
+ this._navigate($firstOption);
46
48
  };
47
49
  this._openSelectAndGoToLastElement = async (event) => {
48
50
  var _a;
49
51
  event.preventDefault();
50
52
  await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
51
- const $lastOption = this._getAvailableOptions()[-1];
52
- if ($lastOption) {
53
- utilities.UiDomUtils.makeNavigable($lastOption);
54
- $lastOption.focus();
55
- }
53
+ const $availableOptions = this._getAvailableOptions();
54
+ const $lastOption = $availableOptions[$availableOptions.length - 1];
55
+ if ($lastOption)
56
+ this._navigate($lastOption);
56
57
  };
57
58
  this._openSelectAndGoToMatchedElement = async (event) => {
58
59
  var _a;
59
60
  event.preventDefault();
60
61
  await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
61
- const $matchedOption = this._getAvailableOptions().find(($option) => {
62
- var _a;
63
- (_a = $option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase());
64
- });
65
- if ($matchedOption) {
66
- utilities.UiDomUtils.makeNavigable($matchedOption);
67
- $matchedOption.focus();
68
- }
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);
69
65
  };
70
66
  this._getAvailableOptions = () => {
71
67
  return tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
72
68
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
73
69
  });
74
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
+ };
75
83
  tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
76
84
  tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
77
85
  tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -133,11 +133,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
133
133
  });
134
134
  };
135
135
  this._handleDropdownHidden = () => {
136
- var _a, _b;
136
+ var _a;
137
137
  this._searchValue = '';
138
138
  this.opened = false;
139
139
  (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
140
- (_b = this._$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.focus();
141
140
  };
142
141
  this._manageSelectFocusAria = (ev) => {
143
142
  var _a;
@@ -197,7 +196,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
197
196
  return Array.from(this._$options.values());
198
197
  }
199
198
  updated(changedProperties) {
200
- var _a;
199
+ var _a, _b;
201
200
  super.updated(changedProperties);
202
201
  if (changedProperties.has('opened')) {
203
202
  if (this.opened) {
@@ -221,6 +220,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
221
220
  if (this.listBoxController) {
222
221
  this.listBoxController.calculateSelectedOptionIndex();
223
222
  }
223
+ if (this._$optionsList.value && this._$dropdownToggler.value) {
224
+ (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
225
+ this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
226
+ host: this,
227
+ $toggler: this._$dropdownToggler.value,
228
+ $list: this._$optionsList.value
229
+ });
230
+ }
224
231
  }
225
232
  _focusElementAfterSelectOpened() {
226
233
  var _a;
@@ -234,7 +241,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
234
241
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
235
242
  }
236
243
  connectedCallback() {
237
- var _a, _b;
244
+ var _a;
238
245
  super.connectedCallback();
239
246
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
240
247
  if (!this.searchDisabled) {
@@ -249,14 +256,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
249
256
  this._selectController.options$.subscribe(this._optionsObserver);
250
257
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
251
258
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
252
- if (this._$optionsList.value && this._$dropdownToggler.value) {
253
- (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
254
- this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
255
- host: this,
256
- $toggler: this._$dropdownToggler.value,
257
- $list: this._$optionsList.value
258
- });
259
- }
260
259
  this._updateOptions();
261
260
  this._setupEvents();
262
261
  }
package/build/cjs/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -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
package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map CHANGED
@@ -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;"}
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts CHANGED
@@ -9,5 +9,7 @@ export declare class SelectTogglerKeyboardController {
9
9
  private _openSelectAndGoToLastElement;
10
10
  private _openSelectAndGoToMatchedElement;
11
11
  private _getAvailableOptions;
12
+ private _findSelectedIndex;
13
+ private _navigate;
12
14
  hostDisconnected(): void;
13
15
  }
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js CHANGED
@@ -17,10 +17,14 @@ class SelectTogglerKeyboardController {
17
17
  }
18
18
  if (ev.key === 'Home') {
19
19
  this._openSelectAndGoToFirstElement(ev);
20
+ return;
20
21
  }
21
22
  if (ev.key === 'End') {
22
23
  this._openSelectAndGoToLastElement(ev);
24
+ return;
23
25
  }
26
+ if (ev.altKey || ev.shiftKey)
27
+ return;
24
28
  const isAWriteableCharacter = ev.key.length === 1;
25
29
  if (isAWriteableCharacter)
26
30
  this._openSelectAndGoToMatchedElement(ev);
@@ -35,39 +39,43 @@ class SelectTogglerKeyboardController {
35
39
  event.preventDefault();
36
40
  await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
37
41
  const $firstOption = this._getAvailableOptions()[0];
38
- if ($firstOption) {
39
- UiDomUtils.makeNavigable($firstOption);
40
- $firstOption.focus();
41
- }
42
+ if ($firstOption)
43
+ this._navigate($firstOption);
42
44
  };
43
45
  this._openSelectAndGoToLastElement = async (event) => {
44
46
  var _a;
45
47
  event.preventDefault();
46
48
  await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
47
- const $lastOption = this._getAvailableOptions()[-1];
48
- if ($lastOption) {
49
- UiDomUtils.makeNavigable($lastOption);
50
- $lastOption.focus();
51
- }
49
+ const $availableOptions = this._getAvailableOptions();
50
+ const $lastOption = $availableOptions[$availableOptions.length - 1];
51
+ if ($lastOption)
52
+ this._navigate($lastOption);
52
53
  };
53
54
  this._openSelectAndGoToMatchedElement = async (event) => {
54
55
  var _a;
55
56
  event.preventDefault();
56
57
  await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
57
- const $matchedOption = this._getAvailableOptions().find(($option) => {
58
- var _a;
59
- (_a = $option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(event.key.toLowerCase());
60
- });
61
- if ($matchedOption) {
62
- UiDomUtils.makeNavigable($matchedOption);
63
- $matchedOption.focus();
64
- }
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);
65
61
  };
66
62
  this._getAvailableOptions = () => {
67
63
  return __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
68
64
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
69
65
  });
70
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
+ };
71
79
  __classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
72
80
  __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
73
81
  __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map CHANGED
@@ -1 +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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -129,11 +129,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
129
129
  });
130
130
  };
131
131
  this._handleDropdownHidden = () => {
132
- var _a, _b;
132
+ var _a;
133
133
  this._searchValue = '';
134
134
  this.opened = false;
135
135
  (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
136
- (_b = this._$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.focus();
137
136
  };
138
137
  this._manageSelectFocusAria = (ev) => {
139
138
  var _a;
@@ -193,7 +192,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
193
192
  return Array.from(this._$options.values());
194
193
  }
195
194
  updated(changedProperties) {
196
- var _a;
195
+ var _a, _b;
197
196
  super.updated(changedProperties);
198
197
  if (changedProperties.has('opened')) {
199
198
  if (this.opened) {
@@ -217,6 +216,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
217
216
  if (this.listBoxController) {
218
217
  this.listBoxController.calculateSelectedOptionIndex();
219
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({
222
+ host: this,
223
+ $toggler: this._$dropdownToggler.value,
224
+ $list: this._$optionsList.value
225
+ });
226
+ }
220
227
  }
221
228
  _focusElementAfterSelectOpened() {
222
229
  var _a;
@@ -230,7 +237,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
230
237
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
231
238
  }
232
239
  connectedCallback() {
233
- var _a, _b;
240
+ var _a;
234
241
  super.connectedCallback();
235
242
  this.classList.add(SELECT_CSS_CLASSES.select);
236
243
  if (!this.searchDisabled) {
@@ -245,14 +252,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
245
252
  this._selectController.options$.subscribe(this._optionsObserver);
246
253
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
247
254
  this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
248
- if (this._$optionsList.value && this._$dropdownToggler.value) {
249
- (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
250
- this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
251
- host: this,
252
- $toggler: this._$dropdownToggler.value,
253
- $list: this._$optionsList.value
254
- });
255
- }
256
255
  this._updateOptions();
257
256
  this._setupEvents();
258
257
  }
package/build/esm/packages/phoenix/src/components/form/select/select.js.map CHANGED
@@ -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;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;"}
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts CHANGED
@@ -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;
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -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
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map CHANGED
@@ -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-2",
5
+ "version": "1.15.11-4",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",