@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.
@@ -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
- ${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}
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
- ${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}
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;"}
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-1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",