@shoper/phoenix_design_system 0.2.2-4 → 0.3.1

package/build/cjs/packages/phoenix/src/components/modal/modal.js

@@ -15,7 +15,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     constructor() {
         super();
         this.opened = false;
-        this.customClass = '';
+        this.class = '';
         this.transition = 'slide-in-top';
         this._firstFocusableElement = undefined;
         this._focusableElements = null;
@@ -66,7 +66,14 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
         };
         this._bindCloseOnEsc = (ev) => {
             ev.stopImmediatePropagation();
-            const closeConditions = [ev.key === 'Escape', ev.ctrlKey === false, ev.shiftKey === false, ev.altKey === false];
+            const $target = ev.target;
+            const closeConditions = [
+                ev.key === 'Escape',
+                $target.tagName !== 'INPUT',
+                ev.ctrlKey === false,
+                ev.shiftKey === false,
+                ev.altKey === false
+            ];
             const shouldCloseModal = closeConditions.every((condition) => condition);
             if (shouldCloseModal) {
                 const [modalToClose] = HModal_1.openModals.slice(-1);
@@ -103,10 +110,12 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this[modal_constants.MODAL_OPENED_PROP] = false;
         document.removeEventListener(modal_constants.MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
     }
     firstUpdated() {
+        super.firstUpdated();
         this._firstFocusableElement = this._focusSentinelStart.value;
         this._lastFocusableElement = this._focusSentinelEnd.value;
     }
@@ -165,10 +174,10 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
     render() {
         return lit.html `
             <h-portal ?disabled="${!this.opened}" to="${modal_constants.MODALS_PORTAL_NAME}" hidden>
-                <div class="modal-container ${this.customClass}">
+                <div class="modal-wrapper ${this.class}">
                     <div tabindex="0" ${ref.ref(this._focusSentinelStart)}></div>
                     <div ${ref.ref(this._contentRef)} class="modal" role="dialog">
-                        <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
+                        <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
                     </div>
                     <div tabindex="0" ${ref.ref(this._focusSentinelEnd)}></div>
                 </div>
@@ -184,7 +193,7 @@ tslib_es6.__decorate([
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)
-], exports.HModal.prototype, "customClass", void 0);
+], exports.HModal.prototype, "class", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/modal/modal.js.map

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/modal/modal_body.js

@@ -9,7 +9,8 @@ var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js
 exports.HModalBody = class HModalBody extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
-        this.slot = this.hasAttribute('slot') ? this.slot : 'default';
+        this.slot = this.hasAttribute('slot') ? this.slot : 'body';
+        this.className = `modal__body ${this.className}`;
     }
 };
 exports.HModalBody = tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/modal/modal_body.js.map

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/modal/modal_footer.js

@@ -10,6 +10,7 @@ exports.HModalFooter = class HModalFooter extends phoenix_light_lit_element.Phoe
     constructor() {
         super();
         this.slot = this.hasAttribute('slot') ? this.slot : 'footer';
+        this.className = `modal__footer ${this.className}`;
     }
 };
 exports.HModalFooter = tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/modal/modal_footer.js.map

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/modal/modal_header.js

@@ -10,6 +10,7 @@ exports.HModalHeader = class HModalHeader extends phoenix_light_lit_element.Phoe
     constructor() {
         super();
         this.slot = this.hasAttribute('slot') ? this.slot : 'header';
+        this.className = `modal__header ${this.className}`;
     }
 };
 exports.HModalHeader = tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/modal/modal_header.js.map

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/modal/modal_opener.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element.js');
+
+exports.HModalOpener = class HModalOpener extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.name = '';
+        this.tabIndex = 0;
+        this.setAttribute('role', 'button');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._openModal);
+        this.addEventListener('keydown', this._openModalOnKeydownEvent);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._openModal);
+        this.removeEventListener('keydown', this._openModalOnKeydownEvent);
+    }
+    _openModal() {
+        const modal = document.querySelector(`h-modal#${this.name}`);
+        modal === null || modal === void 0 ? void 0 : modal.open();
+    }
+    _openModalOnKeydownEvent(ev) {
+        if (ev.code === 'Enter' || ev.code === 'Space') {
+            this._openModal();
+        }
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HModalOpener.prototype, "name", void 0);
+exports.HModalOpener = tslib_es6.__decorate([
+    decorators.customElement('h-modal-opener'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HModalOpener);
+//# sourceMappingURL=modal_opener.js.map

package/build/cjs/packages/phoenix/src/components/modal/modal_opener.js.map

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -12,9 +12,9 @@ class PhoenixLightLitElement extends lit.LitElement {
         super();
         this._slots = {};
     }
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated() {
         this._slots = this._assignSlots();
+        this.requestUpdate();
     }
     _assignSlots() {
         return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {

package/build/cjs/packages/phoenix/src/index.js

@@ -9,6 +9,7 @@ var hello_button = require('./hello_button.js');
 var portal_target = require('./components/portal/portal_target.js');
 var portal = require('./components/portal/portal.js');
 var modal = require('./components/modal/modal.js');
+var modal_opener = require('./components/modal/modal_opener.js');
 var modal_backdrop = require('./components/modal/modal_backdrop.js');
 var modal_body = require('./components/modal/modal_body.js');
 var modal_footer = require('./components/modal/modal_footer.js');
@@ -44,6 +45,12 @@ Object.defineProperty(exports, 'HModal', {
 		return modal.HModal;
 	}
 });
+Object.defineProperty(exports, 'HModalOpener', {
+	enumerable: true,
+	get: function () {
+		return modal_opener.HModalOpener;
+	}
+});
 Object.defineProperty(exports, 'HModalBackdrop', {
 	enumerable: true,
 	get: function () {

package/build/cjs/packages/phoenix/src/index.js.map

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;AACA;AACA;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

@@ -2,7 +2,7 @@ import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
 export declare class HModal extends PhoenixLightLitElement {
     opened: boolean;
-    customClass: string;
+    class: string;
     transition: string;
     _firstFocusableElement: HTMLElement | undefined;
     _focusableElements: HTMLElement[] | null;

package/build/esm/packages/phoenix/src/components/modal/modal.js

@@ -11,7 +11,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     constructor() {
         super();
         this.opened = false;
-        this.customClass = '';
+        this.class = '';
         this.transition = 'slide-in-top';
         this._firstFocusableElement = undefined;
         this._focusableElements = null;
@@ -62,7 +62,14 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
         };
         this._bindCloseOnEsc = (ev) => {
             ev.stopImmediatePropagation();
-            const closeConditions = [ev.key === 'Escape', ev.ctrlKey === false, ev.shiftKey === false, ev.altKey === false];
+            const $target = ev.target;
+            const closeConditions = [
+                ev.key === 'Escape',
+                $target.tagName !== 'INPUT',
+                ev.ctrlKey === false,
+                ev.shiftKey === false,
+                ev.altKey === false
+            ];
             const shouldCloseModal = closeConditions.every((condition) => condition);
             if (shouldCloseModal) {
                 const [modalToClose] = HModal_1.openModals.slice(-1);
@@ -99,10 +106,12 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this[MODAL_OPENED_PROP] = false;
         document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
         document.removeEventListener('keydown', this._bindCloseOnEsc);
     }
     firstUpdated() {
+        super.firstUpdated();
         this._firstFocusableElement = this._focusSentinelStart.value;
         this._lastFocusableElement = this._focusSentinelEnd.value;
     }
@@ -161,10 +170,10 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
     render() {
         return html `
             <h-portal ?disabled="${!this.opened}" to="${MODALS_PORTAL_NAME}" hidden>
-                <div class="modal-container ${this.customClass}">
+                <div class="modal-wrapper ${this.class}">
                     <div tabindex="0" ${n(this._focusSentinelStart)}></div>
                     <div ${n(this._contentRef)} class="modal" role="dialog">
-                        <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
+                        <div class="modal__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
                     </div>
                     <div tabindex="0" ${n(this._focusSentinelEnd)}></div>
                 </div>
@@ -180,7 +189,7 @@ __decorate([
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
-], HModal.prototype, "customClass", void 0);
+], HModal.prototype, "class", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)

package/build/esm/packages/phoenix/src/components/modal/modal.js.map

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal_body.js

@@ -5,7 +5,8 @@ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js'
 let HModalBody = class HModalBody extends PhoenixLightLitElement {
     constructor() {
         super();
-        this.slot = this.hasAttribute('slot') ? this.slot : 'default';
+        this.slot = this.hasAttribute('slot') ? this.slot : 'body';
+        this.className = `modal__body ${this.className}`;
     }
 };
 HModalBody = __decorate([

package/build/esm/packages/phoenix/src/components/modal/modal_body.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal_footer.js

@@ -6,6 +6,7 @@ let HModalFooter = class HModalFooter extends PhoenixLightLitElement {
     constructor() {
         super();
         this.slot = this.hasAttribute('slot') ? this.slot : 'footer';
+        this.className = `modal__footer ${this.className}`;
     }
 };
 HModalFooter = __decorate([

package/build/esm/packages/phoenix/src/components/modal/modal_footer.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal_header.js

@@ -6,6 +6,7 @@ let HModalHeader = class HModalHeader extends PhoenixLightLitElement {
     constructor() {
         super();
         this.slot = this.hasAttribute('slot') ? this.slot : 'header';
+        this.className = `modal__header ${this.className}`;
     }
 };
 HModalHeader = __decorate([

package/build/esm/packages/phoenix/src/components/modal/modal_header.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal_opener.d.ts

@@ -0,0 +1,9 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalOpener extends PhoenixLightLitElement {
+    name: string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _openModal;
+    private _openModalOnKeydownEvent;
+}

package/build/esm/packages/phoenix/src/components/modal/modal_opener.js

@@ -0,0 +1,41 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property, customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+
+let HModalOpener = class HModalOpener extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.name = '';
+        this.tabIndex = 0;
+        this.setAttribute('role', 'button');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._openModal);
+        this.addEventListener('keydown', this._openModalOnKeydownEvent);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._openModal);
+        this.removeEventListener('keydown', this._openModalOnKeydownEvent);
+    }
+    _openModal() {
+        const modal = document.querySelector(`h-modal#${this.name}`);
+        modal === null || modal === void 0 ? void 0 : modal.open();
+    }
+    _openModalOnKeydownEvent(ev) {
+        if (ev.code === 'Enter' || ev.code === 'Space') {
+            this._openModal();
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HModalOpener.prototype, "name", void 0);
+HModalOpener = __decorate([
+    customElement('h-modal-opener'),
+    __metadata("design:paramtypes", [])
+], HModalOpener);
+
+export { HModalOpener };
+//# sourceMappingURL=modal_opener.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_opener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -2,7 +2,7 @@ import { LitElement, TemplateResult, nothing } from 'lit';
 export declare class PhoenixLightLitElement extends LitElement {
     _slots: Record<string, TemplateResult[]>;
     constructor();
-    connectedCallback(): void;
+    firstUpdated(): void;
     private _assignSlots;
     getSlot(name: string): TemplateResult[] | typeof nothing;
     createRenderRoot(): PhoenixLightLitElement;

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.js

@@ -8,9 +8,9 @@ class PhoenixLightLitElement extends LitElement {
         super();
         this._slots = {};
     }
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated() {
         this._slots = this._assignSlots();
+        this.requestUpdate();
     }
     _assignSlots() {
         return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {

package/build/esm/packages/phoenix/src/index.d.ts

@@ -5,6 +5,7 @@ export { HelloButton } from './hello_button';
 export { HPortal } from './components/portal/portal';
 export { HPortalTarget } from './components/portal/portal_target';
 export { HModal } from './components/modal/modal';
+export { HModalOpener } from './components/modal/modal_opener';
 export { HModalBackdrop } from './components/modal/modal_backdrop';
 export { HModalBody } from './components/modal/modal_body';
 export { HModalFooter } from './components/modal/modal_footer';

package/build/esm/packages/phoenix/src/index.js

@@ -5,6 +5,7 @@ export { HelloButton } from './hello_button.js';
 export { HPortalTarget } from './components/portal/portal_target.js';
 export { HPortal } from './components/portal/portal.js';
 export { HModal } from './components/modal/modal.js';
+export { HModalOpener } from './components/modal/modal_opener.js';
 export { HModalBackdrop } from './components/modal/modal_backdrop.js';
 export { HModalBody } from './components/modal/modal_body.js';
 export { HModalFooter } from './components/modal/modal_footer.js';

package/build/esm/packages/phoenix/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.2.2-4",
+  "version": "0.3.1",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",