@shoper/phoenix_design_system 1.15.11-26 → 1.15.11-28

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 (22) hide show
  1. package/build/cjs/packages/phoenix/src/components/messages/base_message.js +21 -11
  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_content.js +1 -7
  4. package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js +0 -10
  6. package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js +0 -10
  8. package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +4 -2
  10. package/build/esm/packages/phoenix/src/components/messages/base_message.js +22 -12
  11. package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/messages/base_message_content.d.ts +0 -1
  13. package/build/esm/packages/phoenix/src/components/messages/base_message_content.js +1 -7
  14. package/build/esm/packages/phoenix/src/components/messages/base_message_content.js.map +1 -1
  15. package/build/esm/packages/phoenix/src/components/messages/base_message_types.d.ts +1 -1
  16. package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts +0 -2
  17. package/build/esm/packages/phoenix/src/components/messages/hints/hint.js +0 -10
  18. package/build/esm/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
  19. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts +0 -2
  20. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js +0 -10
  21. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
  22. package/package.json +2 -2
package/build/cjs/packages/phoenix/src/components/messages/base_message.js CHANGED
@@ -3,10 +3,11 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
- require('lit');
6
+ var lit = require('lit');
7
7
  var decorators = require('lit/decorators');
8
8
  var utilities = require('@dreamcommerce/utilities');
9
9
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
10
+ var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
10
11
  var portal_constants = require('../portal/portal_constants.js');
11
12
  var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
12
13
  var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
@@ -21,26 +22,24 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
21
22
  this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
22
23
  this.mouseonly = false;
23
24
  this.tabindex = '-1';
25
+ this._messageId = v4['default']();
24
26
  this._handleChildrenAriaAttributes = () => {
25
- if (!this._$baseMessageContent)
26
- return;
27
27
  [...this.children].forEach((child) => {
28
28
  if (base_message_constants.LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()))
29
29
  return;
30
- if (this._$baseMessageContent)
31
- child.setAttribute('aria-describedby', this._$baseMessageContent.messageId);
30
+ child.setAttribute('aria-describedby', this._messageId);
32
31
  });
33
32
  };
