@shoper/phoenix_design_system 0.2.2-0 → 0.2.2-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 (6) hide show
  1. package/build/cjs/packages/phoenix/src/components/modal/modal.js +40 -4
  2. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  3. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +2 -0
  4. package/build/esm/packages/phoenix/src/components/modal/modal.js +40 -4
  5. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  6. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -15,6 +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
20
  this._firstFocusableElement = undefined;
19
21
  this._focusableElements = null;
20
22
  this._lastFocusableElement = undefined;
@@ -24,11 +26,13 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
24
26
  this._propsChangeStrategies = {
25
27
  [modal_constants.MODAL_OPENED_PROP]: {
26
28
  true: () => {
29
+ const scrollY = window.scrollY;
27
30
  HModal_1.openModals = [...HModal_1.openModals, this];
28
31
  document.addEventListener('keydown', this._bindCloseOnEsc);
29
32
  setTimeout(() => {
30
33
  var _a;
31
34
  (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
35
+ window.scrollTo(0, scrollY);
32
36
  }, 0);
33
37
  },
34
38
  false: () => {
@@ -69,6 +73,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
69
73
  modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
70
74
  }
71
75
  };
76
+ this.hidden = true;
72
77
  this._focusableElements = [...this.querySelectorAll(modal_constants.FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
73
78
  }
74
79
  static _appendModalsPortal() {
@@ -111,9 +116,22 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
111
116
  }
112
117
  }
113
118
  open() {
119
+ var _a;
114
120
  if (!this[modal_constants.MODAL_OPENED_PROP]) {
115
121
  this[modal_constants.MODAL_OPENED_PROP] = true;
116
122
  this._dispatchModalOpenedEvent();
123
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
124
+ window.requestAnimationFrame(() => {
125
+ setTimeout(() => {
126
+ var _a;
127
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
128
+ }, 0);
129
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
130
+ setTimeout(() => {
131
+ var _a;
132
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
133
+ }, transitionDuration);
134
+ });
117
135
  }
118
136
  }
119
137
  _dispatchModalOpenedEvent() {
@@ -124,8 +142,18 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
124
142
  }
125
143
  close() {
126
144
  if (this[modal_constants.MODAL_OPENED_PROP]) {
127
- this[modal_constants.MODAL_OPENED_PROP] = false;
128
- this._dispatchModalClosedEvent();
145
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
146
+ window.requestAnimationFrame(() => {
147
+ var _a, _b;
148
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
149
+ (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
150
+ setTimeout(() => {
151
+ var _a;
152
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
153
+ this[modal_constants.MODAL_OPENED_PROP] = false;
154
+ this._dispatchModalClosedEvent();
155
+ }, transitionDuration);
156
+ });
129
157
  }
130
158
  }
131
159
  _dispatchModalClosedEvent() {
@@ -138,8 +166,8 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
138
166
  return lit.html `
139
167
  <h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
140
168
  <div tabindex="0" ${ref.ref(this._focusSentinelStart)}></div>
141
- <div ${ref.ref(this._contentRef)} class="modal" role="dialog">
142
- ${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}
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>
143
171
  </div>
144
172
  <div tabindex="0" ${ref.ref(this._focusSentinelEnd)}></div>
145
173
  </h-portal>
@@ -151,6 +179,14 @@ tslib_es6.__decorate([
151
179
  decorators.property({ type: Boolean, reflect: true }),
152
180
  tslib_es6.__metadata("design:type", Object)
153
181
  ], exports.HModal.prototype, "opened", void 0);
182
+ tslib_es6.__decorate([
183
+ decorators.property({ type: String }),
184
+ tslib_es6.__metadata("design:type", Object)
185
+ ], exports.HModal.prototype, "customClass", void 0);
186
+ tslib_es6.__decorate([
187
+ decorators.property({ type: String }),
188
+ tslib_es6.__metadata("design:type", Object)
189
+ ], exports.HModal.prototype, "transition", void 0);
154
190
  tslib_es6.__decorate([
155
191
  decorators.state(),
156
192
  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;"}
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;"}
package/build/esm/packages/phoenix/src/components/modal/modal.d.ts CHANGED
@@ -2,6 +2,8 @@ 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;
6
+ transition: string;
5
7
  _firstFocusableElement: HTMLElement | undefined;
6
8
  _focusableElements: HTMLElement[] | null;
7
9
  _lastFocusableElement: HTMLElement | undefined;
package/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -11,6 +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
16
  this._firstFocusableElement = undefined;
15
17
  this._focusableElements = null;
16
18
  this._lastFocusableElement = undefined;
@@ -20,11 +22,13 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
20
22
  this._propsChangeStrategies = {
21
23
  [MODAL_OPENED_PROP]: {
22
24
  true: () => {
25
+ const scrollY = window.scrollY;
23
26
  HModal_1.openModals = [...HModal_1.openModals, this];
24
27
  document.addEventListener('keydown', this._bindCloseOnEsc);
25
28
  setTimeout(() => {
26
29
  var _a;
27
30
  (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
31
+ window.scrollTo(0, scrollY);
28
32
  }, 0);
29
33
  },
30
34
  false: () => {
@@ -65,6 +69,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
65
69
  modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
66
70
  }
67
71
  };
72
+ this.hidden = true;
68
73
  this._focusableElements = [...this.querySelectorAll(FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
69
74
  }
70
75
  static _appendModalsPortal() {
@@ -107,9 +112,22 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
107
112
  }
108
113
  }
109
114
  open() {
115
+ var _a;
110
116
  if (!this[MODAL_OPENED_PROP]) {
111
117
  this[MODAL_OPENED_PROP] = true;
112
118
  this._dispatchModalOpenedEvent();
119
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
120
+ window.requestAnimationFrame(() => {
121
+ setTimeout(() => {
122
+ var _a;
123
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
124
+ }, 0);
125
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
126
+ setTimeout(() => {
127
+ var _a;
128
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
129
+ }, transitionDuration);
130
+ });
113
131
  }
114
132
  }
115
133
  _dispatchModalOpenedEvent() {
@@ -120,8 +138,18 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
120
138
  }
121
139
  close() {
122
140
  if (this[MODAL_OPENED_PROP]) {
123
- this[MODAL_OPENED_PROP] = false;
124
- this._dispatchModalClosedEvent();
141
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
142
+ window.requestAnimationFrame(() => {
143
+ var _a, _b;
144
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
145
+ (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
146
+ setTimeout(() => {
147
+ var _a;
148
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
149
+ this[MODAL_OPENED_PROP] = false;
150
+ this._dispatchModalClosedEvent();
151
+ }, transitionDuration);
152
+ });
125
153
  }
126
154
  }
127
155
  _dispatchModalClosedEvent() {
@@ -134,8 +162,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
134
162
  return html `
135
163
  <h-portal ?disabled="${!this.opened}" to="${MODALS_PORTAL_NAME}" hidden>
136
164
  <div tabindex="0" ${n(this._focusSentinelStart)}></div>
137
- <div ${n(this._contentRef)} class="modal" role="dialog">
138
- ${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}
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>
139
167
  </div>
140
168
  <div tabindex="0" ${n(this._focusSentinelEnd)}></div>
141
169
  </h-portal>
@@ -147,6 +175,14 @@ __decorate([
147
175
  property({ type: Boolean, reflect: true }),
148
176
  __metadata("design:type", Object)
149
177
  ], HModal.prototype, "opened", void 0);
178
+ __decorate([
179
+ property({ type: String }),
180
+ __metadata("design:type", Object)
181
+ ], HModal.prototype, "customClass", void 0);
182
+ __decorate([
183
+ property({ type: String }),
184
+ __metadata("design:type", Object)
185
+ ], HModal.prototype, "transition", void 0);
150
186
  __decorate([
151
187
  state(),
152
188
  __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;"}
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;"}
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-0",
5
+ "version": "0.2.2-3",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",