@shoper/phoenix_design_system 1.15.13 → 1.16.1

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

@@ -0,0 +1,259 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { property, state } from '@lit/reactive-element/decorators.js';
+import '@lit/reactive-element';
+import { html } from 'lit-html';
+import { createRef, ref } from 'lit-html/directives/ref.js';
+import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
+import { BACKDROP_EVENTS } from '../backdrop/backdrop_constants.js';
+import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
+import { SHEET_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_SHEET, SHEETS_PORTAL_NAME, SHEET_EVENTS } from './sheet_constants.js';
+import { HSheetClose } from './sheet_close.js';
+
+var HSheet_1;
+let HSheet = HSheet_1 = class HSheet extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this.class = '';
+        this.transition = 'scale';
+        this.sheetLabel = '';
+        this._firstFocusableElement = undefined;
+        this._focusableElements = null;
+        this._lastFocusableElement = undefined;
+        this._focusedToggler = null;
+        this._contentRef = createRef();
+        this._focusSentinelStart = createRef();
+        this._focusSentinelEnd = createRef();
+        this._propsChangeStrategies = {
+            [SHEET_OPENED_PROP]: {
+                true: () => {
+                    const scrollY = window.scrollY;
+                    HSheet_1.openSheets = [...HSheet_1.openSheets, this];
+                    document.addEventListener('keydown', this._bindCloseOnEsc);
+                    document.addEventListener(BACKDROP_EVENTS.clicked, this.close);
+                    this._dispatchSheetOpenedEvent();
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                        window.scrollTo(0, scrollY);
+                    }, 0);
+                },
+                false: () => {
+                    HSheet_1.openSheets = HSheet_1.openSheets.filter((sheet) => sheet !== this);
+                    document.removeEventListener('keydown', this._bindCloseOnEsc);
+                    document.removeEventListener(BACKDROP_EVENTS.clicked, this.close);
+                }
+            }
+        };
+        this._backdropController = new BackdropController();
+        this._keepFocusWithinSheet = (ev) => {
+            var _a;
+            const isTabPressed = ev.code === 'Tab';
+            if (isTabPressed && this._contentRef.value) {
+                if (ev.shiftKey) {
+                    if (document.activeElement === this._firstFocusableElement) {
+                        const focusableElements = UiDomUtils.getFocusableElements(this._contentRef.value);
+                        (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                        ev.preventDefault();
+                    }
+                }
+                else if (document.activeElement === this._lastFocusableElement) {
+                    UiDomUtils.setFocusToFirstFocusableElementInContainer(this._contentRef.value);
+                    ev.preventDefault();
+                }
+            }
+        };
+        this._handleCloseFromCloseComponent = async (ev) => {
+            var _a;
+            ev.stopPropagation();
+            const isSheetCloseElement = ev.target instanceof HSheetClose;
+            const isContainedWithinSheet = (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.contains(ev.target);
+            if (isSheetCloseElement && isContainedWithinSheet) {
+                await this.close();
+            }
+        };
+        this._bindCloseOnEsc = async (ev) => {
+            ev.stopImmediatePropagation();
+            const $target = ev.target;
+            const closeConditions = [
+                ev.key === 'Escape',
+                $target.tagName !== 'INPUT',
+                ev.ctrlKey === false,
+                ev.shiftKey === false,
+                ev.altKey === false
+            ];
+            const shouldCloseSheet = closeConditions.every((condition) => condition);
+            if (shouldCloseSheet) {
+                const [sheetToClose] = HSheet_1.openSheets.slice(-1);
+                await (sheetToClose === null || sheetToClose === void 0 ? void 0 : sheetToClose.close());
+            }
+        };
+        this.close = async () => {
+            if (!this.opened)
+                return;
+            return new Promise((resolve) => {
+                const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+                window.requestAnimationFrame(() => {
+                    var _a, _b;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_hide-${this.transition}-start`);
+                    (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`sheet_hide-${this.transition}-end`);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_hide-${this.transition}-start`, `sheet_hide-${this.transition}-end`);
+                        this[SHEET_OPENED_PROP] = false;
+                        this._dispatchHSheetClosedEvent();
+                        resolve();
+                    }, transitionDuration);
+                });
+            });
+        };
+        this._addInertToBodyChildrenElements = () => {
+            [...document.body.children].forEach((child) => {
+                const isPortalTarget = child.tagName === PORTAL_TARGET_COMPONENT_NAME.toUpperCase();
+                const isAriaLiveContainer = child.hasAttribute('aria-live');
+                if (!isPortalTarget && !isAriaLiveContainer) {
+                    child.setAttribute('inert', '');
+                }
+            });
+        };
+        this._removeInertFromBodyChildrenElements = () => {
+            [...document.body.children].forEach((child) => {
+                child.removeAttribute('inert');
+            });
+        };
+        this.hidden = true;
+        this._focusableElements = [...this.querySelectorAll(FOCUSABLE_ELEMENTS_WITHIN_SHEET)];
+    }
+    static _appendSheetPortal() {
+        const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${SHEETS_PORTAL_NAME}"]`);
+        if (!$modalsPortalTarget) {
+            const $portalTarget = document.createElement('h-portal-target');
+            $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, SHEETS_PORTAL_NAME);
+            document.body.appendChild($portalTarget);
+        }
+    }
+    static isSomeSheetOpen() {
+        return HSheet_1.openSheets.some((sheet) => sheet.opened);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        HSheet_1._appendSheetPortal();
+        document.addEventListener('keyup', this._keepFocusWithinSheet);
+        document.addEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this[SHEET_OPENED_PROP])
+            this.close();
+        document.removeEventListener(SHEET_EVENTS.close, this._handleCloseFromCloseComponent);
+        document.removeEventListener('keydown', this._bindCloseOnEsc);
+        document.removeEventListener('keyup', this._keepFocusWithinSheet);
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._firstFocusableElement = this._focusSentinelStart.value;
+        this._lastFocusableElement = this._focusSentinelEnd.value;
+    }
+    updated(changedProps) {
+        if (changedProps.has(SHEET_OPENED_PROP)) {
+            this._propsChangeStrategies[SHEET_OPENED_PROP][String(this[SHEET_OPENED_PROP])]();
+        }
+    }
+    _setFocusToFirstFocusableElementInSheetOrCloseBtn() {
+        requestAnimationFrame(() => {
+            if (this._contentRef.value) {
+                const focusableElements = UiDomUtils.getFocusableElements(this._contentRef.value);
+                if (focusableElements.length > 0) {
+                    focusableElements.length > 1 ? focusableElements[1].focus() : focusableElements[0].focus();
+                }
+            }
+        });
+    }
+    async open() {
+        this._focusedToggler = document.activeElement;
+        return new Promise((resolve) => {
+            var _a;
+            this[SHEET_OPENED_PROP] = true;
+            (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`sheet_visible`, `sheet_show-${this.transition}-start`);
+            window.requestAnimationFrame(() => {
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`sheet_show-${this.transition}-end`);
+                }, 0);
+                const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`sheet_show-${this.transition}-start`, `sheet_show-${this.transition}-end`);
+                    this._setFocusToFirstFocusableElementInSheetOrCloseBtn();
+                    resolve();
+                }, transitionDuration);
+            });
+        });
+    }
+    _dispatchSheetOpenedEvent() {
+        this.emitCustomEvent(SHEET_EVENTS.opened);
+        this._backdropController.show();
+        this._addInertToBodyChildrenElements();
+    }
+    _dispatchHSheetClosedEvent() {
+        this.emitCustomEvent(SHEET_EVENTS.closed);
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = this._focusedToggler) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+        this._backdropController.hide();
+        this._removeInertFromBodyChildrenElements();
+    }
+    render() {
+        return html `
+            <h-portal ?disabled="${!this.opened}" to="${SHEETS_PORTAL_NAME}" hidden>
+                <div class="sheet-wrapper ${this.class}">
+                    <div tabindex="0" ${ref(this._focusSentinelStart)}></div>
+                    <div ${ref(this._contentRef)} class="sheet" role="dialog" aria-label="${this.sheetLabel}">
+                        <div class="sheet__container">${this.getSlot('header')} ${this.getSlot('body')} ${this.getSlot('footer')}</div>
+                    </div>
+                    <div tabindex="0" ${ref(this._focusSentinelEnd)}></div>
+                </div>
+            </h-portal>
+        `;
+    }
+};
+HSheet.openSheets = [];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HSheet.prototype, "opened", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HSheet.prototype, "class", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HSheet.prototype, "transition", void 0);
+__decorate([
+    property({ type: String, attribute: 'sheet-label' }),
+    __metadata("design:type", Object)
+], HSheet.prototype, "sheetLabel", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HSheet.prototype, "_firstFocusableElement", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HSheet.prototype, "_focusableElements", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HSheet.prototype, "_lastFocusableElement", void 0);
+HSheet = HSheet_1 = __decorate([
+    phoenixCustomElement('h-sheet'),
+    __metadata("design:paramtypes", [])
+], HSheet);
+
+export { HSheet };
+//# sourceMappingURL=sheet.js.map

