@shoper/phoenix_design_system 1.15.3-20 → 1.15.3-22

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.
@@ -16,10 +16,18 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
16
16
  constructor() {
17
17
  super(...arguments);
18
18
  this.value = '';
19
- this._$selectContainer = null;
19
+ this._$selectOptions = null;
20
20
  this._handleSearchArrowNavigation = (ev) => {
21
- var _a;
22
- (_a = this._$selectContainer) === null || _a === void 0 ? void 0 : _a.listBoxController.handleArrowNavigation(ev);
21
+ const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
22
+ const $availableOptions = $options.filter(($option) => {
23
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
24
+ });
25
+ const $firstOption = $availableOptions.find(($option) => {
26
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
27
+ });
28
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
29
+ const $optionToFocus = $selectedOption || $firstOption;
30
+ $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
23
31
  };
24
32
  this._handleInputChange = debounce['default'](({ target }) => {
25
33
  this.value = target.value;
@@ -31,7 +39,8 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
31
39
  connectedCallback() {
32
40
  super.connectedCallback();
33
41
  this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
34
- this._$selectContainer = this.closest('h-select');
42
+ // to musisz zrobić inaczej, bo jest kilka selectów na stronie
43
+ this._$selectOptions = document.querySelector('h-options');
35
44
  this.addEventListener('keydown', this._handleSearchArrowNavigation);
36
45
  }
37
46
  render() {
@@ -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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -196,7 +196,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
196
196
  if (changedProperties.has('optionsList')) {
197
197
  this._updateOptions();
198
198
  }
199
- if (this._$optionsList.value && !this.listBoxController)
199
+ if (this._$optionsList.value)
200
200
  this.listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
201
201
  host: this,
202
202
  $list: this._$optionsList.value
@@ -17,13 +17,16 @@ class ListBoxKeyboardController {
17
17
  _ListBoxKeyboardController__$options.set(this, void 0);
18
18
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
19
19
  _ListBoxKeyboardController_keys.set(this, void 0);
20
- this.handleArrowNavigation = (event) => {
20
+ this._handleArrowNavigation = (event) => {
21
21
  event.preventDefault();
22
22
  const { key } = event;
23
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
24
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
25
+ });
23
26
  const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
24
27
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
25
28
  if (newOptionIndex === undefined) {
26
- const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
29
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
27
30
  newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
28
31
  }
29
32
  if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
@@ -33,7 +36,7 @@ class ListBoxKeyboardController {
33
36
  utilities.UiDomUtils.makeUnnavigable($prevOption);
34
37
  }
35
38
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
36
- const $focusedOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
39
+ const $focusedOption = $availableOptions[newOptionIndex];
37
40
  utilities.UiDomUtils.makeNavigable($focusedOption);
38
41
  $focusedOption.focus();
39
42
  };
@@ -52,7 +55,7 @@ class ListBoxKeyboardController {
52
55
  new keystrokes_controller.KeystrokesController({
53
56
  host: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
54
57
  keys: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
55
- callback: this.handleArrowNavigation,
58
+ callback: this._handleArrowNavigation,
56
59
  target: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
57
60
  });
58
61
  utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
@@ -77,8 +80,13 @@ class ListBoxKeyboardController {
77
80
  _getNextOptionIndex() {
78
81
  if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
79
82
  return undefined;
80
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
83
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
84
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
85
+ });
86
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
81
87
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
88
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1)
89
+ return $availableOptions.length;
82
90
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
83
91
  }
84
92
  }
@@ -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;"}
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;"}
@@ -2,7 +2,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
2
2
  import { TemplateResult } from 'lit';
3
3
  export declare class HSelectSearch extends PhoenixLightLitElement {
4
4
  value: string;
5
- private _$selectContainer;
5
+ private _$selectOptions;
6
6
  connectedCallback(): void;
7
7
  private _handleSearchArrowNavigation;
8
8
  private _handleInputChange;
@@ -12,10 +12,18 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
12
12
  constructor() {
13
13
  super(...arguments);
14
14
  this.value = '';
15
- this._$selectContainer = null;
15
+ this._$selectOptions = null;
16
16
  this._handleSearchArrowNavigation = (ev) => {
17
- var _a;
18
- (_a = this._$selectContainer) === null || _a === void 0 ? void 0 : _a.listBoxController.handleArrowNavigation(ev);
17
+ const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
18
+ const $availableOptions = $options.filter(($option) => {
19
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
20
+ });
21
+ const $firstOption = $availableOptions.find(($option) => {
22
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
23
+ });
24
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
25
+ const $optionToFocus = $selectedOption || $firstOption;
26
+ $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
19
27
  };
20
28
  this._handleInputChange = debounce_1(({ target }) => {
21
29
  this.value = target.value;
@@ -27,7 +35,8 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
27
35
  connectedCallback() {
28
36
  super.connectedCallback();
29
37
  this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
30
- this._$selectContainer = this.closest('h-select');
38
+ // to musisz zrobić inaczej, bo jest kilka selectów na stronie
39
+ this._$selectOptions = document.querySelector('h-options');
31
40
  this.addEventListener('keydown', this._handleSearchArrowNavigation);
32
41
  }
33
42
  render() {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -192,7 +192,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
192
192
  if (changedProperties.has('optionsList')) {
193
193
  this._updateOptions();
194
194
  }
195
- if (this._$optionsList.value && !this.listBoxController)
195
+ if (this._$optionsList.value)
196
196
  this.listBoxController = new ListBoxKeyboardController({
197
197
  host: this,
198
198
  $list: this._$optionsList.value
@@ -3,7 +3,7 @@ export declare class ListBoxKeyboardController implements IListboxController {
3
3
  #private;
4
4
  constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
5
5
  hostConnected(): void;
6
- handleArrowNavigation: (event: KeyboardEvent) => void;
6
+ private _handleArrowNavigation;
7
7
  calculateSelectedOptionIndex: () => void;
8
8
  private _getPrevOptionIndex;
9
9
  private _getNextOptionIndex;
@@ -13,13 +13,16 @@ class ListBoxKeyboardController {
13
13
  _ListBoxKeyboardController__$options.set(this, void 0);
14
14
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
15
15
  _ListBoxKeyboardController_keys.set(this, void 0);
16
- this.handleArrowNavigation = (event) => {
16
+ this._handleArrowNavigation = (event) => {
17
17
  event.preventDefault();
18
18
  const { key } = event;
19
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
20
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
21
+ });
19
22
  const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
20
23
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
21
24
  if (newOptionIndex === undefined) {
22
- const selectedOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
25
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
23
26
  newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
24
27
  }
25
28
  if (newOptionIndex === __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
@@ -29,7 +32,7 @@ class ListBoxKeyboardController {
29
32
  UiDomUtils.makeUnnavigable($prevOption);
30
33
  }
31
34
  __classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
32
- const $focusedOption = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
35
+ const $focusedOption = $availableOptions[newOptionIndex];
33
36
  UiDomUtils.makeNavigable($focusedOption);
34
37
  $focusedOption.focus();
35
38
  };
@@ -48,7 +51,7 @@ class ListBoxKeyboardController {
48
51
  new KeystrokesController({
49
52
  host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
50
53
  keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
51
- callback: this.handleArrowNavigation,
54
+ callback: this._handleArrowNavigation,
52
55
  target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
53
56
  });
54
57
  UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
@@ -73,8 +76,13 @@ class ListBoxKeyboardController {
73
76
  _getNextOptionIndex() {
74
77
  if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
75
78
  return undefined;
76
- if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
79
+ const $availableOptions = __classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
80
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
81
+ });
82
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
77
83
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
84
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1)
85
+ return $availableOptions.length;
78
86
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
79
87
  }
80
88
  }
@@ -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;"}
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;"}
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.3-20",
5
+ "version": "1.15.3-22",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",