@zanichelli/albe-web-components 16.4.1 → 17.0.0-RC2

package/dist/components/index22.js

@@ -1,341 +1,103 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { P as PopoverPosition, g as KeyboardCode } from './index2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
 
-const stylesCss = ":host{--z-popover-theme--surface:var(--color-surface01);--z-popover-theme--text:var(--color-default-text);--z-popover-padding:0;--z-popover-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));position:relative;display:none;min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);align-items:center;justify-content:center;padding:var(--z-popover-padding);background:var(--z-popover-theme--surface);border-radius:var(--border-radius-small);color:var(--z-popover-theme--text);fill:currentcolor;filter:var(--z-popover-shadow-filter);font-family:var(--font-family-sans);text-align:center}:host([open][current-position]),:host([open=\"true\"][current-position]){display:flex}:host([center][current-position=\"top\"]),:host([center][current-position=\"bottom\"]){transform:translateX(-50%)}:host([center][current-position=\"right\"]),:host([center][current-position=\"left\"]){transform:translateY(-50%)}:host([current-position^=\"top\"]){margin:0 0 var(--space-unit)}:host([current-position^=\"bottom\"]){margin:var(--space-unit) 0 0}:host([current-position^=\"left\"]){margin:0 var(--space-unit) 0 0}:host([current-position^=\"right\"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface);content:\"\";transform:rotate(45deg)}:host([show-arrow=\"false\"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^=\"top\"])::before{top:var(--arrow-center-y-offset)}:host([current-position^=\"bottom\"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position=\"top\"])::before,:host([current-position=\"bottom\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before,:host([current-position=\"left\"])::before{bottom:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"top_right\"])::before,:host([current-position=\"bottom_right\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"top_left\"])::before,:host([current-position=\"bottom_left\"])::before{left:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"left_top\"])::before{top:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"right_bottom\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left_top\"])::before,:host([current-position=\"left_bottom\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"right_bottom\"])::before,:host([current-position=\"left_bottom\"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position=\"top\"])::before,:host([center][current-position=\"bottom\"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position=\"right\"])::before,:host([center][current-position=\"left\"])::before{top:var(--arrow-center-x-offset);bottom:auto}::slotted(*){overflow:auto;flex:1 auto}";
-const ZPopoverStyle0 = stylesCss;
+const stylesCss = ".sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.canvas-background.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.canvas-background.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(.canvas-content::-webkit-scrollbar-track){.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}}@media (min-width: 768px){[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){flex:none}.canvas-container.sc-z-offcanvas{width:max(var(--z-offcanvas--container-width, 375px), 375px);min-width:375px}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}";
+const ZOffcanvasStyle0 = stylesCss;
 
-const DOCUMENT_ELEMENT = document.documentElement;
-function getParentElement(element) {
-    if (element.parentNode === element.shadowRoot) {
-        return element.shadowRoot.host;
-    }
-    return element.parentElement;
-}
-/**
- * Find the closest scrollable parent of a node.
- *
- * @param {Element} element The node
- */
-function findScrollableParent(element) {
-    let parent = getParentElement(element);
-    while (parent && parent !== DOCUMENT_ELEMENT) {
-        const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
-        if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
-            return parent;
-        }
-        if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
-            (parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
-            return parent;
-        }
-        parent = getParentElement(parent);
-    }
-    return DOCUMENT_ELEMENT;
-}
-/**
- * Calculate computed offset.
- * It includes matrix transformations.
- * @param element The target element.
- * @param targetParentOffset The relative offset parent.
- * @return A client rect object.
- */
-function computeOffset(element, targetParentOffset) {
-    const rect = element.getBoundingClientRect();
-    const width = rect.width;
-    const height = rect.height;
-    let top = 0;
-    let left = 0;
-    let offsetParent = element;
-    while (offsetParent && offsetParent != targetParentOffset) {
-        left += offsetParent.offsetLeft;
-        // document.body sometimes has offsetTop == 0 but still has an
-        // offset because of children margins!
-        if (offsetParent === document.body) {
-            top += offsetParent.getBoundingClientRect().top + window.scrollY;
-        }
-        else {
-            top += offsetParent.offsetTop;
-        }
-        if (window.DOMMatrix) {
-            const style = window.getComputedStyle(offsetParent);
-            const transform = style.transform || style.webkitTransform;
-            const domMatrix = new DOMMatrix(transform);
-            if (domMatrix) {
-                left += domMatrix.m41;
-                if (offsetParent !== document.body) {
-                    top += domMatrix.m42;
-                }
-            }
-        }
-        if (!offsetParent.offsetParent) {
-            break;
-        }
-        offsetParent = offsetParent.offsetParent;
-    }
-    let parentWidth;
-    let parentHeight;
-    if (offsetParent === document.body) {
-        parentWidth = window.innerWidth;
-        parentHeight = window.innerHeight;
-    }
-    else {
-        parentWidth = offsetParent.offsetWidth;
-        parentHeight = offsetParent.offsetHeight;
-    }
-    const right = parentWidth - left - rect.width;
-    const bottom = parentHeight - top - rect.height;
-    return { top, right, bottom, left, width, height };
-}
-const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLElement {
+const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
-        this.positionChange = createEvent(this, "positionChange", 7);
-        this.openChange = createEvent(this, "openChange", 7);
-        this.position = PopoverPosition.AUTO;
+        this.canvasOpenStatusChanged = createEvent(this, "canvasOpenStatusChanged", 7);
+        this.variant = OffCanvasVariant.PUSHCONTENT;
         this.open = false;
-        this.bindTo = undefined;
-        this.showArrow = false;
-        this.center = false;
-        this.closable = true;
-        this.currentPosition = undefined;
-    }
-    closePopoverWithKeyboard(e) {
-        if (this.closable && e.key === KeyboardCode.ESC) {
-            this.open = false;
-        }
+        this.transitiondirection = TransitionDirection.LEFT;
+        this.skipLoadAnimation = false;
+        this.skipAnimation = false;
     }
     /**
-     * Close the popover when clicking outside of its content.
-     * Stop event propagation if the click was fired by popover's trigger element,
-     * to prevent close and reopen glitches.
-     * @param {MouseEvent} e
+     * Stop the event default behavior and propagation when the offcanvas is closed.
      */
