import { r as registerInstance, h, H as Host, g as getElement } from './index-da72c774.js';
import { c as cls } from './helpers-82cb299a.js';

const styleCss = "x-drawer{display:block;z-index:9000}x-drawer::after{content:\"\";z-index:8990;position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100%;max-width:100vw;height:100%;max-height:100vh;margin:0px;padding:0px;-webkit-transition:0.2s opacity;transition:0.2s opacity;background-color:rgba(255, 255, 255, 0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;overflow:hidden}.is-dark-mode x-drawer::after{background-color:rgba(var(--color-dark-rgb, 31, 31, 31), 0.5)}x-drawer .drawer-controls{display:block;position:fixed;width:100%;bottom:0;left:50%;-webkit-transform:translate(-50%, 100px);transform:translate(-50%, 100px);-webkit-transition:0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);transition:0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);padding:1rem 1.25rem;opacity:0;background-color:#FAFAFA;color:var(--color-text, #4A4A4A);-webkit-box-shadow:0 0 2rem 0 rgba(0, 0, 0, 0.2);box-shadow:0 0 2rem 0 rgba(0, 0, 0, 0.2);z-index:8992;cursor:pointer}x-drawer .drawer-controls.show{-webkit-transform:translate(-50%, 0px);transform:translate(-50%, 0px);opacity:1}x-drawer .drawer-controls.with-radius{border-radius:1rem 1rem 0 0}.is-dark-mode x-drawer .drawer-controls{background-color:#20242F;color:var(--color-text-light, #FEFEFE)}x-drawer .drawer-content{position:fixed;z-index:8991;bottom:0;left:50%;-webkit-transform:translate(-50%, 200px);transform:translate(-50%, 200px);-webkit-transition:0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);transition:0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);width:100%;visibility:hidden;height:auto;opacity:0;background-color:#FAFAFA;color:var(--color-text, #4A4A4A);-webkit-box-shadow:0 0 2rem rgba(0, 0, 0, 0.2);box-shadow:0 0 2rem rgba(0, 0, 0, 0.2)}.is-dark-mode x-drawer .drawer-content{background-color:#20242F;color:var(--color-text-light, #FEFEFE)}x-drawer .drawer-content .drawer-wrapper{overflow-y:auto;padding:1rem 1.25rem;height:auto;color:var(--color-text-light, #FEFEFE);width:100%}x-drawer .drawer-content .drawer-top-control{display:block;height:2rem;width:calc(100% - 0rem);margin:0 auto;padding:0.85rem 0;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}x-drawer .drawer-content .drawer-top-control:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}x-drawer .drawer-content .drawer-top-control:before{content:\"\";display:block;width:4rem;height:0.3rem;background-color:rgba(0, 0, 0, 0.3);border-radius:0.15rem;margin:0 auto}.is-dark-mode x-drawer .drawer-content .drawer-top-control:before{background-color:rgba(255, 255, 255, 0.5)}x-drawer .drawer-content .drawer-bottom-control{display:block;width:calc(100% - 0rem);margin:0 auto}x-drawer .drawer-content.with-radius{border-radius:1rem 1rem 0 0}x-drawer.show .drawer-controls{-webkit-box-shadow:none;box-shadow:none}x-drawer.show::after{opacity:1;visibility:visible}x-drawer.show .drawer-content{-webkit-transform:translate(-50%, 0px);transform:translate(-50%, 0px);opacity:1;visibility:visible}";
const XDrawerStyle0 = styleCss;

