@roadtrip/components 3.49.0 → 3.51.0

package/dist/cjs/road-badge_14.cjs.entry.js

@@ -1893,7 +1893,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;max-height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}";
+const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.3s ease-out, visibility 0s linear 0.3s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-left) .road-drawer-wrapper .drawer-dialog{left:0}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1;transition:opacity 0.3s ease-out, visibility 0s linear 0s}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}";
 const RoadDrawerStyle0 = drawerCss;
 
 const Drawer = class {
@@ -1913,7 +1913,7 @@ const Drawer = class {
         /**
          * position of the drawer. e.g. left, right, bottom
          */
-        this.position = 'left';
+        this.position = "left";
         /**
          * Width of the drawer
          */
@@ -1942,6 +1942,19 @@ const Drawer = class {
             const slot = event.target;
             this.hasFooterContent = slot.assignedElements().length > 0;
         };
+        /**
+         * Find and focus the first element in the drawer
+         */
+        /**
+         * Find and focus the first element in the drawer
+         */
+        // private focusFirstElement() {
+        //   const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0] as HTMLElement;
+        //
+        //   if (firstElement) {
+        //     firstElement.focus();
+        //   }
+        // }
         /**
          * Close the dialog when clicking on the cross or layer
          */
@@ -1991,92 +2004,70 @@ const Drawer = class {
             }
         }, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time
     }
