@shoper/phoenix_design_system 1.15.11-1 → 1.15.11-2

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 (14) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +90 -0
  2. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -0
  3. package/build/cjs/packages/phoenix/src/components/form/select/select.js +13 -4
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +13 -0
  6. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +86 -0
  7. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -0
  8. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts +8 -0
  9. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js +3 -0
  10. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map +1 -0
  11. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -1
  12. package/build/esm/packages/phoenix/src/components/form/select/select.js +13 -4
  13. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  14. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js ADDED
@@ -0,0 +1,90 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
6
+ require('lit');
7
+ var utilities = require('@dreamcommerce/utilities');
8
+
9
+ var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
10
+ class SelectTogglerKeyboardController {
11
+ constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
12
+ _SelectTogglerKeyboardController_host.set(this, void 0);
13
+ _SelectTogglerKeyboardController__$toggler.set(this, void 0);
14
+ _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
15
+ _SelectTogglerKeyboardController__$options.set(this, void 0);
16
+ this._handleKeyboardNavigation = (ev) => {
17
+ const arrowKeys = ['ArrowUp', 'ArrowDown'];
18
+ if (arrowKeys.includes(ev.key)) {
19
+ this._openSelect(ev);
20
+ return;
21
+ }
22
+ if (ev.key === 'Home') {
23
+ this._openSelectAndGoToFirstElement(ev);
24
+ }
25
+ if (ev.key === 'End') {
26
+ this._openSelectAndGoToLastElement(ev);
27
+ }
28
+ const isAWriteableCharacter = ev.key.length === 1;
29
+ if (isAWriteableCharacter)
30
+ this._openSelectAndGoToMatchedElement(ev);
31
+ };
32
+ this._openSelect = (event) => {
33
+ var _a;
34
+ event.preventDefault();
35
+ (_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
36
+ };
37
+ this._openSelectAndGoToFirstElement = async (event) => {
38
+ var _a;
39
+ event.preventDefault();
40
+ await ((_a = tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
41
+ const $firstOption = this._getAvailableOptions()[0];
42
+ if ($firstOption) {
43
+ utilities.UiDomUtils.makeNavigable($firstOption);
44
+ $firstOption.focus();
45
+ }
46
+ };
47
+ this._openSelectAndGoToLastElement = async (event) => {
48
+ var _a;
49
+ event.preventDefault();
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
+ }
56
+ };
57
+ this._openSelectAndGoToMatchedElement = async (event) => {
58
+ var _a;
59
+ event.preventDefault();
60
+ 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
+ }
69
+ };
70
+ this._getAvailableOptions = () => {
71
+ return tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
72
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
73
+ });
74
+ };
75
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
76
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
77
+ tslib_es6.__classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
78
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
79
+ }
80
+ hostConnected() {
81
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
82
+ }
83
+ hostDisconnected() {
84
+ tslib_es6.__classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
85
+ }
86
+ }
87
+ _SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
88
+
89
+ exports.SelectTogglerKeyboardController = SelectTogglerKeyboardController;
90
+ //# sourceMappingURL=select_toggler_keyboard_controller.js.map
package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map ADDED
@@ -0,0 +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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -29,6 +29,7 @@ var select_utils = require('./select_utils.js');
29
29
  var select_controller = require('./controllers/select_controller.js');
30
30
  var select_option_mapper = require('./model/select_option_mapper.js');
31
31
  var repeat = require('lit/directives/repeat');
32
+ var select_toggler_keyboard_controller = require('./controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js');
32
33
 
33
34
  exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
