@shoper/phoenix_design_system 1.15.11-0 → 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 (50) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +9 -2
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +6 -1
  4. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/input/input_copy_button.js +4 -3
  6. package/build/cjs/packages/phoenix/src/components/form/input/input_copy_button.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +30 -0
  8. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js +1 -2
  10. package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +90 -0
  12. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -0
  13. package/build/cjs/packages/phoenix/src/components/form/select/select.js +61 -11
  14. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  15. package/build/cjs/packages/phoenix/src/components/modal/modal.js +1 -3
  16. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  17. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +62 -15
  18. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +1 -0
  20. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +9 -2
  21. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  22. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +1 -0
  23. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +6 -1
  24. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  25. package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.d.ts +1 -0
  26. package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.js +4 -3
  27. package/build/esm/packages/phoenix/src/components/form/input/input_copy_button.js.map +1 -1
  28. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +4 -0
  29. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +30 -0
  30. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  31. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +1 -2
  32. package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
  33. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +13 -0
  34. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +86 -0
  35. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +1 -0
  36. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts +8 -0
  37. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js +3 -0
  38. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map +1 -0
  39. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +10 -3
  40. package/build/esm/packages/phoenix/src/components/form/select/select.js +61 -11
  41. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  42. package/build/esm/packages/phoenix/src/components/modal/modal.js +1 -3
  43. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  44. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +6 -2
  45. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +1 -0
  46. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
  47. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +7 -3
  48. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +62 -15
  49. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  50. package/package.json +1 -1
@@ -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;
@@ -17,25 +16,54 @@ class ListBoxKeyboardController {
17
16
  _ListBoxKeyboardController__$options.set(this, void 0);
18
17
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
19
18
  _ListBoxKeyboardController_keys.set(this, void 0);
19
+ this._handleKeyboardNavigation = (ev) => {
20
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
21
+ this._handleArrowNavigation(ev);
22
+ return;
23
+ }
24
+ this._handleWriteableCharacter(ev);
25
+ };
20
26
  this._handleArrowNavigation = (event) => {
21
27
  event.preventDefault();
22
28
  const { key } = event;
23
- const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
29
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
30
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
31
+ });
32
+ const prevOptionIndex = this._findCurrentIndex();
24
33
  let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
25
34
  if (newOptionIndex === undefined) {
26
- const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
27
- newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
35
+ newOptionIndex = this._findCurrentIndex();
28
36
  }
29
37
  if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
30
38
  return;
31
39
  if (prevOptionIndex !== undefined) {
32
40
  const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
33
- utilities.UiDomUtils.makeUnnavigable($prevOption);
41
+ $prevOption && utilities.UiDomUtils.makeUnnavigable($prevOption);
34
42
  }
35
43
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
36
- const $focusedOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
37
- utilities.UiDomUtils.makeNavigable($focusedOption);
38
- $focusedOption.focus();
44
+ const $focusedOption = $availableOptions[newOptionIndex];
45
+ if ($focusedOption) {
46
+ utilities.UiDomUtils.makeNavigable($focusedOption);
47
+ $focusedOption.focus();
48
+ }
49
+ };
50
+ this._findCurrentIndex = () => {
51
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
52
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
53
+ });
54
+ const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
55
+ return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
56
+ };
57
+ this._handleWriteableCharacter = (ev) => {
58
+ var _a;
59
+ const $searchInput = (_a = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
60
+ if (!$searchInput)
61
+ return;
62
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
63
+ };
64
+ this.calculateSelectedOptionIndex = () => {
65
+ 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");
39
67
  };
40
68
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
41
69
  tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
@@ -45,12 +73,7 @@ class ListBoxKeyboardController {
45
73
  tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
46
74
  }
47
75
  hostConnected() {
48
- new keystrokes_controller.KeystrokesController({
49
- host: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f"),
50
- keys: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f"),
51
- callback: this._handleArrowNavigation,
52
- target: tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f")
53
- });
76
+ tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('keydown', this._handleKeyboardNavigation);
54
77
  utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
55
78
  tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
56
79
  if (event.target !== tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
@@ -68,15 +91,39 @@ class ListBoxKeyboardController {
68
91
  return undefined;
69
92
  if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
70
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");
96
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
97
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
98
+ });
99
+ if (!!$availableOptions[tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1])
100
+ return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
101
+ // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
102
+ const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
103
+ if (newIndexOfCurrentlySelectedOption)
104
+ return newIndexOfCurrentlySelectedOption - 1;
71
105
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
72
106
  }
73
107
  _getNextOptionIndex() {
74
108
  if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
75
109
  return undefined;
76
- if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
110
+ const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
111
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
112
+ });
113
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
77
114
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
115
+ if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") > $availableOptions.length - 1) {
116
+ // bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
117
+ const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
118
+ if (newIndexOfCurrentlySelectedOption)
119
+ return newIndexOfCurrentlySelectedOption + 1;
120
+ return 0;
121
+ }
78
122
  return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
