@shoper/phoenix_design_system 0.22.6-3 → 0.23.0

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 (32) hide show
  1. package/build/cjs/packages/phoenix/src/components/messages/base_message.js +26 -22
  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 +9 -7
  4. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js +4 -5
  6. package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js +7 -2
  8. package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/messages/hints/hint_constants.js +3 -1
  10. package/build/cjs/packages/phoenix/src/components/messages/hints/hint_constants.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js +1 -1
  12. package/build/cjs/packages/phoenix/src/index.js +0 -2
  13. package/build/cjs/packages/phoenix/src/index.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +6 -2
  15. package/build/esm/packages/phoenix/src/components/messages/base_message.js +27 -23
  16. package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts +5 -4
  18. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +7 -6
  19. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  20. package/build/esm/packages/phoenix/src/components/messages/base_message_content.js +5 -6
  21. package/build/esm/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
  22. package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts +1 -0
  23. package/build/esm/packages/phoenix/src/components/messages/hints/hint.js +9 -4
  24. package/build/esm/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
  25. package/build/esm/packages/phoenix/src/components/messages/hints/hint_constants.d.ts +1 -2
  26. package/build/esm/packages/phoenix/src/components/messages/hints/hint_constants.js +3 -2
  27. package/build/esm/packages/phoenix/src/components/messages/hints/hint_constants.js.map +1 -1
  28. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js +1 -1
  29. package/build/esm/packages/phoenix/src/index.d.ts +0 -1
  30. package/build/esm/packages/phoenix/src/index.js +0 -1
  31. package/build/esm/packages/phoenix/src/index.js.map +1 -1
  32. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/messages/base_message.js CHANGED
@@ -32,25 +32,36 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
32
32
  });
33
33
  };
34
34
  this._open = () => {
35
- if (this.opened)
36
- return;
37
- this.opened = true;
35
+ this._tooltipOpenTime = Date.now();
36
+ clearTimeout(this._closeTimeout);
37
+ this._openTimeout = setTimeout(() => {
38
+ if (this.opened)
39
+ return;
40
+ this.opened = true;
41
+ }, base_message_constants.MESSAGE_SHOW_DELAY_IN_MS);
38
42
  };
39
43
  this._close = () => {
44
+ this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > base_message_constants.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
45
+ clearTimeout(this._openTimeout);
40
46
  if (!this.opened)
41
47
  return;
42
- const transitionDuration = parseFloat(getComputedStyle(this._$messageContent || this).transitionDuration) * 1000;
43
- window.requestAnimationFrame(() => {
44
- var _a;
45
- (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.add(base_message_constants.MESSAGE_REMOVED_CLASS_NAME);
46
- setTimeout(() => {
47
- this.opened = false;
48
- }, transitionDuration);
49
- });
48
+ this._closeTimeout = setTimeout(() => {
49
+ const transitionDuration = parseFloat(getComputedStyle(this._$messageContent || this).transitionDuration) * 1000;
50
+ window.requestAnimationFrame(() => {
51
+ var _a;
52
+ (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${this._messageComponentName}_${base_message_constants.MESSAGE_REMOVED_CLASS_NAME}`);
53
+ setTimeout(() => {
54
+ var _a;
55
+ this.opened = false;
56
+ this._shouldDelayClosing = false;
57
+ (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${this._messageComponentName}_${base_message_constants.MESSAGE_REMOVED_CLASS_NAME}`);
58
+ }, transitionDuration);
59
+ });
60
+ }, this._shouldDelayClosing ? base_message_constants.MESSAGE_CLOSE_DELAY_IN_MS : 0);
50
61
  };
51
62
  this._handleFocusWithinMessage = (ev) => {
52
63
  var _a;
53
- if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${base_message_constants.MESSAGE_CLASS_NAME}`)) !== this)
64
+ if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${this._messageComponentName}`)) !== this)
54
65
  this._close();
55
66
  if (!document.activeElement)
56
67
  return;
@@ -62,7 +73,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
62
73
  return;
63
74
  this._close();
64
75
  ev.preventDefault();
