@shoper/phoenix_design_system 1.15.11-31 → 1.15.11-33

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.
@@ -65,6 +65,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
65
65
  this.close();
66
66
  };
67
67
  this.close = () => {
68
+ this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > base_message_constants.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
68
69
  clearTimeout(this._openTimeout);
69
70
  if (!this.opened)
70
71
  return;
@@ -76,10 +77,11 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
76
77
  setTimeout(() => {
77
78
  var _a;
78
79
  this.opened = false;
80
+ this._shouldDelayClosing = false;
79
81
  (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${this._messageComponentName}_${base_message_constants.MESSAGE_REMOVED_CLASS_NAME}`);
80
82
  }, transitionDuration);
81
83
  });
82
- }, base_message_constants.MESSAGE_CLOSE_DELAY_IN_MS);
84
+ }, this._shouldDelayClosing ? base_message_constants.MESSAGE_CLOSE_DELAY_IN_MS : 0);
83
85
  };
84
86
  this._clickOutsideController = new click_outside_controller.ClickOutsideController({
85
87
  host: this,
@@ -128,7 +130,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
128
130
  var _a;
129
131
  super.render();
130
132
  return lit.html `
131
- <span id="${this._messageId}" class="sr-only" role="tooltip" aria-hidden="${!this.opened ? 'true' : 'false'}">
133
+ <span id="${this._messageId}" class="sr-only" role="tooltip" inert>
132
134
  ${utilities.DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
133
135
  </span>
134
136
  <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
@@ -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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -12,6 +12,7 @@ const MESSAGE_REMOVED_CLASS_NAME = `removed`;
12
12
  const DEFAULT_MESSAGE_OFFSET = 10;
13
13
  const MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
14
14
  const MESSAGE_SHOW_DELAY_IN_MS = 100;
15
+ const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
15
16
  const MESSAGE_CLOSE_DELAY_IN_MS = 500;
16
17
  const LIST_OF_MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
17
18
  const LIST_OF_MESSAGE_CHILDREN = [...LIST_OF_MESSAGE_CONTENT_ELEMENTS, portal_constants.PORTAL_COMPONENT_NAME];
@@ -25,4 +26,5 @@ exports.MESSAGE_CONTENT_ELEMENTS = MESSAGE_CONTENT_ELEMENTS;
25
26
  exports.MESSAGE_CONTENT_SLOT_NAME = MESSAGE_CONTENT_SLOT_NAME;
26
27
  exports.MESSAGE_REMOVED_CLASS_NAME = MESSAGE_REMOVED_CLASS_NAME;
27
28
  exports.MESSAGE_SHOW_DELAY_IN_MS = MESSAGE_SHOW_DELAY_IN_MS;
29
+ exports.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
28
30
  //# sourceMappingURL=base_message_constants.js.map
@@ -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;"}
@@ -14,6 +14,14 @@ class BaseMessageContent extends phoenix_light_lit_element.PhoenixLightLitElemen
14
14
  this.portalTarget = base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME;
15
15
  this.slot = base_message_constants.MESSAGE_CONTENT_SLOT_NAME;
16
16
  }
17
+ connectedCallback() {
18
+ super.connectedCallback();
19
+ this._setupAriaAttributes();
20
+ }
21
+ _setupAriaAttributes() {
22
+ this.setAttribute('role', 'tooltip');
23
+ this.setAttribute('inert', '');
24
+ }
17
25
  }
18
26
  tslib_es6.__decorate([
19
27
  decorators.property({ type: String, attribute: portal_constants.PORTAL_TARGET_ATTRIBUTE_NAME }),
@@ -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;"}
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;"}
@@ -7,7 +7,7 @@ import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
7
7
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_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, LIST_OF_MESSAGE_CHILDREN, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, LIST_OF_MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
10
+ 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, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
11
11
 
12
12
  class BaseMessage extends PhoenixLightLitElement {
13
13
  constructor() {
@@ -61,6 +61,7 @@ class BaseMessage extends PhoenixLightLitElement {
61
61
  this.close();
62
62
  };
63
63
  this.close = () => {
64
+ this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
64
65
  clearTimeout(this._openTimeout);
65
66
  if (!this.opened)
66
67
  return;
@@ -72,10 +73,11 @@ class BaseMessage extends PhoenixLightLitElement {
72
73
  setTimeout(() => {
73
74
  var _a;
74
75
  this.opened = false;
76
+ this._shouldDelayClosing = false;
75
77
  (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${this._messageComponentName}_${MESSAGE_REMOVED_CLASS_NAME}`);
76
78
  }, transitionDuration);
77
79
  });
78
- }, MESSAGE_CLOSE_DELAY_IN_MS);
80
+ }, this._shouldDelayClosing ? MESSAGE_CLOSE_DELAY_IN_MS : 0);
79
81
  };
80
82
  this._clickOutsideController = new ClickOutsideController({
81
83
  host: this,
@@ -124,7 +126,7 @@ class BaseMessage extends PhoenixLightLitElement {
124
126
  var _a;
125
127
  super.render();
126
128
  return html `
127
- <span id="${this._messageId}" class="sr-only" role="tooltip" aria-hidden="${!this.opened ? 'true' : 'false'}">
129
+ <span id="${this._messageId}" class="sr-only" role="tooltip" inert>
128
130
  ${DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
129
131
  </span>
130
132
  <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,eAAe,qDAAyD;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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,eAAe,qDAAyD;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;"}
@@ -8,9 +8,10 @@ const MESSAGE_REMOVED_CLASS_NAME = `removed`;
8
8
  const DEFAULT_MESSAGE_OFFSET = 10;
9
9
  const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
10
10
  const MESSAGE_SHOW_DELAY_IN_MS = 100;
11
+ const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
11
12
  const MESSAGE_CLOSE_DELAY_IN_MS = 500;
12
13
  const LIST_OF_MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
13
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, 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 };
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
@@ -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;"}
@@ -2,4 +2,6 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
2
2
  export declare class BaseMessageContent extends PhoenixLightLitElement {
3
3
  portalTarget: string;
4
4
  constructor();
5
+ connectedCallback(): void;
6
+ private _setupAriaAttributes;
5
7
  }
@@ -10,6 +10,14 @@ class BaseMessageContent extends PhoenixLightLitElement {
10
10
  this.portalTarget = DEFAULT_MESSAGE_PORTAL_NAME;
11
11
  this.slot = MESSAGE_CONTENT_SLOT_NAME;
12
12
  }
13
+ connectedCallback() {
14
+ super.connectedCallback();
15
+ this._setupAriaAttributes();
16
+ }
17
+ _setupAriaAttributes() {
18
+ this.setAttribute('role', 'tooltip');
19
+ this.setAttribute('inert', '');
20
+ }
13
21
  }
14
22
  __decorate([
15
23
  property({ type: String, attribute: PORTAL_TARGET_ATTRIBUTE_NAME }),
@@ -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;"}
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/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-31",
5
+ "version": "1.15.11-33",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",