-    handleOutsideClick(e) {
-        if (!this.closable || !this.open) {
+    stopEvent(event) {
+        if (this.open) {
             return;
         }
-        if (!e.composedPath().includes(this.host)) {
-            const target = e.target;
-            const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(this.bindTo);
-            if (triggerElemClicked) {
-                e.stopPropagation();
-            }
-            this.open = false;
-            this.positionChange.emit({ position: this.currentPosition });
-        }
-    }
-    validatePosition(newValue) {
-        if (newValue && !Object.values(PopoverPosition).includes(newValue)) {
-            this.position = PopoverPosition.AUTO;
-        }
-        this.currentPosition = this.position;
-        this.positionChange.emit({ position: this.currentPosition });
+        event.preventDefault();
+        event.stopPropagation();
     }
     /**
-     * Setup popover behaviors on opening.
+     * Hide the body overflow when the offcanvas is open.
      */
-    onOpen() {
-        cancelAnimationFrame(this.animationFrameRequestId);
-        if (this.open) {
-            const setPosition = () => {
-                if (this.open) {
-                    this.setPosition();
-                    this.animationFrameRequestId = requestAnimationFrame(setPosition);
-                }
-            };
-            setPosition();
-        }
-        else if (this.host.hasAttribute("current-position")) {
-            this.host.removeAttribute("current-position");
-            this.currentPosition = undefined;
-        }
-        this.openChange.emit({ open: this.open });
+    handlePageOverflow() {
+        const overflow = this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP
+            ? "overflow-y"
+            : "overflow-x";
+        document.body.style[overflow] = this.open ? "hidden" : "";
     }
-    disconnectedCallback() {
-        cancelAnimationFrame(this.animationFrameRequestId);
-    }
-    /**
-     * Set the position of the popover.
-     */
-    setPosition() {
-        let element;
-        if (typeof this.bindTo === "string") {
-            element = this.host.ownerDocument.querySelector(this.bindTo);
-        }
-        else if (this.bindTo) {
-            element = this.bindTo;
+    onOpenChanged() {
+        var _a;
+        this.canvasOpenStatusChanged.emit(this.open);
+        if (!this.open) {
+            // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow
+            const listenerCallback = () => {
+                this.handlePageOverflow();
+                this.canvasContainer.removeEventListener("transitionend", listenerCallback);
+            };
+            (_a = this.canvasContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionend", listenerCallback);
         }
         else {
-            element = this.host.parentElement;
-        }
-        if (!element) {
-            return;
-        }
-        const scrollContainer = findScrollableParent(element);
-        const scrollingBoundingRect = scrollContainer.getBoundingClientRect();
-        const offsetContainer = this.host.offsetParent;
-        const relativeBoundingRect = offsetContainer
-            ? computeOffset(offsetContainer, scrollContainer)
-            : { top: 0, right: 0, bottom: 0, left: 0 };
-        const boundingRect = computeOffset(element, scrollContainer);
-        const top = boundingRect.top - scrollContainer.scrollTop;
-        const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
-        const left = boundingRect.left - scrollContainer.scrollLeft;
-        const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
-        const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
-        const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
-        const availableTop = Math.min(top, top + scrollingBoundingRect.top);
-        const availableBottom = Math.min(bottom, bottom - overflowBottom);
-        const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
-        const availableRight = Math.min(right, right - overflowRight);
-        const availableHeight = availableTop + availableBottom + boundingRect.height;
-        const availableWidth = availableLeft + availableRight + boundingRect.width;
-        let position = this.currentPosition;
-        const positions = [];
-        if (this.position === PopoverPosition.AUTO) {
-            /**
-             * The `AUTO` position tries to place the popover in the 'safest' area,
-             * where there's more space available.
-             */
-            if (availableLeft / availableWidth > 0.6) {
-                positions.push(PopoverPosition.LEFT);
-            }
-            else if (availableLeft / availableWidth < 0.4) {
-                positions.push(PopoverPosition.RIGHT);
-            }
-            if (availableTop / availableHeight > 0.9) {
-                positions.unshift(PopoverPosition.TOP);
-            }
-            else if (availableTop / availableHeight > 0.6) {
-                positions.push(PopoverPosition.TOP);
-            }
-            else if (availableTop / availableHeight < 0.1) {
-                positions.unshift(PopoverPosition.BOTTOM);
-            }
-            else {
-                positions.push(PopoverPosition.BOTTOM);
-            }
-            position = positions.join("_");
-        }
-        const style = this.host.style;
-        style.position = "absolute";
-        const offsetTop = boundingRect.top - relativeBoundingRect.top;
-        const offsetRight = boundingRect.right - relativeBoundingRect.right;
-        const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
-        const offsetLeft = boundingRect.left - relativeBoundingRect.left;
-        const offsetModifier = this.center ? 0.5 : 0;
-        const sizeModifier = this.center ? 0.5 : 0;
-        if (position === PopoverPosition.TOP || position === PopoverPosition.TOP_RIGHT) {
-            style.top = "auto";
-            style.right = "auto";
-            style.bottom = `${offsetBottom + boundingRect.height}px`;
-            style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
-            style.maxHeight = `${availableTop}px`;
-            if (position === PopoverPosition.TOP_RIGHT) {
-                style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
-            }
-        }
-        else if (position === PopoverPosition.TOP_LEFT) {
-            style.top = "auto";
-            style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
-            style.bottom = `${offsetBottom + boundingRect.height}px`;
-            style.left = "auto";
-            style.maxWidth = `${availableLeft}px`;
-            style.maxHeight = `${availableTop}px`;
+            this.handlePageOverflow();
         }
-        else if (position === PopoverPosition.BOTTOM || position === PopoverPosition.BOTTOM_RIGHT) {
-            style.top = `${offsetTop + boundingRect.height}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
-            style.maxHeight = `${availableBottom}px`;
-            if (position === PopoverPosition.BOTTOM_RIGHT) {
-                style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
-            }
-        }
-        else if (position === PopoverPosition.BOTTOM_LEFT) {
-            style.top = `${offsetTop + boundingRect.height}px`;
-            style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            style.maxWidth = `${availableLeft}px`;
-            style.maxHeight = `${availableBottom}px`;
-        }
-        else if (position === PopoverPosition.RIGHT || position === PopoverPosition.RIGHT_BOTTOM) {
-            style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${offsetLeft + boundingRect.width}px`;
-            style.maxWidth = `${availableRight}px`;
-            style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
-        }
-        else if (position === PopoverPosition.RIGHT_TOP) {
-            style.top = "auto";
-            style.right = "auto";
-            style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
-            style.left = `${offsetLeft + boundingRect.width}px`;
-            style.maxWidth = `${availableRight}px`;
-            style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
-        }
-        else if (position === PopoverPosition.LEFT || position === PopoverPosition.LEFT_BOTTOM) {
-            style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
-            style.right = `${offsetRight + boundingRect.width}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            style.maxWidth = `${availableLeft}px`;
-            style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
-        }
-        else if (position === PopoverPosition.LEFT_TOP) {
-            style.top = "auto";
-            style.right = `${offsetRight + boundingRect.width}px`;
-            style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
-            style.left = "auto";
-            style.maxWidth = `${availableLeft}px`;
-            style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
-        }
-        this.currentPosition = position || this.position;
-        this.host.setAttribute("current-position", this.currentPosition);
     }
     componentWillLoad() {
-        this.validatePosition(this.position);
-        this.onOpen();
+        if (this.open) {
+            this.skipAnimation = true;
+        }
+    }
+    componentDidLoad() {
+        this.handlePageOverflow();
+    }
+    componentDidRender() {
+        this.skipAnimation = false;
+    }
+    connectedCallback() {
+        this.handlePageOverflow();
+    }
+    disconnectedCallback() {
+        this.open = false;
     }
     render() {
-        return h("slot", { key: 'd0760be7dcab1b4608f1b3c40cf0578b20d376fd' });
+        return (h(Host, { key: '1e33dcee1ad8e36289e98efb41f899d6e7d3ef65', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '6f97e9ce4dd928d0da4fb908393675369f10f510', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '4346fe24097dd96a7e210b526ec25edc87aee75c', class: "canvas-content", role: "presentation" }, h("slot", { key: 'd19ccabacac91f39a4402f1a6015165fa03f5984', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: 'eaee11e9a44ab1a432dc49e5c0d03d26eb5cc869', class: "canvas-background", onClick: () => (this.open = false) }))));
     }
-    get host() { return this; }
     static get watchers() { return {
-        "position": ["validatePosition"],
-        "open": ["onOpen"]
+        "variant": ["handlePageOverflow"],
+        "open": ["onOpenChanged"]
     }; }
-    static get style() { return ZPopoverStyle0; }
-}, [1, "z-popover", {
-        "position": [513],
+    static get style() { return ZOffcanvasStyle0; }
+}, [6, "z-offcanvas", {
+        "variant": [513],
         "open": [1540],
-        "bindTo": [1, "bind-to"],
-        "showArrow": [516, "show-arrow"],
-        "center": [516],
-        "closable": [4],
-        "currentPosition": [32]
-    }, [[8, "keyup", "closePopoverWithKeyboard"], [18, "click", "handleOutsideClick"]], {
-        "position": ["validatePosition"],
-        "open": ["onOpen"]
+        "transitiondirection": [513],
+        "skipLoadAnimation": [4, "skip-load-animation"],
+        "skipAnimation": [32]
+    }, [[2, "click", "stopEvent"], [2, "focusin", "stopEvent"]], {
+        "variant": ["handlePageOverflow"],
+        "open": ["onOpenChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-popover"];
+    const components = ["z-offcanvas"];
     components.forEach(tagName => { switch (tagName) {
-        case "z-popover":
+        case "z-offcanvas":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZPopover);
+                customElements.define(tagName, ZOffcanvas);
             }
             break;
     } });
 }
 
-export { ZPopover as Z, defineCustomElement as d };
+export { ZOffcanvas as Z, defineCustomElement as d };
 
 //# sourceMappingURL=index22.js.map

package/dist/components/index22.js.map

@@ -1 +1 @@
-{"file":"index22.js","mappings":"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","names":[],"sources":["src/components/z-popover/styles.css?tag=z-popover&encapsulation=shadow","src/components/z-popover/index.tsx"],"sourcesContent":[":host {\n  --z-popover-theme--surface: var(--color-surface01);\n  --z-popover-theme--text: var(--color-default-text);\n  --z-popover-padding: 0;\n  --z-popover-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));\n\n  position: relative;\n  display: none;\n  min-width: calc(var(--space-unit) * 8);\n  min-height: calc(var(--space-unit) * 4);\n  align-items: center;\n  justify-content: center;\n  padding: var(--z-popover-padding);\n  background: var(--z-popover-theme--surface);\n  border-radius: var(--border-radius-small);\n  color: var(--z-popover-theme--text);\n  fill: currentcolor;\n  filter: var(--z-popover-shadow-filter);\n  font-family: var(--font-family-sans);\n  text-align: center;\n}\n\n:host([open][current-position]),\n:host([open=\"true\"][current-position]) {\n  display: flex;\n}\n\n:host([center][current-position=\"top\"]),\n:host([center][current-position=\"bottom\"]) {\n  transform: translateX(-50%);\n}\n\n:host([center][current-position=\"right\"]),\n:host([center][current-position=\"left\"]) {\n  transform: translateY(-50%);\n}\n\n:host([current-position^=\"top\"]) {\n  margin: 0 0 var(--space-unit);\n}\n\n:host([current-position^=\"bottom\"]) {\n  margin: var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"left\"]) {\n  margin: 0 var(--space-unit) 0 0;\n}\n\n:host([current-position^=\"right\"]) {\n  margin: 0 0 0 var(--space-unit);\n}\n\n/* Arrow style */\n\n:host([current-position])::before {\n  --arrow-size: 6px;\n  --arrow-edge-offset: calc(100% - var(--space-unit) - (var(--arrow-size) / 2));\n  --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));\n  --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));\n\n  position: absolute;\n  display: block;\n  width: var(--arrow-size);\n  height: var(--arrow-size);\n  background: var(--z-popover-theme--surface);\n  content: \"\";\n  transform: rotate(45deg);\n}\n\n:host([show-arrow=\"false\"])::before,\n:host(:not([show-arrow]))::before {\n  display: none;\n}\n\n:host([current-position^=\"top\"])::before {\n  top: var(--arrow-center-y-offset);\n}\n\n:host([current-position^=\"bottom\"])::before {\n  bottom: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top\"])::before,\n:host([current-position=\"bottom\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before,\n:host([current-position=\"left\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"top_right\"])::before,\n:host([current-position=\"bottom_right\"])::before {\n  right: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"top_left\"])::before,\n:host([current-position=\"bottom_left\"])::before {\n  left: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"left_top\"])::before {\n  top: var(--arrow-edge-offset);\n}\n\n:host([current-position=\"right_top\"])::before,\n:host([current-position=\"right_bottom\"])::before {\n  right: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"left_top\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  left: var(--arrow-center-y-offset);\n}\n\n:host([current-position=\"right_bottom\"])::before,\n:host([current-position=\"left_bottom\"])::before {\n  bottom: var(--arrow-edge-offset);\n}\n\n:host([center][current-position=\"top\"])::before,\n:host([center][current-position=\"bottom\"])::before {\n  right: auto;\n  left: var(--arrow-center-x-offset);\n}\n\n:host([center][current-position=\"right\"])::before,\n:host([center][current-position=\"left\"])::before {\n  top: var(--arrow-center-x-offset);\n  bottom: auto;\n}\n\n::slotted(*) {\n  overflow: auto;\n  flex: 1 auto;\n}\n","import {Component, Element, Event, EventEmitter, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, PopoverPosition} from \"../../beans\";\n\nconst DOCUMENT_ELEMENT = document.documentElement;\n\nfunction getParentElement(element: Element): Element {\n  if (element.parentNode === element.shadowRoot) {\n    return element.shadowRoot.host;\n  }\n\n  return element.parentElement;\n}\n\n/**\n * Find the closest scrollable parent of a node.\n *\n * @param {Element} element The node\n */\nfunction findScrollableParent(element: Element): Element {\n  let parent = getParentElement(element);\n\n  while (parent && parent !== DOCUMENT_ELEMENT) {\n    const {overflow, overflowX, overflowY} = window.getComputedStyle(parent);\n    if (overflow === \"hidden\" || overflowY === \"hidden\" || overflowX === \"hidden\") {\n      return parent;\n    }\n\n    if (\n      (parent.scrollHeight > parent.clientHeight && overflow !== \"visible\" && overflowY !== \"visible\") ||\n      (parent.scrollWidth > parent.clientWidth && overflow !== \"visible\" && overflowX !== \"visible\")\n    ) {\n      return parent;\n    }\n\n    parent = getParentElement(parent);\n  }\n\n  return DOCUMENT_ELEMENT;\n}\n\n/**\n * Calculate computed offset.\n * It includes matrix transformations.\n * @param element The target element.\n * @param targetParentOffset The relative offset parent.\n * @return A client rect object.\n */\nfunction computeOffset(element: HTMLElement, targetParentOffset?: HTMLElement): Record<string, number> {\n  const rect = element.getBoundingClientRect();\n  const width = rect.width;\n  const height = rect.height;\n\n  let top = 0;\n  let left = 0;\n  let offsetParent = element;\n  while (offsetParent && offsetParent != targetParentOffset) {\n    left += offsetParent.offsetLeft;\n\n    // document.body sometimes has offsetTop == 0 but still has an\n    // offset because of children margins!\n    if (offsetParent === document.body) {\n      top += offsetParent.getBoundingClientRect().top + window.scrollY;\n    } else {\n      top += offsetParent.offsetTop;\n    }\n\n    if (window.DOMMatrix) {\n      const style = window.getComputedStyle(offsetParent);\n      const transform = style.transform || style.webkitTransform;\n      const domMatrix = new DOMMatrix(transform);\n      if (domMatrix) {\n        left += domMatrix.m41;\n        if (offsetParent !== document.body) {\n          top += domMatrix.m42;\n        }\n      }\n    }\n\n    if (!offsetParent.offsetParent) {\n      break;\n    }\n\n    offsetParent = offsetParent.offsetParent as HTMLElement;\n  }\n\n  let parentWidth: number;\n  let parentHeight: number;\n  if (offsetParent === document.body) {\n    parentWidth = window.innerWidth;\n    parentHeight = window.innerHeight;\n  } else {\n    parentWidth = offsetParent.offsetWidth;\n    parentHeight = offsetParent.offsetHeight;\n  }\n\n  const right = parentWidth - left - rect.width;\n  const bottom = parentHeight - top - rect.height;\n\n  return {top, right, bottom, left, width, height};\n}\n\n/**\n * Popover component.\n *\n * @cssprop --z-popover-theme--surface - background color of the popover.\n * @cssprop --z-popover-theme--text - foreground color of the popover.\n * @cssprop --z-popover-padding - padding of the popover.\n * @cssprop --z-popover-shadow-filter - drop-shadow filter of the popover. Defaults to `drop-shadow(0 1px 2px var(--shadow-color-base))`.\n */\n@Component({\n  tag: \"z-popover\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZPopover {\n  /** Popover position. */\n  @Prop({reflect: true})\n  position: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * The open state of the popover.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * The selector or the element bound with the popover.\n   * If string css selector is provided make sure to use a valid selector.\n   */\n  @Prop()\n  bindTo?: string | HTMLElement;\n\n  /**\n   * Whether to show popover's arrow.\n   */\n  @Prop({reflect: true})\n  showArrow = false;\n\n  /**\n   * Whether to center the popup on the main side (according to \"position\").\n   */\n  @Prop({reflect: true})\n  center = false;\n\n  /**\n   * If true, the popover can be closed by clicking outside of it or pressing the escape key.\n   * Otherwise, it will be closed only programmatically (by setting `open` to `false`).\n   */\n  @Prop()\n  closable = true;\n\n  /**\n   * The current position of the popover.\n   */\n  @State()\n  currentPosition?: PopoverPosition;\n\n  /**\n   * Position change event.\n   */\n  @Event()\n  positionChange: EventEmitter;\n\n  /**\n   * Open change event.\n   */\n  @Event()\n  openChange: EventEmitter;\n\n  @Element() host: HTMLZPopoverElement;\n\n  private animationFrameRequestId?: number;\n\n  @Listen(\"keyup\", {target: \"window\"})\n  closePopoverWithKeyboard(e: KeyboardEvent): void {\n    if (this.closable && e.key === KeyboardCode.ESC) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Close the popover when clicking outside of its content.\n   * Stop event propagation if the click was fired by popover's trigger element,\n   * to prevent close and reopen glitches.\n   * @param {MouseEvent} e\n   */\n  @Listen(\"click\", {target: \"body\", capture: true})\n  handleOutsideClick(e: MouseEvent): void {\n    if (!this.closable || !this.open) {\n      return;\n    }\n\n    if (!e.composedPath().includes(this.host)) {\n      const target = e.target as HTMLElement;\n      const triggerElemClicked =\n        this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(this.bindTo);\n      if (triggerElemClicked) {\n        e.stopPropagation();\n      }\n\n      this.open = false;\n      this.positionChange.emit({position: this.currentPosition});\n    }\n  }\n\n  @Watch(\"position\")\n  validatePosition(newValue: PopoverPosition): void {\n    if (newValue && !Object.values(PopoverPosition).includes(newValue as PopoverPosition)) {\n      this.position = PopoverPosition.AUTO;\n    }\n\n    this.currentPosition = this.position;\n    this.positionChange.emit({position: this.currentPosition});\n  }\n\n  /**\n   * Setup popover behaviors on opening.\n   */\n  @Watch(\"open\")\n  onOpen(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n    if (this.open) {\n      const setPosition = (): void => {\n        if (this.open) {\n          this.setPosition();\n          this.animationFrameRequestId = requestAnimationFrame(setPosition);\n        }\n      };\n\n      setPosition();\n    } else if (this.host.hasAttribute(\"current-position\")) {\n      this.host.removeAttribute(\"current-position\");\n      this.currentPosition = undefined;\n    }\n\n    this.openChange.emit({open: this.open});\n  }\n\n  disconnectedCallback(): void {\n    cancelAnimationFrame(this.animationFrameRequestId);\n  }\n\n  /**\n   * Set the position of the popover.\n   */\n  private setPosition(): void {\n    let element: HTMLElement;\n    if (typeof this.bindTo === \"string\") {\n      element = this.host.ownerDocument.querySelector(this.bindTo) as HTMLElement;\n    } else if (this.bindTo) {\n      element = this.bindTo;\n    } else {\n      element = this.host.parentElement as HTMLElement;\n    }\n\n    if (!element) {\n      return;\n    }\n\n    const scrollContainer = findScrollableParent(element) as HTMLElement;\n    const scrollingBoundingRect = scrollContainer.getBoundingClientRect();\n    const offsetContainer = this.host.offsetParent as HTMLElement;\n\n    const relativeBoundingRect = offsetContainer\n      ? computeOffset(offsetContainer, scrollContainer)\n      : {top: 0, right: 0, bottom: 0, left: 0};\n    const boundingRect = computeOffset(element, scrollContainer);\n\n    const top = boundingRect.top - scrollContainer.scrollTop;\n    const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;\n    const left = boundingRect.left - scrollContainer.scrollLeft;\n    const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;\n\n    const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);\n    const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);\n\n    const availableTop = Math.min(top, top + scrollingBoundingRect.top);\n    const availableBottom = Math.min(bottom, bottom - overflowBottom);\n    const availableLeft = Math.min(left, left + scrollingBoundingRect.left);\n    const availableRight = Math.min(right, right - overflowRight);\n\n    const availableHeight = availableTop + availableBottom + boundingRect.height;\n    const availableWidth = availableLeft + availableRight + boundingRect.width;\n\n    let position = this.currentPosition;\n    const positions: PopoverPosition[] = [];\n    if (this.position === PopoverPosition.AUTO) {\n      /**\n       * The `AUTO` position tries to place the popover in the 'safest' area,\n       * where there's more space available.\n       */\n      if (availableLeft / availableWidth > 0.6) {\n        positions.push(PopoverPosition.LEFT);\n      } else if (availableLeft / availableWidth < 0.4) {\n        positions.push(PopoverPosition.RIGHT);\n      }\n\n      if (availableTop / availableHeight > 0.9) {\n        positions.unshift(PopoverPosition.TOP);\n      } else if (availableTop / availableHeight > 0.6) {\n        positions.push(PopoverPosition.TOP);\n      } else if (availableTop / availableHeight < 0.1) {\n        positions.unshift(PopoverPosition.BOTTOM);\n      } else {\n        positions.push(PopoverPosition.BOTTOM);\n      }\n\n      position = positions.join(\"_\") as PopoverPosition;\n    }\n\n    const style = this.host.style;\n    style.position = \"absolute\";\n\n    const offsetTop = boundingRect.top - relativeBoundingRect.top;\n    const offsetRight = boundingRect.right - relativeBoundingRect.right;\n    const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;\n    const offsetLeft = boundingRect.left - relativeBoundingRect.left;\n    const offsetModifier = this.center ? 0.5 : 0;\n    const sizeModifier = this.center ? 0.5 : 0;\n\n    if (position === PopoverPosition.TOP || position === PopoverPosition.TOP_RIGHT) {\n      style.top = \"auto\";\n      style.right = \"auto\";\n      style.bottom = `${offsetBottom + boundingRect.height}px`;\n\n      style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;\n      style.maxHeight = `${availableTop}px`;\n      if (position === PopoverPosition.TOP_RIGHT) {\n        style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;\n      }\n    } else if (position === PopoverPosition.TOP_LEFT) {\n      style.top = \"auto\";\n      style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;\n      style.bottom = `${offsetBottom + boundingRect.height}px`;\n      style.left = \"auto\";\n      style.maxWidth = `${availableLeft}px`;\n      style.maxHeight = `${availableTop}px`;\n    } else if (position === PopoverPosition.BOTTOM || position === PopoverPosition.BOTTOM_RIGHT) {\n      style.top = `${offsetTop + boundingRect.height}px`;\n      style.right = \"auto\";\n      style.bottom = \"auto\";\n      style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;\n      style.maxHeight = `${availableBottom}px`;\n      if (position === PopoverPosition.BOTTOM_RIGHT) {\n        style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;\n      }\n    } else if (position === PopoverPosition.BOTTOM_LEFT) {\n      style.top = `${offsetTop + boundingRect.height}px`;\n      style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;\n      style.bottom = \"auto\";\n      style.left = \"auto\";\n      style.maxWidth = `${availableLeft}px`;\n      style.maxHeight = `${availableBottom}px`;\n    } else if (position === PopoverPosition.RIGHT || position === PopoverPosition.RIGHT_BOTTOM) {\n      style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;\n      style.right = \"auto\";\n      style.bottom = \"auto\";\n      style.left = `${offsetLeft + boundingRect.width}px`;\n      style.maxWidth = `${availableRight}px`;\n      style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;\n    } else if (position === PopoverPosition.RIGHT_TOP) {\n      style.top = \"auto\";\n      style.right = \"auto\";\n      style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;\n      style.left = `${offsetLeft + boundingRect.width}px`;\n      style.maxWidth = `${availableRight}px`;\n      style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;\n    } else if (position === PopoverPosition.LEFT || position === PopoverPosition.LEFT_BOTTOM) {\n      style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;\n      style.right = `${offsetRight + boundingRect.width}px`;\n      style.bottom = \"auto\";\n      style.left = \"auto\";\n      style.maxWidth = `${availableLeft}px`;\n      style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;\n    } else if (position === PopoverPosition.LEFT_TOP) {\n      style.top = \"auto\";\n      style.right = `${offsetRight + boundingRect.width}px`;\n      style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;\n      style.left = \"auto\";\n      style.maxWidth = `${availableLeft}px`;\n      style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;\n    }\n\n    this.currentPosition = position || this.position;\n    this.host.setAttribute(\"current-position\", this.currentPosition);\n  }\n\n  componentWillLoad(): void {\n    this.validatePosition(this.position);\n    this.onOpen();\n  }\n\n  render(): HTMLSlotElement {\n    return <slot></slot>;\n  }\n}\n"],"version":3}
+{"file":"index22.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,uwGAAuwG,CAAC;AAC1xG,yBAAe,SAAS;;MCcX,UAAU;;;;;uBASQ,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAOgC,mBAAmB,CAAC,IAAI;iCAQhD,KAAK;6BAQD,KAAK;;;;;IAS7B,SAAS,CAAC,KAAY;QACpB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;;;;IAMO,kBAAkB;QACxB,MAAM,QAAQ,GACZ,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE;cAC5F,YAAY;cACZ,YAAY,CAAC;QAEnB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,EAAE,CAAC;KAC3D;IAGD,aAAa;;QACX,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;YAEd,MAAM,gBAAgB,GAAG;gBACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;aAC7E,CAAC;YAEF,MAAA,IAAI,CAAC,eAAe,0CAAE,gBAAgB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;SAC3E;aAAM;YACL,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,kBAAkB;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uEACa,IAAI,CAAC,aAAa,iBACrB,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,IAAI,IAEvC,4DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,IAExC,4DACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,cAAc,IAEnB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,EACL,CAAC,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE,MAC/F,4DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-offcanvas/styles.css?tag=z-offcanvas&encapsulation=scoped","src/components/z-offcanvas/index.tsx"],"sourcesContent":[":host {\n  --z-offcanvas--container-width: ;\n  --z-offcanvas--container-height: ;\n  --z-offcanvas--top-space: ;\n\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n  overflow: hidden;\n}\n\n.canvas-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 100%;\n  height: 100%;\n  background: var(--color-surface01);\n  transition: transform 0.4s ease-out;\n}\n\n:host > * {\n  position: fixed;\n  top: var(--z-offcanvas--top-space, 0);\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n:host([open]) > * {\n  height: calc(100% - var(--z-offcanvas--top-space, 0px));\n}\n\n:host([transitiondirection=\"right\"]) > .canvas-container {\n  transform: translateX(-100%);\n}\n\n:host([transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(100%);\n}\n\n:host([open][transitiondirection=\"right\"]) > .canvas-container,\n:host([open][transitiondirection=\"left\"]) > .canvas-container {\n  transform: translateX(0);\n}\n\n:host([transitiondirection=\"up\"]) > .canvas-container {\n  top: auto;\n  bottom: 0;\n  height: var(--z-offcanvas--container-height, 90%);\n  transform: translateY(100%);\n}\n\n:host([transitiondirection=\"up\"], [variant=\"overlay\"]) > .canvas-container {\n  z-index: 1001;\n}\n\n:host([open][transitiondirection=\"up\"]) > .canvas-container {\n  transform: translateY(0);\n}\n\n:host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) > .canvas-container {\n  position: relative;\n  height: 100%;\n}\n\n:host([variant=\"pushcontent\"]:not([open])) {\n  display: none;\n}\n\n:host([skip-animation]) > .canvas-container {\n  transition: none;\n}\n\n.canvas-background {\n  z-index: 1000;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gray900);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.4s ease-out;\n}\n\n:host([open]) > .canvas-background {\n  opacity: 0.7;\n  pointer-events: unset;\n}\n\n.canvas-container > .canvas-content {\n  overflow: hidden auto;\n  flex: 1 auto;\n  padding: 0 calc(var(--space-unit) * 2);\n  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;\n}\n\n/* Webkit Scrollbar */\n.canvas-container .canvas-content::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n/* Firefox scrollbar */\n@supports not selector(.canvas-content::-webkit-scrollbar-track) {\n  .canvas-container .canvas-content {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n}\n\n/* Tablet / Desktop */\n@media (min-width: 768px) {\n  :host([variant=\"pushcontent\"]:not([transitiondirection=\"up\"])) {\n    flex: none; /* Prevent unwanted width changes in flex containers */\n  }\n\n  .canvas-container {\n    width: max(var(--z-offcanvas--container-width, 375px), 375px);\n    min-width: 375px;\n  }\n\n  :host([transitiondirection=\"up\"]) > .canvas-container {\n    width: 100%;\n  }\n\n  :host([transitiondirection=\"right\"]) > .canvas-container {\n    right: auto;\n    left: 0;\n  }\n\n  :host([transitiondirection=\"left\"]) > .canvas-container {\n    right: 0;\n    left: auto;\n  }\n}\n","import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\n/**\n * @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n */\n@Component({\n  tag: \"z-offcanvas\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZOffcanvas {\n  /**\n   * Offcanvas variant.\n   * - `overlay`: The offcanvas covers the page content putting an overlay.\n   * - `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n   * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\n   * Also, the `pushcontent` variant doesn't have the open/close transition.\n   */\n  @Prop({reflect: true})\n  variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n  /** Whether the offcanvas is open. Default: false */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Open the content transitioning to a specified direction.\n   * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n   */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Skip the opening transition when the offcanvas is already open at the first render.\n   * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n   *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n   */\n  @Prop()\n  skipLoadAnimation = false;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  /** Used to skip the opening transition when the offcanvas is already open at the first render. */\n  @State()\n  private skipAnimation = false;\n\n  private canvasContainer: HTMLElement;\n\n  /**\n   * Stop the event default behavior and propagation when the offcanvas is closed.\n   */\n  @Listen(\"click\", {capture: true})\n  @Listen(\"focusin\", {capture: true})\n  stopEvent(event: Event): void {\n    if (this.open) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  /**\n   * Hide the body overflow when the offcanvas is open.\n   */\n  @Watch(\"variant\")\n  private handlePageOverflow(): void {\n    const overflow =\n      this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP\n        ? \"overflow-y\"\n        : \"overflow-x\";\n\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    this.canvasOpenStatusChanged.emit(this.open);\n\n    if (!this.open) {\n      // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow\n      const listenerCallback = (): void => {\n        this.handlePageOverflow();\n        this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n      };\n\n      this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n    } else {\n      this.handlePageOverflow();\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.open) {\n      this.skipAnimation = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.handlePageOverflow();\n  }\n\n  componentDidRender(): void {\n    this.skipAnimation = false;\n  }\n\n  connectedCallback(): void {\n    this.handlePageOverflow();\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host\n        skip-animation={this.skipAnimation}\n        aria-hidden={!this.open ? \"true\" : null}\n      >\n        <div\n          class=\"canvas-container\"\n          role=\"presentation\"\n          ref={(el) => (this.canvasContainer = el)}\n        >\n          <div\n            class=\"canvas-content\"\n            role=\"presentation\"\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {(this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (\n          <div\n            class=\"canvas-background\"\n            onClick={() => (this.open = false)}\n          ></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}