@shoper/phoenix_design_system 1.15.11-2 → 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 (13) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +23 -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 +10 -10
  4. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +21 -22
  5. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  6. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +2 -0
  7. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +23 -17
  8. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/form/select/select.js +10 -10
  10. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +1 -0
  11. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +21 -22
  12. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  13. 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,9 +21,11 @@ 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
  }
28
30
  const isAWriteableCharacter = ev.key.length === 1;
29
31
  if (isAWriteableCharacter)
@@ -39,39 +41,43 @@ class SelectTogglerKeyboardController {
39
41
  event.preventDefault();
40
42
  await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
41
43
  const $firstOption = this._getAvailableOptions()[0];
42
- if ($firstOption) {
43
- utilities.UiDomUtils.makeNavigable($firstOption);
44
- $firstOption.focus();
45
- }
44
+ if ($firstOption)
45
+ this._navigate($firstOption);
46
46
  };
47
47
  this._openSelectAndGoToLastElement = async (event) => {
48
48
  var _a;
49
49
  event.preventDefault();
50
50
  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
- }
51
+ const $availableOptions = this._getAvailableOptions();
52
+ const $lastOption = $availableOptions[$availableOptions.length - 1];
53
+ if ($lastOption)
54
+ this._navigate($lastOption);
56
55
  };
57
56
  this._openSelectAndGoToMatchedElement = async (event) => {
58
57
  var _a;
59
58
  event.preventDefault();
60
59
  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
- }
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);
69
63
  };
70
64
  this._getAvailableOptions = () => {
71
65
  return tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
72
66
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
73
67
  });
74
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
+ };
75
81
  tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
76
82
  tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
77
83
  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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -197,7 +197,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
197
197
  return Array.from(this._$options.values());
198
198
  }
199
199
  updated(changedProperties) {
200
- var _a;
200
+ var _a, _b;
201
201
  super.updated(changedProperties);
202
202
  if (changedProperties.has('opened')) {
203
203
  if (this.opened) {
@@ -221,6 +221,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
221
221
  if (this.listBoxController) {
222
222
  this.listBoxController.calculateSelectedOptionIndex();
223
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
+ }
224
232
  }
225
233
  _focusElementAfterSelectOpened() {
226
234
  var _a;
@@ -234,7 +242,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
234
242
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
235
243
  }
236
244
  connectedCallback() {
237
- var _a, _b;
245
+ var _a;
238
246
  super.connectedCallback();
239
247
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
240
248
  if (!this.searchDisabled) {
@@ -249,14 +257,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
249
257
  this._selectController.options$.subscribe(this._optionsObserver);
250
258
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
251
259
  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
260
  this._updateOptions();
261
261
  this._setupEvents();
262
262
  }
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,9 +17,11 @@ 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
  }
24
26
  const isAWriteableCharacter = ev.key.length === 1;
25
27
  if (isAWriteableCharacter)
@@ -35,39 +37,43 @@ class SelectTogglerKeyboardController {
35
37
  event.preventDefault();
36
38
  await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
37
39
  const $firstOption = this._getAvailableOptions()[0];
38
- if ($firstOption) {
39
- UiDomUtils.makeNavigable($firstOption);
40
- $firstOption.focus();
41
- }
40
+ if ($firstOption)
41
+ this._navigate($firstOption);
42
42
  };
43
43
  this._openSelectAndGoToLastElement = async (event) => {
44
44
  var _a;
45
45
  event.preventDefault();
46
46
  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
- }
47
+ const $availableOptions = this._getAvailableOptions();
48
+ const $lastOption = $availableOptions[$availableOptions.length - 1];
49
+ if ($lastOption)
50
+ this._navigate($lastOption);
52
51
  };
53
52
  this._openSelectAndGoToMatchedElement = async (event) => {
54
53
  var _a;
55
54
  event.preventDefault();
56
55
  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
- }
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);
65
59
  };
66
60
  this._getAvailableOptions = () => {
67
61
  return __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
68
62
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
69
63
  });
70
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
+ };
71
77
  __classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
72
78
  __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
73
79
  __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;"}
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -193,7 +193,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
193
193
  return Array.from(this._$options.values());
194
194
  }
195
195
  updated(changedProperties) {
196
- var _a;
196
+ var _a, _b;
197
197
  super.updated(changedProperties);
198
198
  if (changedProperties.has('opened')) {
199
199
  if (this.opened) {
@@ -217,6 +217,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
217
217
  if (this.listBoxController) {
218
218
  this.listBoxController.calculateSelectedOptionIndex();
219
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
+ }
220
228
  }
221
229
  _focusElementAfterSelectOpened() {
222
230
  var _a;
@@ -230,7 +238,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
230
238
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
231
239
  }
232
240
  connectedCallback() {
233
- var _a, _b;
241
+ var _a;
234
242
  super.connectedCallback();
235
243
  this.classList.add(SELECT_CSS_CLASSES.select);
236
244
  if (!this.searchDisabled) {
@@ -245,14 +253,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
245
253
  this._selectController.options$.subscribe(this._optionsObserver);
246
254
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
247
255
  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
256
  this._updateOptions();
257
257
  this._setupEvents();
258
258
  }
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-3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",