package/build/esm/packages/phoenix/src/components/sheet/sheet.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/sheet/sheet_body.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HSheetBody extends PhoenixLightLitElement {
+    constructor();
+}

package/build/esm/packages/phoenix/src/components/sheet/sheet_body.js

@@ -0,0 +1,18 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+
+let HSheetBody = class HSheetBody extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'body';
+        this.className = `sheet__body ${this.className}`;
+    }
+};
+HSheetBody = __decorate([
+    phoenixCustomElement('h-sheet-body'),
+    __metadata("design:paramtypes", [])
+], HSheetBody);
+
+export { HSheetBody };
+//# sourceMappingURL=sheet_body.js.map

package/build/esm/packages/phoenix/src/components/sheet/sheet_body.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;"}

package/build/esm/packages/phoenix/src/components/sheet/sheet_close.d.ts

@@ -0,0 +1,8 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HSheetClose extends PhoenixLightLitElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _dispatchSheetCloseEvent;
+    private _dispatchSheetCloseOnEnterEvent;
+}

package/build/esm/packages/phoenix/src/components/sheet/sheet_close.js

@@ -0,0 +1,36 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { SHEET_EVENTS } from './sheet_constants.js';
+
+let HSheetClose = class HSheetClose extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.tabIndex = 0;
+        this.setAttribute('role', 'button');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchSheetCloseEvent);
+        this.addEventListener('keydown', this._dispatchSheetCloseOnEnterEvent);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._dispatchSheetCloseEvent);
+        this.removeEventListener('keydown', this._dispatchSheetCloseOnEnterEvent);
+    }
+    _dispatchSheetCloseEvent() {
+        this.emitCustomEvent(SHEET_EVENTS.close);
+    }
+    _dispatchSheetCloseOnEnterEvent(ev) {
+        if (ev.code === 'Enter' || ev.code === 'Space') {
+            this._dispatchSheetCloseEvent();
+        }
+    }
+};
+HSheetClose = __decorate([
+    phoenixCustomElement('h-sheet-close'),
+    __metadata("design:paramtypes", [])
+], HSheetClose);
+
+export { HSheetClose };
+//# sourceMappingURL=sheet_close.js.map

