@shoper/phoenix_design_system 0.2.2-1 → 0.2.2-4

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.
@@ -16,6 +16,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
16
16
  super();
17
17
  this.opened = false;
18
18
  this.customClass = '';
19
+ this.transition = 'slide-in-top';
19
20
  this._firstFocusableElement = undefined;
20
21
  this._focusableElements = null;
21
22
  this._lastFocusableElement = undefined;
@@ -25,11 +26,13 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
25
26
  this._propsChangeStrategies = {
26
27
  [modal_constants.MODAL_OPENED_PROP]: {
27
28
  true: () => {
29
+ const scrollY = window.scrollY;
28
30
  HModal_1.openModals = [...HModal_1.openModals, this];
29
31
  document.addEventListener('keydown', this._bindCloseOnEsc);
30
32
  setTimeout(() => {
31
33
  var _a;
32
34
  (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
35
+ window.scrollTo(0, scrollY);
33
36
  }, 0);
34
37
  },
35
38
  false: () => {
@@ -113,9 +116,22 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
113
116
  }
114
117
  }
115
118
  open() {
119
+ var _a;
116
120
  if (!this[modal_constants.MODAL_OPENED_PROP]) {
117
121
  this[modal_constants.MODAL_OPENED_PROP] = true;
118
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
+ });
119
135
  }
120
136
  }
121
137
  _dispatchModalOpenedEvent() {
@@ -126,8 +142,18 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
126
142
  }
127
143
  close() {
128
144
  if (this[modal_constants.MODAL_OPENED_PROP]) {
129
- this[modal_constants.MODAL_OPENED_PROP] = false;
130
- 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
+ });
131
157
  }
132
158
  }
133
159
  _dispatchModalClosedEvent() {
@@ -139,11 +165,13 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
139
165
  render() {
140
166
  return lit.html `
141
167
  <h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
142
- <div tabindex="0" ${ref.ref(this._focusSentinelStart)}></div>
143
- <div ${ref.ref(this._contentRef)} class="modal ${this.customClass}" role="dialog">
144
- <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
168
+ <div class="modal-container ${this.customClass}">
169
+ <div tabindex="0" ${ref.ref(this._focusSentinelStart)}></div>
170
+ <div ${ref.ref(this._contentRef)} class="modal" role="dialog">
171
+ <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
172
+ </div>
173
+ <div tabindex="0" ${ref.ref(this._focusSentinelEnd)}></div>
145
174
  </div>
146
- <div tabindex="0" ${ref.ref(this._focusSentinelEnd)}></div>
147
175
  </h-portal>
148
176
  `;
149
177
  }
@@ -157,6 +185,10 @@ tslib_es6.__decorate([
157
185
  decorators.property({ type: String }),
158
186
  tslib_es6.__metadata("design:type", Object)
159
187
  ], exports.HModal.prototype, "customClass", void 0);
188
+ tslib_es6.__decorate([
189
+ decorators.property({ type: String }),
190
+ tslib_es6.__metadata("design:type", Object)
191
+ ], exports.HModal.prototype, "transition", void 0);
160
192
  tslib_es6.__decorate([
161
193
  decorators.state(),
162
194
  tslib_es6.__metadata("design:type", Object)
@@ -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;"}
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;"}
@@ -17,7 +17,6 @@ class PhoenixLightLitElement extends lit.LitElement {
17
17
  this._slots = this._assignSlots();
18
18
  }
19
19
  _assignSlots() {
20
- console.log(this, 2);
21
20
  return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
22
21
  var _a;
23
22
  const slotName = $el.slot || phoenix_light_lit_elements_constants.DEFAULT_SLOT_NAME;
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,yCAA6C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,yCAA6C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -3,6 +3,7 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
3
3
  export declare class HModal extends PhoenixLightLitElement {
4
4
  opened: boolean;
5
5
  customClass: string;
6
+ transition: string;
6
7
  _firstFocusableElement: HTMLElement | undefined;
7
8
  _focusableElements: HTMLElement[] | null;
8
9
  _lastFocusableElement: HTMLElement | undefined;
@@ -12,6 +12,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
12
12
  super();
13
13
  this.opened = false;
14
14
  this.customClass = '';
15
+ this.transition = 'slide-in-top';
15
16
  this._firstFocusableElement = undefined;
16
17
  this._focusableElements = null;
17
18
  this._lastFocusableElement = undefined;
@@ -21,11 +22,13 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
21
22
  this._propsChangeStrategies = {
22
23
  [MODAL_OPENED_PROP]: {
23
24
  true: () => {
25
+ const scrollY = window.scrollY;
24
26
  HModal_1.openModals = [...HModal_1.openModals, this];
25
27
  document.addEventListener('keydown', this._bindCloseOnEsc);
26
28
  setTimeout(() => {
27
29
  var _a;
28
30
  (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
31
+ window.scrollTo(0, scrollY);
29
32
  }, 0);
30
33
  },
31
34
  false: () => {
@@ -109,9 +112,22 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
109
112
  }
110
113
  }
111
114
  open() {
115
+ var _a;
112
116
  if (!this[MODAL_OPENED_PROP]) {
113
117
  this[MODAL_OPENED_PROP] = true;
114
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
+ });
115
131
  }
116
132
  }
117
133
  _dispatchModalOpenedEvent() {
@@ -122,8 +138,18 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
122
138
  }
123
139
  close() {
124
140
  if (this[MODAL_OPENED_PROP]) {
125
- this[MODAL_OPENED_PROP] = false;
126
- 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
+ });
127
153
  }
128
154
  }
129
155
  _dispatchModalClosedEvent() {
@@ -135,11 +161,13 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
135
161
  render() {
136
162
  return html `
137
163
  <h-portal ?disabled="${!this.opened}" to="${MODALS_PORTAL_NAME}" hidden>
138
- <div tabindex="0" ${n(this._focusSentinelStart)}></div>
139
- <div ${n(this._contentRef)} class="modal ${this.customClass}" role="dialog">
140
- <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
164
+ <div class="modal-container ${this.customClass}">
165
+ <div tabindex="0" ${n(this._focusSentinelStart)}></div>
166
+ <div ${n(this._contentRef)} class="modal" role="dialog">
167
+ <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
168
+ </div>
169
+ <div tabindex="0" ${n(this._focusSentinelEnd)}></div>
141
170
  </div>
142
- <div tabindex="0" ${n(this._focusSentinelEnd)}></div>
143
171
  </h-portal>
144
172
  `;
145
173
  }
@@ -153,6 +181,10 @@ __decorate([
153
181
  property({ type: String }),
154
182
  __metadata("design:type", Object)
155
183
  ], HModal.prototype, "customClass", void 0);
184
+ __decorate([
185
+ property({ type: String }),
186
+ __metadata("design:type", Object)
187
+ ], HModal.prototype, "transition", void 0);
156
188
  __decorate([
157
189
  state(),
158
190
  __metadata("design:type", Object)
@@ -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;"}
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;"}
@@ -13,7 +13,6 @@ class PhoenixLightLitElement extends LitElement {
13
13
  this._slots = this._assignSlots();
14
14
  }
15
15
  _assignSlots() {
16
- console.log(this, 2);
17
16
  return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
18
17
  var _a;
19
18
  const slotName = $el.slot || DEFAULT_SLOT_NAME;
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,yCAA6C;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,yCAA6C;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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-1",
5
+ "version": "0.2.2-4",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",