@roadtrip/components 3.50.0 → 3.51.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/road-badge_14.cjs.entry.js +3 -2
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/collection/components/drawer/drawer.css +2 -0
- package/dist/collection/components/drawer/drawer.js +2 -1
- package/dist/collection/components/drawer/drawer.js.map +1 -1
- package/dist/collection/components/drawer/drawer.stories.js +1 -1
- package/dist/esm/road-badge_14.entry.js +3 -2
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/roadtrip/{p-7df3bb5e.entry.js → p-6a8da86b.entry.js} +2 -2
- package/dist/roadtrip/p-6a8da86b.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/hydrate/index.js +4 -3
- package/hydrate/index.mjs +4 -3
- package/package.json +1 -1
- package/dist/roadtrip/p-7df3bb5e.entry.js.map +0 -1
|
@@ -1893,7 +1893,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
1893
1893
|
return trap;
|
|
1894
1894
|
};
|
|
1895
1895
|
|
|
1896
|
-
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;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;transition:opacity 0.3s ease-out, visibility 0s linear 0s}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}";
|
|
1896
|
+
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}";
|
|
1897
1897
|
const RoadDrawerStyle0 = drawerCss;
|
|
1898
1898
|
|
|
1899
1899
|
const Drawer = class {
|
|
@@ -2049,6 +2049,7 @@ const Drawer = class {
|
|
|
2049
2049
|
tabbableOptions: {
|
|
2050
2050
|
getShadowRoot: true,
|
|
2051
2051
|
},
|
|
2052
|
+
preventScroll: true,
|
|
2052
2053
|
});
|
|
2053
2054
|
}
|
|
2054
2055
|
return this.focusTrap;
|
|
@@ -2067,7 +2068,7 @@ const Drawer = class {
|
|
|
2067
2068
|
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;
|
|
2068
2069
|
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;
|
|
2069
2070
|
const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
|
|
2070
|
-
return (index.h(index.Host, { key: '
|
|
2071
|
+
return (index.h(index.Host, { key: 'f3f7bb36db4476325b4e7a879a739529bc79d964', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, index.h("div", { key: '407cd4cc74d0f94f43cb306e8e7c819b771493dd', class: "road-drawer-wrapper" }, index.h("div", { key: '2f09ca1bfff5bf81ed94a277910dbb6017d0b984', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), index.h("div", { key: 'ae71f5011512dd1dd2a3cdd69b7ca6c8838b787f', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, index.h("div", { key: '94cf3ed5d1a5e62cf15ec3a20a6bb786a240d61a', class: "drawer-content" }, index.h("header", { key: '58c9716838a98d57a0f147aed96c7b06d98ac9cf', 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: '5d97f008d5514de90fac3c7d6c517882216aee00', class: `drawer-body ${removePaddingClass}` }, index.h("slot", { key: '53a401cd8b6295017d4903e7626d2ab643ad8b26' })), index.h("footer", { key: 'e1c65d15af977b46484d35c6b93def36c3523fdb', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, index.h("slot", { key: 'c7b7694a70fb98a9057d5292acbf6bdda42267c5', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
|
|
2071
2072
|
}
|
|
2072
2073
|
get el() { return index.getElement(this); }
|
|
2073
2074
|
static get watchers() { return {
|