@roadtrip/components 3.47.0 → 3.47.1

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

@@ -1938,6 +1938,10 @@ const Drawer = class {
          * Footer Content state
          */
         this.hasFooterContent = false;
+        this.onFooterSlotChange = (event) => {
+            const slot = event.target;
+            this.hasFooterContent = slot.assignedElements().length > 0;
+        };
         /**
          * Close the dialog when clicking on the cross or layer
          */
@@ -1977,13 +1981,15 @@ const Drawer = class {
      * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example
      */
     handleFocusTrapProp(value) {
-        var _a, _b;
-        if (value) {
-            (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.unpause();
-        }
-        else {
-            (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.pause();
-        }
+        setTimeout(() => {
+            var _a, _b;
+            if (value) {
+                (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.unpause();
+            }
+            else {
+                (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.pause();
+            }
+        }, 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) {
@@ -2001,9 +2007,14 @@ const Drawer = class {
             this.onOpen.emit();
             // Focus the first button element after the drawer is opened then focus trap
             setTimeout(() => {
-                var _a;
+                var _a, _b, _c;
                 this.focusFirstElement();
-                (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.activate();
+                if ((_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.active) {
+                    (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.unpause();
+                }
+                else {
+                    (_c = this.focusTrap) === null || _c === void 0 ? void 0 : _c.activate();
+                }
             }, 50); // Add a slight delay to ensure the element is rendered
         }
         else {
@@ -2054,7 +2065,7 @@ const Drawer = class {
         }
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
         const removePaddingClass = this.removePadding ? 'remove-padding' : '';
         const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
@@ -2065,9 +2076,7 @@ const Drawer = class {
         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`;
-        const footerSlotElement = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('slot[name="footer"]');
-        const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;
-        return (index.h(index.Host, { key: 'f204c79488e3496f2b5de75bdbaf8af4a7912306', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, index.h("div", { key: 'c75f6462bd7f7451d17784b72fb94ec343fe88f9', class: "road-drawer-wrapper" }, index.h("div", { key: '2e5df3a95fa7344dfbe103e05714c74646f68c3c', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), index.h("div", { key: 'dfc325bb20bebcc1cb41902d5acbd28b2b662d01', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, index.h("div", { key: 'efdf2daad76553c2b4d0df35353865abd29a170c', class: "drawer-content" }, index.h("header", { key: '96cefa87d0a69594d2add43cbffa6cbbd6a491d9', 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: 'd5d13d447d46cd6e1df289a217aa8422e100afa7', class: `drawer-body ${removePaddingClass}` }, index.h("slot", { key: '5d9aefc4ccbff803e332fd55998fb20b141b272d' })), index.h("footer", { key: '767203a6ffdf081888a7d43f0e840598513832b6', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, index.h("slot", { key: '7d67cff86df04ba7c0c694e88d982abc2e08da5b', name: "footer" })))))));
+        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 })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {