@shoper/phoenix_design_system 0.21.0 → 0.21.1-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/src/components/dropdown/dropdown.js +14 -27
- 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 -1
- 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 +1 -1
- package/build/cjs/packages/phoenix/src/components/tabs/tabs.js +1 -1
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js +46 -14
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map +1 -1
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element_utils.js +6 -0
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element_utils.js.map +1 -1
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.js +2 -1
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +0 -4
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +14 -27
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +4 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -1
- package/build/esm/packages/phoenix/src/components/tabs/tabs.d.ts +1 -1
- package/build/esm/packages/phoenix/src/components/tabs/tabs.js +1 -1
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.d.ts +8 -1
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js +46 -14
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map +1 -1
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element_utils.d.ts +1 -0
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element_utils.js +6 -0
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element_utils.js.map +1 -1
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.d.ts +1 -0
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.js +2 -1
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
|
-
require('lit');
|
|
7
6
|
var decorators = require('lit/decorators');
|
|
8
7
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
8
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
@@ -11,7 +10,6 @@ var portal_constants = require('../portal/portal_constants.js');
|
|
|
11
10
|
var litHtml = require('lit-html');
|
|
12
11
|
var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
|
|
13
12
|
var decorators_js = require('@lit/reactive-element/decorators.js');
|
|
14
|
-
var ref_js = require('lit-html/directives/ref.js');
|
|
15
13
|
var global_constants = require('../../global_constants.js');
|
|
16
14
|
var dropdown_constants = require('./dropdown_constants.js');
|
|
17
15
|
var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
|
|
@@ -32,8 +30,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
32
30
|
this._backdropController = new backdrop_controller.BackdropController();
|
|
33
31
|
this._firstFocusableElement = undefined;
|
|
34
32
|
this._lastFocusableElement = undefined;
|
|
35
|
-
this._focusSentinelStart = ref_js.createRef();
|
|
36
|
-
this._focusSentinelEnd = ref_js.createRef();
|
|
37
33
|
this._handleClickOutside = async (target) => {
|
|
38
34
|
var _a, _b;
|
|
39
35
|
if (!this.opened)
|
|
@@ -59,11 +55,13 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
59
55
|
}, 0);
|
|
60
56
|
const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
|
|
61
57
|
setTimeout(() => {
|
|
62
|
-
var _a, _b;
|
|
58
|
+
var _a, _b, _c;
|
|
63
59
|
this._dispatchShowDropdownEvent();
|
|
64
60
|
(_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`);
|
|
65
61
|
this._toggleScroll();
|
|
66
|
-
(
|
|
62
|
+
if (!this._lastFocusableElement)
|
|
63
|
+
this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
|
|
64
|
+
this._focusOnNextSibling((_c = this.$dropdownContent) === null || _c === void 0 ? void 0 : _c.firstElementChild);
|
|
67
65
|
resolve();
|
|
68
66
|
}, transitionDuration);
|
|
69
67
|
});
|
|
@@ -135,20 +133,11 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
135
133
|
await this.hide();
|
|
136
134
|
};
|
|
137
135
|
this._handleFocusWithinDropdown = async (ev) => {
|
|
138
|
-
var _a;
|
|
139
136
|
const hasTabBeenPressed = ev.key.toLowerCase() === 'tab';
|
|
140
|
-
if (hasTabBeenPressed) {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
ev.preventDefault();
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
else if (document.activeElement === this._lastFocusableElement) {
|
|
148
|
-
ev.preventDefault();
|
|
149
|
-
await this._rootDropdown._hideDropdownsSequentially();
|
|
150
|
-
this._focusOnNextSibling(this._rootDropdown);
|
|
151
|
-
}
|
|
137
|
+
if (hasTabBeenPressed && document.activeElement === this._lastFocusableElement) {
|
|
138
|
+
ev.preventDefault();
|
|
139
|
+
this._focusOnNextSibling(this.nextElementSibling || this);
|
|
140
|
+
await this._hideDropdownsSequentially();
|
|
152
141
|
}
|
|
153
142
|
};
|
|
154
143
|
this._hoverToggle = async (ev) => {
|
|
@@ -207,11 +196,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
207
196
|
this._setupListeners();
|
|
208
197
|
this._setupInitialDropdownProperties();
|
|
209
198
|
}
|
|
210
|
-
firstUpdated(props) {
|
|
211
|
-
super.firstUpdated(props);
|
|
212
|
-
this._firstFocusableElement = this._focusSentinelStart.value;
|
|
213
|
-
this._lastFocusableElement = this._focusSentinelEnd.value;
|
|
214
|
-
}
|
|
215
199
|
static _appendDropdownPortal() {
|
|
216
200
|
const $dropdownPortalTarget = document.querySelector(`[name="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
|
|
217
201
|
if (!$dropdownPortalTarget) {
|
|
@@ -258,7 +242,12 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
258
242
|
el.focus();
|
|
259
243
|
if (el === document.activeElement)
|
|
260
244
|
return;
|
|
261
|
-
|
|
245
|
+
if (el.firstElementChild) {
|
|
246
|
+
this._focusOnNextSibling(el.firstElementChild);
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
if (el.nextElementSibling)
|
|
250
|
+
this._focusOnNextSibling(el.nextElementSibling);
|
|
262
251
|
}
|
|
263
252
|
_isHoveredWithinDropdown(element) {
|
|
264
253
|
var _a;
|
|
@@ -304,9 +293,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
304
293
|
return litHtml.html `
|
|
305
294
|
${this.getSlot('toggler')}
|
|
306
295
|
<h-portal ?disabled="${!this.opened}" @portal.open="${this._positionDropdownContent}" to="${this.portalTarget}" hidden>
|
|
307
|
-
<div tabindex="0" ${ref_js.ref(this._focusSentinelStart)}></div>
|
|
308
296
|
${this.getSlot('content')}
|
|
309
|
-
<div tabindex="0" ${ref_js.ref(this._focusSentinelEnd)}></div>
|
|
310
297
|
</h-portal>
|
|
311
298
|
`;
|
|
312
299
|
}
|
|
@@ -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
|
|
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,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;"}
|
|
@@ -22,7 +22,10 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
|
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
24
|
super.render();
|
|
25
|
-
return lit.html `
|
|
25
|
+
return lit.html `
|
|
26
|
+
<div role="dialog">${this.getSlot('content')}</div>
|
|
27
|
+
<div tabindex="0" aria-hidden="true"></div>
|
|
28
|
+
`;
|
|
26
29
|
}
|
|
27
30
|
};
|
|
28
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;"}
|
|
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;"}
|
|
@@ -18,7 +18,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
|
|
|
18
18
|
this._dispatchToggleDropdownEvent = (ev) => {
|
|
19
19
|
ev.preventDefault();
|
|
20
20
|
ev.stopImmediatePropagation();
|
|
21
|
-
const toggleDropdownEvent = new
|
|
21
|
+
const toggleDropdownEvent = new CustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle, {
|
|
22
22
|
bubbles: true
|
|
23
23
|
});
|
|
24
24
|
this.dispatchEvent(toggleDropdownEvent);
|
|
@@ -66,7 +66,7 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
|
|
|
66
66
|
_setupEvents() {
|
|
67
67
|
this.addEventListener(tab_constants.TAB_EVENT_NAMES.selected, this._handleTabSelected);
|
|
68
68
|
}
|
|
69
|
-
|
|
69
|
+
allChildrenRendered() {
|
|
70
70
|
const $selectedTab = this.querySelector('h-tab[selected]');
|
|
71
71
|
this._hideNotSelectedAndVisiblePanels();
|
|
72
72
|
if (!$selectedTab)
|
package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js
CHANGED
|
@@ -12,45 +12,65 @@ class PhoenixLightLitElement extends lit.LitElement {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this._slots = {};
|
|
15
|
+
this.childrenToWatch = [];
|
|
15
16
|
this.isWebComponentConnected = false;
|
|
17
|
+
this.isWebComponentRendered = false;
|
|
18
|
+
this._childrenForConnectionToWatch = [];
|
|
19
|
+
this._childrenForRenderToWatch = [];
|
|
16
20
|
this._handleComponentConnected = ({ detail }) => {
|
|
17
21
|
const connectedElement = detail.$el.tagName.toLowerCase();
|
|
18
|
-
if (this.
|
|
19
|
-
const elToRemoveIndex = this.
|
|
20
|
-
this.
|
|
22
|
+
if (this._childrenForConnectionToWatch.includes(connectedElement)) {
|
|
23
|
+
const elToRemoveIndex = this._childrenForConnectionToWatch.findIndex((tagName) => tagName === connectedElement);
|
|
24
|
+
this._childrenForConnectionToWatch.splice(elToRemoveIndex, elToRemoveIndex + 1);
|
|
21
25
|
}
|
|
22
|
-
if (!this.
|
|
26
|
+
if (!this._childrenForConnectionToWatch.length) {
|
|
23
27
|
this.allChildrenConnected();
|
|
24
28
|
this.removeEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
|
|
25
29
|
}
|
|
26
30
|
};
|
|
31
|
+
this._handleComponentRendered = ({ detail }) => {
|
|
32
|
+
const connectedElement = detail.$el.tagName.toLowerCase();
|
|
33
|
+
if (this._childrenForRenderToWatch.includes(connectedElement)) {
|
|
34
|
+
const elToRemoveIndex = this._childrenForRenderToWatch.findIndex((tagName) => tagName === connectedElement);
|
|
35
|
+
this._childrenForRenderToWatch.splice(elToRemoveIndex, elToRemoveIndex + 1);
|
|
36
|
+
}
|
|
37
|
+
if (!this._childrenForRenderToWatch.length) {
|
|
38
|
+
this.allChildrenRendered();
|
|
39
|
+
this.removeEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentConnected);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
27
42
|
}
|
|
28
43
|
firstUpdated(props) {
|
|
29
44
|
super.firstUpdated(props);
|
|
30
45
|
this._slots = this._assignSlots();
|
|
31
46
|
this.requestUpdate();
|
|
47
|
+
this._dispatchEvent(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered);
|
|
48
|
+
this.isWebComponentRendered = true;
|
|
32
49
|
}
|
|
33
50
|
_setupChildrenWatch() {
|
|
34
|
-
this.
|
|
35
|
-
|
|
51
|
+
this._childrenForConnectionToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForConnectionToWatch();
|
|
52
|
+
this._childrenForRenderToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForRenderedToWatch();
|
|
53
|
+
if (!this.childrenToWatch.length) {
|
|
36
54
|
this.allChildrenConnected();
|
|
55
|
+
this.allChildrenRendered();
|
|
56
|
+
}
|
|
37
57
|
this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
|
|
58
|
+
this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
|
|
38
59
|
}
|
|
39
|
-
|
|
60
|
+
_getComponentsNamesForConnectionToWatch() {
|
|
40
61
|
return phoenix_light_lit_element_utils.PhoenixLightLitElementUtils.getComponentsForWhichToWaitForConnection([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
|
|
41
62
|
}
|
|
63
|
+
_getComponentsNamesForRenderedToWatch() {
|
|
64
|
+
return phoenix_light_lit_element_utils.PhoenixLightLitElementUtils.getComponentsForWhichToWaitForRender([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
|
|
65
|
+
}
|
|
42
66
|
connectedCallback() {
|
|
43
67
|
super.connectedCallback();
|
|
44
|
-
this.
|
|
45
|
-
detail: {
|
|
46
|
-
$el: this
|
|
47
|
-
},
|
|
48
|
-
bubbles: true
|
|
49
|
-
}));
|
|
68
|
+
this._dispatchEvent(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
|
|
50
69
|
this.isWebComponentConnected = true;
|
|
51
70
|
this._setupChildrenWatch();
|
|
52
71
|
}
|
|
53
72
|
allChildrenConnected() { }
|
|
73
|
+
allChildrenRendered() { }
|
|
54
74
|
_assignSlots() {
|
|
55
75
|
return [...this.querySelectorAll(':scope > [slot]')].reduce((acc, $el) => {
|
|
56
76
|
var _a;
|
|
@@ -75,6 +95,14 @@ class PhoenixLightLitElement extends lit.LitElement {
|
|
|
75
95
|
createRenderRoot() {
|
|
76
96
|
return this;
|
|
77
97
|
}
|
|
98
|
+
_dispatchEvent(eventName) {
|
|
99
|
+
this.dispatchEvent(new CustomEvent(eventName, {
|
|
100
|
+
detail: {
|
|
101
|
+
$el: this
|
|
102
|
+
},
|
|
103
|
+
bubbles: true
|
|
104
|
+
}));
|
|
105
|
+
}
|
|
78
106
|
}
|
|
79
107
|
tslib_es6.__decorate([
|
|
80
108
|
decorators.state(),
|
|
@@ -83,7 +111,11 @@ tslib_es6.__decorate([
|
|
|
83
111
|
tslib_es6.__decorate([
|
|
84
112
|
decorators.property({ type: Boolean }),
|
|
85
113
|
tslib_es6.__metadata("design:type", Object)
|
|
86
|
-
], PhoenixLightLitElement.prototype, "isWebComponentConnected", void 0);
|
|
114
|
+
], PhoenixLightLitElement.prototype, "isWebComponentConnected", void 0);
|
|
115
|
+
tslib_es6.__decorate([
|
|
116
|
+
decorators.property({ type: Boolean }),
|
|
117
|
+
tslib_es6.__metadata("design:type", Object)
|
|
118
|
+
], PhoenixLightLitElement.prototype, "isWebComponentRendered", void 0);
|
|
87
119
|
|
|
88
120
|
exports.PhoenixLightLitElement = PhoenixLightLitElement;
|
|
89
121
|
//# sourceMappingURL=phoenix_light_lit_element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;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;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;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;"}
|
|
@@ -11,6 +11,12 @@ class PhoenixLightLitElementUtils {
|
|
|
11
11
|
utilities.WebComponentsUtils.isWebComponentDefined($element) &&
|
|
12
12
|
!$element.isWebComponentConnected));
|
|
13
13
|
}
|
|
14
|
+
static getComponentsForWhichToWaitForRender(components) {
|
|
15
|
+
return components.filter(($element) => (utilities.WebComponentsUtils.isWebComponent($element) && !utilities.WebComponentsUtils.isWebComponentDefined($element)) ||
|
|
16
|
+
(utilities.WebComponentsUtils.isWebComponent($element) &&
|
|
17
|
+
utilities.WebComponentsUtils.isWebComponentDefined($element) &&
|
|
18
|
+
!$element.isWebComponentConnected));
|
|
19
|
+
}
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
exports.PhoenixLightLitElementUtils = PhoenixLightLitElementUtils;
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const DEFAULT_SLOT_NAME = 'default';
|
|
6
6
|
const PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES = {
|
|
7
|
-
connected: 'connected'
|
|
7
|
+
connected: 'connected',
|
|
8
|
+
rendered: 'rendered'
|
|
8
9
|
};
|
|
9
10
|
|
|
10
11
|
exports.DEFAULT_SLOT_NAME = DEFAULT_SLOT_NAME;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -3,7 +3,6 @@ import { TemplateResult } from 'lit-html';
|
|
|
3
3
|
import { HDropdownContent } from './dropdown_content';
|
|
4
4
|
import { HDropdownToggler } from './dropdown_toggler';
|
|
5
5
|
import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
6
|
-
import { PropertyValues } from 'lit';
|
|
7
6
|
export declare class HDropdown extends PhoenixLightLitElement implements IDropdown {
|
|
8
7
|
opened: boolean;
|
|
9
8
|
direction: "bottom-center";
|
|
@@ -21,11 +20,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
21
20
|
private _backdropController;
|
|
22
21
|
_firstFocusableElement: HTMLElement | undefined;
|
|
23
22
|
_lastFocusableElement: HTMLElement | undefined;
|
|
24
|
-
private _focusSentinelStart;
|
|
25
|
-
private _focusSentinelEnd;
|
|
26
23
|
private _rootDropdown?;
|
|
27
24
|
connectedCallback(): void;
|
|
28
|
-
firstUpdated(props: PropertyValues): void;
|
|
29
25
|
private static _appendDropdownPortal;
|
|
30
26
|
private _findRootDropdown;
|
|
31
27
|
private _setupListeners;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import 'lit';
|
|
3
2
|
import { state } from 'lit/decorators';
|
|
4
3
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
4
|
import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
|
|
@@ -7,7 +6,6 @@ import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal
|
|
|
7
6
|
import { html } from 'lit-html';
|
|
8
7
|
import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
|
|
9
8
|
import { property } from '@lit/reactive-element/decorators.js';
|
|
10
|
-
import { createRef, ref } from 'lit-html/directives/ref.js';
|
|
11
9
|
import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
|
|
12
10
|
import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
|
|
13
11
|
import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
|
|
@@ -28,8 +26,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
28
26
|
this._backdropController = new BackdropController();
|
|
29
27
|
this._firstFocusableElement = undefined;
|
|
30
28
|
this._lastFocusableElement = undefined;
|
|
31
|
-
this._focusSentinelStart = createRef();
|
|
32
|
-
this._focusSentinelEnd = createRef();
|
|
33
29
|
this._handleClickOutside = async (target) => {
|
|
34
30
|
var _a, _b;
|
|
35
31
|
if (!this.opened)
|
|
@@ -55,11 +51,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
55
51
|
}, 0);
|
|
56
52
|
const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
|
|
57
53
|
setTimeout(() => {
|
|
58
|
-
var _a, _b;
|
|
54
|
+
var _a, _b, _c;
|
|
59
55
|
this._dispatchShowDropdownEvent();
|
|
60
56
|
(_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
|
|
61
57
|
this._toggleScroll();
|
|
62
|
-
(
|
|
58
|
+
if (!this._lastFocusableElement)
|
|
59
|
+
this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
|
|
60
|
+
this._focusOnNextSibling((_c = this.$dropdownContent) === null || _c === void 0 ? void 0 : _c.firstElementChild);
|
|
63
61
|
resolve();
|
|
64
62
|
}, transitionDuration);
|
|
65
63
|
});
|
|
@@ -131,20 +129,11 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
131
129
|
await this.hide();
|
|
132
130
|
};
|
|
133
131
|
this._handleFocusWithinDropdown = async (ev) => {
|
|
134
|
-
var _a;
|
|
135
132
|
const hasTabBeenPressed = ev.key.toLowerCase() === 'tab';
|
|
136
|
-
if (hasTabBeenPressed) {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
ev.preventDefault();
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
else if (document.activeElement === this._lastFocusableElement) {
|
|
144
|
-
ev.preventDefault();
|
|
145
|
-
await this._rootDropdown._hideDropdownsSequentially();
|
|
146
|
-
this._focusOnNextSibling(this._rootDropdown);
|
|
147
|
-
}
|
|
133
|
+
if (hasTabBeenPressed && document.activeElement === this._lastFocusableElement) {
|
|
134
|
+
ev.preventDefault();
|
|
135
|
+
this._focusOnNextSibling(this.nextElementSibling || this);
|
|
136
|
+
await this._hideDropdownsSequentially();
|
|
148
137
|
}
|
|
149
138
|
};
|
|
150
139
|
this._hoverToggle = async (ev) => {
|
|
@@ -203,11 +192,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
203
192
|
this._setupListeners();
|
|
204
193
|
this._setupInitialDropdownProperties();
|
|
205
194
|
}
|
|
206
|
-
firstUpdated(props) {
|
|
207
|
-
super.firstUpdated(props);
|
|
208
|
-
this._firstFocusableElement = this._focusSentinelStart.value;
|
|
209
|
-
this._lastFocusableElement = this._focusSentinelEnd.value;
|
|
210
|
-
}
|
|
211
195
|
static _appendDropdownPortal() {
|
|
212
196
|
const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
|
|
213
197
|
if (!$dropdownPortalTarget) {
|
|
@@ -254,7 +238,12 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
254
238
|
el.focus();
|
|
255
239
|
if (el === document.activeElement)
|
|
256
240
|
return;
|
|
257
|
-
|
|
241
|
+
if (el.firstElementChild) {
|
|
242
|
+
this._focusOnNextSibling(el.firstElementChild);
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
if (el.nextElementSibling)
|
|
246
|
+
this._focusOnNextSibling(el.nextElementSibling);
|
|
258
247
|
}
|
|
259
248
|
_isHoveredWithinDropdown(element) {
|
|
260
249
|
var _a;
|
|
@@ -300,9 +289,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
300
289
|
return html `
|
|
301
290
|
${this.getSlot('toggler')}
|
|
302
291
|
<h-portal ?disabled="${!this.opened}" @portal.open="${this._positionDropdownContent}" to="${this.portalTarget}" hidden>
|
|
303
|
-
<div tabindex="0" ${ref(this._focusSentinelStart)}></div>
|
|
304
292
|
${this.getSlot('content')}
|
|
305
|
-
<div tabindex="0" ${ref(this._focusSentinelEnd)}></div>
|
|
306
293
|
</h-portal>
|
|
307
294
|
`;
|
|
308
295
|
}
|
|
@@ -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
|
|
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,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;"}
|
|
@@ -18,7 +18,10 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
|
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
20
|
super.render();
|
|
21
|
-
return html `
|
|
21
|
+
return html `
|
|
22
|
+
<div role="dialog">${this.getSlot('content')}</div>
|
|
23
|
+
<div tabindex="0" aria-hidden="true"></div>
|
|
24
|
+
`;
|
|
22
25
|
}
|
|
23
26
|
};
|
|
24
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;"}
|
|
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;"}
|
|
@@ -14,7 +14,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
|
|
|
14
14
|
this._dispatchToggleDropdownEvent = (ev) => {
|
|
15
15
|
ev.preventDefault();
|
|
16
16
|
ev.stopImmediatePropagation();
|
|
17
|
-
const toggleDropdownEvent = new
|
|
17
|
+
const toggleDropdownEvent = new CustomEvent(DROPDOWN_EVENTS.toggle, {
|
|
18
18
|
bubbles: true
|
|
19
19
|
});
|
|
20
20
|
this.dispatchEvent(toggleDropdownEvent);
|
|
@@ -9,7 +9,7 @@ export declare class HTabs extends PhoenixLightLitElement {
|
|
|
9
9
|
private _getPrevTabIndex;
|
|
10
10
|
private _setupEvents;
|
|
11
11
|
private _handleTabSelected;
|
|
12
|
-
|
|
12
|
+
allChildrenRendered(): void;
|
|
13
13
|
private _hideNotSelectedAndVisiblePanels;
|
|
14
14
|
switchPanel(newPanelName: string): void;
|
|
15
15
|
private _dispatchChangedEvent;
|
|
@@ -62,7 +62,7 @@ let HTabs = class HTabs extends PhoenixLightLitElement {
|
|
|
62
62
|
_setupEvents() {
|
|
63
63
|
this.addEventListener(TAB_EVENT_NAMES.selected, this._handleTabSelected);
|
|
64
64
|
}
|
|
65
|
-
|
|
65
|
+
allChildrenRendered() {
|
|
66
66
|
const $selectedTab = this.querySelector('h-tab[selected]');
|
|
67
67
|
this._hideNotSelectedAndVisiblePanels();
|
|
68
68
|
if (!$selectedTab)
|
package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.d.ts
CHANGED
|
@@ -3,14 +3,21 @@ export declare class PhoenixLightLitElement extends LitElement {
|
|
|
3
3
|
_slots: Record<string, TemplateResult[]>;
|
|
4
4
|
protected childrenToWatch: string[];
|
|
5
5
|
isWebComponentConnected: boolean;
|
|
6
|
+
isWebComponentRendered: boolean;
|
|
7
|
+
private _childrenForConnectionToWatch;
|
|
8
|
+
private _childrenForRenderToWatch;
|
|
6
9
|
firstUpdated(props: PropertyValues): void;
|
|
7
10
|
private _setupChildrenWatch;
|
|
8
|
-
private
|
|
11
|
+
private _getComponentsNamesForConnectionToWatch;
|
|
12
|
+
private _getComponentsNamesForRenderedToWatch;
|
|
9
13
|
private _handleComponentConnected;
|
|
14
|
+
private _handleComponentRendered;
|
|
10
15
|
connectedCallback(): void;
|
|
11
16
|
allChildrenConnected(): void;
|
|
17
|
+
allChildrenRendered(): void;
|
|
12
18
|
private _assignSlots;
|
|
13
19
|
getSlot(name: string): TemplateResult[] | typeof nothing;
|
|
14
20
|
hasSlot(name: string): boolean;
|
|
15
21
|
createRenderRoot(): PhoenixLightLitElement;
|
|
22
|
+
private _dispatchEvent;
|
|
16
23
|
}
|
package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js
CHANGED
|
@@ -8,45 +8,65 @@ class PhoenixLightLitElement extends LitElement {
|
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments);
|
|
10
10
|
this._slots = {};
|
|
11
|
+
this.childrenToWatch = [];
|
|
11
12
|
this.isWebComponentConnected = false;
|
|
13
|
+
this.isWebComponentRendered = false;
|
|
14
|
+
this._childrenForConnectionToWatch = [];
|
|
15
|
+
this._childrenForRenderToWatch = [];
|
|
12
16
|
this._handleComponentConnected = ({ detail }) => {
|
|
13
17
|
const connectedElement = detail.$el.tagName.toLowerCase();
|
|
14
|
-
if (this.
|
|
15
|
-
const elToRemoveIndex = this.
|
|
16
|
-
this.
|
|
18
|
+
if (this._childrenForConnectionToWatch.includes(connectedElement)) {
|
|
19
|
+
const elToRemoveIndex = this._childrenForConnectionToWatch.findIndex((tagName) => tagName === connectedElement);
|
|
20
|
+
this._childrenForConnectionToWatch.splice(elToRemoveIndex, elToRemoveIndex + 1);
|
|
17
21
|
}
|
|
18
|
-
if (!this.
|
|
22
|
+
if (!this._childrenForConnectionToWatch.length) {
|
|
19
23
|
this.allChildrenConnected();
|
|
20
24
|
this.removeEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
|
|
21
25
|
}
|
|
22
26
|
};
|
|
27
|
+
this._handleComponentRendered = ({ detail }) => {
|
|
28
|
+
const connectedElement = detail.$el.tagName.toLowerCase();
|
|
29
|
+
if (this._childrenForRenderToWatch.includes(connectedElement)) {
|
|
30
|
+
const elToRemoveIndex = this._childrenForRenderToWatch.findIndex((tagName) => tagName === connectedElement);
|
|
31
|
+
this._childrenForRenderToWatch.splice(elToRemoveIndex, elToRemoveIndex + 1);
|
|
32
|
+
}
|
|
33
|
+
if (!this._childrenForRenderToWatch.length) {
|
|
34
|
+
this.allChildrenRendered();
|
|
35
|
+
this.removeEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentConnected);
|
|
36
|
+
}
|
|
37
|
+
};
|
|
23
38
|
}
|
|
24
39
|
firstUpdated(props) {
|
|
25
40
|
super.firstUpdated(props);
|
|
26
41
|
this._slots = this._assignSlots();
|
|
27
42
|
this.requestUpdate();
|
|
43
|
+
this._dispatchEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered);
|
|
44
|
+
this.isWebComponentRendered = true;
|
|
28
45
|
}
|
|
29
46
|
_setupChildrenWatch() {
|
|
30
|
-
this.
|
|
31
|
-
|
|
47
|
+
this._childrenForConnectionToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForConnectionToWatch();
|
|
48
|
+
this._childrenForRenderToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForRenderedToWatch();
|
|
49
|
+
if (!this.childrenToWatch.length) {
|
|
32
50
|
this.allChildrenConnected();
|
|
51
|
+
this.allChildrenRendered();
|
|
52
|
+
}
|
|
33
53
|
this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
|
|
54
|
+
this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
|
|
34
55
|
}
|
|
35
|
-
|
|
56
|
+
_getComponentsNamesForConnectionToWatch() {
|
|
36
57
|
return PhoenixLightLitElementUtils.getComponentsForWhichToWaitForConnection([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
|
|
37
58
|
}
|
|
59
|
+
_getComponentsNamesForRenderedToWatch() {
|
|
60
|
+
return PhoenixLightLitElementUtils.getComponentsForWhichToWaitForRender([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
|
|
61
|
+
}
|
|
38
62
|
connectedCallback() {
|
|
39
63
|
super.connectedCallback();
|
|
40
|
-
this.
|
|
41
|
-
detail: {
|
|
42
|
-
$el: this
|
|
43
|
-
},
|
|
44
|
-
bubbles: true
|
|
45
|
-
}));
|
|
64
|
+
this._dispatchEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
|
|
46
65
|
this.isWebComponentConnected = true;
|
|
47
66
|
this._setupChildrenWatch();
|
|
48
67
|
}
|
|
49
68
|
allChildrenConnected() { }
|
|
69
|
+
allChildrenRendered() { }
|
|
50
70
|
_assignSlots() {
|
|
51
71
|
return [...this.querySelectorAll(':scope > [slot]')].reduce((acc, $el) => {
|
|
52
72
|
var _a;
|
|
@@ -71,6 +91,14 @@ class PhoenixLightLitElement extends LitElement {
|
|
|
71
91
|
createRenderRoot() {
|
|
72
92
|
return this;
|
|
73
93
|
}
|
|
94
|
+
_dispatchEvent(eventName) {
|
|
95
|
+
this.dispatchEvent(new CustomEvent(eventName, {
|
|
96
|
+
detail: {
|
|
97
|
+
$el: this
|
|
98
|
+
},
|
|
99
|
+
bubbles: true
|
|
100
|
+
}));
|
|
101
|
+
}
|
|
74
102
|
}
|
|
75
103
|
__decorate([
|
|
76
104
|
state(),
|
|
@@ -79,7 +107,11 @@ __decorate([
|
|
|
79
107
|
__decorate([
|
|
80
108
|
property({ type: Boolean }),
|
|
81
109
|
__metadata("design:type", Object)
|
|
82
|
-
], PhoenixLightLitElement.prototype, "isWebComponentConnected", void 0);
|
|
110
|
+
], PhoenixLightLitElement.prototype, "isWebComponentConnected", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
property({ type: Boolean }),
|
|
113
|
+
__metadata("design:type", Object)
|
|
114
|
+
], PhoenixLightLitElement.prototype, "isWebComponentRendered", void 0);
|
|
83
115
|
|
|
84
116
|
export { PhoenixLightLitElement };
|
|
85
117
|
//# sourceMappingURL=phoenix_light_lit_element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,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;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,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;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { PhoenixLightLitElement } from "./phoenix_light_lit_element";
|
|
2
2
|
export declare class PhoenixLightLitElementUtils {
|
|
3
3
|
static getComponentsForWhichToWaitForConnection(components: PhoenixLightLitElement[]): PhoenixLightLitElement[];
|
|
4
|
+
static getComponentsForWhichToWaitForRender(components: PhoenixLightLitElement[]): PhoenixLightLitElement[];
|
|
4
5
|
}
|
|
@@ -7,6 +7,12 @@ class PhoenixLightLitElementUtils {
|
|
|
7
7
|
WebComponentsUtils.isWebComponentDefined($element) &&
|
|
8
8
|
!$element.isWebComponentConnected));
|
|
9
9
|
}
|
|
10
|
+
static getComponentsForWhichToWaitForRender(components) {
|
|
11
|
+
return components.filter(($element) => (WebComponentsUtils.isWebComponent($element) && !WebComponentsUtils.isWebComponentDefined($element)) ||
|
|
12
|
+
(WebComponentsUtils.isWebComponent($element) &&
|
|
13
|
+
WebComponentsUtils.isWebComponentDefined($element) &&
|
|
14
|
+
!$element.isWebComponentConnected));
|
|
15
|
+
}
|
|
10
16
|
}
|
|
11
17
|
|
|
12
18
|
export { PhoenixLightLitElementUtils };
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|