65
- const $focusableParentElements = utilities.UiDomUtils.getFocusableElements(this.parentElement);
76
+ const $focusableParentElements = utilities.UiDomUtils.getFocusableElements(document.body);
66
77
  const sentinelIndex = $focusableParentElements.indexOf(document.activeElement) + 1;
67
78
  $focusableParentElements[sentinelIndex + 1].focus();
68
79
  };
@@ -77,10 +88,10 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
77
88
  callback: this._handleFocusWithinMessage
78
89
  });
79
90
  }
80
- connectedCallback() {
91
+ connectedCallback(messageComponentName = '') {
81
92
  super.connectedCallback();
93
+ this._messageComponentName = messageComponentName;
82
94
  BaseMessage._appendMessagePortal();
83
- // nie można tego niestety pobrać po slocie, klasie czy czymkolwiek innym
84
95
  if (!this._$messageContent)
85
96
  this._$messageContent = this.querySelector(base_message_constants.MESSAGE_CONTENT_ELEMENTS.join(','));
86
97
  if (!this._positionController && this._$messageContent)
@@ -93,7 +104,6 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
93
104
  });
94
105
  this.setAttribute('tabindex', '0');
95
106
  this._setupEventListeners();
96
- this.className = base_message_constants.MESSAGE_CLASS_NAME;
97
107
  }
98
108
  static _appendMessagePortal() {
99
109
  const $messagePortalTarget = document.querySelector(`[name="${base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME}"]`);
@@ -103,12 +113,6 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
103
113
  $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME);
104
114
  document.body.appendChild($portalTarget);
105
115
  }
106
- disconnectedCallback() {
107
- super.disconnectedCallback();
108
- this.removeEventListener('mouseenter', this._open);
109
- this.removeEventListener('mouseleave', this._close);
110
- this.removeEventListener('focus', this._open);
111
- }
112
116
  }