34
33
  this._setupEventListeners = () => {
35
34
  var _a, _b;
36
35
  this.addEventListener('mouseenter', this.open);
37
- this.addEventListener('mouseleave', this._closeFromEvent);
36
+ this.addEventListener('mouseleave', this._handleClose);
38
37
  this.addEventListener('keydown', this._closeFromKeyboard);
39
38
  (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
40
- (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this._closeFromEvent);
39
+ (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this._handleClose);
41
40
  if (!this.mouseonly) {
42
41
  this.addEventListener('focusin', this.open);
43
- this.addEventListener('focusout', this._closeFromEvent);
42
+ this.addEventListener('focusout', this._handleClose);
44
43
  }
45
44
  };
46
45
  this._positionMessage = () => {
@@ -62,9 +61,10 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
62
61
  if (ev.key !== 'Escape' || !this.opened)
63
62
  return;
64
63
  ev.preventDefault();
64
+ ev.stopPropagation();
65
65
  this.close(true);
66
66
  };
67
- this._closeFromEvent = () => {
67
+ this._handleClose = () => {
68
68
  this.close();
69
69
  };
70
70
  this.close = (shouldCloseImmediately = false) => {
@@ -89,7 +89,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
89
89
  this._clickOutsideController = new click_outside_controller.ClickOutsideController({
90
90
  host: this,
91
91
  container: this,
92
- action: this._closeFromEvent
92
+ action: this._handleClose
93
93
  });
94
94
  }
95
95
  connectedCallback(messageComponentName = '') {
@@ -127,7 +127,17 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
127
127
  var _a, _b;
128
128
  super.disconnectedCallback();
129
129
  (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
130
- (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this._closeFromEvent);
130
+ (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this._handleClose);
131
+ }
132
+ render() {
133
+ var _a;
134
+ super.render();
135
+ return lit.html `
136
+ <span class="sr-only" id="${this._messageId}">${(_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML}</span>
137
+ <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
138
+ ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
139
+ </h-portal>
140
+ `;
131
141
  }
132
142
  }
133
143
  tslib_es6.__decorate([
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;AACA;AACA;AACA;AACA;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;"}
package/build/cjs/packages/phoenix/src/components/messages/base_message_content.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var decorators = require('lit/decorators');
7
7
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
- var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
9
8
  var portal_constants = require('../portal/portal_constants.js');
10
9
  var base_message_constants = require('./base_message_constants.js');
11
10
 
@@ -13,7 +12,6 @@ class BaseMessageContent extends phoenix_light_lit_element.PhoenixLightLitElemen
13
12
  constructor() {
14
13
  super();
15
14
  this.portalTarget = base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME;
16
- this.messageId = v4['default']();
17
15
  this.slot = base_message_constants.MESSAGE_CONTENT_SLOT_NAME;
18
16
  }
19
17
  connectedCallback() {
@@ -27,11 +25,7 @@ class BaseMessageContent extends phoenix_light_lit_element.PhoenixLightLitElemen
27
25
  tslib_es6.__decorate([
28
26
  decorators.property({ type: String, attribute: portal_constants.PORTAL_TARGET_ATTRIBUTE_NAME }),
29
27
  tslib_es6.__metadata("design:type", Object)
30
- ], BaseMessageContent.prototype, "portalTarget", void 0);
31
- tslib_es6.__decorate([
32
- decorators.property({ type: String, attribute: 'message-id' }),
33
- tslib_es6.__metadata("design:type", Object)
34
- ], BaseMessageContent.prototype, "messageId", void 0);
28
+ ], BaseMessageContent.prototype, "portalTarget", void 0);
35
29
 
36
30
  exports.BaseMessageContent = BaseMessageContent;
37
31
  //# sourceMappingURL=base_message_content.js.map
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,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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
6
6
  var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
7
- var litHtml = require('lit-html');
8
7
  var hint_constants = require('./hint_constants.js');
9
- var base_message_constants = require('../base_message_constants.js');
10
8
  var base_message = require('../base_message.js');
11
9
 
12
10
  exports.HHint = class HHint extends base_message.BaseMessage {
@@ -18,14 +16,6 @@ exports.HHint = class HHint extends base_message.BaseMessage {
18
16
  super.connectedCallback(hint_constants.HINT_CLASS_NAME);
19
17
  this.classList.add(hint_constants.HINT_CLASS_NAME);
20
18
  }
21
- render() {
22
- super.render();
23
- return litHtml.html `
24
- <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
25
- ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
26
- </h-portal>
27
- `;
28
- }
29
19
  };
30
20
  exports.HHint = tslib_es6.__decorate([
31
21
  phoenix_custom_element.phoenixCustomElement(hint_constants.HINT_ELEMENT_NAME),
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;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;"}
package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
6
6
  var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
7
- var litHtml = require('lit-html');
8
7
  var tooltip_constants = require('./tooltip_constants.js');
9
- var base_message_constants = require('../base_message_constants.js');
10
8
  var base_message = require('../base_message.js');
11
9
 
12
10
  exports.HTooltip = class HTooltip extends base_message.BaseMessage {
@@ -14,14 +12,6 @@ exports.HTooltip = class HTooltip extends base_message.BaseMessage {
14
12
  super.connectedCallback(tooltip_constants.TOOLTIP_CLASS_NAME);
15
13
  this.classList.add(tooltip_constants.TOOLTIP_CLASS_NAME);
16
14
  }
17
- render() {
18
- super.render();
19
- return litHtml.html `
20
- <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
21
- ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
22
- </h-portal>
23
- `;
24
- }
25
15
  };
26
16
  exports.HTooltip = tslib_es6.__decorate([
27
17
  phoenix_custom_element.phoenixCustomElement(tooltip_constants.TOOLTIP_ELEMENT_NAME)
package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { IBaseMessage } from './base_message_types';
2
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
3
  import type { TDirection } from '@dreamcommerce/utilities';
4
- import { PropertyValues } from 'lit';
4
+ import { PropertyValues, TemplateResult } from 'lit';
5
5
  export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
6
6
  opened: boolean;
7
7
  portalTarget: string;
@@ -9,6 +9,7 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
9
9
  offset: number;
10
10
  mouseonly: boolean;
11
11
  tabindex: string;
12
+ private _messageId;
12
13
  private _positionController;
13
14
  private _clickOutsideController;
14
15
  private _$messageContent;
@@ -27,7 +28,8 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
27
28
  protected _positionMessage: () => void;
28
29
  open: () => void;
29
30
  private _closeFromKeyboard;
30
- private _closeFromEvent;
31
+ private _handleClose;
31
32
  close: (shouldCloseImmediately?: boolean) => void;
32
33
  disconnectedCallback(): void;
34
+ protected render(): TemplateResult;
33
35
  }
package/build/esm/packages/phoenix/src/components/messages/base_message.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
- import 'lit';
2
+ import { html } from 'lit';
3
3
  import { property } from 'lit/decorators';
4
4
  import { DIRECTIONS } from '@dreamcommerce/utilities';
5
5
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
6
+ import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
6
7
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
7
8
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
8
9
  import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
9
- 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 } 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';
10
11
 
11
12
  class BaseMessage extends PhoenixLightLitElement {
12
13
  constructor() {
@@ -17,26 +18,24 @@ class BaseMessage extends PhoenixLightLitElement {
17
18
  this.offset = DEFAULT_MESSAGE_OFFSET;
18
19
  this.mouseonly = false;
19
20
  this.tabindex = '-1';
21
+ this._messageId = v4();
20
22
  this._handleChildrenAriaAttributes = () => {
21
- if (!this._$baseMessageContent)
22
- return;
23
23
  [...this.children].forEach((child) => {
24
24
  if (LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()))
25
25
  return;
26
- if (this._$baseMessageContent)
27
- child.setAttribute('aria-describedby', this._$baseMessageContent.messageId);
26
+ child.setAttribute('aria-describedby', this._messageId);
28
27
  });
29
28
  };
30
29
  this._setupEventListeners = () => {
31
30
  var _a, _b;
32
31
  this.addEventListener('mouseenter', this.open);
33
- this.addEventListener('mouseleave', this._closeFromEvent);
32
+ this.addEventListener('mouseleave', this._handleClose);
34
33
  this.addEventListener('keydown', this._closeFromKeyboard);
35
34
  (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
36
- (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this._closeFromEvent);
35
+ (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this._handleClose);
37
36
  if (!this.mouseonly) {
38
37
  this.addEventListener('focusin', this.open);
39
- this.addEventListener('focusout', this._closeFromEvent);
38
+ this.addEventListener('focusout', this._handleClose);
40
39
  }
41
40
  };
42
41
  this._positionMessage = () => {
@@ -58,9 +57,10 @@ class BaseMessage extends PhoenixLightLitElement {
58
57
  if (ev.key !== 'Escape' || !this.opened)
59
58
  return;
60
59
  ev.preventDefault();
60
+ ev.stopPropagation();
61
61
  this.close(true);
62
62
  };
63
- this._closeFromEvent = () => {
63
+ this._handleClose = () => {
64
64
  this.close();
65
65
  };
66
66
  this.close = (shouldCloseImmediately = false) => {
@@ -85,7 +85,7 @@ class BaseMessage extends PhoenixLightLitElement {
85
85
  this._clickOutsideController = new ClickOutsideController({
86
86
  host: this,
87
87
  container: this,
88
- action: this._closeFromEvent
88
+ action: this._handleClose
89
89
  });
90
90
  }
91
91
  connectedCallback(messageComponentName = '') {
@@ -123,7 +123,17 @@ class BaseMessage extends PhoenixLightLitElement {
123
123
  var _a, _b;
124
124
  super.disconnectedCallback();
125
125
  (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
126
- (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this._closeFromEvent);
126
+ (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this._handleClose);
127
+ }
128
+ render() {
129
+ var _a;
130
+ super.render();
131
+ return html `
132
+ <span class="sr-only" id="${this._messageId}">${(_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML}</span>
133
+ <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
134
+ ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
135
+ </h-portal>
136
+ `;
127
137
  }
128
138
  }
129
139
  __decorate([
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;AACA;AACA;AACA;AACA;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;"}
package/build/esm/packages/phoenix/src/components/messages/base_message_content.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
2
  export declare class BaseMessageContent extends PhoenixLightLitElement {
3
3
  portalTarget: string;
4
- messageId: string;
5
4
  constructor();
6
5
  connectedCallback(): void;
7
6
  private _setupAriaAttributes;
package/build/esm/packages/phoenix/src/components/messages/base_message_content.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { property } from 'lit/decorators';
3
3
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
- import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
5
4
  import { PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
6
5
  import { DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
7
6
 
@@ -9,7 +8,6 @@ class BaseMessageContent extends PhoenixLightLitElement {
9
8
  constructor() {
10
9
  super();
11
10
  this.portalTarget = DEFAULT_MESSAGE_PORTAL_NAME;
12
- this.messageId = v4();
13
11
  this.slot = MESSAGE_CONTENT_SLOT_NAME;
14
12
  }
15
13
  connectedCallback() {
@@ -23,11 +21,7 @@ class BaseMessageContent extends PhoenixLightLitElement {
23
21
  __decorate([
24
22
  property({ type: String, attribute: PORTAL_TARGET_ATTRIBUTE_NAME }),
25
23
  __metadata("design:type", Object)
26
- ], BaseMessageContent.prototype, "portalTarget", void 0);
27
- __decorate([
28
- property({ type: String, attribute: 'message-id' }),
29
- __metadata("design:type", Object)
30
- ], BaseMessageContent.prototype, "messageId", void 0);
24
+ ], BaseMessageContent.prototype, "portalTarget", void 0);
31
25
 
32
26
  export { BaseMessageContent };
33
27
  //# sourceMappingURL=base_message_content.js.map
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,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;"}
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;"}
package/build/esm/packages/phoenix/src/components/messages/base_message_types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export interface IBaseMessage {
2
2
  open: () => void;
3
- close: () => void;
3
+ close: (shouldCloseImmediately?: boolean) => void;
4
4
  }
package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts CHANGED
@@ -1,7 +1,5 @@
1
- import { TemplateResult } from 'lit-html';
2
1
  import { BaseMessage } from '../base_message';
3
2
  export declare class HHint extends BaseMessage {
4
3
  constructor();
5
4
  connectedCallback(): void;
6
- protected render(): TemplateResult;
7
5
  }
package/build/esm/packages/phoenix/src/components/messages/hints/hint.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
2
2
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
3
- import { html } from 'lit-html';
4
3
  import { HINT_DEFAULT_OFFSET, HINT_CLASS_NAME, HINT_ELEMENT_NAME } from './hint_constants.js';
5
- import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
6
4
  import { BaseMessage } from '../base_message.js';
7
5
 
8
6
  let HHint = class HHint extends BaseMessage {
@@ -14,14 +12,6 @@ let HHint = class HHint extends BaseMessage {
14
12
  super.connectedCallback(HINT_CLASS_NAME);
15
13
  this.classList.add(HINT_CLASS_NAME);
16
14
  }
17
- render() {
18
- super.render();
19
- return html `
20
- <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
21
- ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
22
- </h-portal>
23
- `;
24
- }
25
15
  };
26
16
  HHint = __decorate([
27
17
  phoenixCustomElement(HINT_ELEMENT_NAME),
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,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;"}
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;"}
package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts CHANGED
@@ -1,6 +1,4 @@
1
- import { TemplateResult } from 'lit-html';
2
1
  import { BaseMessage } from '../base_message';
3
2
  export declare class HTooltip extends BaseMessage {
4
3
  connectedCallback(): void;
5
- protected render(): TemplateResult;
6
4
  }
package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
2
2
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
3
- import { html } from 'lit-html';
4
3
  import { TOOLTIP_CLASS_NAME, TOOLTIP_ELEMENT_NAME } from './tooltip_constants.js';
5
- import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
6
4
  import { BaseMessage } from '../base_message.js';
7
5
 
8
6
  let HTooltip = class HTooltip extends BaseMessage {
@@ -10,14 +8,6 @@ let HTooltip = class HTooltip extends BaseMessage {
10
8
  super.connectedCallback(TOOLTIP_CLASS_NAME);
11
9
  this.classList.add(TOOLTIP_CLASS_NAME);
12
10
  }
13
- render() {
14
- super.render();
15
- return html `
16
- <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
17
- ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
18
- </h-portal>
19
- `;
20
- }
21
11
  };
22
12
  HTooltip = __decorate([
23
13
  phoenixCustomElement(TOOLTIP_ELEMENT_NAME)
package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.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;"}
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;"}
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-26",
5
+ "version": "1.15.11-28",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -30,7 +30,7 @@
30
30
  "@splidejs/splide": "^4.0.7"
31
31
  },
32
32
  "devDependencies": {
33
- "@dreamcommerce/utilities": "^1.20.1",
33
+ "@dreamcommerce/utilities": "^1.20.1-1",
34
34
  "@shoper/jest_config": "^0.0.0",
35
35
  "@shoper/tsconfig": "^0.0.0",
36
36
  "@splidejs/splide": "4.0.7",