79
123
  }
124
+ hostDisconnected() {
125
+ tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
126
+ }
80
127
  }
81
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();
82
129
 
@@ -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;"}
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;"}
@@ -17,6 +17,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
17
17
  mobilePosition: TMobileElementPosition;
18
18
  id: string;
19
19
  preventFocusTrap: boolean;
20
+ noAutoFocus: boolean;
20
21
  $dropdownToggler: HDropdownToggler | null;
21
22
  $dropdownContent: HDropdownContent | null;
22
23
  $nestedDropdownContentElements?: HDropdownContent[];
@@ -28,6 +28,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
28
28
  this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
29
29
  this.id = v4();
30
30
  this.preventFocusTrap = false;
31
+ this.noAutoFocus = false;
31
32
  this._backdropController = new BackdropController();
32
33
  this._handleClickOutside = async (target) => {
33
34
  var _a, _b;
@@ -44,7 +45,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
44
45
  return;
45
46
  }
46
47
  await this.show();
47
- this._focusOnFirstContentElement();
48
+ if (!this.noAutoFocus)
49
+ this._focusOnFirstContentElement();
48
50
  };
49
51
  this.show = async () => {
50
52
  if (this.opened)
@@ -172,7 +174,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
172
174
  const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
173
175
  if (isHoveredWithinDropdown && !this.opened) {
174
176
  await this.show();
175
- this._focusOnFirstContentElement();
177
+ if (!this.noAutoFocus)
178
+ this._focusOnFirstContentElement();
176
179
  return;
177
180
  }
178
181
  if (!isHoveredWithinDropdown && this.opened)
@@ -462,6 +465,10 @@ __decorate([
462
465
  property({ type: Boolean, attribute: 'prevent-focus-trap' }),
463
466
  __metadata("design:type", Object)
464
467
  ], HDropdown.prototype, "preventFocusTrap", void 0);
468
+ __decorate([
469
+ property({ type: Boolean, attribute: 'no-autofocus' }),
470
+ __metadata("design:type", Object)
471
+ ], HDropdown.prototype, "noAutoFocus", void 0);
465
472
  HDropdown = HDropdown_1 = __decorate([
466
473
  phoenixCustomElement('h-dropdown'),
467
474
  __metadata("design:paramtypes", [])
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6 +1,7 @@
1
1
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
2
  export declare class HDropdownToggler extends PhoenixLightLitElement {
3
3
  name: string;
4
+ ariaHasPopup: string;
4
5
  private _btnController;
5
6
  private _toggleElementAriaController;
6
7
  private _$dropdown;
@@ -12,6 +12,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
12
12
  constructor() {
13
13
  super();
14
14
  this.name = '';
15
+ this.ariaHasPopup = 'menu';
15
16
  this._setupTogglerAria = () => {
16
17
  this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
17
18
  if (this._$dropdown.isOpened)
@@ -19,7 +20,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
19
20
  host: this,
20
21
  initialAriaExpandedValue: this._$dropdown.isOpened()
21
22
  });
22
- this.setAttribute('aria-haspopup', 'true');
23
+ this.setAttribute('aria-haspopup', this.ariaHasPopup);
23
24
  if (this._$dropdown.id)
24
25
  this.setAttribute('aria-controls', this._$dropdown.id);
25
26
  };
@@ -56,6 +57,10 @@ __decorate([
56
57
  property({ type: String, reflect: true }),
57
58
  __metadata("design:type", Object)
58
59
  ], HDropdownToggler.prototype, "name", void 0);
60
+ __decorate([
61
+ property({ type: String, attribute: 'aria-haspopup' }),
62
+ __metadata("design:type", Object)
63
+ ], HDropdownToggler.prototype, "ariaHasPopup", void 0);
59
64
  HDropdownToggler = __decorate([
60
65
  phoenixCustomElement('h-dropdown-toggler'),
61
66
  __metadata("design:paramtypes", [])
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -7,6 +7,7 @@ export declare class HInputCopyButton extends PhoenixLightLitElement {
7
7
  copyValue: string;
8
8
  private _$inputToCopy;
9
9
  private _btnController;
10
+ constructor();
10
11
  connectedCallback(): void;
11
12
  private _handleCopyToClipboard;
12
13
  private _copyToClipboard;
@@ -8,7 +8,7 @@ import { INPUT_CONTROL_EVENTS } from './input_constants.js';
8
8
 
9
9
  let HInputCopyButton = class HInputCopyButton extends PhoenixLightLitElement {
10
10
  constructor() {
11
- super(...arguments);
11
+ super();
12
12
  this.hasBeenCopied = false;
13
13
  this.copyValue = '';
14
14
  this._$inputToCopy = null;
@@ -30,13 +30,13 @@ let HInputCopyButton = class HInputCopyButton extends PhoenixLightLitElement {
30
30
  this.copyValue = '';
31
31
  this.hasBeenCopied = false;
32
32
  };
33
+ this._btnController = new BtnController(this, this._handleCopyToClipboard);
33
34
  }
34
35
  connectedCallback() {
35
36
  super.connectedCallback();
36
37
  this._$inputToCopy = document.querySelector(`#${this.inputId}`);
37
38
  if (!this._$inputToCopy)
38
39
  return;
39
- this._btnController = new BtnController(this, this._handleCopyToClipboard);
40
40
  this.addEventListener('click', this._handleCopyToClipboard);
41
41
  }
42
42
  async _copyToClipboard() {
@@ -90,7 +90,8 @@ __decorate([
90
90
  __metadata("design:type", Object)
91
91
  ], HInputCopyButton.prototype, "copyValue", void 0);
92
92
  HInputCopyButton = __decorate([
93
- phoenixCustomElement('h-input-copy-button')
93
+ phoenixCustomElement('h-input-copy-button'),
94
+ __metadata("design:paramtypes", [])
94
95
  ], HInputCopyButton);
95
96
 
96
97
  export { HInputCopyButton };
@@ -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;"}
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;"}
@@ -2,7 +2,11 @@ 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 _$selectOptions;
5
6
  connectedCallback(): void;
7
+ private _handleSearchKeydown;
8
+ private _handleDispatchEventOnOptionsList;
9
+ private _handleFocusOptionOnArrowNavigation;
6
10
  private _handleInputChange;
7
11
  protected render(): TemplateResult;
8
12
  }
@@ -1,6 +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 '@dreamcommerce/utilities';
4
5
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
6
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
6
7
  import { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
@@ -11,6 +12,32 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
11
12
  constructor() {
12
13
  super(...arguments);
13
14
  this.value = '';
15
+ this._$selectOptions = null;
16
+ this._handleSearchKeydown = (ev) => {
17
+ if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
18
+ return;
19
+ this._handleFocusOptionOnArrowNavigation();
20
+ this._handleDispatchEventOnOptionsList(ev);
21
+ };
22
+ this._handleDispatchEventOnOptionsList = (ev) => {
23
+ var _a;
24
+ const arrowNavigationEvent = new KeyboardEvent('keydown', {
25
+ key: ev.key
26
+ });
27
+ (_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
28
+ };
29
+ this._handleFocusOptionOnArrowNavigation = () => {
30
+ const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
31
+ const $availableOptions = $options.filter(($option) => {
32
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
33
+ });
34
+ const $firstOption = $availableOptions.find(($option) => {
35
+ return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
36
+ });
37
+ const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
38
+ const $optionToFocus = $selectedOption || $firstOption;
39
+ $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
40
+ };
14
41
  this._handleInputChange = debounce_1(({ target }) => {
15
42
  this.value = target.value;
16
43
  this.emitCustomEvent(SELECT_SEARCH_EVENT_NAMES.search, {
@@ -21,6 +48,9 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
21
48
  connectedCallback() {
22
49
  super.connectedCallback();
23
50
  this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
51
+ // to musisz zrobić inaczej, bo jest kilka selectów na stronie
52
+ this._$selectOptions = document.querySelector('h-options');
53
+ this.addEventListener('keydown', this._handleSearchKeydown);
24
54
  }
25
55
  render() {
26
56
  return html `
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;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;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
2
- import { UiDomUtils } from '@dreamcommerce/utilities';
2
+ import '@dreamcommerce/utilities';
3
3
  import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
4
  import { phoenixCustomElement } from '../../../../core/decorators/phoenix_custom_element.js';
5
5
  import { SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
@@ -22,7 +22,6 @@ let HOptions = class HOptions extends PhoenixLightLitElement {
22
22
  });
23
23
  };
24
24
  this.setAttribute('role', 'listbox');
25
- UiDomUtils.makeNavigable(this);
26
25
  this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
27
26
  this.addEventListener(SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
28
27
  }
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -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
+ }
@@ -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
@@ -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;"}
@@ -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
+ };
@@ -0,0 +1,3 @@
1
+ import 'lit';
2
+ import '@phoenixRoot/components/form/select/select';
3
+ //# sourceMappingURL=select_toggler_keyboard_controller_types.js.map
@@ -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"}
@@ -1,5 +1,8 @@
1
1
  import { PropertyValues, TemplateResult } from 'lit';
2
+ import { HDropdown } from "../../dropdown/dropdown";
2
3
  import { HOption } from "./components/option/select_option";
4
+ import { HSelectSearch } from "./components/search/select_search";
5
+ import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
3
6
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
4
7
  import { SelectOption } from "./model/select_option";
5
8
  import type { TSelectType } from "./select_types";
@@ -28,15 +31,18 @@ export declare class HSelect extends PhoenixLightLitElement {
28
31
  private _searchValue;
29
32
  private _selectController;
30
33
  private _$options;
31
- private _$dropdown;
32
- private _$search;
34
+ $dropdown: import("lit-html/directives/ref.js").Ref<HDropdown>;
35
+ $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
33
36
  private _$optionsList;
34
37
  private _$dropdownContent;
35
38
  private _$dropdownToggler;
36
39
  private _selectContext;
37
- private _listBoxController;
40
+ listBoxController: ListBoxKeyboardController;
41
+ private _selectTogglerKeyboardController;
38
42
  private _optionsObserver;
43
+ private _selectedOptionsAriaObserver;
39
44
  private $placeholder;
45
+ private $searchLabel;
40
46
  constructor();
41
47
  updated(changedProperties: PropertyValues): void;
42
48
  private _focusElementAfterSelectOpened;
@@ -47,6 +53,7 @@ export declare class HSelect extends PhoenixLightLitElement {
47
53
  private _setupEvents;
48
54
  private _handleOptionDeselect;
49
55
  private _updateOptionsView;
56
+ private _updateLabelAria;
50
57
  private _appendNewHTMLOption;
51
58
  updateOptionAriaAttribute($option: HOption): void;
52
59
  private _removeHTMLOptions;