@shoper/phoenix_design_system 1.2.0 → 1.2.1
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 +4 -18
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +4 -3
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select.js +9 -2
- package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/cjs/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js +6 -2
- package/build/cjs/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js.map +1 -1
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js +16 -3
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +4 -18
- 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 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +4 -3
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/select.js +9 -2
- package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js +6 -2
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.d.ts +1 -0
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js +16 -3
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map +1 -1
- package/package.json +2 -2
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
|
-
|
|
6
|
+
require('lit/decorators');
|
|
7
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');
|
|
@@ -31,7 +31,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
31
31
|
this.offset = 0;
|
|
32
32
|
this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
|
|
33
33
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
34
|
-
this._lastFocusableElement = undefined;
|
|
35
34
|
this._handleClickOutside = async (target) => {
|
|
36
35
|
var _a, _b;
|
|
37
36
|
if (!this.opened)
|
|
@@ -64,12 +63,10 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
64
63
|
}, 0);
|
|
65
64
|
const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
|
|
66
65
|
setTimeout(() => {
|
|
67
|
-
var _a
|
|
66
|
+
var _a;
|
|
68
67
|
this._dispatchShowDropdownEvent();
|
|
69
68
|
(_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
|
|
70
69
|
this._toggleScroll();
|
|
71
|
-
if (!this._lastFocusableElement)
|
|
72
|
-
this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
|
|
73
70
|
resolve();
|
|
74
71
|
}, transitionDuration);
|
|
75
72
|
});
|
|
@@ -155,14 +152,11 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
155
152
|
this._handleFocusOnNextElement(ev);
|
|
156
153
|
};
|
|
157
154
|
this._handleFocusOnNextElement = async (ev) => {
|
|
155
|
+
var _a;
|
|
158
156
|
ev.preventDefault();
|
|
159
157
|
const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
|
|
160
158
|
const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
|
|
161
|
-
const $nextElementToFocus = $focusableElements
|
|
162
|
-
if (index > indexOfDropdownToggler && !currentElement.closest(`${dropdown_constants.DROPDOWN_TOGGLER_NAME}[name="${this.name}"]`))
|
|
163
|
-
return currentElement;
|
|
164
|
-
return null;
|
|
165
|
-
});
|
|
159
|
+
const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
|
|
166
160
|
await this._hideDropdownsSequentially();
|
|
167
161
|
await this.hide();
|
|
168
162
|
this._focusOnNextElementAfterToggler($nextElementToFocus);
|
|
@@ -223,12 +217,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
223
217
|
});
|
|
224
218
|
}
|
|
225
219
|
async connectedCallback() {
|
|
226
|
-
var _a;
|
|
227
220
|
super.connectedCallback();
|
|
228
221
|
HDropdown_1._appendDropdownPortal();
|
|
229
|
-
if (!this._rootDropdown)
|
|
230
|
-
this._rootDropdown =
|
|
231
|
-
((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'h-dropdown-content' ? this._findRootDropdown(this.parentElement) : this;
|
|
232
222
|
if (!this.$dropdownContent)
|
|
233
223
|
this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
|
|
234
224
|
if (!this.$dropdownToggler)
|
|
@@ -374,10 +364,6 @@ tslib_es6.__decorate([
|
|
|
374
364
|
decorators_js.property({ type: String }),
|
|
375
365
|
tslib_es6.__metadata("design:type", Object)
|
|
376
366
|
], exports.HDropdown.prototype, "portalTarget", void 0);
|
|
377
|
-
tslib_es6.__decorate([
|
|
378
|
-
decorators.state(),
|
|
379
|
-
tslib_es6.__metadata("design:type", Object)
|
|
380
|
-
], exports.HDropdown.prototype, "_lastFocusableElement", void 0);
|
|
381
367
|
exports.HDropdown = HDropdown_1 = tslib_es6.__decorate([
|
|
382
368
|
phoenix_custom_element.phoenixCustomElement('h-dropdown'),
|
|
383
369
|
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;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;
|
|
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,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;"}
|
|
@@ -11,14 +11,14 @@ var dropdown_constants = require('./dropdown_constants.js');
|
|
|
11
11
|
|
|
12
12
|
exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
13
13
|
constructor() {
|
|
14
|
-
super(
|
|
14
|
+
super();
|
|
15
15
|
this.name = '';
|
|
16
|
+
this.slot = this.hasAttribute('slot') ? this.slot : 'content';
|
|
16
17
|
}
|
|
17
18
|
connectedCallback() {
|
|
18
19
|
super.connectedCallback();
|
|
19
20
|
this.classList.add(dropdown_constants.DROPDOWN_CONTENT_CSS_CLASS);
|
|
20
21
|
this.setAttribute('role', 'menu');
|
|
21
|
-
this.slot = this.hasAttribute('slot') ? this.slot : 'content';
|
|
22
22
|
Array.from(this.children).forEach((element) => {
|
|
23
23
|
element.setAttribute('role', 'menuitem');
|
|
24
24
|
});
|
|
@@ -33,6 +33,7 @@ tslib_es6.__decorate([
|
|
|
33
33
|
tslib_es6.__metadata("design:type", Object)
|
|
34
34
|
], exports.HDropdownContent.prototype, "name", void 0);
|
|
35
35
|
exports.HDropdownContent = tslib_es6.__decorate([
|
|
36
|
-
phoenix_custom_element.phoenixCustomElement('h-dropdown-content')
|
|
36
|
+
phoenix_custom_element.phoenixCustomElement('h-dropdown-content'),
|
|
37
|
+
tslib_es6.__metadata("design:paramtypes", [])
|
|
37
38
|
], exports.HDropdownContent);
|
|
38
39
|
//# sourceMappingURL=dropdown_content.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
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;"}
|
|
@@ -42,8 +42,15 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
42
42
|
this._$dropdownContent = ref_js.createRef();
|
|
43
43
|
this._selectContext = new context_provider_controller.ContextProviderController(this);
|
|
44
44
|
this._setDropdownContentWidth = (width) => {
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
const $dropdown = this._$dropdownContent.value;
|
|
46
|
+
if (!$dropdown)
|
|
47
|
+
return;
|
|
48
|
+
if (!width) {
|
|
49
|
+
$dropdown.style.removeProperty('width');
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
if (width)
|
|
53
|
+
$dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
|
|
47
54
|
};
|
|
48
55
|
this._handleOptionDeselect = (event) => {
|
|
49
56
|
const selectedOption = this._selectController.getOption(event.detail);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -36,10 +36,14 @@ class ClickOutsideController {
|
|
|
36
36
|
tslib_es6.__classPrivateFieldSet(this, _ClickOutsideController_enabled, false, "f");
|
|
37
37
|
}
|
|
38
38
|
_setupClickEventListener() {
|
|
39
|
-
document.addEventListener('click', this._dispatchClickedOutsideEvent
|
|
39
|
+
document.addEventListener('click', this._dispatchClickedOutsideEvent, {
|
|
40
|
+
capture: true
|
|
41
|
+
});
|
|
40
42
|
}
|
|
41
43
|
_removeClickEventListener() {
|
|
42
|
-
document.removeEventListener('click', this._dispatchClickedOutsideEvent
|
|
44
|
+
document.removeEventListener('click', this._dispatchClickedOutsideEvent, {
|
|
45
|
+
capture: true
|
|
46
|
+
});
|
|
43
47
|
}
|
|
44
48
|
hostDisconnected() {
|
|
45
49
|
this._removeClickEventListener();
|
|
@@ -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;"}
|
|
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;"}
|
package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js
CHANGED
|
@@ -58,7 +58,9 @@ class PhoenixLightLitElement extends lit.LitElement {
|
|
|
58
58
|
this.isWebComponentRendered = true;
|
|
59
59
|
}
|
|
60
60
|
_setupChildrenConnectedWatch() {
|
|
61
|
-
this._childrenForConnectionToWatch = this.childrenToWatch
|
|
61
|
+
this._childrenForConnectionToWatch = this.childrenToWatch
|
|
62
|
+
? this._getComponentsChildrenToWatch()
|
|
63
|
+
: this._getComponentsNamesForConnectionToWatch();
|
|
62
64
|
if (!this._childrenForConnectionToWatch.length) {
|
|
63
65
|
this.allChildrenConnected();
|
|
64
66
|
return;
|
|
@@ -66,13 +68,24 @@ class PhoenixLightLitElement extends lit.LitElement {
|
|
|
66
68
|
this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
|
|
67
69
|
}
|
|
68
70
|
_setupChildrenRenderWatch() {
|
|
69
|
-
this._childrenForRenderToWatch = this.childrenToWatch
|
|
71
|
+
this._childrenForRenderToWatch = this.childrenToWatch
|
|
72
|
+
? this._getComponentsChildrenToWatch()
|
|
73
|
+
: this._getComponentsNamesForRenderedToWatch();
|
|
70
74
|
if (!this._childrenForRenderToWatch.length) {
|
|
71
75
|
this.allChildrenRendered();
|
|
72
76
|
return;
|
|
73
77
|
}
|
|
74
78
|
this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
|
|
75
79
|
}
|
|
80
|
+
_getComponentsChildrenToWatch() {
|
|
81
|
+
const childrenToWatch = [];
|
|
82
|
+
this.childrenToWatch.forEach((elementName) => {
|
|
83
|
+
return [...this.querySelectorAll(elementName)].forEach(($element) => {
|
|
84
|
+
childrenToWatch.push($element.tagName.toLowerCase());
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
return childrenToWatch;
|
|
88
|
+
}
|
|
76
89
|
_getComponentsNamesForConnectionToWatch() {
|
|
77
90
|
return phoenix_light_lit_element_utils.PhoenixLightLitElementUtils.getComponentsForWhichToWaitForConnection([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
|
|
78
91
|
}
|
|
@@ -81,8 +94,8 @@ class PhoenixLightLitElement extends lit.LitElement {
|
|
|
81
94
|
}
|
|
82
95
|
connectedCallback() {
|
|
83
96
|
super.connectedCallback();
|
|
84
|
-
this._dispatchLifecycleEvent(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
|
|
85
97
|
this.isWebComponentConnected = true;
|
|
98
|
+
this._dispatchLifecycleEvent(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
|
|
86
99
|
if (this.watchChildrenConnected)
|
|
87
100
|
this._setupChildrenConnectedWatch();
|
|
88
101
|
if (this.watchChildrenRendered)
|
|
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -19,8 +19,6 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
19
19
|
private _dropdownContentChildrenHeight;
|
|
20
20
|
private _hasScrollableClassInitially;
|
|
21
21
|
private _backdropController;
|
|
22
|
-
_lastFocusableElement: HTMLElement | undefined;
|
|
23
|
-
private _rootDropdown?;
|
|
24
22
|
constructor();
|
|
25
23
|
connectedCallback(): Promise<void>;
|
|
26
24
|
private static _appendDropdownPortal;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import
|
|
2
|
+
import 'lit/decorators';
|
|
3
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';
|
|
@@ -27,7 +27,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
27
27
|
this.offset = 0;
|
|
28
28
|
this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
|
|
29
29
|
this._backdropController = new BackdropController();
|
|
30
|
-
this._lastFocusableElement = undefined;
|
|
31
30
|
this._handleClickOutside = async (target) => {
|
|
32
31
|
var _a, _b;
|
|
33
32
|
if (!this.opened)
|
|
@@ -60,12 +59,10 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
60
59
|
}, 0);
|
|
61
60
|
const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
|
|
62
61
|
setTimeout(() => {
|
|
63
|
-
var _a
|
|
62
|
+
var _a;
|
|
64
63
|
this._dispatchShowDropdownEvent();
|
|
65
64
|
(_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
|
|
66
65
|
this._toggleScroll();
|
|
67
|
-
if (!this._lastFocusableElement)
|
|
68
|
-
this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
|
|
69
66
|
resolve();
|
|
70
67
|
}, transitionDuration);
|
|
71
68
|
});
|
|
@@ -151,14 +148,11 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
151
148
|
this._handleFocusOnNextElement(ev);
|
|
152
149
|
};
|
|
153
150
|
this._handleFocusOnNextElement = async (ev) => {
|
|
151
|
+
var _a;
|
|
154
152
|
ev.preventDefault();
|
|
155
153
|
const $focusableElements = UiDomUtils.getFocusableElements(document.body);
|
|
156
154
|
const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
|
|
157
|
-
const $nextElementToFocus = $focusableElements
|
|
158
|
-
if (index > indexOfDropdownToggler && !currentElement.closest(`${DROPDOWN_TOGGLER_NAME}[name="${this.name}"]`))
|
|
159
|
-
return currentElement;
|
|
160
|
-
return null;
|
|
161
|
-
});
|
|
155
|
+
const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
|
|
162
156
|
await this._hideDropdownsSequentially();
|
|
163
157
|
await this.hide();
|
|
164
158
|
this._focusOnNextElementAfterToggler($nextElementToFocus);
|
|
@@ -219,12 +213,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
219
213
|
});
|
|
220
214
|
}
|
|
221
215
|
async connectedCallback() {
|
|
222
|
-
var _a;
|
|
223
216
|
super.connectedCallback();
|
|
224
217
|
HDropdown_1._appendDropdownPortal();
|
|
225
|
-
if (!this._rootDropdown)
|
|
226
|
-
this._rootDropdown =
|
|
227
|
-
((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'h-dropdown-content' ? this._findRootDropdown(this.parentElement) : this;
|
|
228
218
|
if (!this.$dropdownContent)
|
|
229
219
|
this.$dropdownContent = this.querySelector(DROPDOWN_CONTENT_NAME);
|
|
230
220
|
if (!this.$dropdownToggler)
|
|
@@ -370,10 +360,6 @@ __decorate([
|
|
|
370
360
|
property({ type: String }),
|
|
371
361
|
__metadata("design:type", Object)
|
|
372
362
|
], HDropdown.prototype, "portalTarget", void 0);
|
|
373
|
-
__decorate([
|
|
374
|
-
state(),
|
|
375
|
-
__metadata("design:type", Object)
|
|
376
|
-
], HDropdown.prototype, "_lastFocusableElement", void 0);
|
|
377
363
|
HDropdown = HDropdown_1 = __decorate([
|
|
378
364
|
phoenixCustomElement('h-dropdown'),
|
|
379
365
|
__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,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;
|
|
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,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;"}
|
|
@@ -2,6 +2,7 @@ import { TemplateResult } from 'lit';
|
|
|
2
2
|
import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
3
3
|
export declare class HDropdownContent extends PhoenixLightLitElement {
|
|
4
4
|
name: string;
|
|
5
|
+
constructor();
|
|
5
6
|
connectedCallback(): void;
|
|
6
7
|
protected render(): TemplateResult;
|
|
7
8
|
}
|
|
@@ -7,14 +7,14 @@ import { DROPDOWN_CONTENT_CSS_CLASS } from './dropdown_constants.js';
|
|
|
7
7
|
|
|
8
8
|
let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
|
|
9
9
|
constructor() {
|
|
10
|
-
super(
|
|
10
|
+
super();
|
|
11
11
|
this.name = '';
|
|
12
|
+
this.slot = this.hasAttribute('slot') ? this.slot : 'content';
|
|
12
13
|
}
|
|
13
14
|
connectedCallback() {
|
|
14
15
|
super.connectedCallback();
|
|
15
16
|
this.classList.add(DROPDOWN_CONTENT_CSS_CLASS);
|
|
16
17
|
this.setAttribute('role', 'menu');
|
|
17
|
-
this.slot = this.hasAttribute('slot') ? this.slot : 'content';
|
|
18
18
|
Array.from(this.children).forEach((element) => {
|
|
19
19
|
element.setAttribute('role', 'menuitem');
|
|
20
20
|
});
|
|
@@ -29,7 +29,8 @@ __decorate([
|
|
|
29
29
|
__metadata("design:type", Object)
|
|
30
30
|
], HDropdownContent.prototype, "name", void 0);
|
|
31
31
|
HDropdownContent = __decorate([
|
|
32
|
-
phoenixCustomElement('h-dropdown-content')
|
|
32
|
+
phoenixCustomElement('h-dropdown-content'),
|
|
33
|
+
__metadata("design:paramtypes", [])
|
|
33
34
|
], HDropdownContent);
|
|
34
35
|
|
|
35
36
|
export { HDropdownContent };
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -38,8 +38,15 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
38
38
|
this._$dropdownContent = createRef();
|
|
39
39
|
this._selectContext = new ContextProviderController(this);
|
|
40
40
|
this._setDropdownContentWidth = (width) => {
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
const $dropdown = this._$dropdownContent.value;
|
|
42
|
+
if (!$dropdown)
|
|
43
|
+
return;
|
|
44
|
+
if (!width) {
|
|
45
|
+
$dropdown.style.removeProperty('width');
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
if (width)
|
|
49
|
+
$dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
|
|
43
50
|
};
|
|
44
51
|
this._handleOptionDeselect = (event) => {
|
|
45
52
|
const selectedOption = this._selectController.getOption(event.detail);
|
|
@@ -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,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -32,10 +32,14 @@ class ClickOutsideController {
|
|
|
32
32
|
__classPrivateFieldSet(this, _ClickOutsideController_enabled, false, "f");
|
|
33
33
|
}
|
|
34
34
|
_setupClickEventListener() {
|
|
35
|
-
document.addEventListener('click', this._dispatchClickedOutsideEvent
|
|
35
|
+
document.addEventListener('click', this._dispatchClickedOutsideEvent, {
|
|
36
|
+
capture: true
|
|
37
|
+
});
|
|
36
38
|
}
|
|
37
39
|
_removeClickEventListener() {
|
|
38
|
-
document.removeEventListener('click', this._dispatchClickedOutsideEvent
|
|
40
|
+
document.removeEventListener('click', this._dispatchClickedOutsideEvent, {
|
|
41
|
+
capture: true
|
|
42
|
+
});
|
|
39
43
|
}
|
|
40
44
|
hostDisconnected() {
|
|
41
45
|
this._removeClickEventListener();
|
|
@@ -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;"}
|
|
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;"}
|
package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export declare class PhoenixLightLitElement extends LitElement {
|
|
|
11
11
|
firstUpdated(props: PropertyValues): void;
|
|
12
12
|
private _setupChildrenConnectedWatch;
|
|
13
13
|
private _setupChildrenRenderWatch;
|
|
14
|
+
private _getComponentsChildrenToWatch;
|
|
14
15
|
private _getComponentsNamesForConnectionToWatch;
|
|
15
16
|
private _getComponentsNamesForRenderedToWatch;
|
|
16
17
|
private _handleComponentConnected;
|
package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js
CHANGED
|
@@ -54,7 +54,9 @@ class PhoenixLightLitElement extends LitElement {
|
|
|
54
54
|
this.isWebComponentRendered = true;
|
|
55
55
|
}
|
|
56
56
|
_setupChildrenConnectedWatch() {
|
|
57
|
-
this._childrenForConnectionToWatch = this.childrenToWatch
|
|
57
|
+
this._childrenForConnectionToWatch = this.childrenToWatch
|
|
58
|
+
? this._getComponentsChildrenToWatch()
|
|
59
|
+
: this._getComponentsNamesForConnectionToWatch();
|
|
58
60
|
if (!this._childrenForConnectionToWatch.length) {
|
|
59
61
|
this.allChildrenConnected();
|
|
60
62
|
return;
|
|
@@ -62,13 +64,24 @@ class PhoenixLightLitElement extends LitElement {
|
|
|
62
64
|
this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
|
|
63
65
|
}
|
|
64
66
|
_setupChildrenRenderWatch() {
|
|
65
|
-
this._childrenForRenderToWatch = this.childrenToWatch
|
|
67
|
+
this._childrenForRenderToWatch = this.childrenToWatch
|
|
68
|
+
? this._getComponentsChildrenToWatch()
|
|
69
|
+
: this._getComponentsNamesForRenderedToWatch();
|
|
66
70
|
if (!this._childrenForRenderToWatch.length) {
|
|
67
71
|
this.allChildrenRendered();
|
|
68
72
|
return;
|
|
69
73
|
}
|
|
70
74
|
this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
|
|
71
75
|
}
|
|
76
|
+
_getComponentsChildrenToWatch() {
|
|
77
|
+
const childrenToWatch = [];
|
|
78
|
+
this.childrenToWatch.forEach((elementName) => {
|
|
79
|
+
return [...this.querySelectorAll(elementName)].forEach(($element) => {
|
|
80
|
+
childrenToWatch.push($element.tagName.toLowerCase());
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
return childrenToWatch;
|
|
84
|
+
}
|
|
72
85
|
_getComponentsNamesForConnectionToWatch() {
|
|
73
86
|
return PhoenixLightLitElementUtils.getComponentsForWhichToWaitForConnection([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
|
|
74
87
|
}
|
|
@@ -77,8 +90,8 @@ class PhoenixLightLitElement extends LitElement {
|
|
|
77
90
|
}
|
|
78
91
|
connectedCallback() {
|
|
79
92
|
super.connectedCallback();
|
|
80
|
-
this._dispatchLifecycleEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
|
|
81
93
|
this.isWebComponentConnected = true;
|
|
94
|
+
this._dispatchLifecycleEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
|
|
82
95
|
if (this.watchChildrenConnected)
|
|
83
96
|
this._setupChildrenConnectedWatch();
|
|
84
97
|
if (this.watchChildrenRendered)
|
|
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@shoper/phoenix_design_system",
|
|
3
3
|
"packageManager": "yarn@3.2.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
|
-
"version": "1.2.
|
|
5
|
+
"version": "1.2.1",
|
|
6
6
|
"description": "phoenix design system",
|
|
7
7
|
"author": "zefirek",
|
|
8
8
|
"license": "MIT",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@splidejs/splide": "^4.0.7"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@dreamcommerce/utilities": "^1.2.
|
|
33
|
+
"@dreamcommerce/utilities": "^1.2.2",
|
|
34
34
|
"@shoper/jest_config": "^0.0.0",
|
|
35
35
|
"@shoper/tsconfig": "^0.0.0",
|
|
36
36
|
"@splidejs/splide": "4.0.7",
|