@shoper/phoenix_design_system 0.2.2-2 → 0.3.1

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 +19 -8
  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 +2 -2
  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 +19 -8
  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 +2 -2
  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,7 +15,7 @@ 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 = '';
18
+ this.class = '';
19
19
  this.transition = 'slide-in-top';
20
20
  this._firstFocusableElement = undefined;
21
21
  this._focusableElements = null;
@@ -66,7 +66,14 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
66
66
  };
67
67
  this._bindCloseOnEsc = (ev) => {
68
68
  ev.stopImmediatePropagation();
69
- const closeConditions = [ev.key === 'Escape', ev.ctrlKey === false, ev.shiftKey === false, ev.altKey === false];
69
+ const $target = ev.target;
70
+ const closeConditions = [
71
+ ev.key === 'Escape',
72
+ $target.tagName !== 'INPUT',
73
+ ev.ctrlKey === false,
74
+ ev.shiftKey === false,
75
+ ev.altKey === false
76
+ ];
70
77
  const shouldCloseModal = closeConditions.every((condition) => condition);
71
78
  if (shouldCloseModal) {
72
79
  const [modalToClose] = HModal_1.openModals.slice(-1);
@@ -103,10 +110,12 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
103
110
  }
104
111
  disconnectedCallback() {
105
112
  super.disconnectedCallback();
113
+ this[modal_constants.MODAL_OPENED_PROP] = false;
106
114
  document.removeEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
107
115
  document.removeEventListener('keydown', this._bindCloseOnEsc);
108
116
  }
109
117
  firstUpdated() {
118
+ super.firstUpdated();
110
119
  this._firstFocusableElement = this._focusSentinelStart.value;
111
120
  this._lastFocusableElement = this._focusSentinelEnd.value;
112
121
  }
@@ -119,6 +128,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
119
128
  var _a;
120
129
  if (!this[modal_constants.MODAL_OPENED_PROP]) {
121
130
  this[modal_constants.MODAL_OPENED_PROP] = true;
131
+ this._dispatchModalOpenedEvent();
122
132
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
123
133
  window.requestAnimationFrame(() => {
124
134
  setTimeout(() => {
@@ -129,7 +139,6 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
129
139
  setTimeout(() => {
130
140
  var _a;
131
141
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
132
- this._dispatchModalOpenedEvent();
133
142
  }, transitionDuration);
134
143
  });
135
144
  }
@@ -165,11 +174,13 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
165
174
  render() {
166
175
  return lit.html `
167
176
  <h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
168
- <div tabindex="0" ${ref.ref(this._focusSentinelStart)}></div>
169
- <div ${ref.ref(this._contentRef)} class="modal ${this.customClass}" role="dialog">
170
- <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
177
+ <div class="modal-wrapper ${this.class}">
178
+ <div tabindex="0" ${ref.ref(this._focusSentinelStart)}></div>
179
+ <div ${ref.ref(this._contentRef)} class="modal" role="dialog">
180
+ <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
181
+ </div>
182
+ <div tabindex="0" ${ref.ref(this._focusSentinelEnd)}></div>
171
183
  </div>
172
- <div tabindex="0" ${ref.ref(this._focusSentinelEnd)}></div>
173
184
  </h-portal>
174
185
  `;
175
186
  }
@@ -182,7 +193,7 @@ tslib_es6.__decorate([
182
193
  tslib_es6.__decorate([
183
194
  decorators.property({ type: String }),
184
195
  tslib_es6.__metadata("design:type", Object)
185
- ], exports.HModal.prototype, "customClass", void 0);
196
+ ], exports.HModal.prototype, "class", void 0);
186
197
  tslib_es6.__decorate([
187
198
  decorators.property({ type: String }),
188
199
  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;"}
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;"}
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,9 +12,9 @@ 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
20
  return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
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,7 +11,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
11
11
  constructor() {
12
12
  super();
13
13
  this.opened = false;
14
- this.customClass = '';
14
+ this.class = '';
15
15
  this.transition = 'slide-in-top';
16
16
  this._firstFocusableElement = undefined;
17
17
  this._focusableElements = null;
@@ -62,7 +62,14 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
62
62
  };
63
63
  this._bindCloseOnEsc = (ev) => {
64
64
  ev.stopImmediatePropagation();
65
- const closeConditions = [ev.key === 'Escape', ev.ctrlKey === false, ev.shiftKey === false, ev.altKey === false];
65
+ const $target = ev.target;
66
+ const closeConditions = [
67
+ ev.key === 'Escape',
68
+ $target.tagName !== 'INPUT',
69
+ ev.ctrlKey === false,
70
+ ev.shiftKey === false,
71
+ ev.altKey === false
72
+ ];
66
73
  const shouldCloseModal = closeConditions.every((condition) => condition);
67
74
  if (shouldCloseModal) {
68
75
  const [modalToClose] = HModal_1.openModals.slice(-1);
@@ -99,10 +106,12 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
99
106
  }
100
107
  disconnectedCallback() {
101
108
  super.disconnectedCallback();
109
+ this[MODAL_OPENED_PROP] = false;
102
110
  document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
103
111
  document.removeEventListener('keydown', this._bindCloseOnEsc);
104
112
  }
105
113
  firstUpdated() {
114
+ super.firstUpdated();
106
115
  this._firstFocusableElement = this._focusSentinelStart.value;
107
116
  this._lastFocusableElement = this._focusSentinelEnd.value;
108
117
  }
@@ -115,6 +124,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
115
124
  var _a;
116
125
  if (!this[MODAL_OPENED_PROP]) {
117
126
  this[MODAL_OPENED_PROP] = true;
127
+ this._dispatchModalOpenedEvent();
118
128
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
119
129
  window.requestAnimationFrame(() => {
120
130
  setTimeout(() => {
@@ -125,7 +135,6 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
125
135
  setTimeout(() => {
126
136
  var _a;
127
137
  (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
128
- this._dispatchModalOpenedEvent();
129
138
  }, transitionDuration);
130
139
  });
131
140
  }
@@ -161,11 +170,13 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
161
170
  render() {
162
171
  return html `
163
172
  <h-portal ?disabled="${!this.opened}" to="${MODALS_PORTAL_NAME}" hidden>
164
- <div tabindex="0" ${n(this._focusSentinelStart)}></div>
165
- <div ${n(this._contentRef)} class="modal ${this.customClass}" role="dialog">
166
- <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
173
+ <div class="modal-wrapper ${this.class}">
174
+ <div tabindex="0" ${n(this._focusSentinelStart)}></div>
175
+ <div ${n(this._contentRef)} class="modal" role="dialog">
176
+ <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
177
+ </div>
178
+ <div tabindex="0" ${n(this._focusSentinelEnd)}></div>
167
179
  </div>
168
- <div tabindex="0" ${n(this._focusSentinelEnd)}></div>
169
180
  </h-portal>
170
181
  `;
171
182
  }
@@ -178,7 +189,7 @@ __decorate([
178
189
  __decorate([
179
190
  property({ type: String }),
180
191
  __metadata("design:type", Object)
181
- ], HModal.prototype, "customClass", void 0);
192
+ ], HModal.prototype, "class", void 0);
182
193
  __decorate([
183
194
  property({ type: String }),
184
195
  __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;"}
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;"}
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,9 +8,9 @@ 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
16
  return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
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-2",
5
+ "version": "0.3.1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",