@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.
- package/build/cjs/packages/phoenix/src/components/messages/base_message.js +4 -2
- package/build/cjs/packages/phoenix/src/components/messages/base_message.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js +2 -0
- package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js +8 -0
- package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message.js +5 -3
- package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +2 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message_content.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/messages/base_message_content.js +8 -0
- package/build/esm/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
- package/package.json +1 -1
|
@@ -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"
|
|
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"
|
|
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;"}
|
|
@@ -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