34
35
  constructor() {
@@ -43,7 +44,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
43
44
  this.ariaLabelledby = '';
44
45
  this._searchValue = '';
45
46
  this._$options = new Map();
46
- this._$dropdown = ref_js.createRef();
47
+ this.$dropdown = ref_js.createRef();
47
48
  this.$search = ref_js.createRef();
48
49
  this._$optionsList = ref_js.createRef();
49
50
  this._$dropdownContent = ref_js.createRef();
@@ -152,7 +153,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
152
153
  var _a;
153
154
  if (!this.opened)
154
155
  return;
155
- (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
156
+ (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
156
157
  };
157
158
  this._clearOptions = () => {
158
159
  this._selectController.deselectAll();
@@ -233,7 +234,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
233
234
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
234
235
  }
235
236
  connectedCallback() {
236
- var _a;
237
+ var _a, _b;
237
238
  super.connectedCallback();
238
239
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
239
240
  if (!this.searchDisabled) {
@@ -248,6 +249,14 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
248
249
  this._selectController.options$.subscribe(this._optionsObserver);
249
250
  this._selectedOptionsAriaObserver = new observer.Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
250
251
  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
+ }
251
260
  this._updateOptions();
252
261
  this._setupEvents();
253
262
  }
@@ -346,7 +355,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
346
355
  const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
347
356
  return lit.html `
348
357
  <h-dropdown
349
- ${ref_js.ref(this._$dropdown)}
358
+ ${ref_js.ref(this.$dropdown)}
350
359
  @showed=${() => (this.opened = true)}
351
360
  @hidden=${this._handleDropdownHidden}
352
361
  name="${this.controlName}"
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { TSelectTogglerKeyboardControllerConstructorOptions } from './select_toggler_keyboard_controller_types';
2
+ export declare class SelectTogglerKeyboardController {
3
+ #private;
4
+ constructor({ host, $toggler, $list, listItemSelector, }: TSelectTogglerKeyboardControllerConstructorOptions);
5
+ hostConnected(): void;
6
+ private _handleKeyboardNavigation;
7
+ private _openSelect;
8
+ private _openSelectAndGoToFirstElement;
9
+ private _openSelectAndGoToLastElement;
10
+ private _openSelectAndGoToMatchedElement;
11
+ private _getAvailableOptions;
12
+ hostDisconnected(): void;
13
+ }
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js ADDED
@@ -0,0 +1,86 @@
1
+ import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../../../external/tslib/tslib.es6.js';
2
+ import 'lit';
3
+ import { UiDomUtils } from '@dreamcommerce/utilities';
4
+
5
+ var _SelectTogglerKeyboardController_host, _SelectTogglerKeyboardController__$toggler, _SelectTogglerKeyboardController_currentOptionIndex, _SelectTogglerKeyboardController__$options;
6
+ class SelectTogglerKeyboardController {
7
+ constructor({ host, $toggler, $list, listItemSelector = '[role="option"]', }) {
8
+ _SelectTogglerKeyboardController_host.set(this, void 0);
9
+ _SelectTogglerKeyboardController__$toggler.set(this, void 0);
10
+ _SelectTogglerKeyboardController_currentOptionIndex.set(this, void 0);
11
+ _SelectTogglerKeyboardController__$options.set(this, void 0);
12
+ this._handleKeyboardNavigation = (ev) => {
13
+ const arrowKeys = ['ArrowUp', 'ArrowDown'];
14
+ if (arrowKeys.includes(ev.key)) {
15
+ this._openSelect(ev);
16
+ return;
17
+ }
18
+ if (ev.key === 'Home') {
19
+ this._openSelectAndGoToFirstElement(ev);
20
+ }
21
+ if (ev.key === 'End') {
22
+ this._openSelectAndGoToLastElement(ev);
23
+ }
24
+ const isAWriteableCharacter = ev.key.length === 1;
25
+ if (isAWriteableCharacter)
26
+ this._openSelectAndGoToMatchedElement(ev);
27
+ };
28
+ this._openSelect = (event) => {
29
+ var _a;
30
+ event.preventDefault();
31
+ (_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show();
32
+ };
33
+ this._openSelectAndGoToFirstElement = async (event) => {
34
+ var _a;
35
+ event.preventDefault();
36
+ await ((_a = __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").$dropdown.value) === null || _a === void 0 ? void 0 : _a.show());
37
+ const $firstOption = this._getAvailableOptions()[0];
38
+ if ($firstOption) {
39
+ UiDomUtils.makeNavigable($firstOption);
40
+ $firstOption.focus();
41
+ }
42
+ };
43
+ this._openSelectAndGoToLastElement = async (event) => {
44
+ var _a;
45
+ event.preventDefault();
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
+ }
52
+ };
53
+ this._openSelectAndGoToMatchedElement = async (event) => {
54
+ var _a;
55
+ event.preventDefault();
56
+ 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
+ }
65
+ };
66
+ this._getAvailableOptions = () => {
67
+ return __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$options, "f").filter(($option) => {
68
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
69
+ });
70
+ };
71
+ __classPrivateFieldSet(this, _SelectTogglerKeyboardController_host, host, "f");
72
+ __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$toggler, $toggler, "f");
73
+ __classPrivateFieldSet(this, _SelectTogglerKeyboardController__$options, Array.from($list.querySelectorAll(listItemSelector)), "f");
74
+ __classPrivateFieldGet(this, _SelectTogglerKeyboardController_host, "f").addController(this);
75
+ }
76
+ hostConnected() {
77
+ __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").addEventListener('keydown', this._handleKeyboardNavigation);
78
+ }
79
+ hostDisconnected() {
80
+ __classPrivateFieldGet(this, _SelectTogglerKeyboardController__$toggler, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
81
+ }
82
+ }
83
+ _SelectTogglerKeyboardController_host = new WeakMap(), _SelectTogglerKeyboardController__$toggler = new WeakMap(), _SelectTogglerKeyboardController_currentOptionIndex = new WeakMap(), _SelectTogglerKeyboardController__$options = new WeakMap();
84
+
85
+ export { SelectTogglerKeyboardController };
86
+ //# sourceMappingURL=select_toggler_keyboard_controller.js.map
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map ADDED
@@ -0,0 +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;"}
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { ReactiveControllerHost } from 'lit';
2
+ import { HSelect } from "../../select";
3
+ export declare type TSelectTogglerKeyboardControllerConstructorOptions = {
4
+ host: ReactiveControllerHost & HSelect;
5
+ $toggler: HTMLElement;
6
+ $list: HTMLElement;
7
+ listItemSelector?: string;
8
+ };
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js ADDED
@@ -0,0 +1,3 @@
1
+ import 'lit';
2
+ import '@phoenixRoot/components/form/select/select';
3
+ //# sourceMappingURL=select_toggler_keyboard_controller_types.js.map
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select_toggler_keyboard_controller_types.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.ts"],"names":[],"mappings":"AAAA,OAAuC,KAAK,CAAC;AAC7C,OAAwB,4CAA4C,CAAC"}
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { PropertyValues, TemplateResult } from 'lit';
2
+ import { HDropdown } from "../../dropdown/dropdown";
2
3
  import { HOption } from "./components/option/select_option";
3
4
  import { HSelectSearch } from "./components/search/select_search";
4
5
  import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
@@ -30,13 +31,14 @@ export declare class HSelect extends PhoenixLightLitElement {
30
31
  private _searchValue;
31
32
  private _selectController;
32
33
  private _$options;
33
- private _$dropdown;
34
+ $dropdown: import("lit-html/directives/ref.js").Ref<HDropdown>;
34
35
  $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
35
36
  private _$optionsList;
36
37
  private _$dropdownContent;
37
38
  private _$dropdownToggler;
38
39
  private _selectContext;
39
40
  listBoxController: ListBoxKeyboardController;
41
+ private _selectTogglerKeyboardController;
40
42
  private _optionsObserver;
41
43
  private _selectedOptionsAriaObserver;
42
44
  private $placeholder;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -25,6 +25,7 @@ import { SelectControlUtils } from './select_utils.js';
25
25
  import { SelectController } from './controllers/select_controller.js';
26
26
  import { SelectOptionMapper } from './model/select_option_mapper.js';
27
27
  import { repeat } from 'lit/directives/repeat';
28
+ import { SelectTogglerKeyboardController } from './controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js';
28
29
 
29
30
  let HSelect = class HSelect extends PhoenixLightLitElement {
30
31
  constructor() {
@@ -39,7 +40,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
39
40
  this.ariaLabelledby = '';
40
41
  this._searchValue = '';
41
42
  this._$options = new Map();
42
- this._$dropdown = createRef();
43
+ this.$dropdown = createRef();
43
44
  this.$search = createRef();
44
45
  this._$optionsList = createRef();
45
46
  this._$dropdownContent = createRef();
@@ -148,7 +149,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
148
149
  var _a;
149
150
  if (!this.opened)
150
151
  return;
151
- (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
152
+ (_a = this.$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
152
153
  };
153
154
  this._clearOptions = () => {
154
155
  this._selectController.deselectAll();
@@ -229,7 +230,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
229
230
  $searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
230
231
  }
231
232
  connectedCallback() {
232
- var _a;
233
+ var _a, _b;
233
234
  super.connectedCallback();
234
235
  this.classList.add(SELECT_CSS_CLASSES.select);
235
236
  if (!this.searchDisabled) {
@@ -244,6 +245,14 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
244
245
  this._selectController.options$.subscribe(this._optionsObserver);
245
246
  this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
246
247
  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
+ }
247
256
  this._updateOptions();
248
257
  this._setupEvents();
249
258
  }
@@ -342,7 +351,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
342
351
  const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
343
352
  return html `
344
353
  <h-dropdown
345
- ${ref(this._$dropdown)}
354
+ ${ref(this.$dropdown)}
346
355
  @showed=${() => (this.opened = true)}
347
356
  @hidden=${this._handleDropdownHidden}
348
357
  name="${this.controlName}"
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;"}
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;"}
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-1",
5
+ "version": "1.15.11-2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",