const remSize = 16;
const maxDrawerWidth = 520;
const maxDrawerHeight = 800;
const XDrawer = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.show = false;
        this.contentShow = false;
        this.browser = {
            width: 0,
            height: 0,
        };
        this.drawer = {
            width: 0,
            height: 0,
            contentHeight: 0,
            controlsHeight: 0,
        };
        this.withRadiusBorder = false;
        this.isDragging = false;
        this.touchStart = undefined;
        this.touchEnd = undefined;
    }
    /**
     * Handles by touch if the drawer has to be open or closed
     */
    handleTouchGesture() {
        if ((this.touchStart.touches[0].clientY < this.touchEnd.changedTouches[0].clientY && this.contentShow) ||
            (this.touchStart.touches[0].clientY > this.touchEnd.changedTouches[0].clientY && !this.contentShow)) {
            this.onContentShow(this.touchStart);
        }
    }
    /**
     * Shows the Drawer by state
     *
     * @param state
     */
    async expand(state) {
        this.contentShow = state;
    }
    /**
     * Gets the drawer content element
     *
     * @returns HTMLDivElement
     */
    getDrawerContent() {
        return this.el.querySelector('.drawer-content');
    }
    /**
     * Gets the drawer controls element
     *
     * @returns HTMLDivElement
     */
    getDrawerControls() {
        return this.el.querySelector('.drawer-controls');
    }
    /**
     * Sets the browser dimensions properties
     */
    setupBrowserSize() {
        this.browser.width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
        this.browser.height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - (remSize * 2);
    }
    /**
     * Sets the drawer dimensions properties
     */
    setupDrawerSizes() {
        var _a, _b;
        this.drawer.contentHeight = ((_a = this.getDrawerContent()) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
        this.drawer.controlsHeight = ((_b = this.getDrawerControls()) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
        if (this.drawer.contentHeight > maxDrawerHeight) {
            this.drawer.contentHeight = maxDrawerHeight;
        }
        this.withRadiusBorder = this.browser.width > maxDrawerWidth;
        this.drawer.width = this.browser.width > maxDrawerWidth ? maxDrawerWidth - remSize : this.browser.width;
        this.drawer.height = this.browser.height > maxDrawerHeight ? maxDrawerHeight : this.browser.height;
    }
    /**
     * Setup the component container
     */
    setupContainer() {
        window.onresize = () => {
            this.setupBrowserSize();
            this.setupDrawerSizes();
        };
    }
    /**
     * To control if the Drawer content has to be shown
     *
     * @param ev
     * @returns
     */
    onContentShow(ev) {
        const target = ev.target;
        if (target.closest('a, button, x-button, x-fab')) {
            return ev.preventDefault();
        }
        if (this.getDrawerContent()) {
            this.setupDrawerSizes();
            this.getDrawerContent().style.paddingBottom = `${this.drawer.controlsHeight}px`;
        }
        this.expand(!this.contentShow);
        document.querySelector('body').style.overflowY = this.contentShow ? 'hidden' : 'auto';
    }
    /**
     * Before mount the element
     */
    componentWillLoad() {
        this.setupContainer();
        this.setupBrowserSize();
        this.setupDrawerSizes();
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: 'df038c87b8013ff461d2364c5f4ab5259b663d6a', class: cls({ show: this.contentShow && this.show }) }, h("div", { key: 'e7ad09803d7b1a625db36d13a787fffb5383cbfb', class: cls('drawer-content', { 'with-radius': this.withRadiusBorder }), style: { maxWidth: this.drawer.width + 'px' } }, h("div", { key: 'b1e10d2704b57a7730cb1bbe2b04a2b4899c2970', class: "drawer-top-control", onClick: ev => this.onContentShow(ev), onTouchStart: ev => this.touchStart = ev, onTouchEnd: ev => this.touchEnd = ev }), h("div", { key: 'ec237ecfbbf23d01cf6d5148bca06acc75119714', class: "drawer-wrapper", style: { maxHeight: `${this.drawer.height - this.drawer.controlsHeight}px` } }, h("slot", { key: 'b5bcbc2ea28eb46ea474c70b834d1113a4394d34' })), h("div", { key: 'acd5fbbcf3ed779a43ff523e994fca61f1659287', class: "drawer-bottom-control" })), h("div", { key: '541f581f765864b1fffce1462cfec4cc7b9d2c80', class: cls('drawer-controls', { show: this.show, 'with-radius': this.withRadiusBorder }), style: { maxWidth: this.drawer.width + 'px' }, onClick: ev => this.onContentShow(ev), onTouchStart: ev => this.touchStart = ev, onTouchEnd: ev => this.touchEnd = ev }, h("slot", { key: '999cb8841a4d12182772c2d0810250721c9188be', name: "controls" })));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "touchEnd": ["handleTouchGesture"]
    }; }
};
XDrawer.style = XDrawerStyle0;

export { XDrawer as x_drawer };
