@shoper/phoenix_design_system 0.8.1 → 0.8.3-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/build/cjs/packages/phoenix/src/components/backdrop/backdrop.js +71 -0
  2. package/build/cjs/packages/phoenix/src/components/{modal/modal_backdrop.js.map → backdrop/backdrop.js.map} +1 -1
  3. package/build/cjs/packages/phoenix/src/components/backdrop/backdrop_constants.js +16 -0
  4. package/build/cjs/packages/phoenix/src/components/backdrop/backdrop_constants.js.map +1 -0
  5. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +63 -44
  6. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js +0 -2
  8. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/modal/modal.js +15 -6
  10. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/global_constants.js +9 -2
  12. package/build/cjs/packages/phoenix/src/global_constants.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/index.js +7 -7
  14. package/build/esm/packages/phoenix/src/components/{modal/modal_backdrop.d.ts → backdrop/backdrop.d.ts} +6 -2
  15. package/build/esm/packages/phoenix/src/components/backdrop/backdrop.js +69 -0
  16. package/build/esm/packages/phoenix/src/components/{modal/modal_backdrop.js.map → backdrop/backdrop.js.map} +1 -1
  17. package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.d.ts +6 -0
  18. package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.js +10 -0
  19. package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.js.map +1 -0
  20. package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.d.ts +3 -0
  21. package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.js +2 -0
  22. package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.js.map +1 -0
  23. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +5 -2
  24. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +64 -45
  25. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  26. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js +1 -2
  27. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
  28. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +2 -2
  29. package/build/esm/packages/phoenix/src/components/modal/modal.js +15 -6
  30. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  31. package/build/esm/packages/phoenix/src/global_constants.d.ts +8 -1
  32. package/build/esm/packages/phoenix/src/global_constants.js +9 -2
  33. package/build/esm/packages/phoenix/src/global_constants.js.map +1 -1
  34. package/build/esm/packages/phoenix/src/index.d.ts +1 -1
  35. package/build/esm/packages/phoenix/src/index.js +1 -1
  36. package/package.json +1 -1
  37. package/build/cjs/packages/phoenix/src/components/modal/modal_backdrop.js +0 -66
  38. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.d.ts +0 -11
  39. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js +0 -54
  40. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js.map +0 -1
  41. package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.js +0 -64
package/build/cjs/packages/phoenix/src/components/backdrop/backdrop.js ADDED
@@ -0,0 +1,71 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
+ var lit = require('lit');
7
+ var decorators = require('lit/decorators');
8
+ var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
9
+ var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
+ var backdrop_constants = require('./backdrop_constants.js');
11
+
12
+ exports.HBackdrop = class HBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.visible = false;
16
+ this.onClickArray = [];
17
+ this._show = () => {
18
+ this.visible = true;
19
+ };
20
+ this._hide = () => {
21
+ this.visible = false;
22
+ };
23
+ this.addOnClick = (onClick) => {
24
+ this.onClickArray = [...this.onClickArray, onClick];
25
+ };
26
+ this._fireClickEvents = () => {
27
+ this.onClickArray.forEach((clickEvent) => {
28
+ clickEvent();
29
+ });
30
+ };
31
+ }
32
+ connectedCallback() {
33
+ super.connectedCallback();
34
+ document.addEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);
35
+ document.addEventListener(backdrop_constants.BACKDROP_EVENTS.hide, this._hide);
36
+ }
37
+ disconnectedCallback() {
38
+ super.disconnectedCallback();
39
+ document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);
40
+ document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.hide, this._hide);
41
+ }
42
+ updated() {
43
+ if (this.visible)
44
+ this._disableScrolling();
45
+ else
46
+ this._enableScrolling();
47
+ }
48
+ _disableScrolling() {
49
+ document.body.style.overflow = 'hidden';
50
+ document.body.style.paddingRight = '15px';
51
+ }
52
+ _enableScrolling() {
53
+ document.body.style.removeProperty('overflow');
54
+ document.body.style.removeProperty('padding-right');
55
+ }
56
+ render() {
57
+ return lit.html ` <div aria-hidden="true" ?hidden="${!this.visible}" @click="${this._fireClickEvents}" class="${backdrop_constants.BACKDROP_CLASS}"></div>`;
58
+ }
59
+ };
60
+ tslib_es6.__decorate([
61
+ decorators.property({ type: Boolean }),
62
+ tslib_es6.__metadata("design:type", Object)
63
+ ], exports.HBackdrop.prototype, "visible", void 0);
64
+ tslib_es6.__decorate([
65
+ decorators.state(),
66
+ tslib_es6.__metadata("design:type", Array)
67
+ ], exports.HBackdrop.prototype, "onClickArray", void 0);
68
+ exports.HBackdrop = tslib_es6.__decorate([
69
+ phoenix_custom_element.phoenixCustomElement('h-backdrop')
70
+ ], exports.HBackdrop);
71
+ //# sourceMappingURL=backdrop.js.map
package/build/cjs/packages/phoenix/src/components/{modal/modal_backdrop.js.map → backdrop/backdrop.js.map} RENAMED
@@ -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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/backdrop/backdrop_constants.js ADDED
@@ -0,0 +1,16 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const BACKDROP_NAME = 'h-backdrop';
6
+ const BACKDROP_CLASS = 'backdrop';
7
+ const BACKDROP_EVENT = 'backdrop';
8
+ const BACKDROP_EVENTS = {
9
+ show: `${BACKDROP_EVENT}.show`,
10
+ hide: `${BACKDROP_EVENT}.hide`
11
+ };
12
+
13
+ exports.BACKDROP_CLASS = BACKDROP_CLASS;
14
+ exports.BACKDROP_EVENTS = BACKDROP_EVENTS;
15
+ exports.BACKDROP_NAME = BACKDROP_NAME;
16
+ //# sourceMappingURL=backdrop_constants.js.map
package/build/cjs/packages/phoenix/src/components/backdrop/backdrop_constants.js.map ADDED
@@ -0,0 +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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -8,11 +8,12 @@ var decorators = require('lit/decorators');
8
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
10
  var portal_constants = require('../portal/portal_constants.js');
11
+ var backdrop_constants = require('../backdrop/backdrop_constants.js');
11
12
  var dropdown_constants = require('./dropdown_constants.js');
