@shoper/phoenix_design_system 0.8.0 → 0.8.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 (23) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +87 -18
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js +11 -1
  4. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -0
  6. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/global_constants.js +8 -0
  8. package/build/cjs/packages/phoenix/src/global_constants.js.map +1 -0
  9. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +7 -3
  10. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +88 -19
  11. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.d.ts +11 -0
  13. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js +54 -0
  14. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.js.map +1 -0
  15. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.d.ts +6 -0
  16. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js +7 -2
  17. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +2 -1
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  20. package/build/esm/packages/phoenix/src/global_constants.d.ts +1 -0
  21. package/build/esm/packages/phoenix/src/global_constants.js +4 -0
  22. package/build/esm/packages/phoenix/src/global_constants.js.map +1 -0
  23. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -12,6 +12,7 @@ var dropdown_constants = require('./dropdown_constants.js');
12
12
  var click_outside_controller_messages = require('../../controllers/click_outside_controller/click_outside_controller_messages.js');
13
13
  var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
14
14
  var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
15
+ var global_constants = require('../../global_constants.js');
15
16
  var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
16
17
 
17
18
  exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -21,23 +22,81 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
21
22
  this.direction = relative_position_controller_constants.DIRECTIONS.bottomCenter;
22
23
  this.toggleOnHover = false;
23
24
  this.name = '';
25
+ this.transition = 'direction';
24
26
  this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
25
27
  this.toggle = () => {
26
28
  this.opened ? this.hide() : this.show();
27
29
  };
