@shoper/phoenix_design_system 1.15.3-23 → 1.15.3-25

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 (12) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/select.js +3 -3
  2. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +9 -11
  3. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  4. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +2 -1
  5. package/build/esm/packages/phoenix/src/components/form/select/select.js +3 -3
  6. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +2 -1
  7. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +1 -0
  8. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +1 -0
  10. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +9 -11
  11. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  12. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -44,7 +44,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
44
44
  this._searchValue = '';
45
45
  this._$options = new Map();
46
46
  this._$dropdown = ref_js.createRef();
47
- this._$search = ref_js.createRef();
47
+ this.$search = ref_js.createRef();
48
48
  this._$optionsList = ref_js.createRef();
49
49
  this._$dropdownContent = ref_js.createRef();
50
50
  this._$dropdownToggler = ref_js.createRef();
@@ -207,7 +207,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
207
207
  }
208
208
  _focusElementAfterSelectOpened() {
209
209
  var _a;
210
- const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
210
+ const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
211
211
  const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
212
212
  const $firstOption = $options.find(($option) => {
213
213
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
@@ -354,7 +354,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
354
354
  ${isSearchEnabled
355
355
  ? lit.html ` <h-select-search
356
356
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
357
- ${ref_js.ref(this._$search)}
357
+ ${ref_js.ref(this.$search)}
358
358
  .value=${this._searchValue}
359
359
  @search=${this._handleSearch}
360
360
  ></h-select-search>`
package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  require('lit');
7
7
  var utilities = require('@dreamcommerce/utilities');
8
- var keystrokes_controller = require('../keystrokes_controller/keystrokes_controller.js');
9
8
  var list_box_controller_constants = require('./list_box_controller_constants.js');
10
9
 
11
10
  var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
@@ -18,7 +17,7 @@ class ListBoxKeyboardController {
18
17
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
19
18
  _ListBoxKeyboardController_keys.set(this, void 0);
20
19
  this._handleKeyboardNavigation = (ev) => {
21
- if (ev.key.includes('Arrow')) {
20
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
22
21
  this._handleArrowNavigation(ev);
23
22
  return;
24
23
  }
@@ -52,10 +51,11 @@ class ListBoxKeyboardController {
52
51
  }
53
52
  };
54
53
  this._handleWriteableCharacter = (ev) => {
55
- const $inputField = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").querySelector('[role="search]');
56
- if (!$inputField)
54
+ var _a;
55
+ const $searchInput = (_a = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
56
+ if (!$searchInput)
57
57
  return;
58
- $inputField === null || $inputField === void 0 ? void 0 : $inputField.focus();
58
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
59
59
  const isAPrintableCharacter = ev.key.match(/\P{C}/u);
60
60
  if (ev.key.length !== 1 || !isAPrintableCharacter) {
61
61
  ev.preventDefault();
@@ -73,12 +73,7 @@ class ListBoxKeyboardController {
73
73
  tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
74
74
  }
75
75
  hostConnected() {
76
- new keystrokes_controller.KeystrokesController({
77
- host: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
78
- keys: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
79
- callback: this._handleKeyboardNavigation,
80
- target: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
81
- });
76
+ tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
82
77
  utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
83
78
  tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
84
79
  if (event.target !== tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
@@ -110,6 +105,9 @@ class ListBoxKeyboardController {
110
105
  return $availableOptions.length - 1;
111
106
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
112
107
  }
108
+ hostDisconnected() {
109
+ tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
110
+ }
113
111
  }
114
112
  _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
115
113
 
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { PropertyValues, TemplateResult } from 'lit';
2
2
  import { HOption } from "./components/option/select_option";
3
+ import { HSelectSearch } from "./components/search/select_search";
3
4
  import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
4
5
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
5
6
  import { SelectOption } from "./model/select_option";
@@ -30,7 +31,7 @@ export declare class HSelect extends PhoenixLightLitElement {
30
31
  private _selectController;
31
32
  private _$options;
32
33
  private _$dropdown;
33
- private _$search;
34
+ $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
34
35
  private _$optionsList;
35
36
  private _$dropdownContent;
36
37
  private _$dropdownToggler;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -40,7 +40,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
40
40
  this._searchValue = '';
41
41
  this._$options = new Map();
42
42
  this._$dropdown = createRef();
43
- this._$search = createRef();
43
+ this.$search = createRef();
44
44
  this._$optionsList = createRef();
45
45
  this._$dropdownContent = createRef();
46
46
  this._$dropdownToggler = createRef();
@@ -203,7 +203,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
203
203
  }
204
204
  _focusElementAfterSelectOpened() {
205
205
  var _a;
206
- const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
206
+ const $searchInput = (_a = this.$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
207
207
  const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
208
208
  const $firstOption = $options.find(($option) => {
209
209
  return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
@@ -350,7 +350,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
350
350
  ${isSearchEnabled
351
351
  ? html ` <h-select-search
352
352
  class=${SELECT_CSS_CLASSES.selectSearch}
353
- ${ref(this._$search)}
353
+ ${ref(this.$search)}
354
354
  .value=${this._searchValue}
355
355
  @search=${this._handleSearch}
356
356
  ></h-select-search>`
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { Any } from 'ts-toolbelt';
2
2
  import { ReactiveController, ReactiveControllerHost } from 'lit';
3
3
  import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
4
+ import { HSelect } from "../../components/form/select/select";
4
5
  export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
5
6
  export declare type TListBoxKeyboardControllerConstructorOptions = {
6
- host: ReactiveControllerHost & HTMLElement;
7
+ host: ReactiveControllerHost & HSelect;
7
8
  $list: HTMLElement;
8
9
  listItemSelector?: string;
9
10
  orientation?: TListBoxKeyboardNavigationDirection;
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import 'ts-toolbelt';
2
2
  import 'lit';
3
3
  import '@phoenixRoot/controllers/list_box_controller/list_box_controller_constants';
4
+ import '@phoenixRoot/components/form/select/select';
4
5
  //# sourceMappingURL=list_box_controller_types.js.map
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAA2D,KAAK,CAAC;AACjE,OAAwD,4EAA4E,CAAC"}
1
+ {"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAA2D,KAAK,CAAC;AACjE,OAAwD,4EAA4E,CAAC;AACrI,OAAwB,4CAA4C,CAAC"}
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts CHANGED
@@ -9,4 +9,5 @@ export declare class ListBoxKeyboardController implements IListboxController {
9
9
  calculateSelectedOptionIndex: () => void;
10
10
  private _getPrevOptionIndex;
11
11
  private _getNextOptionIndex;
12
+ hostDisconnected(): void;
12
13
  }
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import 'lit';
3
3
  import { UiDomUtils } from '@dreamcommerce/utilities';
4
- import { KeystrokesController } from '../keystrokes_controller/keystrokes_controller.js';
5
4
  import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from './list_box_controller_constants.js';
6
5
 
7
6
  var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
@@ -14,7 +13,7 @@ class ListBoxKeyboardController {
14
13
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
15
14
  _ListBoxKeyboardController_keys.set(this, void 0);
16
15
  this._handleKeyboardNavigation = (ev) => {
17
- if (ev.key.includes('Arrow')) {
16
+ if (__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
18
17
  this._handleArrowNavigation(ev);
19
18
  return;
20
19
  }
@@ -48,10 +47,11 @@ class ListBoxKeyboardController {
48
47
  }
49
48
  };
50
49
  this._handleWriteableCharacter = (ev) => {
51
- const $inputField = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").querySelector('[role="search]');
52
- if (!$inputField)
50
+ var _a;
51
+ const $searchInput = (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
52
+ if (!$searchInput)
53
53
  return;
54
- $inputField === null || $inputField === void 0 ? void 0 : $inputField.focus();
54
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
55
55
  const isAPrintableCharacter = ev.key.match(/\P{C}/u);
56
56
  if (ev.key.length !== 1 || !isAPrintableCharacter) {
57
57
  ev.preventDefault();
@@ -69,12 +69,7 @@ class ListBoxKeyboardController {
69
69
  __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
70
70
  }
71
71
  hostConnected() {
72
- new KeystrokesController({
73
- host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
74
- keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
75
- callback: this._handleKeyboardNavigation,
76
- target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
77
- });
72
+ __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
78
73
  UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
79
74
  __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
80
75
  if (event.target !== __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
@@ -106,6 +101,9 @@ class ListBoxKeyboardController {
106
101
  return $availableOptions.length - 1;
107
102
  return __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
108
103
  }
104
+ hostDisconnected() {
105
+ __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
106
+ }
109
107
  }
110
108
  _ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
111
109
 
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;"}
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;"}
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-23",
5
+ "version": "1.15.3-25",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",