@shoper/phoenix_design_system 1.15.11-2 → 1.15.11-21
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 +35 -4
- 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 -1
- 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 +7 -2
- package/build/cjs/packages/phoenix/src/components/messages/base_message_content.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 +15 -62
- 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 +4 -0
- package/build/esm/packages/phoenix/src/components/messages/base_message.js +36 -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 -2
- 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 +1 -0
- package/build/esm/packages/phoenix/src/components/messages/base_message_content.js +7 -2
- package/build/esm/packages/phoenix/src/components/messages/base_message_content.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 -7
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +15 -62
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
- package/package.json +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -90
- 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 -13
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -86
- 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,6 +5,7 @@ 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
11
|
var _ListBoxKeyboardController_host, _ListBoxKeyboardController__$list, _ListBoxKeyboardController_currentOptionIndex, _ListBoxKeyboardController__$options, _ListBoxKeyboardController_listItemSelector, _ListBoxKeyboardController_keys;
|
|
@@ -16,54 +17,25 @@ class ListBoxKeyboardController {
|
|
|
16
17
|
_ListBoxKeyboardController__$options.set(this, void 0);
|
|
17
18
|
_ListBoxKeyboardController_listItemSelector.set(this, void 0);
|
|
18
19
|
_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
|
-
};
|
|
26
20
|
this._handleArrowNavigation = (event) => {
|
|
27
21
|
event.preventDefault();
|
|
28
22
|
const { key } = event;
|
|
29
|
-
const
|
|
30
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
|
|
31
|
-
});
|
|
32
|
-
const prevOptionIndex = this._findCurrentIndex();
|
|
23
|
+
const prevOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f");
|
|
33
24
|
let newOptionIndex = key === 'ArrowDown' || key === 'ArrowRight' ? this._getNextOptionIndex() : this._getPrevOptionIndex();
|
|
34
25
|
if (newOptionIndex === undefined) {
|
|
35
|
-
|
|
26
|
+
const selectedOptionIndex = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").findIndex(($option) => $option.selected);
|
|
27
|
+
newOptionIndex = selectedOptionIndex !== -1 ? selectedOptionIndex : 0;
|
|
36
28
|
}
|
|
37
29
|
if (newOptionIndex === tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f"))
|
|
38
30
|
return;
|
|
39
31
|
if (prevOptionIndex !== undefined) {
|
|
40
32
|
const $prevOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[prevOptionIndex];
|
|
41
|
-
|
|
33
|
+
utilities.UiDomUtils.makeUnnavigable($prevOption);
|
|
42
34
|
}
|
|
43
35
|
tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_currentOptionIndex, newOptionIndex, "f");
|
|
44
|
-
const $focusedOption = $
|
|
45
|
-
|
|
46
|
-
|
|
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");
|
|
36
|
+
const $focusedOption = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f")[newOptionIndex];
|
|
37
|
+
utilities.UiDomUtils.makeNavigable($focusedOption);
|
|
38
|
+
$focusedOption.focus();
|
|
67
39
|
};
|
|
68
40
|
tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController_host, host, "f");
|
|
69
41
|
tslib_es6.__classPrivateFieldSet(this, _ListBoxKeyboardController__$list, $list, "f");
|
|
@@ -73,7 +45,12 @@ class ListBoxKeyboardController {
|
|
|
73
45
|
tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").addController(this);
|
|
74
46
|
}
|
|
75
47
|
hostConnected() {
|
|
76
|
-
|
|
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
|
+
});
|
|
77
54
|
utilities.UiDomUtils.makeNavigable(tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"));
|
|
78
55
|
tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").addEventListener('focusin', (event) => {
|
|
79
56
|
if (event.target !== tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f"))
|
|
@@ -91,39 +68,15 @@ class ListBoxKeyboardController {
|
|
|
91
68
|
return undefined;
|
|
92
69
|
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") <= 0)
|
|
93
70
|
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;
|
|
105
71
|
return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") - 1;
|
|
106
72
|
}
|
|
107
73
|
_getNextOptionIndex() {
|
|
108
74
|
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === undefined)
|
|
109
75
|
return undefined;
|
|
110
|
-
|
|
111
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
|
|
112
|
-
});
|
|
113
|
-
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") === $availableOptions.length - 1)
|
|
76
|
+
if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") >= tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$options, "f").length - 1)
|
|
114
77
|
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
|
-
}
|
|
122
78
|
return tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_currentOptionIndex, "f") + 1;
|
|
123
79
|
}
|
|
124
|
-
hostDisconnected() {
|
|
125
|
-
tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController__$list, "f").removeEventListener('keydown', this._handleKeyboardNavigation);
|
|
126
|
-
}
|
|
127
80
|
}
|
|
128
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();
|
|
129
82
|
|
|
@@ -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;
|
|
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
200
|
}
|
|
221
201
|
_focusElementAfterSelectOpened() {
|
|
222
|
-
var _a;
|
|
223
|
-
const $searchInput = (_a = this
|
|
224
|
-
|
|
225
|
-
const $firstOption = $options.find(($option) => {
|
|
226
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
|
|
227
|
-
});
|
|
228
|
-
const $selectedOption = this.selectedOptions[0];
|
|
229
|
-
const $optionToFocus = $selectedOption || $firstOption;
|
|
230
|
-
$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();
|
|
231
205
|
}
|
|
232
206
|
connectedCallback() {
|
|
233
|
-
var _a, _b;
|
|
234
207
|
super.connectedCallback();
|
|
235
208
|
this.classList.add(SELECT_CSS_CLASSES.select);
|
|
236
209
|
if (!this.searchDisabled) {
|
|
237
210
|
this.classList.add(SELECT_CSS_CLASSES.selectWithSearch);
|
|
238
211
|
}
|
|
239
|
-
this.$searchLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
|
|
240
|
-
(_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
|
|
241
212
|
this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
|
|
242
213
|
this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
|
|
243
214
|
this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
|
|
244
215
|
this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
|
|
245
216
|
this._selectController.options$.subscribe(this._optionsObserver);
|
|
246
|
-
this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
|
|
247
|
-
this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
|
|
248
|
-
if (this._$optionsList.value && this._$dropdownToggler.value) {
|
|
249
|
-
(_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
|
|
250
|
-
this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
|
|
251
|
-
host: this,
|
|
252
|
-
$toggler: this._$dropdownToggler.value,
|
|
253
|
-
$list: this._$optionsList.value
|
|
254
|
-
});
|
|
255
|
-
}
|
|
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;"}
|
|
@@ -16,11 +16,15 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
|
|
|
16
16
|
private _shouldDelayClosing;
|
|
17
17
|
private _closeTimeout;
|
|
18
18
|
private _messageComponentName;
|
|
19
|
+
private _$baseMessageContent?;
|
|
19
20
|
constructor();
|
|
20
21
|
connectedCallback(messageComponentName?: string): void;
|
|
22
|
+
private _handleChildrenAriaAttributes;
|
|
21
23
|
private static _appendMessagePortal;
|
|
22
24
|
private _setupEventListeners;
|
|
23
25
|
protected _positionMessage: () => void;
|
|
26
|
+
private _toggleTooltipFromEvent;
|
|
24
27
|
open: () => void;
|
|
25
28
|
close: () => void;
|
|
29
|
+
disconnectedCallback(): void;
|
|
26
30
|
}
|