28
- this.show = () => {
29
- this.opened = true;
30
+ this.show = async () => {
30
31
  const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.show, {
31
32
  bubbles: true
32
33
  });
33
34
  this.dispatchEvent(showDropdownEvent);
35
+ return new Promise((resolve) => {
36
+ var _a;
37
+ (_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`);
38
+ window.requestAnimationFrame(() => {
39
+ setTimeout(() => {
40
+ var _a;
41
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${dropdown_constants.DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
42
+ }, 0);
43
+ const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
44
+ setTimeout(() => {
45
+ var _a;
46
+ this.opened = true;
47
+ this.dispatchEvent(showDropdownEvent);
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
+ resolve();
50
+ }, transitionDuration);
51
+ });
52
+ });
34
53
  };
35
- this.hide = () => {
36
- this.opened = false;
54
+ this.hide = async () => {
37
55
  const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hide, {
38
56
  bubbles: true
39
57
  });
40
- this.dispatchEvent(hideDropdownEvent);
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
+ });
72
+ });
73
+ };
74
+ this._hoverToggle = async (ev) => {
75
+ if (!ev.target) {
76
+ await this.hide();
77
+ return;
78
+ }
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;
83
+ if (isHoveredWithinDropdown && !this.opened) {
84
+ await this.show();
85
+ return;
86
+ }
87
+ if (!isHoveredWithinDropdown && this.opened) {
88
+ await this.hide();
89
+ return;
90
+ }
91
+ };
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;
41
100
  };
42
101
  this._positionDropdownContent = () => {
43
102
  requestAnimationFrame(() => {
@@ -48,6 +107,7 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
48
107
  connectedCallback() {
49
108
  super.connectedCallback();
50
109
  this._appendDropdownPortal();
110
+ this._appendDropdownBackdrop();
51
111
  if (!this.$dropdownContent)
52
112
  this.$dropdownContent = this.querySelector(dropdown_constants.DROPDOWN_CONTENT_NAME);
53
113
  if (!this.$dropdownToggler)
@@ -67,15 +127,6 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
67
127
  });
68
128
  this._setupListeners();
69
129
  }
70
- _setupListeners() {
71
- var _a, _b, _c;
72
- this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
73
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
74
- if (this.toggleOnHover) {
75
- (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.show);
76
- (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.hide);
77
- }
78
- }
79
130
  _appendDropdownPortal() {
80
131
  const $dropdownPortalTarget = document.querySelector(`[name="${dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
81
132
  if (!$dropdownPortalTarget) {
@@ -84,6 +135,21 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
84
135
  document.body.appendChild($portalTarget);
85
136
  }
86
137
  }
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);
143
+ }
144
+ }
145
+ _setupListeners() {
146
+ var _a;
147
+ this.addEventListener(click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
148
+ (_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) {
150
+ document.addEventListener('mouseover', this._hoverToggle);
151
+ }
152
+ }
87
153
  _handleClickOutside() {
88
154
  var _a;
89
155
  if (!this.opened)
@@ -92,12 +158,11 @@ exports.HDropdown = class HDropdown extends phoenix_light_lit_element.PhoenixLig
92
158
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
93
159
  }
94
160
  disconnectedCallback() {
95
- var _a, _b, _c;
161
+ var _a;
96
162
  super.disconnectedCallback();
97
163
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
98
- if (this.toggleOnHover) {
99
- (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.show);
100
- (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.hide);
164
+ if (this.toggleOnHover && window.innerWidth > global_constants.MOBILE_SCREEN_WIDTH) {
165
+ document.removeEventListener('mouseover', this._hoverToggle);
101
166
  }
102
167
  this.opened = false;
103
168
  }
@@ -127,6 +192,10 @@ tslib_es6.__decorate([
127
192
  decorators.property({ type: String }),
128
193
  tslib_es6.__metadata("design:type", Object)
129
194
  ], exports.HDropdown.prototype, "name", void 0);
195
+ tslib_es6.__decorate([
196
+ decorators.property({ type: String }),
197
+ tslib_es6.__metadata("design:type", Object)
198
+ ], exports.HDropdown.prototype, "transition", void 0);
130
199
  tslib_es6.__decorate([
131
200
  decorators.property({ type: String }),
132
201
  tslib_es6.__metadata("design:type", Object)
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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js CHANGED
@@ -6,6 +6,7 @@ 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`;
9
10
  const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
10
11
  const DROPDOWN_EVENT = 'dropdown';
11
12
  const DROPDOWN_EVENTS = {
@@ -14,15 +15,24 @@ const DROPDOWN_EVENTS = {
14
15
  };
15
16
  const DROPDOWN_OPENED_ATTRIBUTE_NAME = 'opened';
16
17
  const DROPDOWN_CLASS = 'dropdown';
17
- const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
18
+ const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
19
+ const DROPDOWN_TOGGLER_CLASS = `${DROPDOWN_CLASS}__toggler`;
20
+ const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CLASS}_visible`;
21
+ const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CLASS}_show`;
22
+ const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CLASS}_hide`;
18
23
 
19
24
  exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
25
+ exports.DROPDOWN_BACKDROP_NAME = DROPDOWN_BACKDROP_NAME;
20
26
  exports.DROPDOWN_CLASS = DROPDOWN_CLASS;
21
27
  exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
22
28
  exports.DROPDOWN_CONTENT_CLASS = DROPDOWN_CONTENT_CLASS;
29
+ exports.DROPDOWN_CONTENT_HIDE = DROPDOWN_CONTENT_HIDE;
23
30
  exports.DROPDOWN_CONTENT_NAME = DROPDOWN_CONTENT_NAME;
31
+ exports.DROPDOWN_CONTENT_SHOW = DROPDOWN_CONTENT_SHOW;
32
+ exports.DROPDOWN_CONTENT_VISIBLE_CLASS = DROPDOWN_CONTENT_VISIBLE_CLASS;
24
33
  exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
25
34
  exports.DROPDOWN_NAME = DROPDOWN_NAME;
26
35
  exports.DROPDOWN_OPENED_ATTRIBUTE_NAME = DROPDOWN_OPENED_ATTRIBUTE_NAME;
36
+ exports.DROPDOWN_TOGGLER_CLASS = DROPDOWN_TOGGLER_CLASS;
27
37
  exports.DROPDOWN_TOGGLER_NAME = DROPDOWN_TOGGLER_NAME;
28
38
  //# sourceMappingURL=dropdown_constants.js.map
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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -23,6 +23,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
23
23
  this._toggleElementAriaController.toggleAriaExpandedAttribute();
24
24
  };
25
25
  this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
26
+ this.className = `${dropdown_constants.DROPDOWN_TOGGLER_CLASS} ${this.className}`;
26
27
  }
27
28
  connectedCallback() {
28
29
  super.connectedCallback();
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.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;"}
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;"}
package/build/cjs/packages/phoenix/src/global_constants.js ADDED
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const MOBILE_SCREEN_WIDTH = 575;
6
+
7
+ exports.MOBILE_SCREEN_WIDTH = MOBILE_SCREEN_WIDTH;
8
+ //# sourceMappingURL=global_constants.js.map
package/build/cjs/packages/phoenix/src/global_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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts CHANGED
@@ -6,18 +6,22 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
6
6
  direction: "bottom-center";
7
7
  toggleOnHover: boolean;
8
8
  name: string;
9
+ transition: string;
9
10
  portalTarget: string;
10
11
  $dropdownToggler: HTMLElement | null;
11
12
  $dropdownContent: HTMLElement | null;
12
13
  private _positionController;
13
14
  private _clickOutsideController;
14
15
  connectedCallback(): void;
15
- private _setupListeners;
16
16
  private _appendDropdownPortal;
17
+ private _appendDropdownBackdrop;
18
+ private _setupListeners;
17
19
  private _handleClickOutside;
18
20
  toggle: () => void;
19
- show: () => void;
20
- hide: () => void;
21
+ show: () => Promise<void>;
22
+ hide: () => Promise<void>;
23
+ private _hoverToggle;
24
+ private _isDescendantOfParent;
21
25
  private _positionDropdownContent;
22
26
  disconnectedCallback(): void;
23
27
  render(): TemplateResult;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -4,10 +4,11 @@ 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_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_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';
8
8
  import { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from '../../controllers/click_outside_controller/click_outside_controller_messages.js';
9
9
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
10
10
  import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
11
+ import { MOBILE_SCREEN_WIDTH } from '../../global_constants.js';
11
12
  import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
12
13
 
13
14
  let HDropdown = class HDropdown extends PhoenixLightLitElement {
@@ -17,23 +18,81 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
17
18
  this.direction = DIRECTIONS.bottomCenter;
18
19
  this.toggleOnHover = false;
19
20
  this.name = '';
21
+ this.transition = 'direction';
20
22
  this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
21
23
  this.toggle = () => {
22
24
  this.opened ? this.hide() : this.show();
23
25
  };
24
- this.show = () => {
25
- this.opened = true;
26
+ this.show = async () => {
26
27
  const showDropdownEvent = new Event(DROPDOWN_EVENTS.show, {
27
28
  bubbles: true
28
29
  });
29
30
  this.dispatchEvent(showDropdownEvent);
31
+ return new Promise((resolve) => {
32
+ var _a;
33
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(DROPDOWN_CONTENT_VISIBLE_CLASS, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`);
34
+ window.requestAnimationFrame(() => {
35
+ setTimeout(() => {
36
+ var _a;
37
+ (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
38
+ }, 0);
39
+ const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
40
+ setTimeout(() => {
41
+ var _a;
42
+ this.opened = true;
43
+ this.dispatchEvent(showDropdownEvent);
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
+ resolve();
46
+ }, transitionDuration);
47
+ });
48
+ });
30
49
  };
31
- this.hide = () => {
32
- this.opened = false;
50
+ this.hide = async () => {
33
51
  const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hide, {
34
52
  bubbles: true
35
53
  });
36
- this.dispatchEvent(hideDropdownEvent);
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
+ });
68
+ });
69
+ };
70
+ this._hoverToggle = async (ev) => {
71
+ if (!ev.target) {
72
+ await this.hide();
73
+ return;
74
+ }
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;
79
+ if (isHoveredWithinDropdown && !this.opened) {
80
+ await this.show();
81
+ return;
82
+ }
83
+ if (!isHoveredWithinDropdown && this.opened) {
84
+ await this.hide();
85
+ return;
86
+ }
87
+ };
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;
37
96
  };
38
97
  this._positionDropdownContent = () => {
39
98
  requestAnimationFrame(() => {
@@ -44,6 +103,7 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
44
103
  connectedCallback() {
45
104
  super.connectedCallback();
46
105
  this._appendDropdownPortal();
106
+ this._appendDropdownBackdrop();
47
107
  if (!this.$dropdownContent)
48
108
  this.$dropdownContent = this.querySelector(DROPDOWN_CONTENT_NAME);
49
109
  if (!this.$dropdownToggler)
@@ -63,15 +123,6 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
63
123
  });
64
124
  this._setupListeners();
65
125
  }
66
- _setupListeners() {
67
- var _a, _b, _c;
68
- this.addEventListener(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
69
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
70
- if (this.toggleOnHover) {
71
- (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.show);
72
- (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.hide);
73
- }
74
- }
75
126
  _appendDropdownPortal() {
76
127
  const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
77
128
  if (!$dropdownPortalTarget) {
@@ -80,6 +131,21 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
80
131
  document.body.appendChild($portalTarget);
81
132
  }
82
133
  }
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);
139
+ }
140
+ }
141
+ _setupListeners() {
142
+ var _a;
143
+ this.addEventListener(CLICK_OUTSIDE_CONTROLLER_MESSAGES.clickedOutside, this._handleClickOutside);
144
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
145
+ if (this.toggleOnHover && window.innerWidth > MOBILE_SCREEN_WIDTH) {
146
+ document.addEventListener('mouseover', this._hoverToggle);
147
+ }
148
+ }
83
149
  _handleClickOutside() {
84
150
  var _a;
85
151
  if (!this.opened)
@@ -88,12 +154,11 @@ let HDropdown = class HDropdown extends PhoenixLightLitElement {
88
154
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
89
155
  }
90
156
  disconnectedCallback() {
91
- var _a, _b, _c;
157
+ var _a;
92
158
  super.disconnectedCallback();
93
159
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
94
- if (this.toggleOnHover) {
95
- (_b = this.$dropdownToggler) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.show);
96
- (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.hide);
160
+ if (this.toggleOnHover && window.innerWidth > MOBILE_SCREEN_WIDTH) {
161
+ document.removeEventListener('mouseover', this._hoverToggle);
97
162
  }
98
163
  this.opened = false;
99
164
  }
@@ -123,6 +188,10 @@ __decorate([
123
188
  property({ type: String }),
124
189
  __metadata("design:type", Object)
125
190
  ], HDropdown.prototype, "name", void 0);
191
+ __decorate([
192
+ property({ type: String }),
193
+ __metadata("design:type", Object)
194
+ ], HDropdown.prototype, "transition", void 0);
126
195
  __decorate([
127
196
  property({ type: String }),
128
197
  __metadata("design:type", Object)
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_backdrop.d.ts ADDED
@@ -0,0 +1,11 @@
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 ADDED
@@ -0,0 +1,54 @@
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 ADDED
@@ -0,0 +1 @@
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/dropdown/dropdown_constants.d.ts CHANGED
@@ -2,6 +2,7 @@ export declare const DROPDOWN_NAME = "dropdown";
2
2
  export declare const DROPDOWN_CONTAINER_NAME: string;
3
3
  export declare const DROPDOWN_TOGGLER_NAME: string;
4
4
  export declare const DROPDOWN_CONTENT_NAME: string;
5
+ export declare const DROPDOWN_BACKDROP_NAME: string;
5
6
  export declare const DEFAULT_DROPDOWN_PORTAL_NAME = "dropdown-portal";
6
7
  export declare const DROPDOWN_EVENTS: {
7
8
  readonly show: "dropdown.show";
@@ -10,3 +11,8 @@ export declare const DROPDOWN_EVENTS: {
10
11
  export declare const DROPDOWN_OPENED_ATTRIBUTE_NAME = "opened";
11
12
  export declare const DROPDOWN_CLASS = "dropdown";
12
13
  export declare const DROPDOWN_CONTENT_CLASS: string;
14
+ export declare const DROPDOWN_TOGGLER_CLASS: string;
15
+ export declare const DROPDOWN_BACKDROP_CLASS: string;
16
+ export declare const DROPDOWN_CONTENT_VISIBLE_CLASS: string;
17
+ export declare const DROPDOWN_CONTENT_SHOW: string;
18
+ export declare const DROPDOWN_CONTENT_HIDE: string;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js CHANGED
@@ -2,6 +2,7 @@ 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`;
5
6
  const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
6
7
  const DROPDOWN_EVENT = 'dropdown';
7
8
  const DROPDOWN_EVENTS = {
@@ -10,7 +11,11 @@ const DROPDOWN_EVENTS = {
10
11
  };
11
12
  const DROPDOWN_OPENED_ATTRIBUTE_NAME = 'opened';
12
13
  const DROPDOWN_CLASS = 'dropdown';
13
- const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
14
+ const DROPDOWN_CONTENT_CLASS = `${DROPDOWN_CLASS}__content`;
15
+ const DROPDOWN_TOGGLER_CLASS = `${DROPDOWN_CLASS}__toggler`;
16
+ const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CLASS}_visible`;
17
+ const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CLASS}_show`;
18
+ const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CLASS}_hide`;
14
19
 
15
- export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CLASS, DROPDOWN_CONTENT_NAME, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_OPENED_ATTRIBUTE_NAME, DROPDOWN_TOGGLER_NAME };
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 };
16
21
  //# 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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -3,7 +3,7 @@ import { property, state } from 'lit/decorators';
3
3
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
4
4
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
5
5
  import { BtnController } from '../../controllers/btn_controller.js';
6
- import { DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
6
+ import { DROPDOWN_TOGGLER_CLASS, DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
7
7
  import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
8
8
 
9
9
  let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
@@ -19,6 +19,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
19
19
  this._toggleElementAriaController.toggleAriaExpandedAttribute();
20
20
  };
21
21
  this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
22
+ this.className = `${DROPDOWN_TOGGLER_CLASS} ${this.className}`;
22
23
  }
23
24
  connectedCallback() {
24
25
  super.connectedCallback();
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.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;"}
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;"}
package/build/esm/packages/phoenix/src/global_constants.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const MOBILE_SCREEN_WIDTH = 575;
package/build/esm/packages/phoenix/src/global_constants.js ADDED
@@ -0,0 +1,4 @@
1
+ const MOBILE_SCREEN_WIDTH = 575;
2
+
3
+ export { MOBILE_SCREEN_WIDTH };
4
+ //# sourceMappingURL=global_constants.js.map
package/build/esm/packages/phoenix/src/global_constants.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "0.8.0",
5
+ "version": "0.8.1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",