@shoper/phoenix_design_system 0.2.2-1 → 0.2.2-2

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 (10) hide show
  1. package/build/cjs/packages/phoenix/src/components/modal/modal.js +33 -3
  2. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js +0 -1
  4. package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +1 -0
  6. package/build/esm/packages/phoenix/src/components/modal/modal.js +33 -3
  7. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.js +0 -1
  9. package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.js.map +1 -1
  10. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -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
- this._dispatchModalOpenedEvent();
122
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
123
+ window.requestAnimationFrame(() => {
124
+ setTimeout(() => {
125
+ var _a;
126
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
127
+ }, 0);
128
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
129
+ setTimeout(() => {
130
+ var _a;
131
+ (_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
+ }, 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() {
@@ -157,6 +183,10 @@ tslib_es6.__decorate([
157
183
  decorators.property({ type: String }),
158
184
  tslib_es6.__metadata("design:type", Object)
159
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);
160
190
  tslib_es6.__decorate([
161
191
  decorators.state(),
162
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;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/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js CHANGED
@@ -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;
package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js.map CHANGED
@@ -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;"}
package/build/esm/packages/phoenix/src/components/modal/modal.d.ts CHANGED
@@ -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;
package/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -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
- this._dispatchModalOpenedEvent();
118
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
119
+ window.requestAnimationFrame(() => {
120
+ setTimeout(() => {
121
+ var _a;
122
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
123
+ }, 0);
124
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
125
+ setTimeout(() => {
126
+ var _a;
127
+ (_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
+ }, 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() {
@@ -153,6 +179,10 @@ __decorate([
153
179
  property({ type: String }),
154
180
  __metadata("design:type", Object)
155
181
  ], HModal.prototype, "customClass", void 0);
182
+ __decorate([
183
+ property({ type: String }),
184
+ __metadata("design:type", Object)
185
+ ], HModal.prototype, "transition", void 0);
156
186
  __decorate([
157
187
  state(),
158
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;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/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.js CHANGED
@@ -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;
package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.js.map CHANGED
@@ -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-2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",