@roadtrip/components 3.47.0 → 3.48.0

package/hydrate/index.js

@@ -11130,7 +11130,7 @@ class ContentCard {
     }; }
 }
 
-const counterCss = ".sc-road-counter-h{position:relative;z-index:0;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:0}road-button.sc-road-counter{position:relative;width:3rem;font-size:var(--road-font-size-24);line-height:1.4;background:var(--road-surface);border:1px solid var(--road-button-tertiary-outline)}road-button.sc-road-counter:hover,road-button.sc-road-counter:focus{background:var(--road-button-tertiary-variant)}road-button.sc-road-counter road-icon.sc-road-counter{display:flex;fill:var(--road-primary)}.disabled.sc-road-counter{margin-right:-1px;margin-left:-1px;pointer-events:none;cursor:not-allowed;background:var(--road-surface-disabled);border:1px solid var(--road-on-surface-disabled);opacity:inherit}.disabled.sc-road-counter:focus{background:var(--road-disabled)}.disabled.sc-road-counter road-icon.sc-road-counter{fill:var(--road-grey-50)}road-button.btn-md.sc-road-counter{width:2.5rem}road-button.btn-sm.sc-road-counter{width:2rem}.counter-md.sc-road-counter{height:2.5rem}.counter-sm.sc-road-counter{height:2rem}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
+const counterCss = ".sc-road-counter-h{position:relative;z-index:0;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:0}road-button.sc-road-counter{position:relative;width:3rem;font-size:var(--road-font-size-24);line-height:1.4;background:var(--road-surface);border:1px solid var(--road-button-tertiary-outline)}road-button.sc-road-counter:hover,road-button.sc-road-counter:focus{background:var(--road-button-tertiary-variant)}road-button.sc-road-counter road-icon.sc-road-counter{display:flex;fill:var(--road-primary)}.disabled.sc-road-counter{margin-right:-1px;margin-left:-1px;pointer-events:none;cursor:not-allowed;background:var(--road-surface-disabled);border:1px solid var(--road-on-surface-disabled);opacity:inherit}.disabled.sc-road-counter:focus{background:var(--road-disabled)}.disabled.sc-road-counter road-icon.sc-road-counter{fill:var(--road-grey-50)}road-button.btn-md.sc-road-counter{width:2.5rem}road-button.btn-sm.sc-road-counter{width:2rem}.counter-lg.sc-road-counter{height:3rem;min-width:8.75rem}.counter-md.sc-road-counter{height:2.5rem;min-width:7.25rem}.counter-sm.sc-road-counter{height:2rem;min-width:6.25rem}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
 var RoadCounterStyle0 = counterCss;
 
 class Counter {
@@ -13075,6 +13075,10 @@ class Drawer {
          * 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
          */
@@ -13114,13 +13118,15 @@ class Drawer {
      * 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) {
@@ -13138,9 +13144,14 @@ class Drawer {
             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 {
@@ -13191,7 +13202,7 @@ class Drawer {
         }
     }
     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' : '';
@@ -13202,9 +13213,7 @@ class Drawer {
         const backIconElement = this.hasBackIcon ? (hAsync("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, hAsync("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
         const closeIconElement = this.hasCloseIcon ? (hAsync("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, hAsync("road-icon", { icon: 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 (hAsync(Host, { key: 'f204c79488e3496f2b5de75bdbaf8af4a7912306', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: 'c75f6462bd7f7451d17784b72fb94ec343fe88f9', class: "road-drawer-wrapper" }, hAsync("div", { key: '2e5df3a95fa7344dfbe103e05714c74646f68c3c', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: 'dfc325bb20bebcc1cb41902d5acbd28b2b662d01', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: 'efdf2daad76553c2b4d0df35353865abd29a170c', class: "drawer-content" }, hAsync("header", { key: '96cefa87d0a69594d2add43cbffa6cbbd6a491d9', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: 'd5d13d447d46cd6e1df289a217aa8422e100afa7', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '5d9aefc4ccbff803e332fd55998fb20b141b272d' })), hAsync("footer", { key: '767203a6ffdf081888a7d43f0e840598513832b6', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, hAsync("slot", { key: '7d67cff86df04ba7c0c694e88d982abc2e08da5b', name: "footer" })))))));
+        return (hAsync(Host, { key: '060d4bb015870b3540eb83b2ad932c3d06947c47', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: 'd73080a0b0bcf3caec1eca5cd37da1daff6f827b', class: "road-drawer-wrapper" }, hAsync("div", { key: '01ec8567832bfdd74da79b89cd2d64749d808f4b', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: 'f5c9999f311cb8840590123e4ac397d380de0098', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: '49b1ab4eeb412cfd97fca92c14a3a0d3fed06ca5', class: "drawer-content" }, hAsync("header", { key: '70942d7f0638042702208a783df6298df4569804', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: '3bd1a439510a2fdd0e39c7ca3e1c12c224cc119f', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '9e7931e555265561fb8af8d09bc1a0ddbbfefd81' })), hAsync("footer", { key: '5fb5f98e793fe226f32f17f3d50c493212b6c11a', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: 'd177f8dacdf71974733c1a911bcd0011856825e1', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/hydrate/index.mjs

@@ -11126,7 +11126,7 @@ class ContentCard {
     }; }
 }
 
-const counterCss = ".sc-road-counter-h{position:relative;z-index:0;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:0}road-button.sc-road-counter{position:relative;width:3rem;font-size:var(--road-font-size-24);line-height:1.4;background:var(--road-surface);border:1px solid var(--road-button-tertiary-outline)}road-button.sc-road-counter:hover,road-button.sc-road-counter:focus{background:var(--road-button-tertiary-variant)}road-button.sc-road-counter road-icon.sc-road-counter{display:flex;fill:var(--road-primary)}.disabled.sc-road-counter{margin-right:-1px;margin-left:-1px;pointer-events:none;cursor:not-allowed;background:var(--road-surface-disabled);border:1px solid var(--road-on-surface-disabled);opacity:inherit}.disabled.sc-road-counter:focus{background:var(--road-disabled)}.disabled.sc-road-counter road-icon.sc-road-counter{fill:var(--road-grey-50)}road-button.btn-md.sc-road-counter{width:2.5rem}road-button.btn-sm.sc-road-counter{width:2rem}.counter-md.sc-road-counter{height:2.5rem}.counter-sm.sc-road-counter{height:2rem}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
+const counterCss = ".sc-road-counter-h{position:relative;z-index:0;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:0}road-button.sc-road-counter{position:relative;width:3rem;font-size:var(--road-font-size-24);line-height:1.4;background:var(--road-surface);border:1px solid var(--road-button-tertiary-outline)}road-button.sc-road-counter:hover,road-button.sc-road-counter:focus{background:var(--road-button-tertiary-variant)}road-button.sc-road-counter road-icon.sc-road-counter{display:flex;fill:var(--road-primary)}.disabled.sc-road-counter{margin-right:-1px;margin-left:-1px;pointer-events:none;cursor:not-allowed;background:var(--road-surface-disabled);border:1px solid var(--road-on-surface-disabled);opacity:inherit}.disabled.sc-road-counter:focus{background:var(--road-disabled)}.disabled.sc-road-counter road-icon.sc-road-counter{fill:var(--road-grey-50)}road-button.btn-md.sc-road-counter{width:2.5rem}road-button.btn-sm.sc-road-counter{width:2rem}.counter-lg.sc-road-counter{height:3rem;min-width:8.75rem}.counter-md.sc-road-counter{height:2.5rem;min-width:7.25rem}.counter-sm.sc-road-counter{height:2rem;min-width:6.25rem}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
 var RoadCounterStyle0 = counterCss;
 
 class Counter {
@@ -13071,6 +13071,10 @@ class Drawer {
          * 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
          */
@@ -13110,13 +13114,15 @@ class Drawer {
      * 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) {
@@ -13134,9 +13140,14 @@ class Drawer {
             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 {
@@ -13187,7 +13198,7 @@ class Drawer {
         }
     }
     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' : '';
@@ -13198,9 +13209,7 @@ class Drawer {
         const backIconElement = this.hasBackIcon ? (hAsync("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, hAsync("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
         const closeIconElement = this.hasCloseIcon ? (hAsync("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, hAsync("road-icon", { icon: 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 (hAsync(Host, { key: 'f204c79488e3496f2b5de75bdbaf8af4a7912306', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: 'c75f6462bd7f7451d17784b72fb94ec343fe88f9', class: "road-drawer-wrapper" }, hAsync("div", { key: '2e5df3a95fa7344dfbe103e05714c74646f68c3c', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: 'dfc325bb20bebcc1cb41902d5acbd28b2b662d01', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: 'efdf2daad76553c2b4d0df35353865abd29a170c', class: "drawer-content" }, hAsync("header", { key: '96cefa87d0a69594d2add43cbffa6cbbd6a491d9', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: 'd5d13d447d46cd6e1df289a217aa8422e100afa7', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '5d9aefc4ccbff803e332fd55998fb20b141b272d' })), hAsync("footer", { key: '767203a6ffdf081888a7d43f0e840598513832b6', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, hAsync("slot", { key: '7d67cff86df04ba7c0c694e88d982abc2e08da5b', name: "footer" })))))));
+        return (hAsync(Host, { key: '060d4bb015870b3540eb83b2ad932c3d06947c47', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: 'd73080a0b0bcf3caec1eca5cd37da1daff6f827b', class: "road-drawer-wrapper" }, hAsync("div", { key: '01ec8567832bfdd74da79b89cd2d64749d808f4b', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: 'f5c9999f311cb8840590123e4ac397d380de0098', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: '49b1ab4eeb412cfd97fca92c14a3a0d3fed06ca5', class: "drawer-content" }, hAsync("header", { key: '70942d7f0638042702208a783df6298df4569804', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: '3bd1a439510a2fdd0e39c7ca3e1c12c224cc119f', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '9e7931e555265561fb8af8d09bc1a0ddbbfefd81' })), hAsync("footer", { key: '5fb5f98e793fe226f32f17f3d50c493212b6c11a', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: 'd177f8dacdf71974733c1a911bcd0011856825e1', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.47.0",
+  "version": "3.48.0",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia/driverservices/experience-platform/roadtrip/components",