-    // @Watch('isOpen')
-    // handleOpen(openValue: boolean) {
-    //   if(openValue === true) {
-    //     this.onOpen.emit();
-    //   } else {
-    //     this.el.addEventListener('transitionend', () => {
-    //       this.onClose.emit();
-    //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);
-    //     }, { once: true});
-    //   }
-    // }
     handleOpen(openValue) {
+        var _a;
         if (openValue === true) {
             this.onOpen.emit();
-            // Focus the first button element after the drawer is opened then focus trap
-            setTimeout(() => {
-                var _a, _b, _c;
-                this.focusFirstElement();
-                if ((_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.active) {
-                    (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.unpause();
+            this.el.addEventListener("transitionend", () => {
+                if (this.enabledFocusTrap) {
+                    this.getOrCreateFocusTrap().activate();
                 }
-                else {
-                    (_c = this.focusTrap) === null || _c === void 0 ? void 0 : _c.activate();
-                }
-            }, 50); // Add a slight delay to ensure the element is rendered
+            }, { once: true });
         }
         else {
-            this.el.addEventListener('transitionend', () => {
-                var _a;
-                (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
+            (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
+            this.el.addEventListener("transitionend", () => {
                 this.onClose.emit();
-                this.el.shadowRoot && (this.el.shadowRoot.querySelector('.drawer-body').scrollTop = 0);
+                this.el.shadowRoot &&
+                    (this.el.shadowRoot.querySelector(".drawer-body").scrollTop = 0);
             }, { once: true });
         }
     }
-    /**
-     * Find and focus the first element in the drawer
-     */
-    focusFirstElement() {
-        var _a;
-        const firstElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0];
-        if (firstElement) {
-            firstElement.focus();
-        }
-    }
     /**
      * Close the dialog when press Escape key
      */
     onEscape(event) {
-        if (event.key === 'Escape' || event.key === "Esc") {
+        if (event.key === "Escape" || event.key === "Esc") {
             this.close();
         }
     }
-    /**
-     * Call close function when clicking an element with data-dismiss="modal" attribute
-     */
     componentDidLoad() {
-        var _a;
-        this.el.querySelectorAll('[data-dismiss="modal"]').forEach(item => {
-            item.addEventListener('click', () => this.close());
-        });
-        const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
-        this.focusTrap = createFocusTrap(drawerContent, {
-            onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
-            onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
-            tabbableOptions: {
-                getShadowRoot: true,
-            },
+        this.el.querySelectorAll('[data-dismiss="modal"]').forEach((item) => {
+            item.addEventListener("click", () => this.close());
         });
         if (this.isOpen) {
             this.handleOpen(true);
         }
     }
+    getOrCreateFocusTrap() {
+        var _a;
+        if (!this.focusTrap) {
+            const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
+            this.focusTrap = createFocusTrap(drawerContent, {
+                onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
+                onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
+                tabbableOptions: {
+                    getShadowRoot: true,
+                },
+            });
+        }
+        return this.focusTrap;
+    }
     render() {
         var _a, _b, _c;
-        const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
-        const removePaddingClass = this.removePadding ? 'remove-padding' : '';
-        const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
-        const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : 'drawer';
-        const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : 'Back';
-        const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : 'Close';
-        const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';
+        const drawerIsOpenClass = this.isOpen ? "drawer-open" : "";
+        const removePaddingClass = this.removePadding ? "remove-padding" : "";
+        const inverseHeaderClass = this.hasInverseHeader
+            ? "drawer-header-inverse"
+            : "";
+        const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : "drawer";
+        const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : "Back";
+        const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : "Close";
+        const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? "drawer-delimiter" : "";
         const backIconElement = this.hasBackIcon ? (index.h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, index.h("road-icon", { icon: index$1.navigationChevron, rotate: "180" }), this.backText)) : null;
         const closeIconElement = this.hasCloseIcon ? (index.h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, index.h("road-icon", { icon: index$1.navigationClose, "aria-hidden": "true" }))) : null;
-        const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
-        return (index.h(index.Host, { key: '060d4bb015870b3540eb83b2ad932c3d06947c47', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, index.h("div", { key: 'd73080a0b0bcf3caec1eca5cd37da1daff6f827b', class: "road-drawer-wrapper" }, index.h("div", { key: '01ec8567832bfdd74da79b89cd2d64749d808f4b', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), index.h("div", { key: 'f5c9999f311cb8840590123e4ac397d380de0098', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, index.h("div", { key: '49b1ab4eeb412cfd97fca92c14a3a0d3fed06ca5', class: "drawer-content" }, index.h("header", { key: '70942d7f0638042702208a783df6298df4569804', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (index.h("h2", { class: "drawer-title" }, this.drawerTitle)) : (index.h("div", { class: "drawer-title" }, index.h("slot", { name: "title" }))), closeIconElement), index.h("div", { key: '3bd1a439510a2fdd0e39c7ca3e1c12c224cc119f', class: `drawer-body ${removePaddingClass}` }, index.h("slot", { key: '9e7931e555265561fb8af8d09bc1a0ddbbfefd81' })), index.h("footer", { key: '5fb5f98e793fe226f32f17f3d50c493212b6c11a', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, index.h("slot", { key: 'd177f8dacdf71974733c1a911bcd0011856825e1', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
+        const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
+        return (index.h(index.Host, { key: '283b6f1f997e92d9305b0ddf7191b568e1cd1587', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, index.h("div", { key: 'cf42a9521522d35a5b2479ebabce388498cf410f', class: "road-drawer-wrapper" }, index.h("div", { key: 'a2c92e33dc4a758e5861c124d63f9228c75657a0', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), index.h("div", { key: 'b3cd8785eabb3dd1699248d48f8fc6179b24cbe3', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, index.h("div", { key: '15da695b8585dedfb49b27882c84501b67a7a606', class: "drawer-content" }, index.h("header", { key: '601f047b868cf2794c7264ae6a12ba1d2699327e', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (index.h("h2", { class: "drawer-title" }, this.drawerTitle)) : (index.h("div", { class: "drawer-title" }, index.h("slot", { name: "title" }))), closeIconElement), index.h("div", { key: '1cf0ad2e8393893fd26277179a9877961966e0f2', class: `drawer-body ${removePaddingClass}` }, index.h("slot", { key: '860817b92a5a97b74de9a60f403807ad9bc2b30d' })), index.h("footer", { key: '8b91123cef24c0f1fe3c36482f09f46558d575aa', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, index.h("slot", { key: '1c459e52b42e59f2074ce603f57bcaec9a00d827', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {