@shoper/phoenix_design_system 0.2.2-0 → 0.2.2-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.
- package/build/cjs/packages/phoenix/src/components/modal/modal.js +8 -2
- package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js +1 -0
- package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/modal/modal.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/modal/modal.js +8 -2
- package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.js +1 -0
- package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.js.map +1 -1
- package/package.json +1 -1
|
@@ -15,6 +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
19
|
this._firstFocusableElement = undefined;
|
|
19
20
|
this._focusableElements = null;
|
|
20
21
|
this._lastFocusableElement = undefined;
|
|
@@ -69,6 +70,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
69
70
|
modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
|
|
70
71
|
}
|
|
71
72
|
};
|
|
73
|
+
this.hidden = true;
|
|
72
74
|
this._focusableElements = [...this.querySelectorAll(modal_constants.FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
|
|
73
75
|
}
|
|
74
76
|
static _appendModalsPortal() {
|
|
@@ -138,8 +140,8 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
|
|
|
138
140
|
return lit.html `
|
|
139
141
|
<h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
|
|
140
142
|
<div tabindex="0" ${ref.ref(this._focusSentinelStart)}></div>
|
|
141
|
-
<div ${ref.ref(this._contentRef)} class="modal" role="dialog">
|
|
142
|
-
|
|
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>
|
|
143
145
|
</div>
|
|
144
146
|
<div tabindex="0" ${ref.ref(this._focusSentinelEnd)}></div>
|
|
145
147
|
</h-portal>
|
|
@@ -151,6 +153,10 @@ tslib_es6.__decorate([
|
|
|
151
153
|
decorators.property({ type: Boolean, reflect: true }),
|
|
152
154
|
tslib_es6.__metadata("design:type", Object)
|
|
153
155
|
], exports.HModal.prototype, "opened", void 0);
|
|
156
|
+
tslib_es6.__decorate([
|
|
157
|
+
decorators.property({ type: String }),
|
|
158
|
+
tslib_es6.__metadata("design:type", Object)
|
|
159
|
+
], exports.HModal.prototype, "customClass", void 0);
|
|
154
160
|
tslib_es6.__decorate([
|
|
155
161
|
decorators.state(),
|
|
156
162
|
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;"}
|
|
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;"}
|
|
@@ -17,6 +17,7 @@ class PhoenixLightLitElement extends lit.LitElement {
|
|
|
17
17
|
this._slots = this._assignSlots();
|
|
18
18
|
}
|
|
19
19
|
_assignSlots() {
|
|
20
|
+
console.log(this, 2);
|
|
20
21
|
return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
|
|
21
22
|
var _a;
|
|
22
23
|
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;"}
|
|
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;"}
|
|
@@ -2,6 +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
6
|
_firstFocusableElement: HTMLElement | undefined;
|
|
6
7
|
_focusableElements: HTMLElement[] | null;
|
|
7
8
|
_lastFocusableElement: HTMLElement | undefined;
|
|
@@ -11,6 +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
15
|
this._firstFocusableElement = undefined;
|
|
15
16
|
this._focusableElements = null;
|
|
16
17
|
this._lastFocusableElement = undefined;
|
|
@@ -65,6 +66,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
|
|
|
65
66
|
modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
|
|
66
67
|
}
|
|
67
68
|
};
|
|
69
|
+
this.hidden = true;
|
|
68
70
|
this._focusableElements = [...this.querySelectorAll(FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
|
|
69
71
|
}
|
|
70
72
|
static _appendModalsPortal() {
|
|
@@ -134,8 +136,8 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
|
|
|
134
136
|
return html `
|
|
135
137
|
<h-portal ?disabled="${!this.opened}" to="${MODALS_PORTAL_NAME}" hidden>
|
|
136
138
|
<div tabindex="0" ${n(this._focusSentinelStart)}></div>
|
|
137
|
-
<div ${n(this._contentRef)} class="modal" role="dialog">
|
|
138
|
-
|
|
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>
|
|
139
141
|
</div>
|
|
140
142
|
<div tabindex="0" ${n(this._focusSentinelEnd)}></div>
|
|
141
143
|
</h-portal>
|
|
@@ -147,6 +149,10 @@ __decorate([
|
|
|
147
149
|
property({ type: Boolean, reflect: true }),
|
|
148
150
|
__metadata("design:type", Object)
|
|
149
151
|
], HModal.prototype, "opened", void 0);
|
|
152
|
+
__decorate([
|
|
153
|
+
property({ type: String }),
|
|
154
|
+
__metadata("design:type", Object)
|
|
155
|
+
], HModal.prototype, "customClass", void 0);
|
|
150
156
|
__decorate([
|
|
151
157
|
state(),
|
|
152
158
|
__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;"}
|
|
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;"}
|
|
@@ -13,6 +13,7 @@ class PhoenixLightLitElement extends LitElement {
|
|
|
13
13
|
this._slots = this._assignSlots();
|
|
14
14
|
}
|
|
15
15
|
_assignSlots() {
|
|
16
|
+
console.log(this, 2);
|
|
16
17
|
return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
|
|
17
18
|
var _a;
|
|
18
19
|
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;"}
|
|
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;"}
|