@shoper/phoenix_design_system 0.2.2-4 → 0.3.3

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 (31) hide show
  1. package/build/cjs/packages/phoenix/src/components/modal/modal.js +16 -6
  2. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/modal/modal_body.js +2 -1
  4. package/build/cjs/packages/phoenix/src/components/modal/modal_body.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/modal/modal_footer.js +1 -0
  6. package/build/cjs/packages/phoenix/src/components/modal/modal_footer.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/modal/modal_header.js +1 -0
  8. package/build/cjs/packages/phoenix/src/components/modal/modal_header.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/modal/modal_opener.js +43 -0
  10. package/build/cjs/packages/phoenix/src/components/modal/modal_opener.js.map +1 -0
  11. package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js +3 -3
  12. package/build/cjs/packages/phoenix/src/index.js +7 -0
  13. package/build/cjs/packages/phoenix/src/index.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +1 -1
  15. package/build/esm/packages/phoenix/src/components/modal/modal.js +16 -6
  16. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/modal/modal_body.js +2 -1
  18. package/build/esm/packages/phoenix/src/components/modal/modal_body.js.map +1 -1
  19. package/build/esm/packages/phoenix/src/components/modal/modal_footer.js +1 -0
  20. package/build/esm/packages/phoenix/src/components/modal/modal_footer.js.map +1 -1
  21. package/build/esm/packages/phoenix/src/components/modal/modal_header.js +1 -0
  22. package/build/esm/packages/phoenix/src/components/modal/modal_header.js.map +1 -1
  23. package/build/esm/packages/phoenix/src/components/modal/modal_opener.d.ts +9 -0
  24. package/build/esm/packages/phoenix/src/components/modal/modal_opener.js +41 -0
  25. package/build/esm/packages/phoenix/src/components/modal/modal_opener.js.map +1 -0
  26. package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.d.ts +1 -1
  27. package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.js +3 -3
  28. package/build/esm/packages/phoenix/src/index.d.ts +1 -0
  29. package/build/esm/packages/phoenix/src/index.js +1 -0
  30. package/build/esm/packages/phoenix/src/index.js.map +1 -1
  31. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -15,8 +15,8 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