package/build/esm/packages/phoenix/src/components/sheet/sheet_close.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;"}

package/build/esm/packages/phoenix/src/components/sheet/sheet_constants.d.ts

@@ -0,0 +1,9 @@
+export declare const SHEETS_PORTAL_NAME = "modals";
+export declare const SHEET_EVENTS: {
+    readonly open: "open";
+    readonly close: "close";
+    readonly opened: "opened";
+    readonly closed: "closed";
+};
+export declare const SHEET_OPENED_PROP = "opened";
+export declare const FOCUSABLE_ELEMENTS_WITHIN_SHEET = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";

package/build/esm/packages/phoenix/src/components/sheet/sheet_constants.js

@@ -0,0 +1,12 @@
+const SHEETS_PORTAL_NAME = 'modals';
+const SHEET_EVENTS = {
+    open: 'open',
+    close: 'close',
+    opened: 'opened',
+    closed: 'closed'
+};
+const SHEET_OPENED_PROP = 'opened';
+const FOCUSABLE_ELEMENTS_WITHIN_SHEET = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export { FOCUSABLE_ELEMENTS_WITHIN_SHEET, SHEETS_PORTAL_NAME, SHEET_EVENTS, SHEET_OPENED_PROP };
+//# sourceMappingURL=sheet_constants.js.map

package/build/esm/packages/phoenix/src/components/sheet/sheet_constants.js.map

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

package/build/esm/packages/phoenix/src/components/sheet/sheet_footer.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HSheetFooter extends PhoenixLightLitElement {
+    constructor();
+}

package/build/esm/packages/phoenix/src/components/sheet/sheet_footer.js