113
117
  tslib_es6.__decorate([
114
118
  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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js CHANGED
@@ -7,17 +7,19 @@ var tooltip_constants = require('./tooltips/tooltip_constants.js');
7
7
 
8
8
  const DEFAULT_MESSAGE_PORTAL_NAME = 'message-portal';
9
9
  const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
10
- const MESSAGE_CLASS_NAME = 'message';
11
- const MESSAGE_CONTENT_CLASS_NAME = `${MESSAGE_CLASS_NAME}__content`;
12
- const MESSAGE_REMOVED_CLASS_NAME = `${MESSAGE_CLASS_NAME}_removed`;
13
- const DEFAULT_MESSAGE_OFFSET = 8;
14
- const MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
10
+ const MESSAGE_REMOVED_CLASS_NAME = `removed`;
11
+ const DEFAULT_MESSAGE_OFFSET = 10;
12
+ const MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
13
+ const MESSAGE_SHOW_DELAY_IN_MS = 100;
14
+ const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
15
+ const MESSAGE_CLOSE_DELAY_IN_MS = 500;
15
16
 
16
17
  exports.DEFAULT_MESSAGE_OFFSET = DEFAULT_MESSAGE_OFFSET;
17
18
  exports.DEFAULT_MESSAGE_PORTAL_NAME = DEFAULT_MESSAGE_PORTAL_NAME;
18
- exports.MESSAGE_CLASS_NAME = MESSAGE_CLASS_NAME;
19
- exports.MESSAGE_CONTENT_CLASS_NAME = MESSAGE_CONTENT_CLASS_NAME;
19
+ exports.MESSAGE_CLOSE_DELAY_IN_MS = MESSAGE_CLOSE_DELAY_IN_MS;
20
20
  exports.MESSAGE_CONTENT_ELEMENTS = MESSAGE_CONTENT_ELEMENTS;
21
21
  exports.MESSAGE_CONTENT_SLOT_NAME = MESSAGE_CONTENT_SLOT_NAME;
22
22
  exports.MESSAGE_REMOVED_CLASS_NAME = MESSAGE_REMOVED_CLASS_NAME;
23
+ exports.MESSAGE_SHOW_DELAY_IN_MS = MESSAGE_SHOW_DELAY_IN_MS;
24
+ exports.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
23
25
  //# sourceMappingURL=base_message_constants.js.map
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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js CHANGED
@@ -12,17 +12,16 @@ class BaseMessageContent extends phoenix_light_lit_element.PhoenixLightLitElemen
12
12
  constructor() {
13
13
  super(...arguments);
14
14
  this.portalTarget = base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME;
15
- this._setupAriaAttributes = () => {
16
- this.setAttribute('role', 'tooltip');
17
- this.setAttribute('inert', '');
18
- };
19
15
  }
20
16
  connectedCallback() {
21
17
  super.connectedCallback();
22
18
  this.slot = base_message_constants.MESSAGE_CONTENT_SLOT_NAME;
23
- this.className = base_message_constants.MESSAGE_CONTENT_CLASS_NAME;
24
19
  this._setupAriaAttributes();
25
20
  }
21
+ _setupAriaAttributes() {
22
+ this.setAttribute('role', 'tooltip');
23
+ this.setAttribute('inert', '');
24
+ }
26
25
  }
27
26
  tslib_es6.__decorate([
28
27
  decorators.property({ type: String, attribute: portal_constants.PORTAL_TARGET_ATTRIBUTE_NAME }),
package/build/cjs/packages/phoenix/src/components/messages/base_message_content.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js CHANGED
@@ -10,8 +10,12 @@ var base_message_constants = require('../base_message_constants.js');
10
10
  var base_message = require('../base_message.js');
11
11
 
12
12
  exports.HHint = class HHint extends base_message.BaseMessage {
13
+ constructor() {
14
+ super();
15
+ this.offset = hint_constants.HINT_DEFAULT_OFFSET;
16
+ }
13
17
  connectedCallback() {
14
- super.connectedCallback();
18
+ super.connectedCallback(hint_constants.HINT_CLASS_NAME);
15
19
  this.classList.add(hint_constants.HINT_CLASS_NAME);
16
20
  }
17
21
  render() {
@@ -25,6 +29,7 @@ exports.HHint = class HHint extends base_message.BaseMessage {
25
29
  }
26
30
  };
27
31
  exports.HHint = tslib_es6.__decorate([
28
- phoenix_custom_element.phoenixCustomElement(hint_constants.HINT_ELEMENT_NAME)
32
+ phoenix_custom_element.phoenixCustomElement(hint_constants.HINT_ELEMENT_NAME),
33
+ tslib_es6.__metadata("design:paramtypes", [])
29
34
  ], exports.HHint);
30
35
  //# sourceMappingURL=hint.js.map
package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;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/hints/hint_constants.js CHANGED
@@ -5,10 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const HINT_ELEMENT_NAME = 'h-hint';
6
6
  const HINT_CONTENT_ELEMENT_NAME = 'h-hint-content';
7
7
  const HINT_CLASS_NAME = 'hint';
8
- const HINT_CONTENT_CLASS_NAME = `${HINT_CLASS_NAME}__content`;
8
+ const HINT_CONTENT_CLASS_NAME = `${HINT_CLASS_NAME}__content`;
9
+ const HINT_DEFAULT_OFFSET = 16;
9
10
 
10
11
  exports.HINT_CLASS_NAME = HINT_CLASS_NAME;
11
12
  exports.HINT_CONTENT_CLASS_NAME = HINT_CONTENT_CLASS_NAME;
12
13
  exports.HINT_CONTENT_ELEMENT_NAME = HINT_CONTENT_ELEMENT_NAME;
14
+ exports.HINT_DEFAULT_OFFSET = HINT_DEFAULT_OFFSET;
13
15
  exports.HINT_ELEMENT_NAME = HINT_ELEMENT_NAME;
14
16
  //# sourceMappingURL=hint_constants.js.map
package/build/cjs/packages/phoenix/src/components/messages/hints/hint_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;"}
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/messages/tooltips/tooltip.js CHANGED
@@ -11,7 +11,7 @@ var base_message = require('../base_message.js');
11
11
 
12
12
  exports.HTooltip = class HTooltip extends base_message.BaseMessage {
13
13
  connectedCallback() {
14
- super.connectedCallback();
14
+ super.connectedCallback(tooltip_constants.TOOLTIP_CLASS_NAME);
15
15
  this.classList.add(tooltip_constants.TOOLTIP_CLASS_NAME);
16
16
  }
17
17
  render() {
package/build/cjs/packages/phoenix/src/index.js CHANGED
@@ -67,7 +67,6 @@ var tab_panel = require('./components/tabs/tab_panel.js');
67
67
  var tabs_constants = require('./components/tabs/tabs_constants.js');
68
68
  var tabs = require('./components/tabs/tabs.js');
69
69
  var scroll_to = require('./components/scroll_to/scroll_to.js');
70
- var base_message = require('./components/messages/base_message.js');
71
70
  var hint = require('./components/messages/hints/hint.js');
72
71
  var hint_content = require('./components/messages/hints/hint_content.js');
73
72
  var tooltip = require('./components/messages/tooltips/tooltip.js');
@@ -379,7 +378,6 @@ Object.defineProperty(exports, 'HScrollTo', {
379
378
  return scroll_to.HScrollTo;
380
379
  }
381
380
  });
382
- exports.BaseMessage = base_message.BaseMessage;
383
381
  Object.defineProperty(exports, 'HHint', {
384
382
  enumerable: true,
385
383
  get: function () {
package/build/cjs/packages/phoenix/src/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -8,13 +8,17 @@ export declare class BaseMessage extends PhoenixLightLitElement {
8
8
  private _positionController;
9
9
  private _clickOutsideController;
10
10
  private _$messageContent;
11
+ private _openTimeout;
12
+ private _tooltipOpenTime;
13
+ private _shouldDelayClosing;
14
+ private _closeTimeout;
15
+ private _messageComponentName;
11
16
  constructor();
12
- connectedCallback(): void;
17
+ connectedCallback(messageComponentName?: string): void;
13
18
  private static _appendMessagePortal;
14
19
  private _setupEventListeners;
15
20
  protected _positionMessage: () => void;
16
21
  private _open;
17
22
  private _close;
18
23
  private _handleFocusWithinMessage;
19
- disconnectedCallback(): void;
20
24
  }
package/build/esm/packages/phoenix/src/components/messages/base_message.js CHANGED
@@ -7,7 +7,7 @@ import { KeystrokesController } from '../../controllers/keystrokes_controller/ke
7
7
  import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
8
8
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
9
9
  import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
10
- import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLASS_NAME, MESSAGE_CONTENT_ELEMENTS } from './base_message_constants.js';
10
+ import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, 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';
11
11
 
12
12
  class BaseMessage extends PhoenixLightLitElement {
13
13
  constructor() {
@@ -28,25 +28,36 @@ class BaseMessage extends PhoenixLightLitElement {
28
28
  });
29
29
  };
30
30
  this._open = () => {
31
- if (this.opened)
32
- return;
33
- this.opened = true;
31
+ this._tooltipOpenTime = Date.now();
32
+ clearTimeout(this._closeTimeout);
33
+ this._openTimeout = setTimeout(() => {
34
+ if (this.opened)
35
+ return;
36
+ this.opened = true;
37
+ }, MESSAGE_SHOW_DELAY_IN_MS);
34
38
  };
35
39
  this._close = () => {
40
+ this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
41
+ clearTimeout(this._openTimeout);
36
42
  if (!this.opened)
37
43
  return;
38
- const transitionDuration = parseFloat(getComputedStyle(this._$messageContent || this).transitionDuration) * 1000;
39
- window.requestAnimationFrame(() => {
40
- var _a;
41
- (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.add(MESSAGE_REMOVED_CLASS_NAME);
42
- setTimeout(() => {
43
- this.opened = false;
44
- }, transitionDuration);
45
- });
44
+ this._closeTimeout = setTimeout(() => {
45
+ const transitionDuration = parseFloat(getComputedStyle(this._$messageContent || this).transitionDuration) * 1000;
46
+ window.requestAnimationFrame(() => {
47
+ var _a;
48
+ (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.add(`${this._messageComponentName}_${MESSAGE_REMOVED_CLASS_NAME}`);
49
+ setTimeout(() => {
50
+ var _a;
51
+ this.opened = false;
52
+ this._shouldDelayClosing = false;
53
+ (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${this._messageComponentName}_${MESSAGE_REMOVED_CLASS_NAME}`);
54
+ }, transitionDuration);
55
+ });
56
+ }, this._shouldDelayClosing ? MESSAGE_CLOSE_DELAY_IN_MS : 0);
46
57
  };
47
58
  this._handleFocusWithinMessage = (ev) => {
48
59
  var _a;
49
- if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${MESSAGE_CLASS_NAME}`)) !== this)
60
+ if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${this._messageComponentName}`)) !== this)
50
61
  this._close();
51
62
  if (!document.activeElement)
52
63
  return;
@@ -58,7 +69,7 @@ class BaseMessage extends PhoenixLightLitElement {
58
69
  return;
59
70
  this._close();
60
71
  ev.preventDefault();
61
- const $focusableParentElements = UiDomUtils.getFocusableElements(this.parentElement);
72
+ const $focusableParentElements = UiDomUtils.getFocusableElements(document.body);
62
73
  const sentinelIndex = $focusableParentElements.indexOf(document.activeElement) + 1;
63
74
  $focusableParentElements[sentinelIndex + 1].focus();
64
75
  };
@@ -73,10 +84,10 @@ class BaseMessage extends PhoenixLightLitElement {
73
84
  callback: this._handleFocusWithinMessage
74
85
  });
75
86
  }
76
- connectedCallback() {
87
+ connectedCallback(messageComponentName = '') {
77
88
  super.connectedCallback();
89
+ this._messageComponentName = messageComponentName;
78
90
  BaseMessage._appendMessagePortal();
79
- // nie można tego niestety pobrać po slocie, klasie czy czymkolwiek innym
80
91
  if (!this._$messageContent)
81
92
  this._$messageContent = this.querySelector(MESSAGE_CONTENT_ELEMENTS.join(','));
82
93
  if (!this._positionController && this._$messageContent)
@@ -89,7 +100,6 @@ class BaseMessage extends PhoenixLightLitElement {
89
100
  });
90
101
  this.setAttribute('tabindex', '0');
91
102
  this._setupEventListeners();
92
- this.className = MESSAGE_CLASS_NAME;
93
103
  }
94
104
  static _appendMessagePortal() {
95
105
  const $messagePortalTarget = document.querySelector(`[name="${DEFAULT_MESSAGE_PORTAL_NAME}"]`);
@@ -99,12 +109,6 @@ class BaseMessage extends PhoenixLightLitElement {
99
109
  $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
100
110
  document.body.appendChild($portalTarget);
101
111
  }
102
- disconnectedCallback() {
103
- super.disconnectedCallback();
104
- this.removeEventListener('mouseenter', this._open);
105
- this.removeEventListener('mouseleave', this._close);
106
- this.removeEventListener('focus', this._open);
107
- }
108
112
  }
109
113
  __decorate([
110
114
  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;"}
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;"}
package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  export declare const DEFAULT_MESSAGE_PORTAL_NAME = "message-portal";
2
2
  export declare const MESSAGE_CONTENT_SLOT_NAME = "message-content";
3
- export declare const MESSAGE_CLASS_NAME = "message";
4
- export declare const MESSAGE_CONTENT_CLASS_NAME: string;
5
- export declare const MESSAGE_REMOVED_CLASS_NAME: string;
6
- export declare const DEFAULT_MESSAGE_OFFSET = 8;
3
+ export declare const MESSAGE_REMOVED_CLASS_NAME = "removed";
4
+ export declare const DEFAULT_MESSAGE_OFFSET = 10;
7
5
  export declare const MESSAGE_CONTENT_ELEMENTS: string[];
6
+ export declare const MESSAGE_SHOW_DELAY_IN_MS = 100;
7
+ export declare const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
8
+ export declare const MESSAGE_CLOSE_DELAY_IN_MS = 500;
package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js CHANGED
@@ -3,11 +3,12 @@ import { TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
3
3
 
4
4
  const DEFAULT_MESSAGE_PORTAL_NAME = 'message-portal';
5
5
  const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
6
- const MESSAGE_CLASS_NAME = 'message';
7
- const MESSAGE_CONTENT_CLASS_NAME = `${MESSAGE_CLASS_NAME}__content`;
8
- const MESSAGE_REMOVED_CLASS_NAME = `${MESSAGE_CLASS_NAME}_removed`;
9
- const DEFAULT_MESSAGE_OFFSET = 8;
10
- const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
6
+ const MESSAGE_REMOVED_CLASS_NAME = `removed`;
7
+ const DEFAULT_MESSAGE_OFFSET = 10;
8
+ const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
9
+ const MESSAGE_SHOW_DELAY_IN_MS = 100;
10
+ const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
11
+ const MESSAGE_CLOSE_DELAY_IN_MS = 500;
11
12
 
12
- export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLASS_NAME, MESSAGE_CONTENT_CLASS_NAME, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME };
13
+ export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, 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 };
13
14
  //# 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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/messages/base_message_content.js CHANGED
@@ -2,23 +2,22 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
2
2
  import { property } from 'lit/decorators';
3
3
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
4
  import { PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
5
- import { DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_CONTENT_CLASS_NAME } from './base_message_constants.js';
5
+ import { DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
6
6
 
7
7
  class BaseMessageContent extends PhoenixLightLitElement {
8
8
  constructor() {
9
9
  super(...arguments);
10
10
  this.portalTarget = DEFAULT_MESSAGE_PORTAL_NAME;
11
- this._setupAriaAttributes = () => {
12
- this.setAttribute('role', 'tooltip');
13
- this.setAttribute('inert', '');
14
- };
15
11
  }
16
12
  connectedCallback() {
17
13
  super.connectedCallback();
18
14
  this.slot = MESSAGE_CONTENT_SLOT_NAME;
19
- this.className = MESSAGE_CONTENT_CLASS_NAME;
20
15
  this._setupAriaAttributes();
21
16
  }
17
+ _setupAriaAttributes() {
18
+ this.setAttribute('role', 'tooltip');
19
+ this.setAttribute('inert', '');
20
+ }
22
21
  }
23
22
  __decorate([
24
23
  property({ type: String, attribute: PORTAL_TARGET_ATTRIBUTE_NAME }),
package/build/esm/packages/phoenix/src/components/messages/base_message_content.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { TemplateResult } from 'lit-html';
2
2
  import { BaseMessage } from '../base_message';
3
3
  export declare class HHint extends BaseMessage {
4
+ constructor();
4
5
  connectedCallback(): void;
5
6
  protected render(): TemplateResult;
6
7
  }
package/build/esm/packages/phoenix/src/components/messages/hints/hint.js CHANGED
@@ -1,13 +1,17 @@
1
- import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
1
+ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
2
2
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
3
3
  import { html } from 'lit-html';
4
- import { HINT_CLASS_NAME, HINT_ELEMENT_NAME } from './hint_constants.js';
4
+ import { HINT_DEFAULT_OFFSET, HINT_CLASS_NAME, HINT_ELEMENT_NAME } from './hint_constants.js';
5
5
  import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
6
6
  import { BaseMessage } from '../base_message.js';
7
7
 
8
8
  let HHint = class HHint extends BaseMessage {
9
+ constructor() {
10
+ super();
11
+ this.offset = HINT_DEFAULT_OFFSET;
12
+ }
9
13
  connectedCallback() {
10
- super.connectedCallback();
14
+ super.connectedCallback(HINT_CLASS_NAME);
11
15
  this.classList.add(HINT_CLASS_NAME);
12
16
  }
13
17
  render() {
@@ -21,7 +25,8 @@ let HHint = class HHint extends BaseMessage {
21
25
  }
22
26
  };
23
27
  HHint = __decorate([
24
- phoenixCustomElement(HINT_ELEMENT_NAME)
28
+ phoenixCustomElement(HINT_ELEMENT_NAME),
29
+ __metadata("design:paramtypes", [])
25
30
  ], HHint);
26
31
 
27
32
  export { HHint };
package/build/esm/packages/phoenix/src/components/messages/hints/hint.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,2BAA2B,+CAAmD;AAC9E;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;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/hints/hint_constants.d.ts CHANGED
@@ -3,5 +3,4 @@ export declare const HINT_CONTENT_ELEMENT_NAME = "h-hint-content";
3
3
  export declare const HINT_CLASS_NAME = "hint";
4
4
  export declare const HINT_CONTENT_CLASS_NAME: string;
5
5
  export declare const HINT_REMOVED_CLASS_NAME: string;
6
- export declare const TOOLTIP_CONTENT_SLOT_NAME = "tooltip-content";
7
- export declare const DEFAULT_TOOLTIP_OFFSET = 8;
6
+ export declare const HINT_DEFAULT_OFFSET = 16;
package/build/esm/packages/phoenix/src/components/messages/hints/hint_constants.js CHANGED
@@ -1,7 +1,8 @@
1
1
  const HINT_ELEMENT_NAME = 'h-hint';
2
2
  const HINT_CONTENT_ELEMENT_NAME = 'h-hint-content';
3
3
  const HINT_CLASS_NAME = 'hint';
4
- const HINT_CONTENT_CLASS_NAME = `${HINT_CLASS_NAME}__content`;
4
+ const HINT_CONTENT_CLASS_NAME = `${HINT_CLASS_NAME}__content`;
5
+ const HINT_DEFAULT_OFFSET = 16;
5
6
 
6
- export { HINT_CLASS_NAME, HINT_CONTENT_CLASS_NAME, HINT_CONTENT_ELEMENT_NAME, HINT_ELEMENT_NAME };
7
+ export { HINT_CLASS_NAME, HINT_CONTENT_CLASS_NAME, HINT_CONTENT_ELEMENT_NAME, HINT_DEFAULT_OFFSET, HINT_ELEMENT_NAME };
7
8
  //# sourceMappingURL=hint_constants.js.map
package/build/esm/packages/phoenix/src/components/messages/hints/hint_constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;"}
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/messages/tooltips/tooltip.js CHANGED
@@ -7,7 +7,7 @@ import { BaseMessage } from '../base_message.js';
7
7
 
8
8
  let HTooltip = class HTooltip extends BaseMessage {
9
9
  connectedCallback() {
10
- super.connectedCallback();
10
+ super.connectedCallback(TOOLTIP_CLASS_NAME);
11
11
  this.classList.add(TOOLTIP_CLASS_NAME);
12
12
  }
13
13
  render() {
package/build/esm/packages/phoenix/src/index.d.ts CHANGED
@@ -75,7 +75,6 @@ export { HTabPanel } from './components/tabs/tab_panel';
75
75
  export { TABS_EVENT_NAMES } from './components/tabs/tabs_constants';
76
76
  export { HScrollTo } from './components/scroll_to/scroll_to';
77
77
  export * from './components/scroll_to/scroll_to_types';
78
- export { BaseMessage } from "./components/messages/base_message";
79
78
  export { HHint } from "./components/messages/hints/hint";
80
79
  export { HHintContent } from "./components/messages/hints/hint_content";
81
80
  export { HTooltip } from "./components/messages/tooltips/tooltip";
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -63,7 +63,6 @@ export { HTabPanel } from './components/tabs/tab_panel.js';
63
63
  export { TABS_EVENT_NAMES } from './components/tabs/tabs_constants.js';
64
64
  export { HTabs } from './components/tabs/tabs.js';
65
65
  export { HScrollTo } from './components/scroll_to/scroll_to.js';
66
- export { BaseMessage } from './components/messages/base_message.js';
67
66
  export { HHint } from './components/messages/hints/hint.js';
68
67
  export { HHintContent } from './components/messages/hints/hint_content.js';
69
68
  export { HTooltip } from './components/messages/tooltips/tooltip.js';
package/build/esm/packages/phoenix/src/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/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.22.6-3",
5
+ "version": "0.23.0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",