@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.
@@ -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.LIST_OF_MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
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" inert>
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;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, 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, 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) => LIST_OF_MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
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" inert>
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, 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 };
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;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
@@ -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-34",
5
+ "version": "1.15.11-36",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",