@zanichelli/albe-web-components 16.3.4 → 16.4.0-rc

package/dist/collection/components/z-input/index.js

@@ -261,7 +261,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '2d4c53596f0adbb763e2b8fbc0088d564173f0dd' }, input);
+        return h(Host, { key: 'f59312821e115fe3cc9d55b867ddc9976f484639' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-input-message/index.js

@@ -17,7 +17,7 @@ export class ZInputMessage {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: '618b83c814f36e4ee9b06f6e7873c8278ddb39e7' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: '9c1b3b21d7fc6f0097cc5dc6011c518007f58513', name: this.statusIcons[this.status] }), h("span", { key: 'f37f42e47227afd0a86fcf0040ea094b48567bd4', innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: '64743b53453d4373ab87b8145d789362502adba2' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'ee91747477c931223e978f7020d2d3c8fcd113e6', name: this.statusIcons[this.status] }), h("span", { key: 'a34b74de07034c9aa00bb6c701c2d05ea2de0a82', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-logo/index.js

@@ -16,7 +16,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '62a2be82e036760d34d812904b967ac96a22604a', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: 'b7aef0e1a12aefa4609fc698ac287245d93144f0', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get is() { return "z-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-menu-section/index.js

@@ -171,7 +171,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: '2a557643b14c104ca83f80e0e2ce2ca53cc97ee4', open: this.open }, h("button", { key: '943067f50d012676c5ffce726fc89bc28eb8171f', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'b658d2aab2cd67b4da4b487269c1709e5186645e', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '73d7f5430088f5c0ef8ea40b4cb5a447ab5a0ca2', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'ac12b97041a2d53e37d695c426b0a8a89b58d338', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: '953ebaacbf06741d1f7d5ec3865a570741639cf9', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: '8055d8257a832f25940c0a754bd58497fa4bd0a0', open: this.open }, h("button", { key: '311bb43cd08cb379973701c416744ee27e3747f8', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'd6a00928ca6a80ccdec98164979ccb2681c130c5', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '976be6f35df99772aa82d82a60c86f3c09ca585a', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'd963f28d3d70563f01b9995194c941de9197cc1f', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'b42437ebb6c0c0373e4773f1930e527ed3a4697e', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-modal/index.js

@@ -111,16 +111,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '879616ceb0fe8efdc260faf34308b8abde70a9dc', class: {
+        return (h("dialog", { key: '503ac50f3dc7be8877138ac79cf6ced2e980d5ba', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'cbb8ef7c9ddabbdfddf1abd92a95ffb78109f3ba', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '465d23e5c49aa84569d9da23f8147ea4623c2ebe', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: 'fa1811f7d3ac5a58163acc6e9292fa0cbf899b6f', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: 'ded46a7e313929991a9740c7f1baf3885b85ce15' }, this.modaltitle && h("h1", { key: 'd127c62752ed24c849fb1de7e3e44e3ef72ea564', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '7055e46bc31534ef074246aaf95158b1cd9b4078', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'fec1db797c7cd9ed298c62da41327f07547375d4', class: {
+            }, id: this.modalid }, h("header", { key: '3fc4ed74ba4a9d12603721ab6ae30f0ae2cc4873', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '03a4a96b10ddbd58a1c2232ce951910fff75d9a9' }, this.modaltitle && h("h1", { key: 'cd3477f565c3f9ff1da20ec2d3984275156fc429', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '28aa28df2002147057dce0bb1ea62541cfcc4d2b', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '02d3b8ac1fa32e84ff837f6937065c81ec03f047', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: 'fead24447d41a1eaf4972d9c65bdc42b1937988f', name: "modalContent" }))), h("div", { key: '322c011045b5ed86aabc924217e142a7233f1eeb', class: {
+            }, id: "modal-content" }, h("slot", { key: '01f16e6a6c9b1caa16271ddd28a01ac0c3ae5e5f', name: "modalContent" }))), h("div", { key: '7cb7575c0f661982ed7853ca3df904331fea6c57', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

package/dist/collection/components/z-navigation-tabs/index.js

@@ -208,10 +208,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '4e6fbe9913eb38c84e15891745a11109699aa7dc', class: {
+        return (h(Host, { key: '0b12b029411faa03fde8c7cab690c655a9222d96', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'ba954836cb197661071f0e7526a2cc701e489429', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '444d49146a90774df2e3f0e5519c2ed4c40832b4', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '9f867f8843bfde88bc0c5d14292dc83bdd293dbf', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'a3b3b3875c51a307fe146f3837b8bc0714dc6253' })), h("button", { key: '38292a6d8deee32d341656fcb3b38cf2f37a5247', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '751a949ed44983f583a6e8c4a386a94e89133798', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: '5022271cf8f6d8a48de6186af7cb54d75bb92427', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '8262403c712f134208a3bdbec48e71d3d446758c', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'f6ac7d4ac917af513600e6eed2c545000d6508ec', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '3de431022c169350f1a2dd342d8e6170d2b64210' })), h("button", { key: '2a5b18aa8280e94d610ffc2a1b30e527d65df8a6', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '3733f645a9c05166413740c7f5854d121c5f7cdd', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-notification/index.js

@@ -25,7 +25,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9049f1eb5307b4371dfaf51b897b759446b77dcb' }, this.contenticonname && (h("z-icon", { key: '856de47150e83f5bb71b23fdcb0663e0552241b9', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '303136903e30c9186f2ada431ebf3edab07e29d3', class: "content-container" }, h("div", { key: 'a1a6baf6fb38c4f1c747a263d6fed54e5bfd4105', class: "content-text" }, h("slot", { key: '1d57dcb7b9d78291e35dcbb493ef40d98b2cf53b' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '40a864ef7bc4692fd55bee3c7a1e9408c3e6de6c', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'e4c7f9d2314d79efb318432005be578d0eec5748', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'b3cfd176d32e36e5c4dd2bd2788950cc80295d83', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '275c4d98f56fb388d1bb3373664f5ba52b22a613' }, this.contenticonname && (h("z-icon", { key: '6f947ada02ec82736df5c099285e8ad84bbd07ed', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '71fcf67cb01c84e0bef856dab960e4a04b472d7a', class: "content-container" }, h("div", { key: 'c590fccba3708952d3c71c8f274f7b5305f85583', class: "content-text" }, h("slot", { key: '104ae4ef5a77cb371f0b4d928a4804b71c33e23a' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: 'e43f9e7499e027131e76839cc21c9cc5ec332355', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'afc2acfa687d499bff6720423fa86afd335560ef', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'f03fafa58bdc583c34552e9f5d4114608ad82de1', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-offcanvas/index.js

@@ -1,7 +1,10 @@
 import { h, Host } from "@stencil/core";
 import { OffCanvasVariant, TransitionDirection } from "../../beans";
 /**
- * @slot canvasContent - Slot for the main content.
+ * @slot canvasContent - Slot for the offcanvas content.
+ * @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`.
+ * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.
+ * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.
  */
 export class ZOffcanvas {
     constructor() {
@@ -9,23 +12,44 @@ export class ZOffcanvas {
         this.open = false;
         this.transitiondirection = TransitionDirection.LEFT;
         this.skipLoadAnimation = false;
+        this.skipAnimation = this.open;
+    }
+    /**
+     * Hide the body overflow when the offcanvas is open.
+     */
+    handlePageOverflow() {
+        const overflow = this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP
+            ? "overflow-y"
+            : "overflow-x";
+        document.body.style[overflow] = this.open ? "hidden" : "";
     }
     onOpenChanged() {
-        if (!this.open && this.skipLoadAnimation) {
-            this.skipLoadAnimation = false;
+        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 {
+            this.handlePageOverflow();
+        }
+    }
+    componentDidLoad() {
         this.handlePageOverflow();
-        this.canvasOpenStatusChanged.emit(this.open);
     }
-    handlePageOverflow() {
-        const overflow = this.variant === OffCanvasVariant.OVERLAY ? "overflow-y" : "overflow-x";
-        document.body.style[overflow] = this.open ? "hidden" : "";
+    connectedCallback() {
+        this.handlePageOverflow();
     }
     disconnectedCallback() {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: 'fcab905788db2b161b57069dcaea66f31b191a8c', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: '235b3fde2fd77aadd45b580ddb6eb59d16f534a8', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '3bf75a309014335ef17029ff0612a1bf3007f88a', role: "presentation", class: "canvas-content" }, h("slot", { key: '332d04d2254dc91e4ef757c2e4c4d4af5a7080fd', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { key: 'd2bed4922a7a1512b046b037137c7dcba9daf7b6', class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '45ac2ddb26f46cc0d5dfd4890f5e1205810a4500', "skip-animation": this.skipAnimation, inert: !this.open }, h("div", { key: 'd8e0ef738c69136ac191f7bcaa7de4fbbef24a4a', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: 'c26ec571b2b2817424d867982db9f0d718aa227d', class: "canvas-content", role: "presentation" }, h("slot", { key: 'bbba40d69f03546234f7d822a2e583e90f4aad8b', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.open && (h("div", { key: '2d6ad79a5b901f27a2647b83bc9acd19fd95bfcb', class: "canvas-background", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }
@@ -59,7 +83,7 @@ export class ZOffcanvas {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Offcanvas variant.\nCan be one `overlay` or `pushcontent`.\nDefault variant: pushcontent"
+                    "text": "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."
                 },
                 "attribute": "variant",
                 "reflect": true,
@@ -88,7 +112,7 @@ export class ZOffcanvas {
                 "mutable": false,
                 "complexType": {
                     "original": "TransitionDirection",
-                    "resolved": "TransitionDirection.LEFT | TransitionDirection.RIGHT",
+                    "resolved": "TransitionDirection.LEFT | TransitionDirection.RIGHT | TransitionDirection.UP",
                     "references": {
                         "TransitionDirection": {
                             "location": "import",
@@ -101,7 +125,7 @@ export class ZOffcanvas {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "open content transitioning in a specified direction left | right. Default: left"
+                    "text": "Open the content transitioning to a specified direction.\nThe `up` direction always show the `overlay`, also when the variant is `pushcontent`."
                 },
                 "attribute": "transitiondirection",
                 "reflect": true,
@@ -109,7 +133,7 @@ export class ZOffcanvas {
             },
             "skipLoadAnimation": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -118,8 +142,11 @@ export class ZOffcanvas {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Whether to skip the initial animation.\nUseful when the initial value of the `open` prop is set to `true`."
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This prop is not needed anymore, the component will automatically skip the transition\nwhen it starts with `open` set to `true`. Only exists for Typescript backward compatibility."
+                        }],
+                    "text": "Skip the opening transition when the offcanvas is already open at the first render."
                 },
                 "attribute": "skip-load-animation",
                 "reflect": false,
@@ -127,6 +154,11 @@ export class ZOffcanvas {
             }
         };
     }
+    static get states() {
+        return {
+            "skipAnimation": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "canvasOpenStatusChanged",
@@ -147,6 +179,9 @@ export class ZOffcanvas {
     }
     static get watchers() {
         return [{
+                "propName": "variant",
+                "methodName": "handlePageOverflow"
+            }, {
                 "propName": "open",
                 "methodName": "onOpenChanged"
             }];

package/dist/collection/components/z-offcanvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-offcanvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACnF,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAClE;;GAEG;AAOH,MAAM,OAAO,UAAU;;uBAOQ,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAIgC,mBAAmB,CAAC,IAAI;iCAOhD,KAAK;;IAOzB,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IAEO,kBAAkB;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC;QACzF,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAC;YACrD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,kBAAkB,EACxB,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;gBAEhD,4DACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,gBAAgB;oBAEtB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF;YACL,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAC3C,4DACE,KAAK,EAAC,mBAAmB,iBACb,kBAAkB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Prop, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n/**\n * @slot canvasContent - Slot for the main content.\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   * Can be one `overlay` or `pushcontent`.\n   * Default variant: pushcontent\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  /** open content transitioning in a specified direction left | right. Default: left */\n  @Prop({reflect: true})\n  transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n  /**\n   * Whether to skip the initial animation.\n   * Useful when the initial value of the `open` prop is set to `true`.\n   */\n  @Prop({mutable: true})\n  skipLoadAnimation = false;\n\n  /** emitted when `open` prop changes */\n  @Event()\n  canvasOpenStatusChanged: EventEmitter;\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open && this.skipLoadAnimation) {\n      this.skipLoadAnimation = false;\n    }\n\n    this.handlePageOverflow();\n    this.canvasOpenStatusChanged.emit(this.open);\n  }\n\n  private handlePageOverflow(): void {\n    const overflow = this.variant === OffCanvasVariant.OVERLAY ? \"overflow-y\" : \"overflow-x\";\n    document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n  }\n\n  disconnectedCallback(): void {\n    this.open = false;\n  }\n\n  render(): HTMLZOffcanvasElement {\n    return (\n      <Host class={{\"skip-animation\": this.skipLoadAnimation}}>\n        <div\n          role=\"presentation\"\n          class=\"canvas-container\"\n          onTransitionEnd={() => this.handlePageOverflow()}\n        >\n          <div\n            role=\"presentation\"\n            class=\"canvas-content\"\n          >\n            <slot name=\"canvasContent\"></slot>\n          </div>\n        </div>\n        {this.variant == OffCanvasVariant.OVERLAY && (\n          <div\n            class=\"canvas-background\"\n            data-action=\"canvasBackground\"\n            onClick={() => (this.open = false)}\n          ></div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-offcanvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAElE;;;;;GAKG;AAOH,MAAM,OAAO,UAAU;;uBAQQ,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAOgC,mBAAmB,CAAC,IAAI;iCAQhD,KAAK;6BAQD,IAAI,CAAC,IAAI;;IAIjC;;OAEG;IAEK,kBAAkB;QACxB,MAAM,QAAQ,GACZ,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE;YAC9F,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,YAAY,CAAC;QAEnB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,CAAC;IAGD,aAAa;;QACX,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,2GAA2G;YAC3G,MAAM,gBAAgB,GAAG,GAAS,EAAE;gBAClC,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;YAC9E,CAAC,CAAC;YAEF,MAAA,IAAI,CAAC,eAAe,0CAAE,gBAAgB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;QAC5E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uEACa,IAAI,CAAC,aAAa,EAClC,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI;YAEjB,4DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;gBAExC,4DACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,cAAc;oBAEnB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF;YACL,CAAC,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE,CAAC;gBAChG,IAAI,CAAC,IAAI,IAAI,CACX,4DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,CACE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, h, Host, 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   */\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 = this.open;\n\n  private canvasContainer: HTMLElement;\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  componentDidLoad(): void {\n    this.handlePageOverflow();\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        inert={!this.open}\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          this.open && (\n            <div\n              class=\"canvas-background\"\n              onClick={() => (this.open = false)}\n            ></div>\n          )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-offcanvas/index.stories.js

@@ -7,6 +7,26 @@ const StoryMeta = {
     component: "z-offcanvas",
     parameters: {
         layout: "fullscreen",
+        openOffcanvas: () => {
+            const offcanvas = document.querySelector("z-offcanvas");
+            if (!offcanvas) {
+                return;
+            }
+            offcanvas.open = true;
+        },
+        closeOffcanvas: () => {
+            const offcanvas = document.querySelector("z-offcanvas");
+            if (!offcanvas) {
+                return;
+            }
+            offcanvas.open = false;
+        },
+        docs: {
+            story: {
+                inline: false,
+                iframeHeight: "600px",
+            },
+        },
     },
     argTypes: {
         variant: {
@@ -23,174 +43,124 @@ const StoryMeta = {
         },
     },
     args: {
-        variant: OffCanvasVariant.PUSHCONTENT,
-        open: true,
+        "open": true,
+        "--z-offcanvas--top-space": "0px",
+        "--z-offcanvas--container-width": "375px",
     },
 };
 export default StoryMeta;
-export const EnterRight = {
-    args: {
-        transitiondirection: TransitionDirection.RIGHT,
-    },
-    render: (args) => html `<div id="offcanvas-story-container">
+const DEMO_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.";
+export const OverlayTransitionDirectionRight = {
+    render: (args, context) => html `<div id="offcanvas-story-container">
       <z-offcanvas
-        .variant=${args.variant}
+        .variant=${OffCanvasVariant.OVERLAY}
         .open=${args.open}
-        .transitiondirection=${args.transitiondirection}
-        =""
+        .transitiondirection=${TransitionDirection.RIGHT}
+        style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
       >
         <div slot="canvasContent">
-          <span>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac
-            augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus.
-            Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis
-            magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget
-            velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum
-            magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis
-            rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros.
-            Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non
-            ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.
-            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora
-            torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis
-            tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu
-            sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac
-            habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit
-            dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex.
-            Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut
-            iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.
-            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam
-            convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et
-            malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam
-            venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu
-            turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna
-            tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet
-            aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus,
-            purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor,
-            ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae
-            sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.
-          </span>
+          <button
+            class="offcanvas-close"
+            .onclick=${context.parameters.closeOffcanvas}
+          >
+            <z-icon name="close" />
+          </button>
+          <p>${DEMO_TEXT}</p>
         </div>
       </z-offcanvas>
-      <div id="offcanvas-boxes-container">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+      <div class="offcanvas-story-content">
+        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
       </div>
     </div>`,
 };
-export const EnterLeft = {
+export const OverlayTransitionDirectionLeft = {
+    render: (args, context) => html `<div id="offcanvas-story-container">
+      <div class="offcanvas-story-content">
+        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
+      </div>
+      <z-offcanvas
+        .variant=${OffCanvasVariant.OVERLAY}
+        .open=${args.open}
+        .transitiondirection=${TransitionDirection.LEFT}
+        style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
+      >
+        <div slot="canvasContent">
+          <button
+            class="offcanvas-close"
+            .onclick=${context.parameters.closeOffcanvas}
+          >
+            <z-icon name="close" />
+          </button>
+          <p>${DEMO_TEXT}</p>
+        </div>
+      </z-offcanvas>
+      ${args.transitiondirection === "right" ? html `<div class="offcanvas-story-content"></div>` : ""}
+    </div>`,
+};
+export const TransitionDirectionUp = {
+    parameters: {
+        controls: {
+            exclude: ["variant", "transitiondirection", "--z-offcanvas--top-space", "--z-offcanvas--container-width"],
+        },
+    },
     args: {
-        transitiondirection: TransitionDirection.LEFT,
+        "--z-offcanvas--container-height": "90%",
     },
-    render: (args) => html `<div
-      id="offcanvas-story-container"
-      class="offcanvas-left"
-    >
-      <div id="offcanvas-boxes-container">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+    render: (args, context) => html `<div id="offcanvas-story-container">
+      <div class="offcanvas-story-content">
+        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
       </div>
       <z-offcanvas
-        .variant=${args.variant}
         .open=${args.open}
-        .skipLoadAnimation=${args.skipLoadAnimation}
-        .transitiondirection=${args.transitiondirection}
-        =""
+        .variant=${OffCanvasVariant.OVERLAY}
+        .transitiondirection=${TransitionDirection.UP}
+        style="--z-offcanvas--container-height: ${args["--z-offcanvas--container-height"]}"
       >
         <div slot="canvasContent">
-          <span>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac
-            augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus.
-            Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis
-            magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget
-            velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum
-            magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis
-            rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros.
-            Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non
-            ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.
-            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora
-            torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis
-            tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu
-            sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac
-            habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit
-            dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex.
-            Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut
-            iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.
-            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam
-            convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et
-            malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam
-            venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu
-            turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna
-            tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet
-            aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus,
-            purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor,
-            ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae
-            sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.
-          </span>
+          <button
+            class="offcanvas-close"
+            .onclick=${context.parameters.closeOffcanvas}
+          >
+            <z-icon name="close" />
+          </button>
+          <p>${DEMO_TEXT}</p>
         </div>
       </z-offcanvas>
     </div>`,
 };
-export const SkipLoadAnimation = {
+export const PushContent = {
+    parameters: {
+        controls: {
+            exclude: ["variant", "--z-offcanvas--top-space"],
+        },
+    },
     args: {
-        transitiondirection: TransitionDirection.LEFT,
-        skipLoadAnimation: true,
+        transitiondirection: TransitionDirection.RIGHT,
     },
-    render: (args) => html `<div
+    render: (args, context) => html `<div
+      class="pushcontent-story ${args.transitiondirection}"
       id="offcanvas-story-container"
-      class="offcanvas-left"
     >
-      <div id="offcanvas-boxes-container">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
       <z-offcanvas
-        .variant=${args.variant}
         .open=${args.open}
-        .skipLoadAnimation=${args.skipLoadAnimation}
+        .variant=${OffCanvasVariant.PUSHCONTENT}
         .transitiondirection=${args.transitiondirection}
-        =""
+        style="--z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
       >
         <div slot="canvasContent">
-          <span>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac
-            augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus.
-            Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis
-            magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget
-            velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum
-            magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis
-            rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros.
-            Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non
-            ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.
-            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora
-            torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis
-            tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu
-            sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac
-            habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit
-            dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex.
-            Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut
-            iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.
-            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam
-            convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et
-            malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam
-            venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu
-            turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna
-            tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet
-            aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus,
-            purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor,
-            ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae
-            sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.
-          </span>
+          <button
+            class="offcanvas-close"
+            .onclick=${context.parameters.closeOffcanvas}
+          >
+            <z-icon name="close" />
+          </button>
+          <p>Offcanvas content</p>
         </div>
       </z-offcanvas>
+
+      <div class="offcanvas-story-content">
+        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
+      </div>
     </div>`,
 };
 //# sourceMappingURL=index.stories.js.map