@shoper/phoenix_design_system 1.15.11-19 → 1.15.11-20

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 (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/messages/base_message.js +28 -5
  2. package/build/cjs/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js +3 -1
  4. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +3 -0
  6. package/build/esm/packages/phoenix/src/components/messages/base_message.js +29 -6
  7. package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts +1 -0
  9. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +3 -2
  10. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  11. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/messages/base_message.js CHANGED
@@ -30,11 +30,11 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
30
30
  });
31
31
  };
32
32
  this._setupEventListeners = () => {
33
- this.addEventListener('mouseenter', this.open);
34
- this.addEventListener('mouseleave', this.close);
33
+ document.addEventListener('mouseenter', this.openFromEvent);
34
+ document.addEventListener('mouseleave', this.closeFromEvent);
35
35
  if (!this.mouseonly) {
36
- this.addEventListener('focusin', this.open);
37
- this.addEventListener('focusout', this.close);
36
+ document.addEventListener('focusin', this.openFromEvent);
37
+ document.addEventListener('focusout', this.closeFromEvent);
38
38
  }
39
39
  };
40
40
  this._positionMessage = () => {
@@ -43,6 +43,13 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
43
43
  (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.setAttribute('direction', this._positionController.position(true));
44
44
  });
45
45
  };
46
+ this.openFromEvent = (ev) => {
47
+ const $target = ev.target;
48
+ const $messageChildContainer = $target.closest(base_message_constants.LIST_OF_MESSAGE_CHILDREN.join(', '));
49
+ if (!$messageChildContainer)
50
+ return;
51
+ this.open();
52
+ };
46
53
  this.open = () => {
47
54
  this._tooltipOpenTime = Date.now();
48
55
  clearTimeout(this._closeTimeout);
@@ -52,6 +59,13 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
52
59
  this.opened = true;
53
60
  }, base_message_constants.MESSAGE_SHOW_DELAY_IN_MS);
54
61
  };
62
+ this.closeFromEvent = (ev) => {
63
+ const $target = ev.target;
64
+ const $messageChildContainer = $target.closest(base_message_constants.LIST_OF_MESSAGE_CHILDREN.join(', '));
65
+ if ($messageChildContainer)
66
+ return;
67
+ this.close();
68
+ };
55
69
  this.close = () => {
56
70
  this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > base_message_constants.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
57
71
  clearTimeout(this._openTimeout);
@@ -93,7 +107,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
93
107
  });
94
108
  this.setAttribute('tabindex', this.tabindex);
95
109
  this._setupEventListeners();
96
- this._$baseMessageContent = [...this.children].find((child) => child instanceof BaseMessage);
110
+ this._$baseMessageContent = [...this.children].find((child) => base_message_constants.LIST_OF_MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
97
111
  this._handleChildrenAriaAttributes();
98
112
  }
99
113
  static _appendMessagePortal() {
@@ -104,6 +118,15 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
104
118
  $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME);
105
119
  document.body.appendChild($portalTarget);
106
120
  }
121
+ disconnectedCallback() {
122
+ super.disconnectedCallback();
123
+ document.removeEventListener('mouseenter', this.openFromEvent);
124
+ document.removeEventListener('mouseleave', this.closeFromEvent);
125
+ if (!this.mouseonly) {
126
+ document.removeEventListener('focusin', this.openFromEvent);
127
+ document.removeEventListener('focusout', this.closeFromEvent);
128
+ }
129
+ }
107
130
  }
108
131
  tslib_es6.__decorate([
109
132
  decorators.property({ type: Boolean, reflect: true }),
package/build/cjs/packages/phoenix/src/components/messages/base_message.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js CHANGED
@@ -14,11 +14,13 @@ const MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME
14
14
  const MESSAGE_SHOW_DELAY_IN_MS = 100;
15
15
  const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
16
16
  const MESSAGE_CLOSE_DELAY_IN_MS = 500;
17
- const LIST_OF_MESSAGE_CHILDREN = [portal_constants.PORTAL_COMPONENT_NAME, tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
17
+ const LIST_OF_MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
18
+ const LIST_OF_MESSAGE_CHILDREN = [...LIST_OF_MESSAGE_CONTENT_ELEMENTS, portal_constants.PORTAL_COMPONENT_NAME];
18
19
 
19
20
  exports.DEFAULT_MESSAGE_OFFSET = DEFAULT_MESSAGE_OFFSET;
20
21
  exports.DEFAULT_MESSAGE_PORTAL_NAME = DEFAULT_MESSAGE_PORTAL_NAME;
21
22
  exports.LIST_OF_MESSAGE_CHILDREN = LIST_OF_MESSAGE_CHILDREN;
23
+ exports.LIST_OF_MESSAGE_CONTENT_ELEMENTS = LIST_OF_MESSAGE_CONTENT_ELEMENTS;
22
24
  exports.MESSAGE_CLOSE_DELAY_IN_MS = MESSAGE_CLOSE_DELAY_IN_MS;
23
25
  exports.MESSAGE_CONTENT_ELEMENTS = MESSAGE_CONTENT_ELEMENTS;
24
26
  exports.MESSAGE_CONTENT_SLOT_NAME = MESSAGE_CONTENT_SLOT_NAME;
package/build/cjs/packages/phoenix/src/components/messages/base_message_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;"}
package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts CHANGED
@@ -23,6 +23,9 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
23
23
  private static _appendMessagePortal;
24
24
  private _setupEventListeners;
25
25
  protected _positionMessage: () => void;
26
+ openFromEvent: (ev: MouseEvent) => void;
26
27
  open: () => void;
28
+ closeFromEvent: (ev: MouseEvent) => void;
27
29
  close: () => void;
30
+ disconnectedCallback(): void;
28
31
  }
package/build/esm/packages/phoenix/src/components/messages/base_message.js CHANGED
@@ -5,7 +5,7 @@ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/pho
5
5
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
6
6
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
7
7
  import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
8
- import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, LIST_OF_MESSAGE_CHILDREN, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS } from './base_message_constants.js';
8
+ import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, LIST_OF_MESSAGE_CHILDREN, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, LIST_OF_MESSAGE_CONTENT_ELEMENTS } from './base_message_constants.js';
9
9
 
