@shoper/phoenix_design_system 1.15.11-34 → 1.15.11-36
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 +5 -3
- 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 -4
- package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/messages/base_message.js +6 -4
- 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.d.ts +1 -2
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +3 -4
- package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,6 +12,7 @@ var portal_constants = require('../portal/portal_constants.js');
|
|
|
12
12
|
var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
|
|
13
13
|
var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
|
|
14
14
|
var base_message_constants = require('./base_message_constants.js');
|
|
15
|
+
var ref = require('lit/directives/ref');
|
|
15
16
|
|
|
16
17
|
class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
17
18
|
constructor() {
|
|
@@ -23,9 +24,10 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
|
23
24
|
this.mouseonly = false;
|
|
24
25
|
this.tabindex = '-1';
|
|
25
26
|
this._messageId = v4['default']();
|
|
27
|
+
this._tooltipRef = ref.createRef();
|
|
26
28
|
this._handleChildrenAriaAttributes = () => {
|
|
27
29
|
[...this.children].forEach((child) => {
|
|
28
|
-
if (base_message_constants.LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()))
|
|
30
|
+
if (base_message_constants.LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()) || this._tooltipRef.value === child)
|
|
29
31
|
return;
|
|
30
32
|
child.setAttribute('aria-describedby', `${child.getAttribute('aria-describedby') || ''} ${this._messageId}`);
|
|
31
33
|
});
|
|
@@ -105,7 +107,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
|
105
107
|
});
|
|
106
108
|
this.setAttribute('tabindex', this.tabindex);
|
|
107
109
|
if (!this._$baseMessageContent)
|
|
108
|
-
this._$baseMessageContent = [...this.children].find((child) => base_message_constants.
|
|
110
|
+
this._$baseMessageContent = [...this.children].find((child) => base_message_constants.MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
|
|
109
111
|
this._setupEventListeners();
|
|
110
112
|
}
|
|
111
113
|
firstUpdated(props) {
|
|
@@ -130,7 +132,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
|
130
132
|
var _a;
|
|
131
133
|
super.render();
|
|
132
134
|
return lit.html `
|
|
133
|
-
<span id="${this._messageId}" class="sr-only" role="tooltip"
|
|
135
|
+
<span ${ref.ref(this._tooltipRef)} id="${this._messageId}" class="sr-only" role="tooltip">
|
|
134
136
|
${utilities.DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
|
|
135
137
|
</span>
|
|
136
138
|
<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;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;AACA;AACA;"}
|
|
@@ -11,16 +11,14 @@ const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
|
|
|
11
11
|
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
|
+
const LIST_OF_MESSAGE_CHILDREN = [...MESSAGE_CONTENT_ELEMENTS, portal_constants.PORTAL_COMPONENT_NAME];
|
|
14
15
|
const MESSAGE_SHOW_DELAY_IN_MS = 100;
|
|
15
16
|
const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
|
|
16
|
-
const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
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];
|
|
17
|
+
const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
19
18
|
|
|
20
19
|
exports.DEFAULT_MESSAGE_OFFSET = DEFAULT_MESSAGE_OFFSET;
|
|
21
20
|
exports.DEFAULT_MESSAGE_PORTAL_NAME = DEFAULT_MESSAGE_PORTAL_NAME;
|
|
22
21
|
exports.LIST_OF_MESSAGE_CHILDREN = LIST_OF_MESSAGE_CHILDREN;
|
|
23
|
-
exports.LIST_OF_MESSAGE_CONTENT_ELEMENTS = LIST_OF_MESSAGE_CONTENT_ELEMENTS;
|
|
24
22
|
exports.MESSAGE_CLOSE_DELAY_IN_MS = MESSAGE_CLOSE_DELAY_IN_MS;
|
|
25
23
|
exports.MESSAGE_CONTENT_ELEMENTS = MESSAGE_CONTENT_ELEMENTS;
|
|
26
24
|
exports.MESSAGE_CONTENT_SLOT_NAME = MESSAGE_CONTENT_SLOT_NAME;
|
|
@@ -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;"}
|
|
@@ -19,6 +19,7 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
|
|
|
19
19
|
private _closeTimeout;
|
|
20
20
|
private _messageComponentName;
|
|
21
21
|
private _$baseMessageContent?;
|
|
22
|
+
private _tooltipRef;
|
|
22
23
|
constructor();
|
|
23
24
|
connectedCallback(messageComponentName?: string): void;
|
|
24
25
|
firstUpdated(props: PropertyValues): void;
|
|
@@ -7,7 +7,8 @@ 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_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS,
|
|
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, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
|
|
11
|
+
import { createRef, ref } from 'lit/directives/ref';
|
|
11
12
|
|
|
12
13
|
class BaseMessage extends PhoenixLightLitElement {
|
|
13
14
|
constructor() {
|
|
@@ -19,9 +20,10 @@ class BaseMessage extends PhoenixLightLitElement {
|
|
|
19
20
|
this.mouseonly = false;
|
|
20
21
|
this.tabindex = '-1';
|
|
21
22
|
this._messageId = v4();
|
|
23
|
+
this._tooltipRef = createRef();
|
|
22
24
|
this._handleChildrenAriaAttributes = () => {
|
|
23
25
|
[...this.children].forEach((child) => {
|
|
24
|
-
if (LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()))
|
|
26
|
+
if (LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()) || this._tooltipRef.value === child)
|
|
25
27
|
return;
|
|
26
28
|
child.setAttribute('aria-describedby', `${child.getAttribute('aria-describedby') || ''} ${this._messageId}`);
|
|
27
29
|
});
|
|
@@ -101,7 +103,7 @@ class BaseMessage extends PhoenixLightLitElement {
|
|
|
101
103
|
});
|
|
102
104
|
this.setAttribute('tabindex', this.tabindex);
|
|
103
105
|
if (!this._$baseMessageContent)
|
|
104
|
-
this._$baseMessageContent = [...this.children].find((child) =>
|
|
106
|
+
this._$baseMessageContent = [...this.children].find((child) => MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
|
|
105
107
|
this._setupEventListeners();
|
|
106
108
|
}
|
|
107
109
|
firstUpdated(props) {
|
|
@@ -126,7 +128,7 @@ class BaseMessage extends PhoenixLightLitElement {
|
|
|
126
128
|
var _a;
|
|
127
129
|
super.render();
|
|
128
130
|
return html `
|
|
129
|
-
<span id="${this._messageId}" class="sr-only" role="tooltip"
|
|
131
|
+
<span ${ref(this._tooltipRef)} id="${this._messageId}" class="sr-only" role="tooltip">
|
|
130
132
|
${DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
|
|
131
133
|
</span>
|
|
132
134
|
<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;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;AACA;AACA;"}
|
|
@@ -4,8 +4,7 @@ export declare const MESSAGE_REMOVED_CLASS_NAME = "removed";
|
|
|
4
4
|
export declare const DEFAULT_MESSAGE_OFFSET = 10;
|
|
5
5
|
export declare const MESSAGE_ELEMENTS: string[];
|
|
6
6
|
export declare const MESSAGE_CONTENT_ELEMENTS: string[];
|
|
7
|
+
export declare const LIST_OF_MESSAGE_CHILDREN: string[];
|
|
7
8
|
export declare const MESSAGE_SHOW_DELAY_IN_MS = 100;
|
|
8
9
|
export declare const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
|
|
9
10
|
export declare const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
10
|
-
export declare const LIST_OF_MESSAGE_CONTENT_ELEMENTS: string[];
|
|
11
|
-
export declare const LIST_OF_MESSAGE_CHILDREN: string[];
|
|
@@ -7,11 +7,10 @@ const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
|
|
|
7
7
|
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
|
+
const LIST_OF_MESSAGE_CHILDREN = [...MESSAGE_CONTENT_ELEMENTS, PORTAL_COMPONENT_NAME];
|
|
10
11
|
const MESSAGE_SHOW_DELAY_IN_MS = 100;
|
|
11
12
|
const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
|
|
12
|
-
const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
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];
|
|
13
|
+
const MESSAGE_CLOSE_DELAY_IN_MS = 500;
|
|
15
14
|
|
|
16
|
-
export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, LIST_OF_MESSAGE_CHILDREN,
|
|
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 };
|
|
17
16
|
//# 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;"}
|
package/package.json
CHANGED