@shoper/phoenix_design_system 1.15.3-19 → 1.15.3-20

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 (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +3 -7
  2. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/select.js +9 -9
  4. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +2 -2
  5. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +3 -7
  6. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  7. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -3
  8. package/build/esm/packages/phoenix/src/components/form/select/select.js +9 -9
  9. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +1 -1
  10. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +2 -2
  11. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
6
6
  var lit = require('lit');
7
7
  var decorators = require('lit/decorators');
8
- var utilities = require('@dreamcommerce/utilities');
8
+ require('@dreamcommerce/utilities');
9
9
  var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
10
10
  var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
11
11
  var select_components_constatns = require('../select_components_constatns.js');
@@ -18,12 +18,8 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
18
18
  this.value = '';
19
19
  this._$selectContainer = null;
20
20
  this._handleSearchArrowNavigation = (ev) => {
21
- var _a, _b;
22
- if (ev.key !== 'ArrowDown')
23
- return;
24
- if ((_a = this._$selectContainer) === null || _a === void 0 ? void 0 : _a.$optionsList.value) {
25
- utilities.UiDomUtils.getFocusableElement((_b = this._$selectContainer) === null || _b === void 0 ? void 0 : _b.$optionsList.value).focus();
26
- }
21
+ var _a;
22
+ (_a = this._$selectContainer) === null || _a === void 0 ? void 0 : _a.listBoxController.handleArrowNavigation(ev);
27
23
  };
28
24
  this._handleInputChange = debounce['default'](({ target }) => {
29
25
  this.value = target.value;
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.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,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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -45,7 +45,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
45
45
  this._$options = new Map();
46
46
  this._$dropdown = ref_js.createRef();
47
47
  this._$search = ref_js.createRef();
48
- this.$optionsList = ref_js.createRef();
48
+ this._$optionsList = ref_js.createRef();
49
49
  this._$dropdownContent = ref_js.createRef();
50
50
  this._$dropdownToggler = ref_js.createRef();
51
51
  this._selectContext = new context_provider_controller.ContextProviderController(this);
@@ -196,19 +196,19 @@ 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)
200
- this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
199
+ if (this._$optionsList.value && !this.listBoxController)
200
+ this.listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
201
201
  host: this,
202
- $list: this.$optionsList.value
202
+ $list: this._$optionsList.value
203
203
  });
204
- if (this._listBoxController) {
205
- this._listBoxController.calculateSelectedOptionIndex();
204
+ if (this.listBoxController) {
205
+ this.listBoxController.calculateSelectedOptionIndex();
206
206
  }
207
207
  }
208
208
  _focusElementAfterSelectOpened() {
209
209
  var _a;
210
210
  const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
211
- const $options = this.$optionsList.value ? [...this.$optionsList.value.querySelectorAll('h-option')] : [];
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');
214
214
  });
@@ -245,7 +245,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
245
245
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
246
246
  }
