@shoper/phoenix_design_system 0.14.1 → 0.14.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 +33 -2
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js +13 -2
- package/build/cjs/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +5 -0
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +33 -2
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.d.ts +6 -3
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js +13 -2
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller_types.d.ts +5 -0
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller_types.js +1 -0
- package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller_types.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,18 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
|
+
var global_constants = require('../../global_constants.js');
|
|
6
7
|
var dropdown_constants = require('./dropdown_constants.js');
|
|
8
|
+
var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
|
|
7
9
|
var portal_constants = require('../portal/portal_constants.js');
|
|
8
10
|
var lit = require('lit');
|
|
9
11
|
var backdrop_constants = require('../backdrop/backdrop_constants.js');
|
|
10
|
-
var global_constants = require('../../global_constants.js');
|
|
11
12
|
var click_outside_controller_messages = require('../../controllers/click_outside_controller/click_outside_controller_messages.js');
|
|
12
13
|
var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
|
|
13
|
-
var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
|
|
14
14
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
|
|
15
15
|
var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
|
|
16
16
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
17
17
|
var decorators = require('lit/decorators');
|
|
18
|
+
var lodash = require('../../../../../external/lodash/lodash.js');
|
|
18
19
|
|
|
19
20
|
var HDropdown_1;
|
|
20
21
|
exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
@@ -45,6 +46,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
45
46
|
var _a;
|
|
46
47
|
this._dispatchShowDropdownEvent();
|
|
47
48
|
(_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`);
|
|
49
|
+
this._toggleScroll();
|
|
48
50
|
resolve();
|
|
49
51
|
}, transitionDuration);
|
|
50
52
|
});
|
|
@@ -91,6 +93,9 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
91
93
|
});
|
|
92
94
|
document.dispatchEvent(hideBackdropEvent);
|
|
93
95
|
};
|
|
96
|
+
this._observeScrollToggling = lodash["default"].throttle(() => {
|
|
97
|
+
this._toggleScroll();
|
|
98
|
+
}, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME);
|
|
94
99
|
this._hoverToggle = async (ev) => {
|
|
95
100
|
if (window.innerWidth < global_constants.BREAKPOINTS.xs)
|
|
96
101
|
return;
|
|
@@ -151,6 +156,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
151
156
|
this.$hoverableDropdownContentElements = [...this.querySelectorAll(dropdown_constants.DROPDOWN_CONTENT_NAME)];
|
|
152
157
|
}
|
|
153
158
|
this._setupListeners();
|
|
159
|
+
this._setupInitialDropdownProperties();
|
|
154
160
|
}
|
|
155
161
|
static _appendDropdownPortal() {
|
|
156
162
|
const $dropdownPortalTarget = document.querySelector(`[name="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
|
|
@@ -164,6 +170,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
164
170
|
var _a;
|
|
165
171
|
this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
|
|
166
172
|
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
|
|
173
|
+
window.addEventListener('resize', this._observeScrollToggling);
|
|
167
174
|
if (this.toggleOnHover)
|
|
168
175
|
document.addEventListener('mouseover', this._hoverToggle);
|
|
169
176
|
}
|
|
@@ -177,6 +184,18 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
177
184
|
if (shouldHideElements)
|
|
178
185
|
this.hide();
|
|
179
186
|
}
|
|
187
|
+
_toggleScroll() {
|
|
188
|
+
var _a, _b;
|
|
189
|
+
if (window.innerWidth >= global_constants.BREAKPOINTS.xs && this._hasScrollableClassInitially)
|
|
190
|
+
return;
|
|
191
|
+
if (window.innerWidth >= global_constants.BREAKPOINTS.xs) {
|
|
192
|
+
(_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(global_constants.SCROLLABLE_CLASS_NAME);
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
if (this._dropdownContentChildrenHeight > window.innerHeight && !this._hasScrollableClassInitially) {
|
|
196
|
+
(_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(global_constants.SCROLLABLE_CLASS_NAME);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
180
199
|
_isHoveredWithinDropdown(element) {
|
|
181
200
|
if (element === this)
|
|
182
201
|
return true;
|
|
@@ -193,10 +212,22 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
|
|
|
193
212
|
return true;
|
|
194
213
|
return false;
|
|
195
214
|
}
|
|
215
|
+
_setupInitialDropdownProperties() {
|
|
216
|
+
if (!this.$dropdownContent)
|
|
217
|
+
return;
|
|
218
|
+
const $dropdownContentChildrenArray = [...this.$dropdownContent.children];
|
|
219
|
+
if (!this._dropdownContentChildrenHeight)
|
|
220
|
+
this._dropdownContentChildrenHeight = $dropdownContentChildrenArray.reduce((totalHeight, currentChild) => {
|
|
221
|
+
return totalHeight + (parseInt(getComputedStyle(currentChild).height.replace('px', '')) || 0);
|
|
222
|
+
}, 0);
|
|
223
|
+
if (!this._hasScrollableClassInitially)
|
|
224
|
+
this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(global_constants.SCROLLABLE_CLASS_NAME);
|
|
225
|
+
}
|
|
196
226
|
disconnectedCallback() {
|
|
197
227
|
var _a;
|
|
198
228
|
super.disconnectedCallback();
|
|
199
229
|
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
|
|
230
|
+
window.removeEventListener('resize', this._observeScrollToggling);
|
|
200
231
|
if (this.toggleOnHover)
|
|
201
232
|
document.removeEventListener('mouseover', this._hoverToggle);
|
|
202
233
|
if (this.opened) {
|
|
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qBAAqB,0CAA8C;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
|
|
6
6
|
var click_outside_controller_messages = require('./click_outside_controller_messages.js');
|
|
7
|
-
require('lit');
|
|
8
7
|
|
|
9
8
|
var _ClickOutsideController_host, _ClickOutsideController_container;
|
|
10
9
|
class ClickOutsideController {
|
|
@@ -32,9 +31,21 @@ class ClickOutsideController {
|
|
|
32
31
|
tslib_es6.__classPrivateFieldGet(this, _ClickOutsideController_host, "f").addController(this);
|
|
33
32
|
}
|
|
34
33
|
hostConnected() {
|
|
35
|
-
|
|
34
|
+
this._setupClickEventListener();
|
|
36
35
|
}
|
|
37
36
|
hostDisconnected() {
|
|
37
|
+
this._removeClickEventListener();
|
|
38
|
+
}
|
|
39
|
+
enable() {
|
|
40
|
+
this._setupClickEventListener();
|
|
41
|
+
}
|
|
42
|
+
disable() {
|
|
43
|
+
this._removeClickEventListener();
|
|
44
|
+
}
|
|
45
|
+
_setupClickEventListener() {
|
|
46
|
+
document.addEventListener('click', this._dispatchClickedOutsideEvent);
|
|
47
|
+
}
|
|
48
|
+
_removeClickEventListener() {
|
|
38
49
|
document.removeEventListener('click', this._dispatchClickedOutsideEvent);
|
|
39
50
|
}
|
|
40
51
|
}
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -15,6 +15,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
15
15
|
$hoverableDropdownContentElements: HDropdownContent[];
|
|
16
16
|
private _positionController;
|
|
17
17
|
private _clickOutsideController;
|
|
18
|
+
private _dropdownContentChildrenHeight;
|
|
19
|
+
private _hasScrollableClassInitially;
|
|
18
20
|
connectedCallback(): void;
|
|
19
21
|
private static _appendDropdownPortal;
|
|
20
22
|
private _setupListeners;
|
|
@@ -24,8 +26,11 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
|
|
|
24
26
|
private _dispatchShowDropdownEvent;
|
|
25
27
|
hide: () => Promise<void>;
|
|
26
28
|
private _dispatchHideDropdownEvent;
|
|
29
|
+
private _observeScrollToggling;
|
|
30
|
+
private _toggleScroll;
|
|
27
31
|
private _hoverToggle;
|
|
28
32
|
private _isHoveredWithinDropdown;
|
|
33
|
+
private _setupInitialDropdownProperties;
|
|
29
34
|
private _positionDropdownContent;
|
|
30
35
|
disconnectedCallback(): void;
|
|
31
36
|
render(): TemplateResult;
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
|
+
import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
|
|
2
3
|
import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
|
|
4
|
+
import { DIRECTIONS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
|
|
3
5
|
import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
|
|
4
6
|
import { html } from 'lit';
|
|
5
7
|
import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
|
|
6
|
-
import { BREAKPOINTS } from '../../global_constants.js';
|
|
7
8
|
import { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from '../../controllers/click_outside_controller/click_outside_controller_messages.js';
|
|
8
9
|
import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
|
|
9
|
-
import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
|
|
10
10
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
|
|
11
11
|
import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
|
|
12
12
|
import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
|
|
13
13
|
import { property } from 'lit/decorators';
|
|
14
|
+
import lodash from '../../../../../external/lodash/lodash.js';
|
|
14
15
|
|
|
15
16
|
var HDropdown_1;
|
|
16
17
|
let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
@@ -41,6 +42,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
41
42
|
var _a;
|
|
42
43
|
this._dispatchShowDropdownEvent();
|
|
43
44
|
(_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
|
|
45
|
+
this._toggleScroll();
|
|
44
46
|
resolve();
|
|
45
47
|
}, transitionDuration);
|
|
46
48
|
});
|
|
@@ -87,6 +89,9 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
87
89
|
});
|
|
88
90
|
document.dispatchEvent(hideBackdropEvent);
|
|
89
91
|
};
|
|
92
|
+
this._observeScrollToggling = lodash.throttle(() => {
|
|
93
|
+
this._toggleScroll();
|
|
94
|
+
}, DEFAULT_THROTTLE_WAIT_TIME);
|
|
90
95
|
this._hoverToggle = async (ev) => {
|
|
91
96
|
if (window.innerWidth < BREAKPOINTS.xs)
|
|
92
97
|
return;
|
|
@@ -147,6 +152,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
147
152
|
this.$hoverableDropdownContentElements = [...this.querySelectorAll(DROPDOWN_CONTENT_NAME)];
|
|
148
153
|
}
|
|
149
154
|
this._setupListeners();
|
|
155
|
+
this._setupInitialDropdownProperties();
|
|
150
156
|
}
|
|
151
157
|
static _appendDropdownPortal() {
|
|
152
158
|
const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
|
|
@@ -160,6 +166,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
160
166
|
var _a;
|
|
161
167
|
this.addEventListener(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
|
|
162
168
|
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
|
|
169
|
+
window.addEventListener('resize', this._observeScrollToggling);
|
|
163
170
|
if (this.toggleOnHover)
|
|
164
171
|
document.addEventListener('mouseover', this._hoverToggle);
|
|
165
172
|
}
|
|
@@ -173,6 +180,18 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
173
180
|
if (shouldHideElements)
|
|
174
181
|
this.hide();
|
|
175
182
|
}
|
|
183
|
+
_toggleScroll() {
|
|
184
|
+
var _a, _b;
|
|
185
|
+
if (window.innerWidth >= BREAKPOINTS.xs && this._hasScrollableClassInitially)
|
|
186
|
+
return;
|
|
187
|
+
if (window.innerWidth >= BREAKPOINTS.xs) {
|
|
188
|
+
(_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(SCROLLABLE_CLASS_NAME);
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
if (this._dropdownContentChildrenHeight > window.innerHeight && !this._hasScrollableClassInitially) {
|
|
192
|
+
(_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(SCROLLABLE_CLASS_NAME);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
176
195
|
_isHoveredWithinDropdown(element) {
|
|
177
196
|
if (element === this)
|
|
178
197
|
return true;
|
|
@@ -189,10 +208,22 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
|
|
|
189
208
|
return true;
|
|
190
209
|
return false;
|
|
191
210
|
}
|
|
211
|
+
_setupInitialDropdownProperties() {
|
|
212
|
+
if (!this.$dropdownContent)
|
|
213
|
+
return;
|
|
214
|
+
const $dropdownContentChildrenArray = [...this.$dropdownContent.children];
|
|
215
|
+
if (!this._dropdownContentChildrenHeight)
|
|
216
|
+
this._dropdownContentChildrenHeight = $dropdownContentChildrenArray.reduce((totalHeight, currentChild) => {
|
|
217
|
+
return totalHeight + (parseInt(getComputedStyle(currentChild).height.replace('px', '')) || 0);
|
|
218
|
+
}, 0);
|
|
219
|
+
if (!this._hasScrollableClassInitially)
|
|
220
|
+
this._hasScrollableClassInitially = this.$dropdownContent.classList.contains(SCROLLABLE_CLASS_NAME);
|
|
221
|
+
}
|
|
192
222
|
disconnectedCallback() {
|
|
193
223
|
var _a;
|
|
194
224
|
super.disconnectedCallback();
|
|
195
225
|
(_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
|
|
226
|
+
window.removeEventListener('resize', this._observeScrollToggling);
|
|
196
227
|
if (this.toggleOnHover)
|
|
197
228
|
document.removeEventListener('mouseover', this._hoverToggle);
|
|
198
229
|
if (this.opened) {
|
|
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mBAAmB,0CAA8C;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,10 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export declare class ClickOutsideController implements ReactiveController {
|
|
1
|
+
import { IClickOutsideController, TClickOutsideControllerProps } from './click_outside_controller_types';
|
|
2
|
+
export declare class ClickOutsideController implements IClickOutsideController {
|
|
4
3
|
#private;
|
|
5
4
|
private _name?;
|
|
6
5
|
constructor({ host, container, name }: TClickOutsideControllerProps);
|
|
7
6
|
hostConnected(): void;
|
|
8
7
|
hostDisconnected(): void;
|
|
8
|
+
enable(): void;
|
|
9
|
+
disable(): void;
|
|
10
|
+
private _setupClickEventListener;
|
|
11
|
+
private _removeClickEventListener;
|
|
9
12
|
private _dispatchClickedOutsideEvent;
|
|
10
13
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
2
|
import { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './click_outside_controller_messages.js';
|
|
3
|
-
import 'lit';
|
|
4
3
|
|
|
5
4
|
var _ClickOutsideController_host, _ClickOutsideController_container;
|
|
6
5
|
class ClickOutsideController {
|
|
@@ -28,9 +27,21 @@ class ClickOutsideController {
|
|
|
28
27
|
__classPrivateFieldGet(this, _ClickOutsideController_host, "f").addController(this);
|
|
29
28
|
}
|
|
30
29
|
hostConnected() {
|
|
31
|
-
|
|
30
|
+
this._setupClickEventListener();
|
|
32
31
|
}
|
|
33
32
|
hostDisconnected() {
|
|
33
|
+
this._removeClickEventListener();
|
|
34
|
+
}
|
|
35
|
+
enable() {
|
|
36
|
+
this._setupClickEventListener();
|
|
37
|
+
}
|
|
38
|
+
disable() {
|
|
39
|
+
this._removeClickEventListener();
|
|
40
|
+
}
|
|
41
|
+
_setupClickEventListener() {
|
|
42
|
+
document.addEventListener('click', this._dispatchClickedOutsideEvent);
|
|
43
|
+
}
|
|
44
|
+
_removeClickEventListener() {
|
|
34
45
|
document.removeEventListener('click', this._dispatchClickedOutsideEvent);
|
|
35
46
|
}
|
|
36
47
|
}
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { TWebComponentsContextControllerHost } from "../../core/context/context_controller_types";
|
|
2
|
+
import { ReactiveController } from 'lit';
|
|
2
3
|
export declare type TClickOutsideControllerProps = {
|
|
3
4
|
host: TWebComponentsContextControllerHost;
|
|
4
5
|
container: HTMLElement;
|
|
@@ -8,3 +9,7 @@ export declare type TClickOutsideEvent = {
|
|
|
8
9
|
target: EventTarget | null;
|
|
9
10
|
name?: string;
|
|
10
11
|
};
|
|
12
|
+
export interface IClickOutsideController extends ReactiveController {
|
|
13
|
+
enable(): void;
|
|
14
|
+
disable(): void;
|
|
15
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"click_outside_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/click_outside_controller/click_outside_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoD,oDAAoD,CAAC"}
|
|
1
|
+
{"version":3,"file":"click_outside_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/click_outside_controller/click_outside_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoD,oDAAoD,CAAC;AACzG,OAAmC,KAAK,CAAC"}
|