@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.
@@ -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
- document.addEventListener('click', this._dispatchClickedOutsideEvent);
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 { ReactiveController } from 'lit';
2
- import { TClickOutsideControllerProps } from './click_outside_controller_types';
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
- document.addEventListener('click', this._dispatchClickedOutsideEvent);
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,2 +1,3 @@
1
1
  import '@phoenixRoot/core/context/context_controller_types';
2
+ import 'lit';
2
3
  //# sourceMappingURL=click_outside_controller_types.js.map
@@ -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"}
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": "0.14.1",
5
+ "version": "0.14.2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",