@@ -0,0 +1,18 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+
+let HSheetFooter = class HSheetFooter extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'footer';
+        this.className = `sheet__footer ${this.className}`;
+    }
+};
+HSheetFooter = __decorate([
+    phoenixCustomElement('h-sheet-footer'),
+    __metadata("design:paramtypes", [])
+], HSheetFooter);
+
+export { HSheetFooter };
+//# sourceMappingURL=sheet_footer.js.map

package/build/esm/packages/phoenix/src/components/sheet/sheet_footer.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;"}

package/build/esm/packages/phoenix/src/components/sheet/sheet_header.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HSheetHeader extends PhoenixLightLitElement {
+    constructor();
+}

package/build/esm/packages/phoenix/src/components/sheet/sheet_header.js

@@ -0,0 +1,18 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+
+let HSheetHeader = class HSheetHeader extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'header';
+        this.className = `sheet__header ${this.className}`;
+    }
+};
+HSheetHeader = __decorate([
+    phoenixCustomElement('h-sheet-header'),
+    __metadata("design:paramtypes", [])
+], HSheetHeader);
+
+export { HSheetHeader };
+//# sourceMappingURL=sheet_header.js.map

package/build/esm/packages/phoenix/src/components/sheet/sheet_header.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;"}

package/build/esm/packages/phoenix/src/components/sheet/sheet_opener.d.ts

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

package/build/esm/packages/phoenix/src/components/sheet/sheet_opener.js

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

package/build/esm/packages/phoenix/src/components/sheet/sheet_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;AACA;AACA;"}

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

@@ -5,7 +5,7 @@ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/pho
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { BehaviorSubject } from '../../core/classes/behavior_subject/behavior_subject.js';
 import { ContextProviderController } from '../../core/context/context_provider_controller.js';