247
247
  _appendNewHTMLOption(option, position) {
248
- const $list = this.$optionsList.value;
248
+ const $list = this._$optionsList.value;
249
249
  if (!$list)
250
250
  return;
251
251
  const { value, selected } = option;
@@ -358,7 +358,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
358
358
 
359
359
  <h-options
360
360
  class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
361
- ${ref_js.ref(this.$optionsList)}
361
+ ${ref_js.ref(this._$optionsList)}
362
362
  @optionClicked=${this._handleOptionClicked}
363
363
  @optionUpdated=${this._handleOptionUpdated}
364
364
  >
package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -17,7 +17,7 @@ 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
23
  const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
@@ -52,7 +52,7 @@ class ListBoxKeyboardController {
52
52
  new keystrokes_controller.KeystrokesController({
53
53
  host: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
54
54
  keys: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
55
- callback: this._handleArrowNavigation,
55
+ callback: this.handleArrowNavigation,
56
56
  target: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
57
57
  });
58
58
  utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
2
2
  import { html } from 'lit';
3
3
  import { property } from 'lit/decorators';
4
- import { UiDomUtils } from '@dreamcommerce/utilities';
4
+ import '@dreamcommerce/utilities';
5
5
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
6
6
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
7
7
  import { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
@@ -14,12 +14,8 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
14
14
  this.value = '';
15
15
  this._$selectContainer = null;
16
16
  this._handleSearchArrowNavigation = (ev) => {
17
- var _a, _b;
18
- if (ev.key !== 'ArrowDown')
19
- return;
20
- if ((_a = this._$selectContainer) === null || _a === void 0 ? void 0 : _a.$optionsList.value) {
21
- UiDomUtils.getFocusableElement((_b = this._$selectContainer) === null || _b === void 0 ? void 0 : _b.$optionsList.value).focus();
22
- }
17
+ var _a;
18
+ (_a = this._$selectContainer) === null || _a === void 0 ? void 0 : _a.listBoxController.handleArrowNavigation(ev);
23
19
  };
24
20
  this._handleInputChange = debounce_1(({ target }) => {
25
21
  this.value = target.value;
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map CHANGED
@@ -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;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;"}
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { PropertyValues, TemplateResult } from 'lit';
2
2
  import { HOption } from "./components/option/select_option";
3
- import { HOptions } from "./components/select_options";
3
+ import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
4
4
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
5
5
  import { SelectOption } from "./model/select_option";
6
6
  import type { TSelectType } from "./select_types";
@@ -31,11 +31,11 @@ export declare class HSelect extends PhoenixLightLitElement {
31
31
  private _$options;
32
32
  private _$dropdown;
33
33
  private _$search;
34
- $optionsList: import("lit-html/directives/ref.js").Ref<HOptions>;
34
+ private _$optionsList;
35
35
  private _$dropdownContent;
36
36
  private _$dropdownToggler;
37
37
  private _selectContext;
38
- private _listBoxController;
38
+ listBoxController: ListBoxKeyboardController;
39
39
  private _optionsObserver;
40
40
  private $placeholder;
41
41
  constructor();
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -41,7 +41,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
41
41
  this._$options = new Map();
42
42
  this._$dropdown = createRef();
43
43
  this._$search = createRef();
44
- this.$optionsList = createRef();
44
+ this._$optionsList = createRef();
45
45
  this._$dropdownContent = createRef();
46
46
  this._$dropdownToggler = createRef();
47
47
  this._selectContext = new ContextProviderController(this);
@@ -192,19 +192,19 @@ 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)
196
- this._listBoxController = new ListBoxKeyboardController({
195
+ if (this._$optionsList.value && !this.listBoxController)
196
+ this.listBoxController = new ListBoxKeyboardController({
197
197
  host: this,
198
- $list: this.$optionsList.value
198
+ $list: this._$optionsList.value
199
199
  });
200
- if (this._listBoxController) {
201
- this._listBoxController.calculateSelectedOptionIndex();
200
+ if (this.listBoxController) {
201
+ this.listBoxController.calculateSelectedOptionIndex();
202
202
  }
203
203
  }
204
204
  _focusElementAfterSelectOpened() {
205
205
  var _a;
206
206
  const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
207
- const $options = this.$optionsList.value ? [...this.$optionsList.value.querySelectorAll('h-option')] : [];
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');
210
210
  });
@@ -241,7 +241,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
241
241
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
242
242
  }
243
243
  _appendNewHTMLOption(option, position) {
244
- const $list = this.$optionsList.value;
244
+ const $list = this._$optionsList.value;
245
245
  if (!$list)
246
246
  return;
247
247
  const { value, selected } = option;
@@ -354,7 +354,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
354
354
 
355
355
  <h-options
356
356
  class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
357
- ${ref(this.$optionsList)}
357
+ ${ref(this._$optionsList)}
358
358
  @optionClicked=${this._handleOptionClicked}
359
359
  @optionUpdated=${this._handleOptionUpdated}
360
360
  >
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts CHANGED
@@ -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
- private _handleArrowNavigation;
6
+ handleArrowNavigation: (event: KeyboardEvent) => void;
7
7
  calculateSelectedOptionIndex: () => void;
8
8
  private _getPrevOptionIndex;
9
9
  private _getNextOptionIndex;
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -13,7 +13,7 @@ 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
19
  const prevOptionIndex = __classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
@@ -48,7 +48,7 @@ class ListBoxKeyboardController {
48
48
  new KeystrokesController({
49
49
  host: __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
50
50
  keys: __classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
51
- callback: this._handleArrowNavigation,
51
+ callback: this.handleArrowNavigation,
52
52
  target: __classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
53
53
  });
54
54
  UiDomUtils.makeNavigable(__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
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-19",
5
+ "version": "1.15.3-20",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",