@shoper/phoenix_design_system 1.15.11-3 → 1.15.11-31
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.
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +2 -9
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -6
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +0 -30
- package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js +2 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select.js +11 -61
- package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/base_message.js +46 -3
- package/build/cjs/packages/phoenix/src/components/messages/base_message.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js +6 -3
- package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js +0 -8
- package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js +0 -10
- package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js +0 -10
- package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js +2 -0
- package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +30 -76
- package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +0 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +2 -9
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +0 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -6
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +0 -4
- package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +0 -30
- package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +2 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -10
- package/build/esm/packages/phoenix/src/components/form/select/select.js +11 -61
- package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +8 -0
- package/build/esm/packages/phoenix/src/components/messages/base_message.js +48 -5
- package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +5 -3
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message_content.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/messages/base_message_content.js +0 -8
- package/build/esm/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/messages/hints/hint.js +0 -10
- package/build/esm/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js +0 -10
- package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/portal/portal_constants.js +2 -1
- package/build/esm/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +2 -6
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +0 -1
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +3 -8
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +30 -76
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
- package/package.json +3 -3
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -96
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +0 -15
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -92
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts +0 -8
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js +0 -3
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map +0 -1
|
@@ -5,64 +5,37 @@ 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');
|
|
8
9
|
var list_box_controller_constants = require('./list_box_controller_constants.js');
|
|
9
10
|
|
|
10
|
-
var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
|
|
11
|
+
var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
|
|
11
12
|
class ListBoxKeyboardController {
|
|
12
13
|
constructor({ host, $list, listItemSelector = '[role="option"]', orientation = list_box_controller_constants.LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS.vertical }) {
|
|
13
14
|
_ListBoxKeyboardController_host.set(this, void 0);
|
|
14
15
|
_ListBoxKeyboardController__$list.set(this, void 0);
|
|
16
|
+
_ListBoxKeyboardController_currentOptionIndex.set(this, void 0);
|
|
15
17
|
_ListBoxKeyboardController__$options.set(this, void 0);
|
|
16
18
|
_ListBoxKeyboardController_listItemSelector.set(this, void 0);
|
|
17
19
|
_ListBoxKeyboardController_keys.set(this, void 0);
|
|
18
|
-
this._handleKeyboardNavigation = (ev) => {
|
|
19
|
-
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
|
|
20
|
-
this._handleArrowNavigation(ev);
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
this._handleWriteableCharacter(ev);
|
|
24
|
-
};
|
|
25
20
|
this._handleArrowNavigation = (event) => {
|
|
26
21
|
event.preventDefault();
|
|
27
22
|
const { key } = event;
|
|
28
|
-
const
|
|
29
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
|
|
30
|
-
});
|
|
31
|
-
const prevOptionIndex = this._findCurrentIndex();
|
|
23
|
+
const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
|
|
32
24
|
let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
|
|
33
25
|
if (newOptionIndex === undefined) {
|
|
34
|
-
|
|
26
|
+
const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
|
|
27
|
+
newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
|
|
35
28
|
}
|
|
36
|
-
if (newOptionIndex === this
|
|
29
|
+
if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
|
|
37
30
|
return;
|
|
38
31
|
if (prevOptionIndex !== undefined) {
|
|
39
32
|
const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
|
|
40
|
-
|
|
33
|
+
utilities.UiDomUtils.makeUnnavigable($prevOption);
|
|
41
34
|
}
|
|
42
|
-
this
|
|
43
|
-
const $focusedOption = $
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
$focusedOption.focus();
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
this._findCurrentIndex = () => {
|
|
50
|
-
const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
|
|
51
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
|
|
52
|
-
});
|
|
53
|
-
const selectedOptionIndex = $availableOptions.findIndex(($option) => $option.selected);
|
|
54
|
-
return selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
|
|
55
|
-
};
|
|
56
|
-
this._handleWriteableCharacter = (ev) => {
|
|
57
|
-
var _a;
|
|
58
|
-
const $searchInput = (_a = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
|
|
59
|
-
if (!$searchInput)
|
|
60
|
-
return;
|
|
61
|
-
$searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
|
|
62
|
-
};
|
|
63
|
-
this.calculateSelectedOptionIndex = () => {
|
|
64
|
-
const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
|
|
65
|
-
this.currentOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
|
|
35
|
+
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();
|
|
66
39
|
};
|
|
67
40
|
tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
|
|
68
41
|
tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
|
|
@@ -72,59 +45,40 @@ class ListBoxKeyboardController {
|
|
|
72
45
|
tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
|
|
73
46
|
}
|
|
74
47
|
hostConnected() {
|
|
75
|
-
|
|
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
54
|
utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
|
|
77
55
|
tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
|
|
78
56
|
if (event.target !== tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
|
|
79
57
|
return;
|
|
80
|
-
if (this
|
|
58
|
+
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
|
|
81
59
|
return;
|
|
82
|
-
const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[this
|
|
60
|
+
const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f")];
|
|
83
61
|
utilities.UiDomUtils.makeUnnavigable($prevOption);
|
|
84
|
-
this
|
|
62
|
+
tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, undefined, "f");
|
|
85
63
|
});
|
|
86
64
|
tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").forEach(($option) => utilities.UiDomUtils.makeUnnavigable($option));
|
|
87
65
|
}
|
|
88
66
|
_getPrevOptionIndex() {
|
|
89
|
-
if (this
|
|
67
|
+
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
|
|
90
68
|
return undefined;
|
|
91
|
-
if (this
|
|
92
|
-
return this
|
|
93
|
-
|
|
94
|
-
return this.currentOptionIndex;
|
|
95
|
-
const $availableOptions = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").filter(($option) => {
|
|
96
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
|
|
97
|
-
});
|
|
98
|
-
if (!!$availableOptions[this.currentOptionIndex - 1])
|
|
99
|
-
return this.currentOptionIndex - 1;
|
|
100
|
-
// bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
|
|
101
|
-
const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
|
|
102
|
-
if (newIndexOfCurrentlySelectedOption)
|
|
103
|
-
return newIndexOfCurrentlySelectedOption - 1;
|
|
104
|
-
return this.currentOptionIndex - 1;
|
|
69
|
+
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
|
|
70
|
+
return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
|
|
71
|
+
return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
|
|
105
72
|
}
|
|
106
73
|
_getNextOptionIndex() {
|
|
107
|
-
if (this
|
|
74
|
+
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
|
|
108
75
|
return undefined;
|
|
109
|
-
|
|
110
|
-
return
|
|
111
|
-
|
|
112
|
-
if (this.currentOptionIndex === $availableOptions.length - 1)
|
|
113
|
-
return this.currentOptionIndex;
|
|
114
|
-
if (this.currentOptionIndex > $availableOptions.length - 1) {
|
|
115
|
-
// bo ktoś wpisał coś w searcha i index obecnie wybranej opcji jest inny
|
|
116
|
-
const newIndexOfCurrentlySelectedOption = $availableOptions.findIndex(($option) => $option.selected);
|
|
117
|
-
if (newIndexOfCurrentlySelectedOption)
|
|
118
|
-
return newIndexOfCurrentlySelectedOption + 1;
|
|
119
|
-
return 0;
|
|
120
|
-
}
|
|
121
|
-
return this.currentOptionIndex + 1;
|
|
122
|
-
}
|
|
123
|
-
hostDisconnected() {
|
|
124
|
-
tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
|
|
76
|
+
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
|
|
77
|
+
return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
|
|
78
|
+
return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
|
|
125
79
|
}
|
|
126
80
|
}
|
|
127
|
-
_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
|
|
81
|
+
_ListBoxKeyboardController_host = new WeakMap(), _ListBoxKeyboardController__$list = new WeakMap(), _ListBoxKeyboardController_currentOptionIndex = new WeakMap(), _ListBoxKeyboardController__$options = new WeakMap(), _ListBoxKeyboardController_listItemSelector = new WeakMap(), _ListBoxKeyboardController_keys = new WeakMap();
|
|
128
82
|
|
|
129
83
|
exports.ListBoxKeyboardController = ListBoxKeyboardController;
|
|
130
84
|
//# sourceMappingURL=list_box_keyboard_controller.js.map
|
|
@@ -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;"}
|
|
@@ -17,7 +17,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
17
17
|
mobilePosition: TMobileElementPosition;
|
|
18
18
|
id: string;
|
|
19
19
|
preventFocusTrap: boolean;
|
|
20
|
-
noAutoFocus: boolean;
|
|
21
20
|
$dropdownToggler: HDropdownToggler | null;
|
|
22
21
|
$dropdownContent: HDropdownContent | null;
|
|
23
22
|
$nestedDropdownContentElements?: HDropdownContent[];
|
|
@@ -28,7 +28,6 @@ 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;
|
|
32
31
|
this._backdropController = new BackdropController();
|
|
33
32
|
this._handleClickOutside = async (target) => {
|
|
34
33
|
var _a, _b;
|
|
@@ -45,8 +44,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
45
44
|
return;
|
|
46
45
|
}
|
|
47
46
|
await this.show();
|
|
48
|
-
|
|
49
|
-
this._focusOnFirstContentElement();
|
|
47
|
+
this._focusOnFirstContentElement();
|
|
50
48
|
};
|
|
51
49
|
this.show = async () => {
|
|
52
50
|
if (this.opened)
|
|
@@ -174,8 +172,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
174
172
|
const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
|
|
175
173
|
if (isHoveredWithinDropdown && !this.opened) {
|
|
176
174
|
await this.show();
|
|
177
|
-
|
|
178
|
-
this._focusOnFirstContentElement();
|
|
175
|
+
this._focusOnFirstContentElement();
|
|
179
176
|
return;
|
|
180
177
|
}
|
|
181
178
|
if (!isHoveredWithinDropdown && this.opened)
|
|
@@ -465,10 +462,6 @@ __decorate([
|
|
|
465
462
|
property({ type: Boolean, attribute: 'prevent-focus-trap' }),
|
|
466
463
|
__metadata("design:type", Object)
|
|
467
464
|
], 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);
|
|
472
465
|
HDropdown = HDropdown_1 = __decorate([
|
|
473
466
|
phoenixCustomElement('h-dropdown'),
|
|
474
467
|
__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;"}
|
|
@@ -1,7 +1,6 @@
|
|
|
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;
|
|
5
4
|
private _btnController;
|
|
6
5
|
private _toggleElementAriaController;
|
|
7
6
|
private _$dropdown;
|
|
@@ -12,7 +12,6 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
super();
|
|
14
14
|
this.name = '';
|
|
15
|
-
this.ariaHasPopup = 'menu';
|
|
16
15
|
this._setupTogglerAria = () => {
|
|
17
16
|
this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
|
|
18
17
|
if (this._$dropdown.isOpened)
|
|
@@ -20,7 +19,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
|
|
|
20
19
|
host: this,
|
|
21
20
|
initialAriaExpandedValue: this._$dropdown.isOpened()
|
|
22
21
|
});
|
|
23
|
-
this.setAttribute('aria-haspopup',
|
|
22
|
+
this.setAttribute('aria-haspopup', 'true');
|
|
24
23
|
if (this._$dropdown.id)
|
|
25
24
|
this.setAttribute('aria-controls', this._$dropdown.id);
|
|
26
25
|
};
|
|
@@ -57,10 +56,6 @@ __decorate([
|
|
|
57
56
|
property({ type: String, reflect: true }),
|
|
58
57
|
__metadata("design:type", Object)
|
|
59
58
|
], 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);
|
|
64
59
|
HDropdownToggler = __decorate([
|
|
65
60
|
phoenixCustomElement('h-dropdown-toggler'),
|
|
66
61
|
__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;"}
|
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts
CHANGED
|
@@ -2,11 +2,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
|
|
|
2
2
|
import { TemplateResult } from 'lit';
|
|
3
3
|
export declare class HSelectSearch extends PhoenixLightLitElement {
|
|
4
4
|
value: string;
|
|
5
|
-
private _$selectOptions;
|
|
6
5
|
connectedCallback(): void;
|
|
7
|
-
private _handleSearchKeydown;
|
|
8
|
-
private _handleDispatchEventOnOptionsList;
|
|
9
|
-
private _handleFocusOptionOnArrowNavigation;
|
|
10
6
|
private _handleInputChange;
|
|
11
7
|
protected render(): TemplateResult;
|
|
12
8
|
}
|
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
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';
|
|
5
4
|
import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
6
5
|
import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
|
|
7
6
|
import { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
|
|
@@ -12,32 +11,6 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
|
|
|
12
11
|
constructor() {
|
|
13
12
|
super(...arguments);
|
|
14
13
|
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
|
-
};
|
|
41
14
|
this._handleInputChange = debounce_1(({ target }) => {
|
|
42
15
|
this.value = target.value;
|
|
43
16
|
this.emitCustomEvent(SELECT_SEARCH_EVENT_NAMES.search, {
|
|
@@ -48,9 +21,6 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
|
|
|
48
21
|
connectedCallback() {
|
|
49
22
|
super.connectedCallback();
|
|
50
23
|
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);
|
|
54
24
|
}
|
|
55
25
|
render() {
|
|
56
26
|
return html `
|
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
|
|
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,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import '@dreamcommerce/utilities';
|
|
2
|
+
import { UiDomUtils } from '@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,6 +22,7 @@ let HOptions = class HOptions extends PhoenixLightLitElement {
|
|
|
22
22
|
});
|
|
23
23
|
};
|
|
24
24
|
this.setAttribute('role', 'listbox');
|
|
25
|
+
UiDomUtils.makeNavigable(this);
|
|
25
26
|
this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
|
|
26
27
|
this.addEventListener(SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
|
|
27
28
|
}
|
package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map
CHANGED
|
@@ -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;"}
|
|
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,8 +1,5 @@
|
|
|
1
1
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
2
|
-
import { HDropdown } from "../../dropdown/dropdown";
|
|
3
2
|
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";
|
|
6
3
|
import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
7
4
|
import { SelectOption } from "./model/select_option";
|
|
8
5
|
import type { TSelectType } from "./select_types";
|
|
@@ -31,18 +28,15 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
31
28
|
private _searchValue;
|
|
32
29
|
private _selectController;
|
|
33
30
|
private _$options;
|
|
34
|
-
$dropdown
|
|
35
|
-
$search
|
|
31
|
+
private _$dropdown;
|
|
32
|
+
private _$search;
|
|
36
33
|
private _$optionsList;
|
|
37
34
|
private _$dropdownContent;
|
|
38
35
|
private _$dropdownToggler;
|
|
39
36
|
private _selectContext;
|
|
40
|
-
|
|
41
|
-
private _selectTogglerKeyboardController;
|
|
37
|
+
private _listBoxController;
|
|
42
38
|
private _optionsObserver;
|
|
43
|
-
private _selectedOptionsAriaObserver;
|
|
44
39
|
private $placeholder;
|
|
45
|
-
private $searchLabel;
|
|
46
40
|
constructor();
|
|
47
41
|
updated(changedProperties: PropertyValues): void;
|
|
48
42
|
private _focusElementAfterSelectOpened;
|
|
@@ -53,7 +47,6 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
53
47
|
private _setupEvents;
|
|
54
48
|
private _handleOptionDeselect;
|
|
55
49
|
private _updateOptionsView;
|
|
56
|
-
private _updateLabelAria;
|
|
57
50
|
private _appendNewHTMLOption;
|
|
58
51
|
updateOptionAriaAttribute($option: HOption): void;
|
|
59
52
|
private _removeHTMLOptions;
|
|
@@ -25,7 +25,6 @@ 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';
|
|
29
28
|
|
|
30
29
|
let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
31
30
|
constructor() {
|
|
@@ -40,8 +39,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
40
39
|
this.ariaLabelledby = '';
|
|
41
40
|
this._searchValue = '';
|
|
42
41
|
this._$options = new Map();
|
|
43
|
-
this
|
|
44
|
-
this
|
|
42
|
+
this._$dropdown = createRef();
|
|
43
|
+
this._$search = createRef();
|
|
45
44
|
this._$optionsList = createRef();
|
|
46
45
|
this._$dropdownContent = createRef();
|
|
47
46
|
this._$dropdownToggler = createRef();
|
|
@@ -102,18 +101,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
102
101
|
this.updateOptionAriaAttribute($option);
|
|
103
102
|
});
|
|
104
103
|
};
|
|
105
|
-
this._updateLabelAria = (options) => {
|
|
106
|
-
var _a, _b;
|
|
107
|
-
if (!this.$searchLabel)
|
|
108
|
-
return;
|
|
109
|
-
(_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
|
|
110
|
-
this.$searchLabel.innerHTML = `
|
|
111
|
-
${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
|
|
112
|
-
<span id="value-label" class="sr-only">
|
|
113
|
-
${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
|
|
114
|
-
</span>
|
|
115
|
-
`;
|
|
116
|
-
};
|
|
117
104
|
this._handleOptionClicked = ({ detail }) => {
|
|
118
105
|
if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
|
|
119
106
|
return;
|
|
@@ -129,11 +116,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
129
116
|
});
|
|
130
117
|
};
|
|
131
118
|
this._handleDropdownHidden = () => {
|
|
132
|
-
var _a
|
|
119
|
+
var _a;
|
|
133
120
|
this._searchValue = '';
|
|
134
121
|
this.opened = false;
|
|
135
122
|
(_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
|
|
136
|
-
(_b = this._$dropdownToggler.value) === null || _b === void 0 ? void 0 : _b.focus();
|
|
137
123
|
};
|
|
138
124
|
this._manageSelectFocusAria = (ev) => {
|
|
139
125
|
var _a;
|
|
@@ -149,7 +135,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
149
135
|
var _a;
|
|
150
136
|
if (!this.opened)
|
|
151
137
|
return;
|
|
152
|
-
(_a = this
|
|
138
|
+
(_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
|
|
153
139
|
};
|
|
154
140
|
this._clearOptions = () => {
|
|
155
141
|
this._selectController.deselectAll();
|
|
@@ -193,7 +179,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
193
179
|
return Array.from(this._$options.values());
|
|
194
180
|
}
|
|
195
181
|
updated(changedProperties) {
|
|
196
|
-
var _a, _b;
|
|
197
182
|
super.updated(changedProperties);
|
|
198
183
|
if (changedProperties.has('opened')) {
|
|
199
184
|
if (this.opened) {
|
|
@@ -207,52 +192,28 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
207
192
|
if (changedProperties.has('optionsList')) {
|
|
208
193
|
this._updateOptions();
|
|
209
194
|
}
|
|
210
|
-
if (this._$optionsList.value)
|
|
211
|
-
|
|
212
|
-
this.listBoxController = new ListBoxKeyboardController({
|
|
195
|
+
if (this._$optionsList.value && !this._listBoxController)
|
|
196
|
+
this._listBoxController = new ListBoxKeyboardController({
|
|
213
197
|
host: this,
|
|
214
198
|
$list: this._$optionsList.value
|
|
215
199
|
});
|
|
216
|
-
}
|
|
217
|
-
if (this.listBoxController) {
|
|
218
|
-
this.listBoxController.calculateSelectedOptionIndex();
|
|
219
|
-
}
|
|
220
|
-
if (this._$optionsList.value && this._$dropdownToggler.value) {
|
|
221
|
-
(_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
|
|
222
|
-
this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
|
|
223
|
-
host: this,
|
|
224
|
-
$toggler: this._$dropdownToggler.value,
|
|
225
|
-
$list: this._$optionsList.value
|
|
226
|
-
});
|
|
227
|
-
}
|
|
228
200
|
}
|
|
229
201
|
_focusElementAfterSelectOpened() {
|
|
230
|
-
var _a;
|
|
231
|
-
const $searchInput = (_a = this
|
|
232
|
-
|
|
233
|
-
const $firstOption = $options.find(($option) => {
|
|
234
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
|
|
235
|
-
});
|
|
236
|
-
const $selectedOption = this.selectedOptions[0];
|
|
237
|
-
const $optionToFocus = $selectedOption || $firstOption;
|
|
238
|
-
$searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
|
|
202
|
+
var _a, _b;
|
|
203
|
+
const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
|
|
204
|
+
$searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
|
|
239
205
|
}
|
|
240
206
|
connectedCallback() {
|
|
241
|
-
var _a;
|
|
242
207
|
super.connectedCallback();
|
|
243
208
|
this.classList.add(SELECT_CSS_CLASSES.select);
|
|
244
209
|
if (!this.searchDisabled) {
|
|
245
210
|
this.classList.add(SELECT_CSS_CLASSES.selectWithSearch);
|
|
246
211
|
}
|
|
247
|
-
this.$searchLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
|
|
248
|
-
(_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
|
|
249
212
|
this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
|
|
250
213
|
this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
|
|
251
214
|
this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
|
|
252
215
|
this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
|
|
253
216
|
this._selectController.options$.subscribe(this._optionsObserver);
|
|
254
|
-
this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
|
|
255
|
-
this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
|
|
256
217
|
this._updateOptions();
|
|
257
218
|
this._setupEvents();
|
|
258
219
|
}
|
|
@@ -282,10 +243,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
282
243
|
SelectControlUtils.appendHTMLOption($option, $list, position);
|
|
283
244
|
}
|
|
284
245
|
updateOptionAriaAttribute($option) {
|
|
285
|
-
if (!this.multiple) {
|
|
286
|
-
const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
|
|
287
|
-
$options.forEach(($option) => ($option.removeAttribute('aria-selected')));
|
|
288
|
-
}
|
|
289
246
|
$option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
|
|
290
247
|
}
|
|
291
248
|
_removeHTMLOptions(optionsValues) {
|
|
@@ -295,12 +252,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
295
252
|
const option = this._selectController.getOption(value);
|
|
296
253
|
if (!option)
|
|
297
254
|
return;
|
|
298
|
-
const $selectedOption = this._$options.get(option.value);
|
|
299
|
-
const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
|
|
300
|
-
if ($selectedOptionLink) {
|
|
301
|
-
$selectedOptionLink.click();
|
|
302
|
-
return;
|
|
303
|
-
}
|
|
304
255
|
this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
|
|
305
256
|
if (!this.multiple)
|
|
306
257
|
this._closeSelect();
|
|
@@ -351,14 +302,13 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
351
302
|
const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
|
|
352
303
|
return html `
|
|
353
304
|
<h-dropdown
|
|
354
|
-
${ref(this
|
|
305
|
+
${ref(this._$dropdown)}
|
|
355
306
|
@showed=${() => (this.opened = true)}
|
|
356
307
|
@hidden=${this._handleDropdownHidden}
|
|
357
308
|
name="${this.controlName}"
|
|
358
309
|
offset=${this.offset}
|
|
359
310
|
content-width="full"
|
|
360
311
|
prevent-focus-trap
|
|
361
|
-
no-autofocus
|
|
362
312
|
>
|
|
363
313
|
<h-dropdown-toggler
|
|
364
314
|
${ref(this._$dropdownToggler)}
|
|
@@ -386,7 +336,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
386
336
|
${isSearchEnabled
|
|
387
337
|
? html ` <h-select-search
|
|
388
338
|
class=${SELECT_CSS_CLASSES.selectSearch}
|
|
389
|
-
${ref(this
|
|
339
|
+
${ref(this._$search)}
|
|
390
340
|
.value=${this._searchValue}
|
|
391
341
|
@search=${this._handleSearch}
|
|
392
342
|
></h-select-search>`
|
|
@@ -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;
|
|
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;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { IBaseMessage } from './base_message_types';
|
|
2
2
|
import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
3
3
|
import type { TDirection } from '@dreamcommerce/utilities';
|
|
4
|
+
import { PropertyValues, TemplateResult } from 'lit';
|
|
4
5
|
export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
|
|
5
6
|
opened: boolean;
|
|
6
7
|
portalTarget: string;
|
|
@@ -8,6 +9,7 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
|
|
|
8
9
|
offset: number;
|
|
9
10
|
mouseonly: boolean;
|
|
10
11
|
tabindex: string;
|
|
12
|
+
private _messageId;
|
|
11
13
|
private _positionController;
|
|
12
14
|
private _clickOutsideController;
|
|
13
15
|
private _$messageContent;
|
|
@@ -16,11 +18,17 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
|
|
|
16
18
|
private _shouldDelayClosing;
|
|
17
19
|
private _closeTimeout;
|
|
18
20
|
private _messageComponentName;
|
|
21
|
+
private _$baseMessageContent?;
|
|
19
22
|
constructor();
|
|
20
23
|
connectedCallback(messageComponentName?: string): void;
|
|
24
|
+
firstUpdated(props: PropertyValues): void;
|
|
25
|
+
private _handleChildrenAriaAttributes;
|
|
21
26
|
private static _appendMessagePortal;
|
|
22
27
|
private _setupEventListeners;
|
|
23
28
|
protected _positionMessage: () => void;
|
|
24
29
|
open: () => void;
|
|
30
|
+
private _closeFromKeyboard;
|
|
25
31
|
close: () => void;
|
|
32
|
+
disconnectedCallback(): void;
|
|
33
|
+
protected render(): TemplateResult;
|
|
26
34
|
}
|