@shoper/phoenix_design_system 1.11.2-1 → 1.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/{packages/phoenix/external → external}/classnames/index.js +10 -16
- package/build/{esm/packages/phoenix → cjs}/external/classnames/index.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +36 -30
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -20
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +24 -13
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/input/input.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/input/input.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/radio/radio.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/radio/radio.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/switch/switch.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/switch/switch.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/textarea/textarea.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/textarea/textarea.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/icon/icon.js +1 -1
- package/build/cjs/packages/phoenix/src/components/icon/icon.js.map +1 -1
- package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js +2 -13
- package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js.map +1 -1
- package/build/esm/{packages/phoenix/external → external}/classnames/index.js +10 -16
- package/build/{cjs/packages/phoenix → esm}/external/classnames/index.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +4 -3
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +37 -31
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts +1 -7
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -20
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +2 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +25 -14
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/input/input.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/input/input.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/radio/radio.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/radio/radio.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/switch/switch.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/switch/switch.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/textarea/textarea.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/textarea/textarea.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/icon/icon.js +1 -1
- package/build/esm/packages/phoenix/src/components/icon/icon.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.d.ts +1 -2
- package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js +2 -13
- package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller_types.d.ts +0 -1
- package/package.json +1 -1
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var _commonjsHelpers = require('
|
|
5
|
+
var _commonjsHelpers = require('../../_virtual/_commonjsHelpers.js');
|
|
6
6
|
|
|
7
7
|
/*!
|
|
8
|
-
Copyright (c)
|
|
8
|
+
Copyright (c) 2017 Jed Watson.
|
|
9
9
|
Licensed under the MIT License (MIT), see
|
|
10
10
|
http://jedwatson.github.io/classnames
|
|
11
11
|
*/
|
|
@@ -17,7 +17,7 @@ var classnames = _commonjsHelpers.createCommonjsModule(function (module) {
|
|
|
17
17
|
|
|
18
18
|
var hasOwn = {}.hasOwnProperty;
|
|
19
19
|
|
|
20
|
-
function classNames() {
|
|
20
|
+
function classNames () {
|
|
21
21
|
var classes = [];
|
|
22
22
|
|
|
23
23
|
for (var i = 0; i < arguments.length; i++) {
|
|
@@ -28,22 +28,16 @@ var classnames = _commonjsHelpers.createCommonjsModule(function (module) {
|
|
|
28
28
|
|
|
29
29
|
if (argType === 'string' || argType === 'number') {
|
|
30
30
|
classes.push(arg);
|
|
31
|
-
} else if (Array.isArray(arg)) {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
classes.push(inner);
|
|
36
|
-
}
|
|
31
|
+
} else if (Array.isArray(arg) && arg.length) {
|
|
32
|
+
var inner = classNames.apply(null, arg);
|
|
33
|
+
if (inner) {
|
|
34
|
+
classes.push(inner);
|
|
37
35
|
}
|
|
38
36
|
} else if (argType === 'object') {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
classes.push(key);
|
|
43
|
-
}
|
|
37
|
+
for (var key in arg) {
|
|
38
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
39
|
+
classes.push(key);
|
|
44
40
|
}
|
|
45
|
-
} else {
|
|
46
|
-
classes.push(arg.toString());
|
|
47
41
|
}
|
|
48
42
|
}
|
|
49
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -12,7 +12,6 @@ var litHtml = require('lit-html');
|
|
|
12
12
|
var global_constants = require('../../global_constants.js');
|
|
13
13
|
var dropdown_constants = require('./dropdown_constants.js');
|
|
14
14
|
var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
|
|
15
|
-
var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
|
|
16
15
|
var portal_constants = require('../portal/portal_constants.js');
|
|
17
16
|
var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
|
|
18
17
|
var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
|
|
@@ -30,7 +29,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
30
29
|
this.transition = 'direction';
|
|
31
30
|
this.offset = 0;
|
|
32
31
|
this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
|
|
33
|
-
this.id = v4['default']();
|
|
34
32
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
35
33
|
this._handleClickOutside = async (target) => {
|
|
36
34
|
var _a, _b;
|
|
@@ -138,31 +136,44 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
138
136
|
return;
|
|
139
137
|
await this.hide();
|
|
140
138
|
};
|
|
141
|
-
this.
|
|
142
|
-
|
|
143
|
-
if (
|
|
139
|
+
this._handleForwardFocus = async (ev) => {
|
|
140
|
+
// if (!this.opened) this._handleFocusOnNextElement(ev);
|
|
141
|
+
if (!this.opened || ev.shiftKey)
|
|
144
142
|
return;
|
|
145
|
-
const $
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
(_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
|
|
152
|
-
}
|
|
143
|
+
const $focusableElementsWithinDropdownContent = utilities.UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
|
|
144
|
+
const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
|
|
145
|
+
const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
|
|
146
|
+
const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
|
|
147
|
+
if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
|
|
148
|
+
this._handleFocusOnNextElement(ev);
|
|
153
149
|
};
|
|
154
|
-
this.
|
|
155
|
-
var _a
|
|
156
|
-
|
|
150
|
+
this._handleFocusOnNextElement = async (ev) => {
|
|
151
|
+
var _a;
|
|
152
|
+
ev.preventDefault();
|
|
153
|
+
const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
|
|
154
|
+
const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
|
|
155
|
+
const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
|
|
156
|
+
await this._hideDropdownsSequentially();
|
|
157
|
+
await this.hide();
|
|
158
|
+
this._focusOnNextElementAfterToggler($nextElementToFocus);
|
|
159
|
+
};
|
|
160
|
+
this._focusOnNextElementAfterToggler = ($elementToFocus) => {
|
|
161
|
+
var _a;
|
|
162
|
+
const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(dropdown_constants.DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
|
|
163
|
+
if (isTogglerLastChildOfPreviousDropdown) {
|
|
164
|
+
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
|
|
157
165
|
return;
|
|
158
|
-
const $target = ev.target;
|
|
159
|
-
if (($target === this.$dropdownToggler || ((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)))) {
|
|
160
|
-
(_b = this.$dropdownContent.focusSentinelEnd.value) === null || _b === void 0 ? void 0 : _b.focus();
|
|
161
|
-
}
|
|
162
|
-
if ($target === this.$dropdownContent.focusSentinelStart.value) {
|
|
163
|
-
ev.preventDefault();
|
|
164
|
-
(_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
|
|
165
166
|
}
|
|
167
|
+
$elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
|
|
168
|
+
};
|
|
169
|
+
this._handleBackwardFocus = async (ev) => {
|
|
170
|
+
var _a;
|
|
171
|
+
const $firstFocusableElement = this.$dropdownContent && utilities.UiDomUtils.getFocusableElement(this.$dropdownContent);
|
|
172
|
+
if (document.activeElement !== $firstFocusableElement)
|
|
173
|
+
return;
|
|
174
|
+
ev.preventDefault();
|
|
175
|
+
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
|
|
176
|
+
await this._hideDropdownsSequentially();
|
|
166
177
|
};
|
|
167
178
|
this._hoverToggle = async (ev) => {
|
|
168
179
|
if (window.innerWidth < global_constants.BREAKPOINTS.xs)
|
|
@@ -205,14 +216,13 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
205
216
|
host: this,
|
|
206
217
|
target: document.body,
|
|
207
218
|
keys: ['tab'],
|
|
208
|
-
callback: this.
|
|
219
|
+
callback: this._handleForwardFocus
|
|
209
220
|
});
|
|
210
221
|
new keystrokes_controller.KeystrokesController({
|
|
211
222
|
host: this,
|
|
212
223
|
target: document.body,
|
|
213
224
|
keys: [['shift', 'tab']],
|
|
214
|
-
callback: this.
|
|
215
|
-
containerSelectors: ['h-dropdown', 'h-dropdown-content']
|
|
225
|
+
callback: this._handleBackwardFocus
|
|
216
226
|
});
|
|
217
227
|
}
|
|
218
228
|
async connectedCallback() {
|
|
@@ -379,10 +389,6 @@ tslib_es6.__decorate([
|
|
|
379
389
|
decorators_js.property({ type: String, attribute: 'mobile-position' }),
|
|
380
390
|
tslib_es6.__metadata("design:type", String)
|
|
381
391
|
], exports.HDropdown.prototype, "mobilePosition", void 0);
|
|
382
|
-
tslib_es6.__decorate([
|
|
383
|
-
decorators_js.property({ type: String, attribute: 'id', reflect: true }),
|
|
384
|
-
tslib_es6.__metadata("design:type", Object)
|
|
385
|
-
], exports.HDropdown.prototype, "id", void 0);
|
|
386
392
|
exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
|
|
387
393
|
phoenix_custom_element.phoenixCustomElement('h-dropdown'),
|
|
388
394
|
tslib_es6.__metadata("design:paramtypes", [])
|
|
@@ -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
|
|
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,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;"}
|
|
@@ -7,44 +7,25 @@ var lit = require('lit');
|
|
|
7
7
|
var decorators = require('lit/decorators');
|
|
8
8
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
10
|
-
var ref_js = require('lit-html/directives/ref.js');
|
|
11
10
|
var dropdown_constants = require('./dropdown_constants.js');
|
|
12
11
|
|
|
13
12
|
exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
14
13
|
constructor() {
|
|
15
14
|
super();
|
|
16
15
|
this.name = '';
|
|
17
|
-
this.focusSentinelStart = ref_js.createRef();
|
|
18
|
-
this.focusSentinelEnd = ref_js.createRef();
|
|
19
|
-
this._contentContainer = ref_js.createRef();
|
|
20
16
|
this.slot = this.hasAttribute('slot') ? this.slot : 'content';
|
|
21
|
-
this._initialChildren = Array.from(this.childNodes);
|
|
22
17
|
}
|
|
23
18
|
connectedCallback() {
|
|
24
19
|
super.connectedCallback();
|
|
25
20
|
this.classList.add(dropdown_constants.DROPDOWN_CSS_CLASSES.content);
|
|
26
21
|
this.setAttribute('role', 'menu');
|
|
27
|
-
this.setAttribute('aria-modal', 'true');
|
|
28
22
|
Array.from(this.children).forEach((element) => {
|
|
29
23
|
element.setAttribute('role', 'menuitem');
|
|
30
24
|
});
|
|
31
25
|
}
|
|
32
|
-
firstUpdated(_changedProperties) {
|
|
33
|
-
super.firstUpdated(_changedProperties);
|
|
34
|
-
if (this._contentContainer.value) {
|
|
35
|
-
this._initialChildren.forEach((child) => {
|
|
36
|
-
var _a;
|
|
37
|
-
(_a = this._contentContainer.value) === null || _a === void 0 ? void 0 : _a.appendChild(child);
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
26
|
render() {
|
|
42
27
|
super.render();
|
|
43
|
-
return lit.html `
|
|
44
|
-
<div tabindex="0" ${ref_js.ref(this.focusSentinelStart)}></div>
|
|
45
|
-
<div ${ref_js.ref(this._contentContainer)}></div>
|
|
46
|
-
<div tabindex="0" ${ref_js.ref(this.focusSentinelEnd)}></div>
|
|
47
|
-
`;
|
|
28
|
+
return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
|
|
48
29
|
}
|
|
49
30
|
};
|
|
50
31
|
tslib_es6.__decorate([
|
|
@@ -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;
|
|
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;"}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
6
|
var decorators = require('lit/decorators');
|
|
7
|
-
require('@dreamcommerce/utilities');
|
|
7
|
+
var utilities = require('@dreamcommerce/utilities');
|
|
8
8
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
10
10
|
var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
|
|
@@ -16,17 +16,6 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
|
|
|
16
16
|
constructor() {
|
|
17
17
|
super();
|
|
18
18
|
this.name = '';
|
|
19
|
-
this._setupTogglerAria = () => {
|
|
20
|
-
this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
|
|
21
|
-
if (this._$dropdown.isOpened)
|
|
22
|
-
this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
|
|
23
|
-
host: this,
|
|
24
|
-
initialAriaExpandedValue: this._$dropdown.isOpened()
|
|
25
|
-
});
|
|
26
|
-
this.setAttribute('aria-haspopup', 'true');
|
|
27
|
-
if (this._$dropdown.id)
|
|
28
|
-
this.setAttribute('aria-controls', this._$dropdown.id);
|
|
29
|
-
};
|
|
30
19
|
this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
|
|
31
20
|
ev.stopImmediatePropagation();
|
|
32
21
|
this._dispatchToggleDropdownEvent(ev);
|
|
@@ -40,6 +29,18 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
|
|
|
40
29
|
ev.preventDefault();
|
|
41
30
|
this.emitCustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle);
|
|
42
31
|
};
|
|
32
|
+
this._handleFocusToOpenedDropdown = async (ev) => {
|
|
33
|
+
if (ev.target !== this)
|
|
34
|
+
return;
|
|
35
|
+
const isOpened = this._$dropdown.isOpened();
|
|
36
|
+
if (!isOpened)
|
|
37
|
+
return;
|
|
38
|
+
const $dropdownContent = document.querySelector(`${dropdown_constants.DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
|
|
39
|
+
if (!$dropdownContent)
|
|
40
|
+
return;
|
|
41
|
+
ev.preventDefault();
|
|
42
|
+
utilities.UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
|
|
43
|
+
};
|
|
43
44
|
this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
|
|
44
45
|
this.className = `${dropdown_constants.DROPDOWN_CSS_CLASSES.toggler} ${this.className}`;
|
|
45
46
|
}
|
|
@@ -47,7 +48,13 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
|
|
|
47
48
|
var _a;
|
|
48
49
|
super.connectedCallback();
|
|
49
50
|
this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
|
|
50
|
-
this.
|
|
51
|
+
this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
|
|
52
|
+
if (this._$dropdown.isOpened)
|
|
53
|
+
this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
|
|
54
|
+
host: this,
|
|
55
|
+
initialAriaExpandedValue: this._$dropdown.isOpened()
|
|
56
|
+
});
|
|
57
|
+
document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
|
|
51
58
|
const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(dropdown_constants.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
|
|
52
59
|
if (hasToggleOnHover) {
|
|
53
60
|
this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
|
|
@@ -55,6 +62,10 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
|
|
|
55
62
|
}
|
|
56
63
|
this.addEventListener('click', this._dispatchToggleDropdownEvent);
|
|
57
64
|
}
|
|
65
|
+
disconnectedCallback() {
|
|
66
|
+
super.disconnectedCallback();
|
|
67
|
+
document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
|
|
68
|
+
}
|
|
58
69
|
};
|
|
59
70
|
tslib_es6.__decorate([
|
|
60
71
|
decorators.property({ type: String, reflect: true }),
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -6,7 +6,7 @@ var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
|
|
|
6
6
|
var decorators = require('lit/decorators');
|
|
7
7
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
8
8
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
9
|
-
var index = require('
|
|
9
|
+
var index = require('../../../../../../external/classnames/index.js');
|
|
10
10
|
var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
|
|
11
11
|
var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
|
|
12
12
|
var checkbox_constants = require('./checkbox_constants.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,gDAAoD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -6,7 +6,7 @@ var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
|
|
|
6
6
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
7
7
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
8
8
|
var decorators_js = require('@lit/reactive-element/decorators.js');
|
|
9
|
-
var index = require('
|
|
9
|
+
var index = require('../../../../../../external/classnames/index.js');
|
|
10
10
|
var litHtml = require('lit-html');
|
|
11
11
|
var ref_js = require('lit-html/directives/ref.js');
|
|
12
12
|
var ifDefined_js = require('lit-html/directives/if-defined.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,gDAAoD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,7 +7,7 @@ var lit = require('lit');
|
|
|
7
7
|
var decorators = require('lit/decorators');
|
|
8
8
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
10
|
-
var index = require('
|
|
10
|
+
var index = require('../../../../../../external/classnames/index.js');
|
|
11
11
|
var input_constants = require('../input/input_constants.js');
|
|
12
12
|
var color_swatches_control_constants = require('./color_swatches_control_constants.js');
|
|
13
13
|
var color_swatches_constants = require('../../color_swatches/color_swatches_constants.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,gDAAoD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,7 +7,7 @@ var lit = require('lit');
|
|
|
7
7
|
var decorators = require('lit/decorators');
|
|
8
8
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
10
|
-
var index = require('
|
|
10
|
+
var index = require('../../../../../../external/classnames/index.js');
|
|
11
11
|
var ref_js = require('lit-html/directives/ref.js');
|
|
12
12
|
var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
|
|
13
13
|
var file_picker_constants = require('./file_picker_constants.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,gDAAoD;AACxE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -6,7 +6,7 @@ var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
|
|
|
6
6
|
var decorators = require('lit/decorators');
|
|
7
7
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
8
8
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
9
|
-
var index = require('
|
|
9
|
+
var index = require('../../../../../../external/classnames/index.js');
|
|
10
10
|
var input_constants = require('./input_constants.js');
|
|
11
11
|
var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
|
|
12
12
|
var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,gDAAoD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -6,7 +6,7 @@ var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
|
|
|
6
6
|
var decorators = require('lit/decorators');
|
|
7
7
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
8
8
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
9
|
-
var index = require('
|
|
9
|
+
var index = require('../../../../../../external/classnames/index.js');
|
|
10
10
|
var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
|
|
11
11
|
var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
|
|
12
12
|
var checkbox_constants = require('../checkbox/checkbox_constants.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,gDAAoD;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;"}
|
|
@@ -6,7 +6,7 @@ var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
|
|
|
6
6
|
var decorators = require('lit/decorators');
|
|
7
7
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
8
8
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
9
|
-
var index = require('
|
|
9
|
+
var index = require('../../../../../../external/classnames/index.js');
|
|
10
10
|
var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
|
|
11
11
|
var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
|
|
12
12
|
var checkbox_constants = require('../checkbox/checkbox_constants.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,gDAAoD;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;"}
|
|
@@ -6,7 +6,7 @@ var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
|
|
|
6
6
|
var decorators = require('lit/decorators');
|
|
7
7
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
8
8
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
9
|
-
var index = require('
|
|
9
|
+
var index = require('../../../../../../external/classnames/index.js');
|
|
10
10
|
var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
|
|
11
11
|
var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
|
|
12
12
|
var textarea_constants = require('./textarea_constants.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,gDAAoD;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;"}
|
|
@@ -8,7 +8,7 @@ var decorators = require('lit/decorators');
|
|
|
8
8
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
10
10
|
var icon_constants = require('./icon_constants.js');
|
|
11
|
-
var index = require('
|
|
11
|
+
var index = require('../../../../../external/classnames/index.js');
|
|
12
12
|
var namespaced_attribute_directive = require('../../directives/namespaced_attribute_directive.js');
|
|
13
13
|
var observer = require('../../core/classes/observer/observer.js');
|
|
14
14
|
var subject = require('../../core/classes/subject/subject.js');
|
|
@@ -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,oBAAoB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA,oBAAoB,6CAAiD;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js
CHANGED
|
@@ -7,21 +7,11 @@ require('lit');
|
|
|
7
7
|
|
|
8
8
|
var _KeystrokesController_host, _KeystrokesController_target;
|
|
9
9
|
class KeystrokesController {
|
|
10
|
-
constructor({ host, keys, callback, target
|
|
10
|
+
constructor({ host, keys, callback, target }) {
|
|
11
11
|
_KeystrokesController_host.set(this, void 0);
|
|
12
12
|
_KeystrokesController_target.set(this, void 0);
|
|
13
13
|
this._buffer = [];
|
|
14
|
-
this._clearBuffer = (
|
|
15
|
-
if (!this._containerSelectors) {
|
|
16
|
-
this._buffer = [];
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
const $newFocusedElement = ev.relatedTarget;
|
|
20
|
-
if ($newFocusedElement) {
|
|
21
|
-
const isNewFocusedElementAChild = !!this._containerSelectors.find((containerSelector) => !!$newFocusedElement.closest(containerSelector));
|
|
22
|
-
if (isNewFocusedElementAChild)
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
14
|
+
this._clearBuffer = () => {
|
|
25
15
|
this._buffer = [];
|
|
26
16
|
};
|
|
27
17
|
this._saveKey = (ev) => {
|
|
@@ -89,7 +79,6 @@ class KeystrokesController {
|
|
|
89
79
|
tslib_es6.__classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
|
|
90
80
|
this._keys = keys;
|
|
91
81
|
this._callback = callback;
|
|
92
|
-
this._containerSelectors = containerSelectors;
|
|
93
82
|
tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
|
|
94
83
|
}
|
|
95
84
|
hostConnected() {
|
|
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { createCommonjsModule } from '
|
|
1
|
+
import { createCommonjsModule } from '../../_virtual/_commonjsHelpers.js';
|
|
2
2
|
|
|
3
3
|
/*!
|
|
4
|
-
Copyright (c)
|
|
4
|
+
Copyright (c) 2017 Jed Watson.
|
|
5
5
|
Licensed under the MIT License (MIT), see
|
|
6
6
|
http://jedwatson.github.io/classnames
|
|
7
7
|
*/
|
|
@@ -13,7 +13,7 @@ var classnames = createCommonjsModule(function (module) {
|
|
|
13
13
|
|
|
14
14
|
var hasOwn = {}.hasOwnProperty;
|
|
15
15
|
|
|
16
|
-
function classNames() {
|
|
16
|
+
function classNames () {
|
|
17
17
|
var classes = [];
|
|
18
18
|
|
|
19
19
|
for (var i = 0; i < arguments.length; i++) {
|
|
@@ -24,22 +24,16 @@ var classnames = createCommonjsModule(function (module) {
|
|
|
24
24
|
|
|
25
25
|
if (argType === 'string' || argType === 'number') {
|
|
26
26
|
classes.push(arg);
|
|
27
|
-
} else if (Array.isArray(arg)) {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
classes.push(inner);
|
|
32
|
-
}
|
|
27
|
+
} else if (Array.isArray(arg) && arg.length) {
|
|
28
|
+
var inner = classNames.apply(null, arg);
|
|
29
|
+
if (inner) {
|
|
30
|
+
classes.push(inner);
|
|
33
31
|
}
|
|
34
32
|
} else if (argType === 'object') {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
classes.push(key);
|
|
39
|
-
}
|
|
33
|
+
for (var key in arg) {
|
|
34
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
35
|
+
classes.push(key);
|
|
40
36
|
}
|
|
41
|
-
} else {
|
|
42
|
-
classes.push(arg.toString());
|
|
43
37
|
}
|
|
44
38
|
}
|
|
45
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -15,7 +15,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
15
15
|
contentWidth: TDropdownContentWidth;
|
|
16
16
|
portalTarget: string;
|
|
17
17
|
mobilePosition: TMobileElementPosition;
|
|
18
|
-
id: string;
|
|
19
18
|
$dropdownToggler: HDropdownToggler | null;
|
|
20
19
|
$dropdownContent: HDropdownContent | null;
|
|
21
20
|
$nestedDropdownContentElements?: HDropdownContent[];
|
|
@@ -41,8 +40,10 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
41
40
|
private _observeScrollToggling;
|
|
42
41
|
private _toggleScroll;
|
|
43
42
|
private _closeDropdownOnEscape;
|
|
44
|
-
private
|
|
45
|
-
private
|
|
43
|
+
private _handleForwardFocus;
|
|
44
|
+
private _handleFocusOnNextElement;
|
|
45
|
+
private _focusOnNextElementAfterToggler;
|
|
46
|
+
private _handleBackwardFocus;
|
|
46
47
|
private _hoverToggle;
|
|
47
48
|
private _isHoveredWithinDropdown;
|
|
48
49
|
private _setupInitialDropdownProperties;
|
|
@@ -6,9 +6,8 @@ import { property } from '@lit/reactive-element/decorators.js';
|
|
|
6
6
|
import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
|
|
7
7
|
import { html } from 'lit-html';
|
|
8
8
|
import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
|
|
9
|
-
import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME,
|
|
9
|
+
import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
|
|
10
10
|
import { RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
|
|
11
|
-
import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
|
|
12
11
|
import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
|
|
13
12
|
import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
|
|
14
13
|
import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
|
|
@@ -26,7 +25,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
26
25
|
this.transition = 'direction';
|
|
27
26
|
this.offset = 0;
|
|
28
27
|
this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
|
|
29
|
-
this.id = v4();
|
|
30
28
|
this._backdropController = new BackdropController();
|
|
31
29
|
this._handleClickOutside = async (target) => {
|
|
32
30
|
var _a, _b;
|
|
@@ -134,31 +132,44 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
134
132
|
return;
|
|
135
133
|
await this.hide();
|
|
136
134
|
};
|
|
137
|
-
this.
|
|
138
|
-
|
|
139
|
-
if (
|
|
135
|
+
this._handleForwardFocus = async (ev) => {
|
|
136
|
+
// if (!this.opened) this._handleFocusOnNextElement(ev);
|
|
137
|
+
if (!this.opened || ev.shiftKey)
|
|
140
138
|
return;
|
|
141
|
-
const $
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
(_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
|
|
148
|
-
}
|
|
139
|
+
const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
|
|
140
|
+
const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
|
|
141
|
+
const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
|
|
142
|
+
const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
|
|
143
|
+
if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
|
|
144
|
+
this._handleFocusOnNextElement(ev);
|
|
149
145
|
};
|
|
150
|
-
this.
|
|
151
|
-
var _a
|
|
152
|
-
|
|
146
|
+
this._handleFocusOnNextElement = async (ev) => {
|
|
147
|
+
var _a;
|
|
148
|
+
ev.preventDefault();
|
|
149
|
+
const $focusableElements = UiDomUtils.getFocusableElements(document.body);
|
|
150
|
+
const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
|
|
151
|
+
const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
|
|
152
|
+
await this._hideDropdownsSequentially();
|
|
153
|
+
await this.hide();
|
|
154
|
+
this._focusOnNextElementAfterToggler($nextElementToFocus);
|
|
155
|
+
};
|
|
156
|
+
this._focusOnNextElementAfterToggler = ($elementToFocus) => {
|
|
157
|
+
var _a;
|
|
158
|
+
const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
|
|
159
|
+
if (isTogglerLastChildOfPreviousDropdown) {
|
|
160
|
+
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
|
|
153
161
|
return;
|
|
154
|
-
const $target = ev.target;
|
|
155
|
-
if (($target === this.$dropdownToggler || ((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)))) {
|
|
156
|
-
(_b = this.$dropdownContent.focusSentinelEnd.value) === null || _b === void 0 ? void 0 : _b.focus();
|
|
157
|
-
}
|
|
158
|
-
if ($target === this.$dropdownContent.focusSentinelStart.value) {
|
|
159
|
-
ev.preventDefault();
|
|
160
|
-
(_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
|
|
161
162
|
}
|
|
163
|
+
$elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
|
|
164
|
+
};
|
|
165
|
+
this._handleBackwardFocus = async (ev) => {
|
|
166
|
+
var _a;
|
|
167
|
+
const $firstFocusableElement = this.$dropdownContent && UiDomUtils.getFocusableElement(this.$dropdownContent);
|
|
168
|
+
if (document.activeElement !== $firstFocusableElement)
|
|
169
|
+
return;
|
|
170
|
+
ev.preventDefault();
|
|
171
|
+
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
|
|
172
|
+
await this._hideDropdownsSequentially();
|
|
162
173
|
};
|
|
163
174
|
this._hoverToggle = async (ev) => {
|
|
164
175
|
if (window.innerWidth < BREAKPOINTS.xs)
|
|
@@ -201,14 +212,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
201
212
|
host: this,
|
|
202
213
|
target: document.body,
|
|
203
214
|
keys: ['tab'],
|
|
204
|
-
callback: this.
|
|
215
|
+
callback: this._handleForwardFocus
|
|
205
216
|
});
|
|
206
217
|
new KeystrokesController({
|
|
207
218
|
host: this,
|
|
208
219
|
target: document.body,
|
|
209
220
|
keys: [['shift', 'tab']],
|
|
210
|
-
callback: this.
|
|
211
|
-
containerSelectors: ['h-dropdown', 'h-dropdown-content']
|
|
221
|
+
callback: this._handleBackwardFocus
|
|
212
222
|
});
|
|
213
223
|
}
|
|
214
224
|
async connectedCallback() {
|
|
@@ -375,10 +385,6 @@ __decorate([
|
|
|
375
385
|
property({ type: String, attribute: 'mobile-position' }),
|
|
376
386
|
__metadata("design:type", String)
|
|
377
387
|
], HDropdown.prototype, "mobilePosition", void 0);
|
|
378
|
-
__decorate([
|
|
379
|
-
property({ type: String, attribute: 'id', reflect: true }),
|
|
380
|
-
__metadata("design:type", Object)
|
|
381
|
-
], HDropdown.prototype, "id", void 0);
|
|
382
388
|
HDropdown = HDropdown_1 = __decorate([
|
|
383
389
|
phoenixCustomElement('h-dropdown'),
|
|
384
390
|
__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
|
|
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,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;"}
|
|
@@ -1,14 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
2
|
import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
3
|
-
import { Ref } from 'lit-html/directives/ref.js';
|
|
4
3
|
export declare class HDropdownContent extends PhoenixLightLitElement {
|
|
5
4
|
name: string;
|
|
6
|
-
focusSentinelStart: Ref<HTMLElement>;
|
|
7
|
-
focusSentinelEnd: Ref<HTMLElement>;
|
|
8
|
-
private _contentContainer;
|
|
9
|
-
private _initialChildren;
|
|
10
5
|
constructor();
|
|
11
6
|
connectedCallback(): void;
|
|
12
|
-
firstUpdated(_changedProperties: PropertyValues): void;
|
|
13
7
|
protected render(): TemplateResult;
|
|
14
8
|
}
|
|
@@ -3,44 +3,25 @@ import { html } from 'lit';
|
|
|
3
3
|
import { property } from 'lit/decorators';
|
|
4
4
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
5
|
import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
|
|
6
|
-
import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
7
6
|
import { DROPDOWN_CSS_CLASSES } from './dropdown_constants.js';
|
|
8
7
|
|
|
9
8
|
let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
|
|
10
9
|
constructor() {
|
|
11
10
|
super();
|
|
12
11
|
this.name = '';
|
|
13
|
-
this.focusSentinelStart = createRef();
|
|
14
|
-
this.focusSentinelEnd = createRef();
|
|
15
|
-
this._contentContainer = createRef();
|
|
16
12
|
this.slot = this.hasAttribute('slot') ? this.slot : 'content';
|
|
17
|
-
this._initialChildren = Array.from(this.childNodes);
|
|
18
13
|
}
|
|
19
14
|
connectedCallback() {
|
|
20
15
|
super.connectedCallback();
|
|
21
16
|
this.classList.add(DROPDOWN_CSS_CLASSES.content);
|
|
22
17
|
this.setAttribute('role', 'menu');
|
|
23
|
-
this.setAttribute('aria-modal', 'true');
|
|
24
18
|
Array.from(this.children).forEach((element) => {
|
|
25
19
|
element.setAttribute('role', 'menuitem');
|
|
26
20
|
});
|
|
27
21
|
}
|
|
28
|
-
firstUpdated(_changedProperties) {
|
|
29
|
-
super.firstUpdated(_changedProperties);
|
|
30
|
-
if (this._contentContainer.value) {
|
|
31
|
-
this._initialChildren.forEach((child) => {
|
|
32
|
-
var _a;
|
|
33
|
-
(_a = this._contentContainer.value) === null || _a === void 0 ? void 0 : _a.appendChild(child);
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
22
|
render() {
|
|
38
23
|
super.render();
|
|
39
|
-
return html `
|
|
40
|
-
<div tabindex="0" ${ref(this.focusSentinelStart)}></div>
|
|
41
|
-
<div ${ref(this._contentContainer)}></div>
|
|
42
|
-
<div tabindex="0" ${ref(this.focusSentinelEnd)}></div>
|
|
43
|
-
`;
|
|
24
|
+
return html ` <div role="dialog">${this.getSlot('content')}</div> `;
|
|
44
25
|
}
|
|
45
26
|
};
|
|
46
27
|
__decorate([
|
|
@@ -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;
|
|
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;"}
|
|
@@ -6,8 +6,9 @@ export declare class HDropdownToggler extends PhoenixLightLitElement {
|
|
|
6
6
|
private _$dropdown;
|
|
7
7
|
constructor();
|
|
8
8
|
connectedCallback(): void;
|
|
9
|
-
private _setupTogglerAria;
|
|
10
9
|
private _dispatchToggleDropdownEventWithKeyboard;
|
|
11
10
|
private _dispatchToggleDropdownEventOnMobile;
|
|
12
11
|
private _dispatchToggleDropdownEvent;
|
|
12
|
+
private _handleFocusToOpenedDropdown;
|
|
13
|
+
disconnectedCallback(): void;
|
|
13
14
|
}
|
|
@@ -1,28 +1,17 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
2
|
import { property } from 'lit/decorators';
|
|
3
|
-
import '@dreamcommerce/utilities';
|
|
3
|
+
import { UiDomUtils } from '@dreamcommerce/utilities';
|
|
4
4
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
5
|
import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
|
|
6
6
|
import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
|
|
7
7
|
import { BREAKPOINTS } from '../../global_constants.js';
|
|
8
|
-
import {
|
|
8
|
+
import { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_CSS_CLASSES, DROPDOWN_CONTAINER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME } from './dropdown_constants.js';
|
|
9
9
|
import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
|
|
10
10
|
|
|
11
11
|
let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
super();
|
|
14
14
|
this.name = '';
|
|
15
|
-
this._setupTogglerAria = () => {
|
|
16
|
-
this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
|
|
17
|
-
if (this._$dropdown.isOpened)
|
|
18
|
-
this._toggleElementAriaController = new ToggleElementAriaController({
|
|
19
|
-
host: this,
|
|
20
|
-
initialAriaExpandedValue: this._$dropdown.isOpened()
|
|
21
|
-
});
|
|
22
|
-
this.setAttribute('aria-haspopup', 'true');
|
|
23
|
-
if (this._$dropdown.id)
|
|
24
|
-
this.setAttribute('aria-controls', this._$dropdown.id);
|
|
25
|
-
};
|
|
26
15
|
this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
|
|
27
16
|
ev.stopImmediatePropagation();
|
|
28
17
|
this._dispatchToggleDropdownEvent(ev);
|
|
@@ -36,6 +25,18 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
|
|
|
36
25
|
ev.preventDefault();
|
|
37
26
|
this.emitCustomEvent(DROPDOWN_EVENTS.toggle);
|
|
38
27
|
};
|
|
28
|
+
this._handleFocusToOpenedDropdown = async (ev) => {
|
|
29
|
+
if (ev.target !== this)
|
|
30
|
+
return;
|
|
31
|
+
const isOpened = this._$dropdown.isOpened();
|
|
32
|
+
if (!isOpened)
|
|
33
|
+
return;
|
|
34
|
+
const $dropdownContent = document.querySelector(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`);
|
|
35
|
+
if (!$dropdownContent)
|
|
36
|
+
return;
|
|
37
|
+
ev.preventDefault();
|
|
38
|
+
UiDomUtils.setFocusToFirstFocusableElementInContainer($dropdownContent);
|
|
39
|
+
};
|
|
39
40
|
this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
|
|
40
41
|
this.className = `${DROPDOWN_CSS_CLASSES.toggler} ${this.className}`;
|
|
41
42
|
}
|
|
@@ -43,7 +44,13 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
|
|
|
43
44
|
var _a;
|
|
44
45
|
super.connectedCallback();
|
|
45
46
|
this._btnController = new BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
|
|
46
|
-
this.
|
|
47
|
+
this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
|
|
48
|
+
if (this._$dropdown.isOpened)
|
|
49
|
+
this._toggleElementAriaController = new ToggleElementAriaController({
|
|
50
|
+
host: this,
|
|
51
|
+
initialAriaExpandedValue: this._$dropdown.isOpened()
|
|
52
|
+
});
|
|
53
|
+
document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
|
|
47
54
|
const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
|
|
48
55
|
if (hasToggleOnHover) {
|
|
49
56
|
this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
|
|
@@ -51,6 +58,10 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
|
|
|
51
58
|
}
|
|
52
59
|
this.addEventListener('click', this._dispatchToggleDropdownEvent);
|
|
53
60
|
}
|
|
61
|
+
disconnectedCallback() {
|
|
62
|
+
super.disconnectedCallback();
|
|
63
|
+
document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
|
|
64
|
+
}
|
|
54
65
|
};
|
|
55
66
|
__decorate([
|
|
56
67
|
property({ type: String, reflect: true }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
|
|
|
2
2
|
import { property } from 'lit/decorators';
|
|
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
|
-
import classnames from '
|
|
5
|
+
import classnames from '../../../../../../external/classnames/index.js';
|
|
6
6
|
import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
|
|
7
7
|
import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
|
|
8
8
|
import { CHECKBOX_PROPS_TO_SYNC, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
|
|
|
2
2
|
import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
3
3
|
import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
|
|
4
4
|
import { property } from '@lit/reactive-element/decorators.js';
|
|
5
|
-
import classnames from '
|
|
5
|
+
import classnames from '../../../../../../external/classnames/index.js';
|
|
6
6
|
import { html } from 'lit-html';
|
|
7
7
|
import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
8
8
|
import { ifDefined } from 'lit-html/directives/if-defined.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -3,7 +3,7 @@ import { html } from 'lit';
|
|
|
3
3
|
import { property } from 'lit/decorators';
|
|
4
4
|
import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
5
|
import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
|
|
6
|
-
import classnames from '
|
|
6
|
+
import classnames from '../../../../../../external/classnames/index.js';
|
|
7
7
|
import { INPUT_CONTROL_TYPES } from '../input/input_constants.js';
|
|
8
8
|
import { COLOR_SWATCHES_CONTROL_CSS_CLASSES, COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './color_swatches_control_constants.js';
|
|
9
9
|
import { COLOR_SWATCHES_EVENT_NAMES } from '../../color_swatches/color_swatches_constants.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -3,7 +3,7 @@ import { html, nothing } from 'lit';
|
|
|
3
3
|
import { property, state } from 'lit/decorators';
|
|
4
4
|
import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
5
|
import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
|
|
6
|
-
import classnames from '
|
|
6
|
+
import classnames from '../../../../../../external/classnames/index.js';
|
|
7
7
|
import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
8
8
|
import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
|
|
9
9
|
import { FILE_PICKER_CONTROL_CSS_CLASSES, FILE_ITEM_EVENT_NAMES, FILE_PICKER_LABEL_EVENT_NAMES } from './file_picker_constants.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
|
|
|
2
2
|
import { property } from 'lit/decorators';
|
|
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
|
-
import classnames from '
|
|
5
|
+
import classnames from '../../../../../../external/classnames/index.js';
|
|
6
6
|
import { INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
|
|
7
7
|
import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
|
|
8
8
|
import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
|
|
|
2
2
|
import { property } from 'lit/decorators';
|
|
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
|
-
import classnames from '
|
|
5
|
+
import classnames from '../../../../../../external/classnames/index.js';
|
|
6
6
|
import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
|
|
7
7
|
import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
|
|
8
8
|
import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
|
|
|
2
2
|
import { property } from 'lit/decorators';
|
|
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
|
-
import classnames from '
|
|
5
|
+
import classnames from '../../../../../../external/classnames/index.js';
|
|
6
6
|
import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
|
|
7
7
|
import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
|
|
8
8
|
import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
|
|
|
2
2
|
import { property } from 'lit/decorators';
|
|
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
|
-
import classnames from '
|
|
5
|
+
import classnames from '../../../../../../external/classnames/index.js';
|
|
6
6
|
import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
|
|
7
7
|
import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
|
|
8
8
|
import { TEXTAREA_PROPS_TO_SYNC, TEXTAREA_CONTROL_CSS_CLASSES } from './textarea_constants.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -4,7 +4,7 @@ import { property } from 'lit/decorators';
|
|
|
4
4
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
5
|
import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
|
|
6
6
|
import { ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP } from './icon_constants.js';
|
|
7
|
-
import classnames from '
|
|
7
|
+
import classnames from '../../../../../external/classnames/index.js';
|
|
8
8
|
import { namespacedAttribute } from '../../directives/namespaced_attribute_directive.js';
|
|
9
9
|
import { Observer } from '../../core/classes/observer/observer.js';
|
|
10
10
|
import { Subject } from '../../core/classes/subject/subject.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA,uBAAuB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA,uBAAuB,6CAAiD;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;"}
|
package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.d.ts
CHANGED
|
@@ -4,9 +4,8 @@ export declare class KeystrokesController implements ReactiveController {
|
|
|
4
4
|
#private;
|
|
5
5
|
private _keys;
|
|
6
6
|
private _callback;
|
|
7
|
-
private _containerSelectors?;
|
|
8
7
|
private _buffer;
|
|
9
|
-
constructor({ host, keys, callback, target
|
|
8
|
+
constructor({ host, keys, callback, target }: TKeystrokesControllerProps);
|
|
10
9
|
hostConnected(): void;
|
|
11
10
|
hostDisconnected(): void;
|
|
12
11
|
private _clearBuffer;
|
package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js
CHANGED
|
@@ -3,21 +3,11 @@ import 'lit';
|
|
|
3
3
|
|
|
4
4
|
var _KeystrokesController_host, _KeystrokesController_target;
|
|
5
5
|
class KeystrokesController {
|
|
6
|
-
constructor({ host, keys, callback, target
|
|
6
|
+
constructor({ host, keys, callback, target }) {
|
|
7
7
|
_KeystrokesController_host.set(this, void 0);
|
|
8
8
|
_KeystrokesController_target.set(this, void 0);
|
|
9
9
|
this._buffer = [];
|
|
10
|
-
this._clearBuffer = (
|
|
11
|
-
if (!this._containerSelectors) {
|
|
12
|
-
this._buffer = [];
|
|
13
|
-
return;
|
|
14
|
-
}
|
|
15
|
-
const $newFocusedElement = ev.relatedTarget;
|
|
16
|
-
if ($newFocusedElement) {
|
|
17
|
-
const isNewFocusedElementAChild = !!this._containerSelectors.find((containerSelector) => !!$newFocusedElement.closest(containerSelector));
|
|
18
|
-
if (isNewFocusedElementAChild)
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
10
|
+
this._clearBuffer = () => {
|
|
21
11
|
this._buffer = [];
|
|
22
12
|
};
|
|
23
13
|
this._saveKey = (ev) => {
|
|
@@ -85,7 +75,6 @@ class KeystrokesController {
|
|
|
85
75
|
__classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
|
|
86
76
|
this._keys = keys;
|
|
87
77
|
this._callback = callback;
|
|
88
|
-
this._containerSelectors = containerSelectors;
|
|
89
78
|
__classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
|
|
90
79
|
}
|
|
91
80
|
hostConnected() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|