10
10
  class BaseMessage extends PhoenixLightLitElement {
11
11
  constructor() {
@@ -26,11 +26,11 @@ class BaseMessage extends PhoenixLightLitElement {
26
26
  });
27
27
  };
28
28
  this._setupEventListeners = () => {
29
- this.addEventListener('mouseenter', this.open);
30
- this.addEventListener('mouseleave', this.close);
29
+ document.addEventListener('mouseenter', this.openFromEvent);
30
+ document.addEventListener('mouseleave', this.closeFromEvent);
31
31
  if (!this.mouseonly) {
32
- this.addEventListener('focusin', this.open);
33
- this.addEventListener('focusout', this.close);
32
+ document.addEventListener('focusin', this.openFromEvent);
33
+ document.addEventListener('focusout', this.closeFromEvent);
34
34
  }
35
35
  };
36
36
  this._positionMessage = () => {
@@ -39,6 +39,13 @@ class BaseMessage extends PhoenixLightLitElement {
39
39
  (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.setAttribute('direction', this._positionController.position(true));
40
40
  });
41
41
  };
42
+ this.openFromEvent = (ev) => {
43
+ const $target = ev.target;
44
+ const $messageChildContainer = $target.closest(LIST_OF_MESSAGE_CHILDREN.join(', '));
45
+ if (!$messageChildContainer)
46
+ return;
47
+ this.open();
48
+ };
42
49
  this.open = () => {
43
50
  this._tooltipOpenTime = Date.now();
44
51
  clearTimeout(this._closeTimeout);
@@ -48,6 +55,13 @@ class BaseMessage extends PhoenixLightLitElement {
48
55
  this.opened = true;
49
56
  }, MESSAGE_SHOW_DELAY_IN_MS);
50
57
  };
58
+ this.closeFromEvent = (ev) => {
59
+ const $target = ev.target;
60
+ const $messageChildContainer = $target.closest(LIST_OF_MESSAGE_CHILDREN.join(', '));
61
+ if ($messageChildContainer)
62
+ return;
63
+ this.close();
64
+ };
51
65
  this.close = () => {
52
66
  this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
53
67
  clearTimeout(this._openTimeout);
@@ -89,7 +103,7 @@ class BaseMessage extends PhoenixLightLitElement {
89
103
  });
90
104
  this.setAttribute('tabindex', this.tabindex);
91
105
  this._setupEventListeners();
92
- this._$baseMessageContent = [...this.children].find((child) => child instanceof BaseMessage);
106
+ this._$baseMessageContent = [...this.children].find((child) => LIST_OF_MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
93
107
  this._handleChildrenAriaAttributes();
94
108
  }
95
109
  static _appendMessagePortal() {
@@ -100,6 +114,15 @@ class BaseMessage extends PhoenixLightLitElement {
100
114
  $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
101
115
  document.body.appendChild($portalTarget);
102
116
  }
117
+ disconnectedCallback() {
118
+ super.disconnectedCallback();
119
+ document.removeEventListener('mouseenter', this.openFromEvent);
120
+ document.removeEventListener('mouseleave', this.closeFromEvent);
121
+ if (!this.mouseonly) {
122
+ document.removeEventListener('focusin', this.openFromEvent);
123
+ document.removeEventListener('focusout', this.closeFromEvent);
124
+ }
125
+ }
103
126
  }
104
127
  __decorate([
105
128
  property({ type: Boolean, reflect: true }),
package/build/esm/packages/phoenix/src/components/messages/base_message.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts CHANGED
@@ -7,4 +7,5 @@ export declare const MESSAGE_CONTENT_ELEMENTS: string[];
7
7
  export declare const MESSAGE_SHOW_DELAY_IN_MS = 100;
8
8
  export declare const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
9
9
  export declare const MESSAGE_CLOSE_DELAY_IN_MS = 500;
10
+ export declare const LIST_OF_MESSAGE_CONTENT_ELEMENTS: string[];
10
11
  export declare const LIST_OF_MESSAGE_CHILDREN: string[];
package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js CHANGED
@@ -10,7 +10,8 @@ const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELE
10
10
  const MESSAGE_SHOW_DELAY_IN_MS = 100;
11
11
  const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
12
12
  const MESSAGE_CLOSE_DELAY_IN_MS = 500;
13
- const LIST_OF_MESSAGE_CHILDREN = [PORTAL_COMPONENT_NAME, TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
13
+ const LIST_OF_MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
14
+ const LIST_OF_MESSAGE_CHILDREN = [...LIST_OF_MESSAGE_CONTENT_ELEMENTS, PORTAL_COMPONENT_NAME];
14
15
 
15
- export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, LIST_OF_MESSAGE_CHILDREN, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
16
+ export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, LIST_OF_MESSAGE_CHILDREN, LIST_OF_MESSAGE_CONTENT_ELEMENTS, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
16
17
  //# sourceMappingURL=base_message_constants.js.map
package/build/esm/packages/phoenix/src/components/messages/base_message_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;"}
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": "1.15.11-19",
5
+ "version": "1.15.11-20",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",