13
+ var global_constants = require('../../global_constants.js');
12
14
  var click_outside_controller_messages = require('../../controllers/click_outside_controller/click_outside_controller_messages.js');
13
15
  var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
14
16
  var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
15
- var global_constants = require('../../global_constants.js');
16
17
  var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
17
18
 
18
19
  exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -24,14 +25,19 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
24
25
  this.name = '';
25
26
  this.transition = 'direction';
26
27
  this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
28
+ this._closeDropdown = () => {
29
+ const dropdowns = document.querySelectorAll(dropdown_constants.DROPDOWN_CONTAINER_NAME);
30
+ dropdowns.forEach((dropdown) => {
31
+ const opened = dropdown.getAttribute('opened');
32
+ if (opened !== null)
33
+ dropdown.hide();
34
+ });
35
+ };
27
36
  this.toggle = () => {
28
37
  this.opened ? this.hide() : this.show();
29
38
  };
30
39
  this.show = async () => {
31
- const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.show, {
32
- bubbles: true
33
- });
34
- this.dispatchEvent(showDropdownEvent);
40
+ this._dispatchShowDropdownEvent();
35
41
  return new Promise((resolve) => {
36
42
  var _a;
37
43
  (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(dropdown_constants.DROPDOWN_CONTENT_VISIBLE_CLASS, `${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
@@ -44,42 +50,60 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
44
50
  setTimeout(() => {
45
51
  var _a;
46
52
  this.opened = true;
47
- this.dispatchEvent(showDropdownEvent);
53
+ this._dispatchShowDropdownEvent();
48
54
  (_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
55
  resolve();
50
56
  }, transitionDuration);
51
57
  });
52
58
  });
53
59
  };
54
- this.hide = async () => {
60
+ this._dispatchShowDropdownEvent = () => {
61
+ const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.show, {
62
+ bubbles: true
63
+ });
64
+ this.dispatchEvent(showDropdownEvent);
65
+ if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
66
+ return;
67
+ const showBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.show, {
68
+ bubbles: true
69
+ });
70
+ this.dispatchEvent(showBackdropEvent);
71
+ };
72
+ this.hide = async () => new Promise((resolve) => {
73
+ const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
74
+ window.requestAnimationFrame(() => {
75
+ var _a, _b;
76
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
77
+ (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
78
+ setTimeout(() => {
79
+ var _a;
80
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
81
+ this.opened = false;
82
+ this._dispatchHideDropdownEvent();
83
+ resolve();
84
+ }, transitionDuration);
85
+ });
86
+ });
87
+ this._dispatchHideDropdownEvent = () => {
55
88
  const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hide, {
56
89
  bubbles: true
57
90
  });
58
- return new Promise((resolve) => {
59
- const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
60
- window.requestAnimationFrame(() => {
61
- var _a, _b;
62
- (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
63
- (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
64
- setTimeout(() => {
65
- var _a;
66
- (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${dropdown_constants.DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
67
- this.opened = false;
68
- this.dispatchEvent(hideDropdownEvent);
69
- resolve();
70
- }, transitionDuration);
71
- });
91
+ this.dispatchEvent(hideDropdownEvent);
92
+ if (window.innerWidth >= global_constants.BREAKPOINTS.xs)
93
+ return;
94
+ const hideBackdropEvent = new Event(backdrop_constants.BACKDROP_EVENTS.hide, {
95
+ bubbles: true
72
96
  });
97
+ this.dispatchEvent(hideBackdropEvent);
73
98
  };
74
99
  this._hoverToggle = async (ev) => {
100
+ if (window.innerWidth < global_constants.BREAKPOINTS.xs)
101
+ return;
75
102
  if (!ev.target) {
76
103
  await this.hide();
77
104
  return;
78
105
  }
79
- const isHoveredWithinDropdown = this._isDescendantOfParent(this, ev.target) ||
80
- (this.$dropdownContent && this._isDescendantOfParent(this.$dropdownContent, ev.target)) ||
81
- ev.target === this ||
82
- ev.target === this.$dropdownContent;
106
+ const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
83
107
  if (isHoveredWithinDropdown && !this.opened) {
84
108
  await this.show();
85
109
  return;
@@ -89,15 +113,6 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
89
113
  return;
90
114
  }
91
115
  };
92
- this._isDescendantOfParent = function (parent, child) {
93
- let parentNode = child.parentNode;
94
- while (parentNode) {
95
- if (parentNode === parent)
96
- return true;
97
- parentNode = parentNode.parentNode;
98
- }
99
- return false;
100
- };
101
116
  this._positionDropdownContent = () => {
102
117
  requestAnimationFrame(() => {
103
118
  this.opened && this._positionController.position();
@@ -107,7 +122,7 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
107
122
  connectedCallback() {
108
123
  super.connectedCallback();
109
124
  this._appendDropdownPortal();
110
- this._appendDropdownBackdrop();
125
+ this._appendBackdrop();
111
126
  if (!this.$dropdownContent)
112
127
  this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
113
128
  if (!this.$dropdownToggler)
@@ -135,20 +150,20 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
135
150
  document.body.appendChild($portalTarget);
136
151
  }
137
152
  }
138
- _appendDropdownBackdrop() {
139
- const $dropdownBackdrop = document.querySelector(dropdown_constants.DROPDOWN_BACKDROP_NAME);
140
- if (!$dropdownBackdrop) {
141
- const $backdrop = document.createElement(dropdown_constants.DROPDOWN_BACKDROP_NAME);
142
- document.body.appendChild($backdrop);
153
+ _appendBackdrop() {
154
+ const $backdrop = document.querySelector(backdrop_constants.BACKDROP_NAME);
155
+ if (!$backdrop) {
156
+ const $newBackdrop = document.createElement(backdrop_constants.BACKDROP_NAME);
157
+ document.body.appendChild($newBackdrop);
158
+ $newBackdrop.addOnClick(this._closeDropdown);
143
159
  }
144
160
  }
145
161
  _setupListeners() {
146
162
  var _a;
147
163
  this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
148
164
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
149
- if (this.toggleOnHover && window.innerWidth > global_constants.MOBILE_SCREEN_WIDTH) {
165
+ if (this.toggleOnHover)
150
166
  document.addEventListener('mouseover', this._hoverToggle);
151
- }
152
167
  }
153
168
  _handleClickOutside() {
154
169
  var _a;
@@ -157,13 +172,17 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
157
172
  this.hide();
158
173
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
159
174
  }
175
+ _isHoveredWithinDropdown(element) {
176
+ const isDescendantOfDropdown = element.closest(`${dropdown_constants.DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
177
+ const isDescendantOfContent = this.$dropdownContent && element.closest(`${dropdown_constants.DROPDOWN_CONTENT_NAME}[name="${this.name}"]`) !== null;
178
+ return isDescendantOfDropdown || isDescendantOfContent || element === this || element === this.$dropdownContent;
179
+ }
160
180
  disconnectedCallback() {
161
181
  var _a;
162
182
  super.disconnectedCallback();
163
183
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
164
- if (this.toggleOnHover && window.innerWidth > global_constants.MOBILE_SCREEN_WIDTH) {
184
+ if (this.toggleOnHover)
165
185
  document.removeEventListener('mouseover', this._hoverToggle);
166
- }
167
186
  this.opened = false;
168
187
  }
169
188
  render() {
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map CHANGED
@@ -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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js CHANGED
@@ -6,7 +6,6 @@ const DROPDOWN_NAME = 'dropdown';
6
6
  const DROPDOWN_CONTAINER_NAME = `h-${DROPDOWN_NAME}`;
7
7
  const DROPDOWN_TOGGLER_NAME = `${DROPDOWN_CONTAINER_NAME}-toggler`;
8
8
  const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
9
- const DROPDOWN_BACKDROP_NAME = `${DROPDOWN_CONTAINER_NAME}-backdrop`;
10
9
  const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
11
10
  const DROPDOWN_EVENT = 'dropdown';
12
11
  const DROPDOWN_EVENTS = {
@@ -22,7 +21,6 @@ const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CLASS}_show`;
22
21
  const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CLASS}_hide`;
23
22
 
24
23
  exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
25
- exports.DROPDOWN_BACKDROP_NAME = DROPDOWN_BACKDROP_NAME;
26
24
  exports.DROPDOWN_CLASS = DROPDOWN_CLASS;
27
25
  exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
28
26
  exports.DROPDOWN_CONTENT_CLASS = DROPDOWN_CONTENT_CLASS;
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -8,6 +8,7 @@ var decorators = require('lit/decorators');
8
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
10
  var portal_constants = require('../portal/portal_constants.js');
11
+ var backdrop_constants = require('../backdrop/backdrop_constants.js');
11
12
  var modal_constants = require('./modal_constants.js');
12
13
  var ref = require('../../../../../external/lit-html/directives/ref.js');
13
14
 
@@ -93,11 +94,11 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
93
94
  document.body.appendChild($portalTarget);
94
95
  }
95
96
  }
96
- static _appendModalsBackdrop() {
97
- const $modalsBackdrop = document.querySelector('h-modal-backdrop');
98
- if (!$modalsBackdrop) {
99
- const $backdrop = document.createElement('h-modal-backdrop');
100
- document.body.appendChild($backdrop);
97
+ static _appendBackdrop() {
98
+ const $backdrop = document.querySelector(backdrop_constants.BACKDROP_NAME);
99
+ if (!$backdrop) {
100
+ const $newBackdrop = document.createElement(backdrop_constants.BACKDROP_NAME);
101
+ document.body.appendChild($newBackdrop);
101
102
  }
102
103
  }
103
104
  static isSomeModalOpen() {
@@ -106,7 +107,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
106
107
  connectedCallback() {
107
108
  super.connectedCallback();
108
109
  HModal_1._appendModalsPortal();
109
- HModal_1._appendModalsBackdrop();
110
+ HModal_1._appendBackdrop();
110
111
  document.addEventListener('keydown', this._keepFocusWithinModal);
111
112
  document.addEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
112
113
  }
@@ -150,7 +151,11 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
150
151
  const openModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.opened, {
151
152
  bubbles: true
152
153
  });
154
+ const openBackdropEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.show, {
155
+ bubbles: true
156
+ });
153
157
  this.dispatchEvent(openModalEvent);
158
+ this.dispatchEvent(openBackdropEvent);
154
159
  }
155
160
  async close() {
156
161
  return new Promise((resolve) => {
@@ -173,7 +178,11 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
173
178
  const closeModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.closed, {
174
179
  bubbles: true
175
180
  });
181
+ const closeBackdropEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.hide, {
182
+ bubbles: true
183
+ });
176
184
  this.dispatchEvent(closeModalEvent);
185
+ this.dispatchEvent(closeBackdropEvent);
177
186
  }
178
187
  render() {
179
188
  return lit.html `
package/build/cjs/packages/phoenix/src/components/modal/modal.js.map CHANGED
@@ -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,kBAAkB,oDAAwD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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,kBAAkB,oDAAwD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/global_constants.js CHANGED
@@ -2,7 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const MOBILE_SCREEN_WIDTH = 575;
5
+ const BREAKPOINTS = {
6
+ xs: 576,
7
+ sm: 768,
8
+ md: 1000,
9
+ lg: 1200,
10
+ xl: 1440,
11
+ xxl: 1920
12
+ };
6
13
 
7
- exports.MOBILE_SCREEN_WIDTH = MOBILE_SCREEN_WIDTH;
14
+ exports.BREAKPOINTS = BREAKPOINTS;
8
15
  //# sourceMappingURL=global_constants.js.map
package/build/cjs/packages/phoenix/src/global_constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
package/build/cjs/packages/phoenix/src/index.js CHANGED
@@ -10,7 +10,6 @@ var portal_target = require('./components/portal/portal_target.js');
10
10
  var portal = require('./components/portal/portal.js');
11
11
  var modal = require('./components/modal/modal.js');
12
12
  var modal_opener = require('./components/modal/modal_opener.js');
13
- var modal_backdrop = require('./components/modal/modal_backdrop.js');
14
13
  var modal_body = require('./components/modal/modal_body.js');
15
14
  var modal_footer = require('./components/modal/modal_footer.js');
16
15
  var modal_header = require('./components/modal/modal_header.js');
@@ -18,6 +17,7 @@ var modal_close = require('./components/modal/modal_close.js');
18
17
  var keystrokes_controller = require('./controllers/keystrokes_controller/keystrokes_controller.js');
19
18
  var btn_controller = require('./controllers/btn_controller.js');
20
19
  var click_outside_controller = require('./controllers/click_outside_controller/click_outside_controller.js');
20
+ var backdrop = require('./components/backdrop/backdrop.js');
21
21
  var relative_position_controller = require('./controllers/relative_position_controller/relative_position_controller.js');
22
22
  var dropdown = require('./components/dropdown/dropdown.js');
23
23
  var toggle_element_aria_controller = require('./controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
@@ -59,12 +59,6 @@ Object.defineProperty(exports, 'HModalOpener', {
59
59
  return modal_opener.HModalOpener;
60
60
  }
61
61
  });
62
- Object.defineProperty(exports, 'HModalBackdrop', {
63
- enumerable: true,
64
- get: function () {
65
- return modal_backdrop.HModalBackdrop;
66
- }
67
- });
68
62
  Object.defineProperty(exports, 'HModalBody', {
69
63
  enumerable: true,
70
64
  get: function () {
@@ -92,6 +86,12 @@ Object.defineProperty(exports, 'HModalClose', {
92
86
  exports.KeystrokesController = keystrokes_controller.KeystrokesController;
93
87
  exports.BtnController = btn_controller.BtnController;
94
88
  exports.ClickOutsideController = click_outside_controller.ClickOutsideController;
89
+ Object.defineProperty(exports, 'HBackdrop', {
90
+ enumerable: true,
91
+ get: function () {
92
+ return backdrop.HBackdrop;
93
+ }
94
+ });
95
95
  exports.RelativePositionController = relative_position_controller.RelativePositionController;
96
96
  Object.defineProperty(exports, 'HDropdown', {
97
97
  enumerable: true,
package/build/esm/packages/phoenix/src/components/{modal/modal_backdrop.d.ts → backdrop/backdrop.d.ts} RENAMED
@@ -1,6 +1,8 @@
1
+ import { TemplateResult } from 'lit';
1
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
2
- export declare class HModalBackdrop extends PhoenixLightLitElement {
3
+ export declare class HBackdrop extends PhoenixLightLitElement {
3
4
  visible: boolean;
5
+ onClickArray: (() => void)[];
4
6
  connectedCallback(): void;
5
7
  disconnectedCallback(): void;
6
8
  private _show;
@@ -8,5 +10,7 @@ export declare class HModalBackdrop extends PhoenixLightLitElement {
8
10
  protected updated(): void;
9
11
  private _disableScrolling;
10
12
  private _enableScrolling;
11
- render(): import("lit-html").TemplateResult<1>;
13
+ addOnClick: (onClick: () => void) => void;
14
+ private _fireClickEvents;
15
+ protected render(): TemplateResult;
12
16
  }
package/build/esm/packages/phoenix/src/components/backdrop/backdrop.js ADDED
@@ -0,0 +1,69 @@
1
+ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
+ import { html } from 'lit';
3
+ import { property, state } from 'lit/decorators';
4
+ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
5
+ import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
+ import { BACKDROP_EVENTS, BACKDROP_CLASS } from './backdrop_constants.js';
7
+
8
+ let HBackdrop = class HBackdrop extends PhoenixLightLitElement {
9
+ constructor() {
10
+ super(...arguments);
11
+ this.visible = false;
12
+ this.onClickArray = [];
13
+ this._show = () => {
14
+ this.visible = true;
15
+ };
16
+ this._hide = () => {
17
+ this.visible = false;
18
+ };
19
+ this.addOnClick = (onClick) => {
20
+ this.onClickArray = [...this.onClickArray, onClick];
21
+ };
22
+ this._fireClickEvents = () => {
23
+ this.onClickArray.forEach((clickEvent) => {
24
+ clickEvent();
25
+ });
26
+ };
27
+ }
28
+ connectedCallback() {
29
+ super.connectedCallback();
30
+ document.addEventListener(BACKDROP_EVENTS.show, this._show);
31
+ document.addEventListener(BACKDROP_EVENTS.hide, this._hide);
32
+ }
33
+ disconnectedCallback() {
34
+ super.disconnectedCallback();
35
+ document.removeEventListener(BACKDROP_EVENTS.show, this._show);
36
+ document.removeEventListener(BACKDROP_EVENTS.hide, this._hide);
37
+ }
38
+ updated() {
39
+ if (this.visible)
40
+ this._disableScrolling();
41
+ else
42
+ this._enableScrolling();
43
+ }
44
+ _disableScrolling() {
45
+ document.body.style.overflow = 'hidden';
46
+ document.body.style.paddingRight = '15px';
47
+ }
48
+ _enableScrolling() {
49
+ document.body.style.removeProperty('overflow');
50
+ document.body.style.removeProperty('padding-right');
51
+ }
52
+ render() {
53
+ return html ` <div aria-hidden="true" ?hidden="${!this.visible}" @click="${this._fireClickEvents}" class="${BACKDROP_CLASS}"></div>`;
54
+ }
55
+ };
56
+ __decorate([
57
+ property({ type: Boolean }),
58
+ __metadata("design:type", Object)
59
+ ], HBackdrop.prototype, "visible", void 0);
60
+ __decorate([
61
+ state(),
62
+ __metadata("design:type", Array)
63
+ ], HBackdrop.prototype, "onClickArray", void 0);
64
+ HBackdrop = __decorate([
65
+ phoenixCustomElement('h-backdrop')
66
+ ], HBackdrop);
67
+
68
+ export { HBackdrop };
69
+ //# sourceMappingURL=backdrop.js.map
package/build/esm/packages/phoenix/src/components/{modal/modal_backdrop.js.map → backdrop/backdrop.js.map} RENAMED
@@ -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;"}
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;"}
package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const BACKDROP_NAME = "h-backdrop";
2
+ export declare const BACKDROP_CLASS = "backdrop";
3
+ export declare const BACKDROP_EVENTS: {
4
+ show: string;
5
+ hide: string;
6
+ };
package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.js ADDED
@@ -0,0 +1,10 @@
1
+ const BACKDROP_NAME = 'h-backdrop';
2
+ const BACKDROP_CLASS = 'backdrop';
3
+ const BACKDROP_EVENT = 'backdrop';
4
+ const BACKDROP_EVENTS = {
5
+ show: `${BACKDROP_EVENT}.show`,
6
+ hide: `${BACKDROP_EVENT}.hide`
7
+ };
8
+
9
+ export { BACKDROP_CLASS, BACKDROP_EVENTS, BACKDROP_NAME };
10
+ //# sourceMappingURL=backdrop_constants.js.map
package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare type TBackdropProps = {
2
+ onClick: () => void;
3
+ };
package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.js ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=backdrop_types.js.map
package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"backdrop_types.js","sourceRoot":"","sources":["../../../../../../../src/components/backdrop/backdrop_types.ts"],"names":[],"mappings":""}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts CHANGED
@@ -14,14 +14,17 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
14
14
  private _clickOutsideController;
15
15
  connectedCallback(): void;
16
16
  private _appendDropdownPortal;
17
- private _appendDropdownBackdrop;
17
+ private _appendBackdrop;
18
+ private _closeDropdown;
18
19
  private _setupListeners;
19
20
  private _handleClickOutside;
20
21
  toggle: () => void;
21
22
  show: () => Promise<void>;
23
+ private _dispatchShowDropdownEvent;
22
24
  hide: () => Promise<void>;
25
+ private _dispatchHideDropdownEvent;
23
26
  private _hoverToggle;
24
- private _isDescendantOfParent;
27
+ private _isHoveredWithinDropdown;
25
28
  private _positionDropdownContent;
26
29
  disconnectedCallback(): void;
27
30
  render(): TemplateResult;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -4,11 +4,12 @@ import { property } from 'lit/decorators';
4
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
6
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
7
- import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_EVENTS, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME, DROPDOWN_BACKDROP_NAME } from './dropdown_constants.js';
7
+ import { BACKDROP_EVENTS, BACKDROP_NAME } from '../backdrop/backdrop_constants.js';
8
+ import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
9
+ import { BREAKPOINTS } from '../../global_constants.js';
8
10
  import { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from '../../controllers/click_outside_controller/click_outside_controller_messages.js';
9
11
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
10
12
  import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
11
- import { MOBILE_SCREEN_WIDTH } from '../../global_constants.js';
12
13
  import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
13
14
 
14
15
  let HDropdown = class HDropdown extends PhoenixLightLitElement {
@@ -20,14 +21,19 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
20
21
  this.name = '';
21
22
  this.transition = 'direction';
22
23
  this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
24
+ this._closeDropdown = () => {
25
+ const dropdowns = document.querySelectorAll(DROPDOWN_CONTAINER_NAME);
26
+ dropdowns.forEach((dropdown) => {
27
+ const opened = dropdown.getAttribute('opened');
28
+ if (opened !== null)
29
+ dropdown.hide();
30
+ });
31
+ };
23
32
  this.toggle = () => {
24
33
  this.opened ? this.hide() : this.show();
25
34
  };
26
35
  this.show = async () => {
27
- const showDropdownEvent = new Event(DROPDOWN_EVENTS.show, {
28
- bubbles: true
29
- });
30
- this.dispatchEvent(showDropdownEvent);
36
+ this._dispatchShowDropdownEvent();
31
37
  return new Promise((resolve) => {
32
38
  var _a;
33
39
  (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(DROPDOWN_CONTENT_VISIBLE_CLASS, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
@@ -40,42 +46,60 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
40
46
  setTimeout(() => {
41
47
  var _a;
42
48
  this.opened = true;
43
- this.dispatchEvent(showDropdownEvent);
49
+ this._dispatchShowDropdownEvent();
44
50
  (_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
51
  resolve();
46
52
  }, transitionDuration);
47
53
  });
48
54
  });
49
55
  };
50
- this.hide = async () => {
56
+ this._dispatchShowDropdownEvent = () => {
57
+ const showDropdownEvent = new Event(DROPDOWN_EVENTS.show, {
58
+ bubbles: true
59
+ });
60
+ this.dispatchEvent(showDropdownEvent);
61
+ if (window.innerWidth >= BREAKPOINTS.xs)
62
+ return;
63
+ const showBackdropEvent = new Event(BACKDROP_EVENTS.show, {
64
+ bubbles: true
65
+ });
66
+ this.dispatchEvent(showBackdropEvent);
67
+ };
68
+ this.hide = async () => new Promise((resolve) => {
69
+ const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
70
+ window.requestAnimationFrame(() => {
71
+ var _a, _b;
72
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
73
+ (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
74
+ setTimeout(() => {
75
+ var _a;
76
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
77
+ this.opened = false;
78
+ this._dispatchHideDropdownEvent();
79
+ resolve();
80
+ }, transitionDuration);
81
+ });
82
+ });
83
+ this._dispatchHideDropdownEvent = () => {
51
84
  const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hide, {
52
85
  bubbles: true
53
86
  });
54
- return new Promise((resolve) => {
55
- const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
56
- window.requestAnimationFrame(() => {
57
- var _a, _b;
58
- (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`);
59
- (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.classList.add(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
60
- setTimeout(() => {
61
- var _a;
62
- (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_HIDE}-${this.transition}-start`, `${DROPDOWN_CONTENT_HIDE}-${this.transition}-end`);
63
- this.opened = false;
64
- this.dispatchEvent(hideDropdownEvent);
65
- resolve();
66
- }, transitionDuration);
67
- });
87
+ this.dispatchEvent(hideDropdownEvent);
88
+ if (window.innerWidth >= BREAKPOINTS.xs)
89
+ return;
90
+ const hideBackdropEvent = new Event(BACKDROP_EVENTS.hide, {
91
+ bubbles: true
68
92
  });
93
+ this.dispatchEvent(hideBackdropEvent);
69
94
  };
70
95
  this._hoverToggle = async (ev) => {
96
+ if (window.innerWidth < BREAKPOINTS.xs)
97
+ return;
71
98
  if (!ev.target) {
72
99
  await this.hide();
73
100
  return;
74
101
  }
75
- const isHoveredWithinDropdown = this._isDescendantOfParent(this, ev.target) ||
76
- (this.$dropdownContent && this._isDescendantOfParent(this.$dropdownContent, ev.target)) ||
77
- ev.target === this ||
78
- ev.target === this.$dropdownContent;
102
+ const isHoveredWithinDropdown = this._isHoveredWithinDropdown(ev.target);
79
103
  if (isHoveredWithinDropdown && !this.opened) {
80
104
  await this.show();
81
105
  return;
@@ -85,15 +109,6 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
85
109
  return;
86
110
  }
87
111
  };
88
- this._isDescendantOfParent = function (parent, child) {
89
- let parentNode = child.parentNode;
90
- while (parentNode) {
91
- if (parentNode === parent)
92
- return true;
93
- parentNode = parentNode.parentNode;
94
- }
95
- return false;
96
- };
97
112
  this._positionDropdownContent = () => {
98
113
  requestAnimationFrame(() => {
99
114
  this.opened && this._positionController.position();
@@ -103,7 +118,7 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
103
118
  connectedCallback() {
104
119
  super.connectedCallback();
105
120
  this._appendDropdownPortal();
106
- this._appendDropdownBackdrop();
121
+ this._appendBackdrop();
107
122
  if (!this.$dropdownContent)
108
123
  this.$dropdownContent = this.querySelector(DROPDOWN_CONTENT_NAME);
109
124
  if (!this.$dropdownToggler)
@@ -131,20 +146,20 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
131
146
  document.body.appendChild($portalTarget);
132
147
  }
133
148
  }
134
- _appendDropdownBackdrop() {
135
- const $dropdownBackdrop = document.querySelector(DROPDOWN_BACKDROP_NAME);
136
- if (!$dropdownBackdrop) {
137
- const $backdrop = document.createElement(DROPDOWN_BACKDROP_NAME);
138
- document.body.appendChild($backdrop);
149
+ _appendBackdrop() {
150
+ const $backdrop = document.querySelector(BACKDROP_NAME);
151
+ if (!$backdrop) {
152
+ const $newBackdrop = document.createElement(BACKDROP_NAME);
153
+ document.body.appendChild($newBackdrop);
154
+ $newBackdrop.addOnClick(this._closeDropdown);
139
155
  }
140
156
  }
141
157
  _setupListeners() {
142
158
  var _a;
143
159
  this.addEventListener(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
144
160
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
145
- if (this.toggleOnHover && window.innerWidth > MOBILE_SCREEN_WIDTH) {
161
+ if (this.toggleOnHover)
146
162
  document.addEventListener('mouseover', this._hoverToggle);
147
- }
148
163
  }
149
164
  _handleClickOutside() {
150
165
  var _a;
@@ -153,13 +168,17 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
153
168
  this.hide();
154
169
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
155
170
  }
171
+ _isHoveredWithinDropdown(element) {
172
+ const isDescendantOfDropdown = element.closest(`${DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
173
+ const isDescendantOfContent = this.$dropdownContent && element.closest(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`) !== null;
174
+ return isDescendantOfDropdown || isDescendantOfContent || element === this || element === this.$dropdownContent;
175
+ }
156
176
  disconnectedCallback() {
157
177
  var _a;
158
178
  super.disconnectedCallback();
159
179
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
160
- if (this.toggleOnHover && window.innerWidth > MOBILE_SCREEN_WIDTH) {
180
+ if (this.toggleOnHover)
161
181
  document.removeEventListener('mouseover', this._hoverToggle);
162
- }
163
182
  this.opened = false;
164
183
  }
165
184
  render() {
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js CHANGED
@@ -2,7 +2,6 @@ const DROPDOWN_NAME = 'dropdown';
2
2
  const DROPDOWN_CONTAINER_NAME = `h-${DROPDOWN_NAME}`;
3
3
  const DROPDOWN_TOGGLER_NAME = `${DROPDOWN_CONTAINER_NAME}-toggler`;
4
4
  const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
5
- const DROPDOWN_BACKDROP_NAME = `${DROPDOWN_CONTAINER_NAME}-backdrop`;
6
5
  const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
7
6
  const DROPDOWN_EVENT = 'dropdown';
8
7
  const DROPDOWN_EVENTS = {
@@ -17,5 +16,5 @@ const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CLASS}_visible`;
17
16
  const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CLASS}_show`;
18
17
  const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CLASS}_hide`;
19
18
 
20
- export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_BACKDROP_NAME, DROPDOWN_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_CLASS, DROPDOWN_TOGGLER_NAME };
19
+ export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_CLASS, DROPDOWN_TOGGLER_NAME };
21
20
  //# sourceMappingURL=dropdown_constants.js.map
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
package/build/esm/packages/phoenix/src/components/modal/modal.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { TemplateResult, PropertyValues } from 'lit';
1
+ import { PropertyValues, TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
3
3
  export declare class HModal extends PhoenixLightLitElement {
4
4
  opened: boolean;
@@ -13,7 +13,7 @@ export declare class HModal extends PhoenixLightLitElement {
13
13
  private _propsChangeStrategies;
14
14
  private static openModals;
15
15
  private static _appendModalsPortal;
16
- private static _appendModalsBackdrop;
16
+ private static _appendBackdrop;
17
17
  static isSomeModalOpen(): boolean;
18
18
  constructor();
19
19
  connectedCallback(): void;
package/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -4,6 +4,7 @@ import { property, state } from 'lit/decorators';
4
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
6
  import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
7
+ import { BACKDROP_NAME, BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
7
8
  import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
8
9
  import { createRef as e, ref as n } from '../../../../../external/lit-html/directives/ref.js';
9
10
 
@@ -89,11 +90,11 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
89
90
  document.body.appendChild($portalTarget);
90
91
  }
91
92
  }
92
- static _appendModalsBackdrop() {
93
- const $modalsBackdrop = document.querySelector('h-modal-backdrop');
94
- if (!$modalsBackdrop) {
95
- const $backdrop = document.createElement('h-modal-backdrop');
96
- document.body.appendChild($backdrop);
93
+ static _appendBackdrop() {
94
+ const $backdrop = document.querySelector(BACKDROP_NAME);
95
+ if (!$backdrop) {
96
+ const $newBackdrop = document.createElement(BACKDROP_NAME);
97
+ document.body.appendChild($newBackdrop);
97
98
  }
98
99
  }
99
100
  static isSomeModalOpen() {
@@ -102,7 +103,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
102
103
  connectedCallback() {
103
104
  super.connectedCallback();
104
105
  HModal_1._appendModalsPortal();
105
- HModal_1._appendModalsBackdrop();
106
+ HModal_1._appendBackdrop();
106
107
  document.addEventListener('keydown', this._keepFocusWithinModal);
107
108
  document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
108
109
  }
@@ -146,7 +147,11 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
146
147
  const openModalEvent = new CustomEvent(MODAL_EVENTS.opened, {
147
148
  bubbles: true
148
149
  });
150
+ const openBackdropEvent = new CustomEvent(BACKDROP_EVENTS.show, {
151
+ bubbles: true
152
+ });
149
153
  this.dispatchEvent(openModalEvent);
154
+ this.dispatchEvent(openBackdropEvent);
150
155
  }
151
156
  async close() {
152
157
  return new Promise((resolve) => {
@@ -169,7 +174,11 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
169
174
  const closeModalEvent = new CustomEvent(MODAL_EVENTS.closed, {
170
175
  bubbles: true
171
176
  });
177
+ const closeBackdropEvent = new CustomEvent(BACKDROP_EVENTS.hide, {
178
+ bubbles: true
179
+ });
172
180
  this.dispatchEvent(closeModalEvent);
181
+ this.dispatchEvent(closeBackdropEvent);
173
182
  }
174
183
  render() {
175
184
  return html `
package/build/esm/packages/phoenix/src/components/modal/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/global_constants.d.ts CHANGED
@@ -1 +1,8 @@
1
- export declare const MOBILE_SCREEN_WIDTH = 575;
1
+ export declare const BREAKPOINTS: {
2
+ xs: number;
3
+ sm: number;
4
+ md: number;
5
+ lg: number;
6
+ xl: number;
7
+ xxl: number;
8
+ };
package/build/esm/packages/phoenix/src/global_constants.js CHANGED
@@ -1,4 +1,11 @@
1
- const MOBILE_SCREEN_WIDTH = 575;
1
+ const BREAKPOINTS = {
2
+ xs: 576,
3
+ sm: 768,
4
+ md: 1000,
5
+ lg: 1200,
6
+ xl: 1440,
7
+ xxl: 1920
8
+ };
2
9
 
3
- export { MOBILE_SCREEN_WIDTH };
10
+ export { BREAKPOINTS };
4
11
  //# sourceMappingURL=global_constants.js.map
package/build/esm/packages/phoenix/src/global_constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/index.d.ts CHANGED
@@ -7,7 +7,6 @@ export { HPortal } from './components/portal/portal';
7
7
  export { HPortalTarget } from './components/portal/portal_target';
8
8
  export { HModal } from './components/modal/modal';
9
9
  export { HModalOpener } from './components/modal/modal_opener';
10
- export { HModalBackdrop } from './components/modal/modal_backdrop';
11
10
  export { HModalBody } from './components/modal/modal_body';
12
11
  export { HModalFooter } from './components/modal/modal_footer';
13
12
  export { HModalHeader } from './components/modal/modal_header';
@@ -20,3 +19,4 @@ export { ClickOutsideController } from './controllers/click_outside_controller/c
20
19
  export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller';
21
20
  export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller';
22
21
  export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller';
22
+ export { HBackdrop } from './components/backdrop/backdrop';
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -6,7 +6,6 @@ export { HPortalTarget } from './components/portal/portal_target.js';
6
6
  export { HPortal } from './components/portal/portal.js';
7
7
  export { HModal } from './components/modal/modal.js';
8
8
  export { HModalOpener } from './components/modal/modal_opener.js';
9
- export { HModalBackdrop } from './components/modal/modal_backdrop.js';
10
9
  export { HModalBody } from './components/modal/modal_body.js';
11
10
  export { HModalFooter } from './components/modal/modal_footer.js';
12
11
  export { HModalHeader } from './components/modal/modal_header.js';
@@ -14,6 +13,7 @@ export { HModalClose } from './components/modal/modal_close.js';
14
13
  export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
15
14
  export { BtnController } from './controllers/btn_controller.js';
16
15
  export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller.js';
16
+ export { HBackdrop } from './components/backdrop/backdrop.js';
17
17
  export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
18
18
  export { HDropdown } from './components/dropdown/dropdown.js';
19
19
  export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
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.8.1",
5
+ "version": "0.8.3-1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
package/build/cjs/packages/phoenix/src/components/modal/modal_backdrop.js DELETED
@@ -1,66 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
- var lit = require('lit');
7
- var decorators = require('lit/decorators');
8
- var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
9
- var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
- var modal_constants = require('./modal_constants.js');
11
- var modal = require('./modal.js');
12
-
13
- exports.HModalBackdrop = class HModalBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
14
- constructor() {
15
- super(...arguments);
16
- this.visible = false;
17
- this._show = () => {
18
- if (!this.visible) {
19
- this.visible = true;
20
- }
21
- };
22
- this._hide = () => {
23
- if (!modal.HModal.isSomeModalOpen()) {
24
- this.visible = false;
25
- }
26
- };
27
- }
28
- connectedCallback() {
29
- super.connectedCallback();
30
- document.addEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
31
- document.addEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
32
- }
33
- disconnectedCallback() {
34
- super.disconnectedCallback();
35
- document.removeEventListener(modal_constants.MODAL_EVENTS.opened, this._show);
36
- document.removeEventListener(modal_constants.MODAL_EVENTS.closed, this._hide);
37
- }
38
- updated() {
39
- if (modal.HModal.isSomeModalOpen()) {
40
- this.visible = true;
41
- this._disableScrolling();
42
- }
43
- else {
44
- this._enableScrolling();
45
- }
46
- }
47
- _disableScrolling() {
48
- document.body.style.overflow = 'hidden';
49
- document.body.style.paddingRight = '15px';
50
- }
51
- _enableScrolling() {
52
- document.body.style.removeProperty('overflow');
53
- document.body.style.removeProperty('padding-right');
54
- }
55
- render() {
56
- return lit.html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
57
- }
58
- };
59
- tslib_es6.__decorate([
60
- decorators.property({ type: Boolean }),
61
- tslib_es6.__metadata("design:type", Object)
62
- ], exports.HModalBackdrop.prototype, "visible", void 0);
63
- exports.HModalBackdrop = tslib_es6.__decorate([
64
- phoenix_custom_element.phoenixCustomElement('h-modal-backdrop')
65
- ], exports.HModalBackdrop);
66
- //# sourceMappingURL=modal_backdrop.js.map
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.d.ts DELETED
@@ -1,11 +0,0 @@
1
- import { TemplateResult } from 'lit';
2
- import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
3
- export declare class HDropdownBackdrop extends PhoenixLightLitElement {
4
- visible: boolean;
5
- connectedCallback(): void;
6
- disconnectedCallback(): void;
7
- private _show;
8
- private _hide;
9
- private _closeDropdown;
10
- protected render(): TemplateResult;
11
- }
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js DELETED
@@ -1,54 +0,0 @@
1
- import { __decorate, __metadata } from "tslib";
2
- import { DROPDOWN_BACKDROP_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_EVENTS } from '@phoenixRoot/components/dropdown/dropdown_constants';
3
- import { html } from 'lit';
4
- import './dropdown_types';
5
- import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element';
6
- import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
7
- import { property } from 'lit/decorators';
8
- let HDropdownBackdrop = class HDropdownBackdrop extends PhoenixLightLitElement {
9
- constructor() {
10
- super(...arguments);
11
- this.visible = false;
12
- this._show = () => {
13
- this.visible = true;
14
- };
15
- this._hide = () => {
16
- this.visible = false;
17
- };
18
- this._closeDropdown = () => {
19
- const dropdowns = document.querySelectorAll(DROPDOWN_CONTAINER_NAME);
20
- dropdowns.forEach((dropdown) => {
21
- const opened = dropdown.getAttribute('opened');
22
- if (opened !== null)
23
- dropdown.hide();
24
- });
25
- };
26
- }
27
- connectedCallback() {
28
- super.connectedCallback();
29
- document.addEventListener(DROPDOWN_EVENTS.show, this._show);
30
- document.addEventListener(DROPDOWN_EVENTS.hide, this._hide);
31
- }
32
- disconnectedCallback() {
33
- super.disconnectedCallback();
34
- document.removeEventListener(DROPDOWN_EVENTS.show, this._show);
35
- document.removeEventListener(DROPDOWN_EVENTS.hide, this._hide);
36
- }
37
- render() {
38
- return html ` <div
39
- aria-hidden="true"
40
- ?hidden="${!this.visible}"
41
- @click="${this._closeDropdown}"
42
- class="${DROPDOWN_BACKDROP_CLASS}"
43
- ></div>`;
44
- }
45
- };
46
- __decorate([
47
- property({ type: Boolean }),
48
- __metadata("design:type", Object)
49
- ], HDropdownBackdrop.prototype, "visible", void 0);
50
- HDropdownBackdrop = __decorate([
51
- phoenixCustomElement('h-dropdown-backdrop')
52
- ], HDropdownBackdrop);
53
- export { HDropdownBackdrop };
54
- //# sourceMappingURL=dropdown_backdrop.js.map
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"dropdown_backdrop.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_backdrop.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AACxI,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3C,OAA0B,kBAAkB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,sBAAsB;IAA7D;;QAEI,YAAO,GAAG,KAAK,CAAC;QAgBR,UAAK,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;YAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;YAErE,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC3B,MAAM,MAAM,GAAG,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAC/C,IAAI,MAAM,KAAK,IAAI;oBAAG,QAAiC,CAAC,IAAI,EAAE,CAAC;YACnE,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;IAUN,CAAC;IAvCU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChE,CAAC;IAEM,oBAAoB;QACvB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,QAAQ,CAAC,mBAAmB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/D,QAAQ,CAAC,mBAAmB,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACnE,CAAC;IAmBS,MAAM;QACZ,OAAO,IAAI,CAAA;;uBAEI,CAAC,IAAI,CAAC,OAAO;sBACd,IAAI,CAAC,cAAc;qBACpB,uBAAuB;gBAC5B,CAAC;IACb,CAAC;CACJ,CAAA;AAzCG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;kDACZ;AAFP,iBAAiB;IAD7B,oBAAoB,CAAC,qBAAqB,CAAC;GAC/B,iBAAiB,CA2C7B;SA3CY,iBAAiB"}
package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.js DELETED
@@ -1,64 +0,0 @@
1
- import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
- import { html } from 'lit';
3
- import { property } from 'lit/decorators';
4
- import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
5
- import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
- import { MODAL_EVENTS } from './modal_constants.js';
7
- import { HModal } from './modal.js';
8
-
9
- let HModalBackdrop = class HModalBackdrop extends PhoenixLightLitElement {
10
- constructor() {
11
- super(...arguments);
12
- this.visible = false;
13
- this._show = () => {
14
- if (!this.visible) {
15
- this.visible = true;
16
- }
17
- };
18
- this._hide = () => {
19
- if (!HModal.isSomeModalOpen()) {
20
- this.visible = false;
21
- }
22
- };
23
- }
24
- connectedCallback() {
25
- super.connectedCallback();
26
- document.addEventListener(MODAL_EVENTS.opened, this._show);
27
- document.addEventListener(MODAL_EVENTS.closed, this._hide);
28
- }
29
- disconnectedCallback() {
30
- super.disconnectedCallback();
31
- document.removeEventListener(MODAL_EVENTS.opened, this._show);
32
- document.removeEventListener(MODAL_EVENTS.closed, this._hide);
33
- }
34
- updated() {
35
- if (HModal.isSomeModalOpen()) {
36
- this.visible = true;
37
- this._disableScrolling();
38
- }
39
- else {
40
- this._enableScrolling();
41
- }
42
- }
43
- _disableScrolling() {
44
- document.body.style.overflow = 'hidden';
45
- document.body.style.paddingRight = '15px';
46
- }
47
- _enableScrolling() {
48
- document.body.style.removeProperty('overflow');
49
- document.body.style.removeProperty('padding-right');
50
- }
51
- render() {
52
- return html ` <div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
53
- }
54
- };
55
- __decorate([
56
- property({ type: Boolean }),
57
- __metadata("design:type", Object)
58
- ], HModalBackdrop.prototype, "visible", void 0);
59
- HModalBackdrop = __decorate([
60
- phoenixCustomElement('h-modal-backdrop')
61
- ], HModalBackdrop);
62
-
63
- export { HModalBackdrop };
64
- //# sourceMappingURL=modal_backdrop.js.map