15
15
  constructor() {
16
16
  super();
17
17
  this.opened = false;
18
- this.customClass = '';
19
- this.transition = 'slide-in-top';
18
+ this.class = '';
19
+ this.transition = 'scale';
20
20
  this._firstFocusableElement = undefined;
21
21
  this._focusableElements = null;
22
22
  this._lastFocusableElement = undefined;
@@ -29,6 +29,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
29
29
  const scrollY = window.scrollY;
30
30
  HModal_1.openModals = [...HModal_1.openModals, this];
31
31
  document.addEventListener('keydown', this._bindCloseOnEsc);
32
+ this._dispatchModalOpenedEvent();
32
33
  setTimeout(() => {
33
34
  var _a;
34
35
  (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
@@ -66,7 +67,14 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
66
67
  };
67
68
  this._bindCloseOnEsc = (ev) => {
68
69
  ev.stopImmediatePropagation();
69
- const closeConditions = [ev.key === 'Escape', ev.ctrlKey === false, ev.shiftKey === false, ev.altKey === false];
70
+ const $target = ev.target;
71
+ const closeConditions = [
72
+ ev.key === 'Escape',
73
+ $target.tagName !== 'INPUT',
74
+ ev.ctrlKey === false,
75
+ ev.shiftKey === false,
76
+ ev.altKey === false
77
+ ];
70
78
  const shouldCloseModal = closeConditions.every((condition) => condition);
71
79
  if (shouldCloseModal) {
72
80
  const [modalToClose] = HModal_1.openModals.slice(-1);
@@ -103,10 +111,12 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
103
111
  }
104
112
  disconnectedCallback() {
105
113
  super.disconnectedCallback();
114
+ this[modal_constants.MODAL_OPENED_PROP] = false;
106
115
  document.removeEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
107
116
  document.removeEventListener('keydown', this._bindCloseOnEsc);
108
117
  }
109
118
  firstUpdated() {
119
+ super.firstUpdated();
110
120
  this._firstFocusableElement = this._focusSentinelStart.value;
111
121
  this._lastFocusableElement = this._focusSentinelEnd.value;
112
122
  }
@@ -165,10 +175,10 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
165
175
  render() {
166
176
  return lit.html `
167
177
  <h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
168
- <div class="modal-container ${this.customClass}">
178
+ <div class="modal-wrapper ${this.class}">
169
179
  <div tabindex="0" ${ref.ref(this._focusSentinelStart)}></div>
170
180
  <div ${ref.ref(this._contentRef)} class="modal" role="dialog">
171
- <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
181
+ <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
172
182
  </div>
173
183
  <div tabindex="0" ${ref.ref(this._focusSentinelEnd)}></div>
174
184
  </div>
@@ -184,7 +194,7 @@ tslib_es6.__decorate([
184
194
  tslib_es6.__decorate([
185
195
  decorators.property({ type: String }),
186
196
  tslib_es6.__metadata("design:type", Object)
187
- ], exports.HModal.prototype, "customClass", void 0);
197
+ ], exports.HModal.prototype, "class", void 0);
188
198
  tslib_es6.__decorate([
189
199
  decorators.property({ type: String }),
190
200
  tslib_es6.__metadata("design:type", Object)
package/build/cjs/packages/phoenix/src/components/modal/modal.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,kBAAkB,oDAAwD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kBAAkB,oDAAwD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/modal_body.js CHANGED
@@ -9,7 +9,8 @@ var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js
9
9
  exports.HModalBody = class HModalBody extends phoenix_light_lit_element.PhoenixLightLitElement {
10
10
  constructor() {
11
11
  super();
12
- this.slot = this.hasAttribute('slot') ? this.slot : 'default';
12
+ this.slot = this.hasAttribute('slot') ? this.slot : 'body';
13
+ this.className = `modal__body ${this.className}`;
13
14
  }
14
15
  };
15
16
  exports.HModalBody = tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/modal/modal_body.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/modal/modal_footer.js CHANGED
@@ -10,6 +10,7 @@ exports.HModalFooter = class HModalFooter extends phoenix_light_lit_element.Phoe
10
10
  constructor() {
11
11
  super();
12
12
  this.slot = this.hasAttribute('slot') ? this.slot : 'footer';
13
+ this.className = `modal__footer ${this.className}`;
13
14
  }
14
15
  };
15
16
  exports.HModalFooter = tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/modal/modal_footer.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/modal/modal_header.js CHANGED
@@ -10,6 +10,7 @@ exports.HModalHeader = class HModalHeader extends phoenix_light_lit_element.Phoe
10
10
  constructor() {
11
11
  super();
12
12
  this.slot = this.hasAttribute('slot') ? this.slot : 'header';
13
+ this.className = `modal__header ${this.className}`;
13
14
  }
14
15
  };
15
16
  exports.HModalHeader = tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/modal/modal_header.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/modal/modal_opener.js ADDED
@@ -0,0 +1,43 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
+ var decorators = require('lit/decorators');
7
+ var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
8
+
9
+ exports.HModalOpener = class HModalOpener extends phoenix_light_lit_element.PhoenixLightLitElement {
10
+ constructor() {
11
+ super();
12
+ this.name = '';
13
+ this.tabIndex = 0;
14
+ this.setAttribute('role', 'button');
15
+ }
16
+ connectedCallback() {
17
+ super.connectedCallback();
18
+ this.addEventListener('click', this._openModal);
19
+ this.addEventListener('keydown', this._openModalOnKeydownEvent);
20
+ }
21
+ disconnectedCallback() {
22
+ this.removeEventListener('click', this._openModal);
23
+ this.removeEventListener('keydown', this._openModalOnKeydownEvent);
24
+ }
25
+ _openModal() {
26
+ const modal = document.querySelector(`h-modal#${this.name}`);
27
+ modal === null || modal === void 0 ? void 0 : modal.open();
28
+ }
29
+ _openModalOnKeydownEvent(ev) {
30
+ if (ev.code === 'Enter' || ev.code === 'Space') {
31
+ this._openModal();
32
+ }
33
+ }
34
+ };
35
+ tslib_es6.__decorate([
36
+ decorators.property({ type: String }),
37
+ tslib_es6.__metadata("design:type", Object)
38
+ ], exports.HModalOpener.prototype, "name", void 0);
39
+ exports.HModalOpener = tslib_es6.__decorate([
40
+ decorators.customElement('h-modal-opener'),
41
+ tslib_es6.__metadata("design:paramtypes", [])
42
+ ], exports.HModalOpener);
43
+ //# sourceMappingURL=modal_opener.js.map
package/build/cjs/packages/phoenix/src/components/modal/modal_opener.js.map ADDED
@@ -0,0 +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;"}
package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js CHANGED
@@ -12,12 +12,12 @@ class PhoenixLightLitElement extends lit.LitElement {
12
12
  super();
13
13
  this._slots = {};
14
14
  }
15
- connectedCallback() {
16
- super.connectedCallback();
15
+ firstUpdated() {
17
16
  this._slots = this._assignSlots();
17
+ this.requestUpdate();
18
18
  }
19
19
  _assignSlots() {
20
- return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
20
+ return [...this.querySelectorAll(':scope > [slot]')].reduce((acc, $el) => {
21
21
  var _a;
22
22
  const slotName = $el.slot || phoenix_light_lit_elements_constants.DEFAULT_SLOT_NAME;
23
23
  acc[slotName] = acc[slotName] || [];
package/build/cjs/packages/phoenix/src/index.js CHANGED
@@ -9,6 +9,7 @@ var hello_button = require('./hello_button.js');
9
9
  var portal_target = require('./components/portal/portal_target.js');
10
10
  var portal = require('./components/portal/portal.js');
11
11
  var modal = require('./components/modal/modal.js');
12
+ var modal_opener = require('./components/modal/modal_opener.js');
12
13
  var modal_backdrop = require('./components/modal/modal_backdrop.js');
13
14
  var modal_body = require('./components/modal/modal_body.js');
14
15
  var modal_footer = require('./components/modal/modal_footer.js');
@@ -44,6 +45,12 @@ Object.defineProperty(exports, 'HModal', {
44
45
  return modal.HModal;
45
46
  }
46
47
  });
48
+ Object.defineProperty(exports, 'HModalOpener', {
49
+ enumerable: true,
50
+ get: function () {
51
+ return modal_opener.HModalOpener;
52
+ }
53
+ });
47
54
  Object.defineProperty(exports, 'HModalBackdrop', {
48
55
  enumerable: true,
49
56
  get: function () {
package/build/cjs/packages/phoenix/src/index.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/modal.d.ts CHANGED
@@ -2,7 +2,7 @@ import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
3
3
  export declare class HModal extends PhoenixLightLitElement {
4
4
  opened: boolean;
5
- customClass: string;
5
+ class: string;
6
6
  transition: string;
7
7
  _firstFocusableElement: HTMLElement | undefined;
8
8
  _focusableElements: HTMLElement[] | null;
package/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -11,8 +11,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
11
11
  constructor() {
12
12
  super();
13
13
  this.opened = false;
14
- this.customClass = '';
15
- this.transition = 'slide-in-top';
14
+ this.class = '';
15
+ this.transition = 'scale';
16
16
  this._firstFocusableElement = undefined;
17
17
  this._focusableElements = null;
18
18
  this._lastFocusableElement = undefined;
@@ -25,6 +25,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
25
25
  const scrollY = window.scrollY;
26
26
  HModal_1.openModals = [...HModal_1.openModals, this];
27
27
  document.addEventListener('keydown', this._bindCloseOnEsc);
28
+ this._dispatchModalOpenedEvent();
28
29
  setTimeout(() => {
29
30
  var _a;
30
31
  (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
@@ -62,7 +63,14 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
62
63
  };
63
64
  this._bindCloseOnEsc = (ev) => {
64
65
  ev.stopImmediatePropagation();
65
- const closeConditions = [ev.key === 'Escape', ev.ctrlKey === false, ev.shiftKey === false, ev.altKey === false];
66
+ const $target = ev.target;
67
+ const closeConditions = [
68
+ ev.key === 'Escape',
69
+ $target.tagName !== 'INPUT',
70
+ ev.ctrlKey === false,
71
+ ev.shiftKey === false,
72
+ ev.altKey === false
73
+ ];
66
74
  const shouldCloseModal = closeConditions.every((condition) => condition);
67
75
  if (shouldCloseModal) {
68
76
  const [modalToClose] = HModal_1.openModals.slice(-1);
@@ -99,10 +107,12 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
99
107
  }
100
108
  disconnectedCallback() {
101
109
  super.disconnectedCallback();
110
+ this[MODAL_OPENED_PROP] = false;
102
111
  document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
103
112
  document.removeEventListener('keydown', this._bindCloseOnEsc);
104
113
  }
105
114
  firstUpdated() {
115
+ super.firstUpdated();
106
116
  this._firstFocusableElement = this._focusSentinelStart.value;
107
117
  this._lastFocusableElement = this._focusSentinelEnd.value;
108
118
  }
@@ -161,10 +171,10 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
161
171
  render() {
162
172
  return html `
163
173
  <h-portal ?disabled="${!this.opened}" to="${MODALS_PORTAL_NAME}" hidden>
164
- <div class="modal-container ${this.customClass}">
174
+ <div class="modal-wrapper ${this.class}">
165
175
  <div tabindex="0" ${n(this._focusSentinelStart)}></div>
166
176
  <div ${n(this._contentRef)} class="modal" role="dialog">
167
- <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
177
+ <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
168
178
  </div>
169
179
  <div tabindex="0" ${n(this._focusSentinelEnd)}></div>
170
180
  </div>
@@ -180,7 +190,7 @@ __decorate([
180
190
  __decorate([
181
191
  property({ type: String }),
182
192
  __metadata("design:type", Object)
183
- ], HModal.prototype, "customClass", void 0);
193
+ ], HModal.prototype, "class", void 0);
184
194
  __decorate([
185
195
  property({ type: String }),
186
196
  __metadata("design:type", Object)
package/build/esm/packages/phoenix/src/components/modal/modal.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,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/modal_body.js CHANGED
@@ -5,7 +5,8 @@ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js'
5
5
  let HModalBody = class HModalBody extends PhoenixLightLitElement {
6
6
  constructor() {
7
7
  super();
8
- this.slot = this.hasAttribute('slot') ? this.slot : 'default';
8
+ this.slot = this.hasAttribute('slot') ? this.slot : 'body';
9
+ this.className = `modal__body ${this.className}`;
9
10
  }
10
11
  };
11
12
  HModalBody = __decorate([
package/build/esm/packages/phoenix/src/components/modal/modal_body.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/modal/modal_footer.js CHANGED
@@ -6,6 +6,7 @@ let HModalFooter = class HModalFooter extends PhoenixLightLitElement {
6
6
  constructor() {
7
7
  super();
8
8
  this.slot = this.hasAttribute('slot') ? this.slot : 'footer';
9
+ this.className = `modal__footer ${this.className}`;
9
10
  }
10
11
  };
11
12
  HModalFooter = __decorate([
package/build/esm/packages/phoenix/src/components/modal/modal_footer.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/modal/modal_header.js CHANGED
@@ -6,6 +6,7 @@ let HModalHeader = class HModalHeader extends PhoenixLightLitElement {
6
6
  constructor() {
7
7
  super();
8
8
  this.slot = this.hasAttribute('slot') ? this.slot : 'header';
9
+ this.className = `modal__header ${this.className}`;
9
10
  }
10
11
  };
11
12
  HModalHeader = __decorate([
package/build/esm/packages/phoenix/src/components/modal/modal_header.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/modal/modal_opener.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
2
+ export declare class HModalOpener extends PhoenixLightLitElement {
3
+ name: string;
4
+ constructor();
5
+ connectedCallback(): void;
6
+ disconnectedCallback(): void;
7
+ private _openModal;
8
+ private _openModalOnKeydownEvent;
9
+ }
package/build/esm/packages/phoenix/src/components/modal/modal_opener.js ADDED
@@ -0,0 +1,41 @@
1
+ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
+ import { property, customElement } from 'lit/decorators';
3
+ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
4
+
5
+ let HModalOpener = class HModalOpener extends PhoenixLightLitElement {
6
+ constructor() {
7
+ super();
8
+ this.name = '';
9
+ this.tabIndex = 0;
10
+ this.setAttribute('role', 'button');
11
+ }
12
+ connectedCallback() {
13
+ super.connectedCallback();
14
+ this.addEventListener('click', this._openModal);
15
+ this.addEventListener('keydown', this._openModalOnKeydownEvent);
16
+ }
17
+ disconnectedCallback() {
18
+ this.removeEventListener('click', this._openModal);
19
+ this.removeEventListener('keydown', this._openModalOnKeydownEvent);
20
+ }
21
+ _openModal() {
22
+ const modal = document.querySelector(`h-modal#${this.name}`);
23
+ modal === null || modal === void 0 ? void 0 : modal.open();
24
+ }
25
+ _openModalOnKeydownEvent(ev) {
26
+ if (ev.code === 'Enter' || ev.code === 'Space') {
27
+ this._openModal();
28
+ }
29
+ }
30
+ };
31
+ __decorate([
32
+ property({ type: String }),
33
+ __metadata("design:type", Object)
34
+ ], HModalOpener.prototype, "name", void 0);
35
+ HModalOpener = __decorate([
36
+ customElement('h-modal-opener'),
37
+ __metadata("design:paramtypes", [])
38
+ ], HModalOpener);
39
+
40
+ export { HModalOpener };
41
+ //# sourceMappingURL=modal_opener.js.map
package/build/esm/packages/phoenix/src/components/modal/modal_opener.js.map ADDED
@@ -0,0 +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;"}
package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.d.ts CHANGED
@@ -2,7 +2,7 @@ import { LitElement, TemplateResult, nothing } from 'lit';
2
2
  export declare class PhoenixLightLitElement extends LitElement {
3
3
  _slots: Record<string, TemplateResult[]>;
4
4
  constructor();
5
- connectedCallback(): void;
5
+ firstUpdated(): void;
6
6
  private _assignSlots;
7
7
  getSlot(name: string): TemplateResult[] | typeof nothing;
8
8
  createRenderRoot(): PhoenixLightLitElement;
package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.js CHANGED
@@ -8,12 +8,12 @@ class PhoenixLightLitElement extends LitElement {
8
8
  super();
9
9
  this._slots = {};
10
10
  }
11
- connectedCallback() {
12
- super.connectedCallback();
11
+ firstUpdated() {
13
12
  this._slots = this._assignSlots();
13
+ this.requestUpdate();
14
14
  }
15
15
  _assignSlots() {
16
- return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
16
+ return [...this.querySelectorAll(':scope > [slot]')].reduce((acc, $el) => {
17
17
  var _a;
18
18
  const slotName = $el.slot || DEFAULT_SLOT_NAME;
19
19
  acc[slotName] = acc[slotName] || [];
package/build/esm/packages/phoenix/src/index.d.ts CHANGED
@@ -5,6 +5,7 @@ export { HelloButton } from './hello_button';
5
5
  export { HPortal } from './components/portal/portal';
6
6
  export { HPortalTarget } from './components/portal/portal_target';
7
7
  export { HModal } from './components/modal/modal';
8
+ export { HModalOpener } from './components/modal/modal_opener';
8
9
  export { HModalBackdrop } from './components/modal/modal_backdrop';
9
10
  export { HModalBody } from './components/modal/modal_body';
10
11
  export { HModalFooter } from './components/modal/modal_footer';
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -5,6 +5,7 @@ export { HelloButton } from './hello_button.js';
5
5
  export { HPortalTarget } from './components/portal/portal_target.js';
6
6
  export { HPortal } from './components/portal/portal.js';
7
7
  export { HModal } from './components/modal/modal.js';
8
+ export { HModalOpener } from './components/modal/modal_opener.js';
8
9
  export { HModalBackdrop } from './components/modal/modal_backdrop.js';
9
10
  export { HModalBody } from './components/modal/modal_body.js';
10
11
  export { HModalFooter } from './components/modal/modal_footer.js';
package/build/esm/packages/phoenix/src/index.js.map CHANGED
@@ -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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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": "0.2.2-4",
5
+ "version": "0.3.3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",