@shoper/phoenix_design_system 0.4.4 → 0.5.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 (15) hide show
  1. package/build/cjs/packages/phoenix/src/components/modal/modal.js +45 -37
  2. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/core/decorators/phoenix_custom_element.js +11 -3
  4. package/build/cjs/packages/phoenix/src/core/decorators/phoenix_custom_element.js.map +1 -1
  5. package/build/cjs/packages/star_core/build/esm/external/tslib/tslib.es6.js +1 -1
  6. package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +2 -2
  7. package/build/esm/packages/phoenix/src/components/modal/modal.js +45 -37
  8. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  9. package/build/esm/packages/phoenix/src/core/decorators/phoenix_custom_element.d.ts +2 -2
  10. package/build/esm/packages/phoenix/src/core/decorators/phoenix_custom_element.js +11 -3
  11. package/build/esm/packages/phoenix/src/core/decorators/phoenix_custom_element.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/global_types.d.ts +6 -1
  13. package/build/esm/packages/phoenix/src/index.d.ts +1 -1
  14. package/build/esm/packages/star_core/build/esm/external/tslib/tslib.es6.js +1 -1
  15. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -59,14 +59,14 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
59
59
  }
60
60
  }
61
61
  };
62
- this._handleCloseFromCloseComponent = (ev) => {
62
+ this._handleCloseFromCloseComponent = async (ev) => {
63
63
  var _a;
64
64
  ev.stopPropagation();
65
65
  if ((_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.contains(ev.target)) {
66
- this.close();
66
+ await this.close();
67
67
  }
68
68
  };
69
- this._bindCloseOnEsc = (ev) => {
69
+ this._bindCloseOnEsc = async (ev) => {
70
70
  ev.stopImmediatePropagation();
71
71
  const $target = ev.target;
72
72
  const closeConditions = [
@@ -79,7 +79,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
79
79
  const shouldCloseModal = closeConditions.every((condition) => condition);
80
80
  if (shouldCloseModal) {
81
81
  const [modalToClose] = HModal_1.openModals.slice(-1);
82
- modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
82
+ await (modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close());
83
83
  }
84
84
  };
85
85
  this.hidden = true;
@@ -126,24 +126,28 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
126
126
  this._propsChangeStrategies[modal_constants.MODAL_OPENED_PROP][String(this[modal_constants.MODAL_OPENED_PROP])]();
127
127
  }
128
128
  }
129
- open() {
130
- var _a;
131
- if (!this[modal_constants.MODAL_OPENED_PROP]) {
132
- this[modal_constants.MODAL_OPENED_PROP] = true;
133
- this._dispatchModalOpenedEvent();
134
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
135
- window.requestAnimationFrame(() => {
136
- setTimeout(() => {
137
- var _a;
138
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
139
- }, 0);
140
- const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
141
- setTimeout(() => {
142
- var _a;
143
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
144
- }, transitionDuration);
145
- });
146
- }
129
+ async open() {
130
+ return new Promise((resolve) => {
131
+ var _a;
132
+ if (!this[modal_constants.MODAL_OPENED_PROP]) {
133
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
134
+ window.requestAnimationFrame(() => {
135
+ setTimeout(() => {
136
+ var _a;
137
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
138
+ }, 0);
139
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
140
+ setTimeout(() => {
141
+ var _a;
142
+ this[modal_constants.MODAL_OPENED_PROP] = true;
143
+ this._dispatchModalOpenedEvent();
144
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
145
+ resolve();
146
+ }, transitionDuration);
147
+ });
148
+ }
149
+ resolve();
150
+ });
147
151
  }
148
152
  _dispatchModalOpenedEvent() {
149
153
  const openModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.opened, {
@@ -151,21 +155,25 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
151
155
  });
152
156
  this.dispatchEvent(openModalEvent);
153
157
  }
154
- close() {
155
- if (this[modal_constants.MODAL_OPENED_PROP]) {
156
- const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
157
- window.requestAnimationFrame(() => {
158
- var _a, _b;
159
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
160
- (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
161
- setTimeout(() => {
162
- var _a;
163
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
164
- this[modal_constants.MODAL_OPENED_PROP] = false;
165
- this._dispatchModalClosedEvent();
166
- }, transitionDuration);
167
- });
168
- }
158
+ async close() {
159
+ return new Promise((resolve) => {
160
+ if (this[modal_constants.MODAL_OPENED_PROP]) {
161
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
162
+ window.requestAnimationFrame(() => {
163
+ var _a, _b;
164
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
165
+ (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
166
+ setTimeout(() => {
167
+ var _a;
168
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
169
+ this[modal_constants.MODAL_OPENED_PROP] = false;
170
+ this._dispatchModalClosedEvent();
171
+ resolve();
172
+ }, transitionDuration);
173
+ });
174
+ }
175
+ resolve();
176
+ });
169
177
  }
170
178
  _dispatchModalClosedEvent() {
171
179
  const closeModalEvent = new CustomEvent(modal_constants.MODAL_EVENTS.closed, {
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;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;"}
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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/core/decorators/phoenix_custom_element.js CHANGED
@@ -6,13 +6,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
6
6
  * Allow for custom element classes with private constructors
7
7
  */
8
8
  const legacyCustomElement = (tagName, clazz) => {
9
- window.customElements.define(tagName, clazz);
10
9
  // Cast as any because TS doesn't recognize the return type as being a
11
10
  // subtype of the decorated class when clazz is typed as
12
11
  // `Constructor<HTMLElement>` for some reason.
13
12
  // `Constructor<HTMLElement>` is helpful to make sure the decorator is
14
13
  // applied to elements however.
15
14
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
+ defineComponent(tagName, clazz);
16
16
  clazz.__componentName__ = tagName;
17
17
  return clazz;
18
18
  };
@@ -24,7 +24,7 @@ const standardCustomElement = (tagName, descriptor) => {
24
24
  // This callback is called once the class is otherwise fully defined
25
25
  finisher(clazz) {
26
26
  clazz.__componentName__ = tagName;
27
- window.customElements.define(tagName, clazz);
27
+ defineComponent(tagName, clazz);
28
28
  }
29
29
  };
30
30
  };
@@ -44,7 +44,15 @@ const standardCustomElement = (tagName, descriptor) => {
44
44
  */
45
45
  const phoenixCustomElement = (tagName) => (classOrDescriptor) => typeof classOrDescriptor === 'function'
46
46
  ? legacyCustomElement(tagName, classOrDescriptor)
47
- : standardCustomElement(tagName, classOrDescriptor);
47
+ : standardCustomElement(tagName, classOrDescriptor);
48
+ const defineComponent = (tagName, componentClass) => {
49
+ const isCustomElementAlreadyDefined = customElements.get(tagName);
50
+ if (!isCustomElementAlreadyDefined)
51
+ window.customElements.define(tagName, componentClass);
52
+ if (isCustomElementAlreadyDefined && window.__debug_mode__) {
53
+ console.warn(`Custom element ${tagName} is already defined.`);
54
+ }
55
+ };
48
56
 
49
57
  exports.phoenixCustomElement = phoenixCustomElement;
50
58
  //# sourceMappingURL=phoenix_custom_element.js.map
package/build/cjs/packages/phoenix/src/core/decorators/phoenix_custom_element.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;"}
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;"}
package/build/cjs/packages/star_core/build/esm/external/tslib/tslib.es6.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- /******************************************************************************
5
+ /*! *****************************************************************************
6
6
  Copyright (c) Microsoft Corporation.
7
7
 
8
8
  Permission to use, copy, modify, and/or distribute this software for any
package/build/esm/packages/phoenix/src/components/modal/modal.d.ts CHANGED
@@ -23,9 +23,9 @@ export declare class HModal extends PhoenixLightLitElement {
23
23
  private _keepFocusWithinModal;
24
24
  private _handleCloseFromCloseComponent;
25
25
  private _bindCloseOnEsc;
26
- open(): void;
26
+ open(): Promise<void>;
27
27
  private _dispatchModalOpenedEvent;
28
- close(): void;
28
+ close(): Promise<void>;
29
29
  private _dispatchModalClosedEvent;
30
30
  render(): TemplateResult<1>;
31
31
  }
package/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -55,14 +55,14 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
55
55
  }
56
56
  }
57
57
  };
58
- this._handleCloseFromCloseComponent = (ev) => {
58
+ this._handleCloseFromCloseComponent = async (ev) => {
59
59
  var _a;
60
60
  ev.stopPropagation();
61
61
  if ((_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.contains(ev.target)) {
62
- this.close();
62
+ await this.close();
63
63
  }
64
64
  };
65
- this._bindCloseOnEsc = (ev) => {
65
+ this._bindCloseOnEsc = async (ev) => {
66
66
  ev.stopImmediatePropagation();
67
67
  const $target = ev.target;
68
68
  const closeConditions = [
@@ -75,7 +75,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
75
75
  const shouldCloseModal = closeConditions.every((condition) => condition);
76
76
  if (shouldCloseModal) {
77
77
  const [modalToClose] = HModal_1.openModals.slice(-1);
78
- modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
78
+ await (modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close());
79
79
  }
80
80
  };
81
81
  this.hidden = true;
@@ -122,24 +122,28 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
122
122
  this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
123
123
  }
124
124
  }
125
- open() {
126
- var _a;
127
- if (!this[MODAL_OPENED_PROP]) {
128
- this[MODAL_OPENED_PROP] = true;
129
- this._dispatchModalOpenedEvent();
130
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
131
- window.requestAnimationFrame(() => {
132
- setTimeout(() => {
133
- var _a;
134
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
135
- }, 0);
136
- const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
137
- setTimeout(() => {
138
- var _a;
139
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
140
- }, transitionDuration);
141
- });
142
- }
125
+ async open() {
126
+ return new Promise((resolve) => {
127
+ var _a;
128
+ if (!this[MODAL_OPENED_PROP]) {
129
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
130
+ window.requestAnimationFrame(() => {
131
+ setTimeout(() => {
132
+ var _a;
133
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
134
+ }, 0);
135
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
136
+ setTimeout(() => {
137
+ var _a;
138
+ this[MODAL_OPENED_PROP] = true;
139
+ this._dispatchModalOpenedEvent();
140
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
141
+ resolve();
142
+ }, transitionDuration);
143
+ });
144
+ }
145
+ resolve();
146
+ });
143
147
  }
144
148
  _dispatchModalOpenedEvent() {
145
149
  const openModalEvent = new CustomEvent(MODAL_EVENTS.opened, {
@@ -147,21 +151,25 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
147
151
  });
148
152
  this.dispatchEvent(openModalEvent);
149
153
  }
150
- close() {
151
- if (this[MODAL_OPENED_PROP]) {
152
- const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
153
- window.requestAnimationFrame(() => {
154
- var _a, _b;
155
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
156
- (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
157
- setTimeout(() => {
158
- var _a;
159
- (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
160
- this[MODAL_OPENED_PROP] = false;
161
- this._dispatchModalClosedEvent();
162
- }, transitionDuration);
163
- });
164
- }
154
+ async close() {
155
+ return new Promise((resolve) => {
156
+ if (this[MODAL_OPENED_PROP]) {
157
+ const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
158
+ window.requestAnimationFrame(() => {
159
+ var _a, _b;
160
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
161
+ (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
162
+ setTimeout(() => {
163
+ var _a;
164
+ (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
165
+ this[MODAL_OPENED_PROP] = false;
166
+ this._dispatchModalClosedEvent();
167
+ resolve();
168
+ }, transitionDuration);
169
+ });
170
+ }
171
+ resolve();
172
+ });
165
173
  }
166
174
  _dispatchModalClosedEvent() {
167
175
  const closeModalEvent = new CustomEvent(MODAL_EVENTS.closed, {
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;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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/core/decorators/phoenix_custom_element.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * Allow for custom element classes with private constructors
3
3
  */
4
- import { ClassDescriptor, IPhoenixComponentClass } from "../../global_types";
5
- declare type CustomElementClass = Omit<typeof HTMLElement, 'new'> & IPhoenixComponentClass;
4
+ import { ClassDescriptor, IPhoenixWebComponentClass } from "../../global_types";
5
+ declare type CustomElementClass = Omit<typeof HTMLElement, 'new'> & IPhoenixWebComponentClass;
6
6
  /**
7
7
  * Class decorator factory that defines the decorated class as a custom element.
8
8
  *
package/build/esm/packages/phoenix/src/core/decorators/phoenix_custom_element.js CHANGED
@@ -2,13 +2,13 @@
2
2
  * Allow for custom element classes with private constructors
3
3
  */
4
4
  const legacyCustomElement = (tagName, clazz) => {
5
- window.customElements.define(tagName, clazz);
6
5
  // Cast as any because TS doesn't recognize the return type as being a
7
6
  // subtype of the decorated class when clazz is typed as
8
7
  // `Constructor<HTMLElement>` for some reason.
9
8
  // `Constructor<HTMLElement>` is helpful to make sure the decorator is
10
9
  // applied to elements however.
11
10
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
11
+ defineComponent(tagName, clazz);
12
12
  clazz.__componentName__ = tagName;
13
13
  return clazz;
14
14
  };
@@ -20,7 +20,7 @@ const standardCustomElement = (tagName, descriptor) => {
20
20
  // This callback is called once the class is otherwise fully defined
21
21
  finisher(clazz) {
22
22
  clazz.__componentName__ = tagName;
23
- window.customElements.define(tagName, clazz);
23
+ defineComponent(tagName, clazz);
24
24
  }
25
25
  };
26
26
  };
@@ -40,7 +40,15 @@ const standardCustomElement = (tagName, descriptor) => {
40
40
  */
41
41
  const phoenixCustomElement = (tagName) => (classOrDescriptor) => typeof classOrDescriptor === 'function'
42
42
  ? legacyCustomElement(tagName, classOrDescriptor)
43
- : standardCustomElement(tagName, classOrDescriptor);
43
+ : standardCustomElement(tagName, classOrDescriptor);
44
+ const defineComponent = (tagName, componentClass) => {
45
+ const isCustomElementAlreadyDefined = customElements.get(tagName);
46
+ if (!isCustomElementAlreadyDefined)
47
+ window.customElements.define(tagName, componentClass);
48
+ if (isCustomElementAlreadyDefined && window.__debug_mode__) {
49
+ console.warn(`Custom element ${tagName} is already defined.`);
50
+ }
51
+ };
44
52
 
45
53
  export { phoenixCustomElement };
46
54
  //# sourceMappingURL=phoenix_custom_element.js.map
package/build/esm/packages/phoenix/src/core/decorators/phoenix_custom_element.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;"}
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;"}
package/build/esm/packages/phoenix/src/global_types.d.ts CHANGED
@@ -15,6 +15,11 @@ export interface ClassElement {
15
15
  finisher?: <T>(clazz: Constructor<T>) => void | Constructor<T>;
16
16
  descriptor?: PropertyDescriptor;
17
17
  }
18
- export interface IPhoenixComponentClass {
18
+ export interface IPhoenixWebComponentClass {
19
19
  __componentName__?: string;
20
20
  }
21
+ declare global {
22
+ interface Window {
23
+ __debug_mode__?: boolean;
24
+ }
25
+ }
package/build/esm/packages/phoenix/src/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { IPhoenixComponentClass } from "./global_types";
1
+ export { IPhoenixWebComponentClass } from "./global_types";
2
2
  export { ContextProviderController } from "./core/context/context_provider_controller";
3
3
  export { ContextConsumerController } from "./core/context/context_consumer_controller";
4
4
  export { PhoenixLightLitElement } from "./core/phoenix_light_lit_element";
package/build/esm/packages/star_core/build/esm/external/tslib/tslib.es6.js CHANGED
@@ -1,4 +1,4 @@
1
- /******************************************************************************
1
+ /*! *****************************************************************************
2
2
  Copyright (c) Microsoft Corporation.
3
3
 
4
4
  Permission to use, copy, modify, and/or distribute this software for any
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.4.4",
5
+ "version": "0.5.1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",