-import { templateContent as o } from '../../../../../external/lit/external/lit-html/directives/template-content.js';
+import { templateContent as o } from '../../../../../external/lit-html/directives/template-content.js';
 import { TOGGLE_CONTEXT_NAME, TOGGLE_BUTTON_EVENTS } from './toggle_constants.js';
 
 let HToggle = class HToggle extends PhoenixLightLitElement {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,8EAAsF;AAC3H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA,qCAAqC,iEAAqE;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/directives/namespaced_attribute_directive.d.ts

@@ -4,5 +4,5 @@ declare class NamespaceAttributeDirective extends Directive {
     update(part: PartInfo, [namespace, value]: DirectiveParameters<this>): typeof noChange;
     render(namespace: string, value: string): typeof noChange;
 }
-export declare const namespacedAttribute: (namespace: string, value: string) => import("lit/async-directive.js").DirectiveResult<typeof NamespaceAttributeDirective>;
+export declare const namespacedAttribute: (namespace: string, value: string) => import("lit-html/directive").DirectiveResult<typeof NamespaceAttributeDirective>;
 export {};

package/build/esm/packages/phoenix/src/directives/namespaced_attribute_directive.js

@@ -1,6 +1,6 @@
 import { noChange } from 'lit';
-import '../../../../external/lit/external/lit-html/lit-html.js';
-import { directive as e, Directive as i } from '../../../../external/lit/external/lit-html/directive.js';
+import '../../../../external/lit-html/lit-html.js';
+import { directive as e, Directive as i } from '../../../../external/lit-html/directive.js';
 
 class NamespaceAttributeDirective extends i {
     update(part, [namespace, value]) {

package/build/esm/packages/phoenix/src/directives/namespaced_attribute_directive.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,OAAO,wDAAgE;AACvE,+CAA+C,yDAAiE;AAChH;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,OAAO,2CAA+C;AACtD,+CAA+C,4CAAgD;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/directives/observable_directive.d.ts

@@ -10,5 +10,5 @@ declare class ObserveDirective<T = unknown> extends AsyncDirective {
     disconnected(): void;
     reconnected(): void;
 }
-export declare const observe: (observable: ISubject<unknown>, render?: Function | undefined) => import("lit/async-directive.js").DirectiveResult<typeof ObserveDirective>;
+export declare const observe: (observable: ISubject<unknown>, render?: Function | undefined) => import("lit-html/directive").DirectiveResult<typeof ObserveDirective>;
 export {};

package/build/esm/packages/phoenix/src/directives/observable_directive.js

@@ -1,6 +1,6 @@
 import { noChange } from 'lit';
-import { directive as e } from '../../../../external/lit/external/lit-html/directive.js';
-import { AsyncDirective as c } from '../../../../external/lit/external/lit-html/async-directive.js';
+import { directive as e } from '../../../../external/lit-html/directive.js';
+import { AsyncDirective as c } from '../../../../external/lit-html/async-directive.js';
 import { Observer } from '../core/classes/observer/observer.js';
 
 class ObserveDirective extends c {

package/build/esm/packages/phoenix/src/directives/observable_directive.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,yDAAiE;AAChG,oCAAoC,+DAAuE;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,4CAAgD;AAC/E,oCAAoC,kDAAsD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/index.d.ts

@@ -21,6 +21,13 @@ export { HModalFooter } from './components/modal/modal_footer';
 export { HModalHeader } from './components/modal/modal_header';
 export { HModalClose } from './components/modal/modal_close';
 export { MODAL_EVENTS } from './components/modal/modal_constants';
+export { HSheet } from './components/sheet/sheet';
+export { HSheetOpener } from './components/sheet/sheet_opener';
+export { HSheetBody } from './components/sheet/sheet_body';
+export { HSheetFooter } from './components/sheet/sheet_footer';
+export { HSheetHeader } from './components/sheet/sheet_header';
+export { HSheetClose } from './components/sheet/sheet_close';
+export { SHEET_EVENTS } from './components/sheet/sheet_constants';
 export { HControl } from './components/form/control/control';
 export { HControlErrors } from './components/form/control/control_errors';
 export { HControlContent } from './components/form/control/control_content';

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

@@ -32,6 +32,13 @@ export { HModalOpener } from './components/modal/modal_opener.js';
 export { HModalBody } from './components/modal/modal_body.js';
 export { HModalFooter } from './components/modal/modal_footer.js';
 export { HModalHeader } from './components/modal/modal_header.js';
+export { SHEET_EVENTS } from './components/sheet/sheet_constants.js';
+export { HSheetClose } from './components/sheet/sheet_close.js';
+export { HSheet } from './components/sheet/sheet.js';
+export { HSheetOpener } from './components/sheet/sheet_opener.js';
+export { HSheetBody } from './components/sheet/sheet_body.js';
+export { HSheetFooter } from './components/sheet/sheet_footer.js';
+export { HSheetHeader } from './components/sheet/sheet_header.js';
 export { ADDITIONAL_CONTENT_TYPE_TO_CSS_CLASSES_MAP, CONTROL_ADDITIONAL_CONTENT_TYPES, CONTROL_CONTENT_SIZES, FORM_CONTROLS_CSS_CLASSES } from './components/form/control/control_constatns.js';
 export { HControl } from './components/form/control/control.js';
 export { HControlErrors } from './components/form/control/control_errors.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

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

package/build/cjs/external/lit/external/lit-html/directive-helpers.js

@@ -1,19 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var litHtml = require('./lit-html.js');
-
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const {I:l}=litHtml._$LH,e=o=>void 0===o.strings,c=()=>document.createComment(""),r=(o,t,i)=>{var n;const d=o._$AA.parentNode,v=void 0===t?o._$AB:t._$AA;if(void 0===i){const t=d.insertBefore(c(),v),n=d.insertBefore(c(),v);i=new l(t,n,o,o.options);}else {const l=i._$AB.nextSibling,t=i._$AM,e=t!==o;if(e){let l;null===(n=i._$AQ)||void 0===n||n.call(i,o),i._$AM=o,void 0!==i._$AP&&(l=o._$AU)!==t._$AU&&i._$AP(l);}if(l!==v||e){let o=i._$AA;for(;o!==l;){const l=o.nextSibling;d.insertBefore(o,v),o=l;}}}return i},u=(o,l,t=o)=>(o._$AI(l,t),o),f={},s=(o,l=f)=>o._$AH=l,m=o=>o._$AH,p=o=>{var l;null===(l=o._$AP)||void 0===l||l.call(o,!1,!0);let t=o._$AA;const i=o._$AB.nextSibling;for(;t!==i;){const o=t.nextSibling;t.remove(),t=o;}};
-
-exports.getCommittedValue = m;
-exports.insertPart = r;
-exports.isSingleExpression = e;
-exports.removePart = p;
-exports.setChildPartValue = u;
-exports.setCommittedValue = s;
-//# sourceMappingURL=directive-helpers.js.map