@roadtrip/components 3.49.0 → 3.50.0

package/dist/roadtrip/roadtrip.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-d7aae05d.js";export{s as setNonce}from"./p-d7aae05d.js";import{g as o}from"./p-06bfef98.js";var d=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};d().then((async e=>{await o();return a(JSON.parse('[["p-c58abbfb",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"],"readonly":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4],"size":[513]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"removePadding":[1028,"remove-padding"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"enabledFocusTrap":[4,"enabled-focus-trap"],"focusTrap":[32],"hasFooterContent":[32],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"enabledFocusTrap":["handleFocusTrapProp"],"isOpen":["handleOpen"]}],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"blockdecimal":[4],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"success":[4],"helper":[1],"list":[1],"debounce":[2],"enforceMinMaxValue":[64],"focus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"inverse":[4],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-c23dbac2",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-6cdb1bf4",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-163df174",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-3b906900",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-e8d82a2e",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-df4cf8bb",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-23b0d708",[[1,"road-alert",{"color":[1],"layout":[1],"label":[1],"button":[1],"link":[1],"url":[1],"hasCloseIcon":[4,"has-close-icon"],"isOpen":[1028,"is-open"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-e2ba76f7",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-2d68aa3a",[[1,"road-carousel",{"options":[8],"pager":[4],"pagertype":[1],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]},null,{"options":["optionsChanged"]}]]],["p-741d74fd",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1],"size":[513]},null,{"checked":["checkedChanged"]}]]],["p-f99639e8",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-39b17e20",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-a1101905",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-d344a749",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-2301c9e2",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-ad5538c1",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]}]]],["p-d7a56b79",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-187ab5f5",[[1,"road-status-chip",{"size":[1]}]]],["p-ceb904c0",[[6,"road-time-range-picker",{"start":[1025],"end":[1025],"disabled":[4],"helper":[1],"separator":[1],"required":[4],"label":[1],"sizes":[1],"error":[1],"getRange":[64]}]]],["p-4374d63f",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-83f9db8d",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-e97c8d7f",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-ef883f08",[[1,"road-aspect-ratio",{"ratio":[1]}]]],["p-14e42c8d",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-edf07985",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-8426998b",[[1,"road-button-carousel",{"outline":[4],"disabled":[516]},[[9,"scroll","onScroll"]]]]],["p-f2f26300",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-70909891",[[4,"road-carousel-item"]]],["p-3bac817e",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-b6e3db42",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-eddc9353",[[1,"road-global-navigation-v2",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"],[8,"click","onButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-abe3e334",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-df4c2ff0",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-b40d0b3d",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-466c0ff9",[[1,"road-navbar-item-v2",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-977c467d",[[1,"road-navbar-v2",{"compact":[516],"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-8630081f",[[1,"road-progress",{"value":[2],"numbersteps":[2],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1],"progresscalculationbase":[1]}]]],["p-e9480f62",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-0eba704f",[[1,"road-progress-indicator-vertical"]]],["p-9a91254d",[[4,"road-progress-indicator-vertical-item"]]],["p-99146e17",[[1,"road-progress-tracker"]]],["p-cc42a593",[[4,"road-progress-tracker-item"]]],["p-12e8e42a",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-596d37d0",[[6,"road-radio-card",{"name":[1],"disabled":[4],"selected":[4],"value":[8],"label":[1],"inline":[4],"isSelected":[32],"radioId":[32]},[[8,"road-radio-selected","handleRadioSelected"]]]]],["p-d4f30d5d",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-f0d930e5",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-718c6406",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-61190b12",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-d1de4eb6",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"helper":[1],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]},null,{"value":["valueChanged"]}]]],["p-3dfa5636",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"loading":[4],"isOpen":[32],"currentValue":[32],"activeIndex":[32],"wasFocusedBeforeLoading":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[5,"mousedown","onClickOutside"],[8,"keydown","handleKeydown"]],{"loading":["loadingChanged"],"options":["onOptionsChange"]}]]],["p-6311f3f0",[[1,"road-skeleton"]]],["p-7aceed1a",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-5381957c",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-249b8592",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-1f1021bc",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-9b1fa6a6",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-da0a75ff",[[6,"road-table"]]],["p-ac64606d",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-0c6ad72e",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-3d4cd373",[[1,"road-text",{"color":[1]}]]],["p-c0f2eca7",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-dbb675a2",[[1,"road-toolbar-title"]]],["p-85e18b2f",[[1,"road-toolbar-title-page"]]],["p-456f66fc",[[1,"road-toolbar-v2"]]],["p-335498ee",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-a4e45088",[[1,"road-avatar",{"size":[513]}]]],["p-4bbe3312",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"selected":[516],"disabled":[516],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-7a51b3e1",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)}));
+import{p as e,b as a}from"./p-d7aae05d.js";export{s as setNonce}from"./p-d7aae05d.js";import{g as o}from"./p-06bfef98.js";var d=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};d().then((async e=>{await o();return a(JSON.parse('[["p-7df3bb5e",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[2],"max":[2],"step":[1],"value":[2],"size":[1],"dustbin":[4],"readonly":[4],"leftIconClasses":[32],"rightIconClasses":[32],"isDustbinVisible":[32]},null,{"value":["onValueChange"],"readonly":["onValueChange"]}],[1,"road-item",{"titleItem":[1,"title-item"],"text":[1],"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"layout":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4],"size":[513]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[1,"road-drawer",{"isOpen":[1028,"is-open"],"removePadding":[1028,"remove-padding"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"ariaLabel":[1,"aria-label"],"ariaLabelBack":[1,"aria-label-back"],"ariaLabelClose":[1,"aria-label-close"],"hasCloseIcon":[4,"has-close-icon"],"enabledFocusTrap":[4,"enabled-focus-trap"],"focusTrap":[32],"hasFooterContent":[32],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]],{"enabledFocusTrap":["handleFocusTrapProp"],"isOpen":["handleOpen"]}],[6,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"blockdecimal":[4],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"success":[4],"helper":[1],"list":[1],"debounce":[2],"enforceMinMaxValue":[64],"focus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}],[1,"road-col"],[1,"road-grid"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"inverse":[4],"iconOnly":[516,"icon-only"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-input-group",{"disabled":[4]},null,{"disabled":["handleDisabledChange"]}],[1,"road-label"],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]},null,{"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["p-c23dbac2",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["p-6cdb1bf4",[[1,"road-content-card",{"insetImage":[4,"inset-image"]}]]],["p-163df174",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]},null,{"value":["valueChanged"]}]]],["p-3b906900",[[1,"road-profil-dropdown",{"isOpen":[1028,"is-open"]},[[4,"click","handleDocumentClick"]]]]],["p-e8d82a2e",[[1,"road-rating",{"size":[513],"rate":[2],"showreviews":[4],"readonly":[4],"reviews":[2],"reviewsText":[1,"reviews-text"],"url":[1]}]]],["p-df4cf8bb",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isLightSeparator":[4,"is-light-separator"],"isSmall":[4,"is-small"]}]]],["p-23b0d708",[[1,"road-alert",{"color":[1],"layout":[1],"label":[1],"button":[1],"link":[1],"url":[1],"hasCloseIcon":[4,"has-close-icon"],"isOpen":[1028,"is-open"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-e2ba76f7",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["p-2d68aa3a",[[1,"road-carousel",{"options":[8],"pager":[4],"pagertype":[1],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]},null,{"options":["optionsChanged"]}]]],["p-741d74fd",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[1],"helper":[1],"size":[513]},null,{"checked":["checkedChanged"]}]]],["p-f99639e8",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["p-39b17e20",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["p-a1101905",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-d344a749",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"isMedium":[4,"is-medium"],"position":[513],"direction":[513]},[[4,"click","handleDocumentClick"]]]]],["p-2301c9e2",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["p-ad5538c1",[[2,"road-phone-number-input",{"disabled":[4],"countryData":[16],"language":[1],"codeLabel":[1,"code-label"],"phoneLabel":[1,"phone-label"],"phoneValue":[1,"phone-value"],"countryCode":[1,"country-code"],"errorMessage":[1,"error-message"],"required":[4],"selectedCountry":[32],"selectedCountryCode":[32],"phoneNumber":[32],"countryOptions":[32],"returnObject":[32]}]]],["p-d7a56b79",[[6,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"],"showLabels":[4,"show-labels"],"disabled":[4]},[[2,"focus","handleFocus"],[2,"blur","handleBlur"]],{"value":["valueChanged"]}]]],["p-187ab5f5",[[1,"road-status-chip",{"size":[1]}]]],["p-ceb904c0",[[6,"road-time-range-picker",{"start":[1025],"end":[1025],"disabled":[4],"helper":[1],"separator":[1],"required":[4],"label":[1],"sizes":[1],"error":[1],"getRange":[64]}]]],["p-4374d63f",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]},null,{"isOpen":["isOpenChanged"]}]]],["p-83f9db8d",[[2,"road-toggle",{"toggleId":[1,"toggle-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-e97c8d7f",[[2,"road-area-code",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1025],"triggerRender":[1026,"trigger-render"],"selectedValue":[32]},null,{"value":["valueChanged"]}]]],["p-ef883f08",[[1,"road-aspect-ratio",{"ratio":[1]}]]],["p-14e42c8d",[[1,"road-asset",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"asset":[8],"lazy":[4],"sanitize":[4],"assetSvgContent":[32],"isVisible":[32]},null,{"name":["loadAsset"],"src":["loadAsset"],"asset":["loadAsset"]}]]],["p-edf07985",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["p-8426998b",[[1,"road-button-carousel",{"outline":[4],"disabled":[516]},[[9,"scroll","onScroll"]]]]],["p-f2f26300",[[1,"road-button-floating",{"position":[513],"href":[1],"rel":[1],"target":[1]},[[9,"scroll","onScroll"]]]]],["p-70909891",[[4,"road-carousel-item"]]],["p-3bac817e",[[1,"road-flap",{"color":[1],"filled":[4],"size":[513]}]]],["p-b6e3db42",[[1,"road-global-navigation",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-eddc9353",[[1,"road-global-navigation-v2",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"],[8,"click","onButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-abe3e334",[[1,"road-illustration",{"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"illustration":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"illustrationSvgContent":[32],"isVisible":[32]},null,{"name":["loadIllustration"],"src":["loadIllustration"],"illustration":["loadIllustration"]}]]],["p-df4c2ff0",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-b40d0b3d",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-466c0ff9",[[1,"road-navbar-item-v2",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]],{"selected":["handleSelectedChange"]}]]],["p-977c467d",[[1,"road-navbar-v2",{"compact":[516],"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]],{"selectedTab":["selectedTabChanged"]}]]],["p-8630081f",[[1,"road-progress",{"value":[2],"numbersteps":[2],"label":[1],"showstep":[4],"animation":[4],"light":[4],"fullwidth":[4],"color":[1],"progresscalculationbase":[1]}]]],["p-e9480f62",[[1,"road-progress-indicator-horizontal",{"color":[513],"numberStep":[2,"number-step"],"stateFirstStep":[1,"state-first-step"],"stateSecondStep":[1,"state-second-step"],"stateThirdStep":[1,"state-third-step"],"urlStep1":[1,"url-step-1"],"urlStep2":[1,"url-step-2"],"urlStep3":[1,"url-step-3"]}]]],["p-0eba704f",[[1,"road-progress-indicator-vertical"]]],["p-9a91254d",[[4,"road-progress-indicator-vertical-item"]]],["p-99146e17",[[1,"road-progress-tracker"]]],["p-cc42a593",[[4,"road-progress-tracker-item"]]],["p-12e8e42a",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"secondaryLabel":[1,"secondary-label"],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["p-596d37d0",[[6,"road-radio-card",{"name":[1],"disabled":[4],"selected":[4],"value":[8],"label":[1],"inline":[4],"isSelected":[32],"radioId":[32]},[[8,"road-radio-selected","handleRadioSelected"]]]]],["p-d4f30d5d",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025],"helper":[1]},null,{"value":["valueChanged"],"error":["errorChanged"]}]]],["p-f0d930e5",[[1,"road-segmented-button",{"size":[1],"selected":[1028],"tab":[1]},[[8,"roadSegmentedButtonBarChanged","onButtonBarChanged"],[8,"roadSegmentedButtonbarchanged","onButtonBarChanged"]]]]],["p-718c6406",[[1,"road-segmented-button-bar",{"selectedTab":[1,"selected-tab"]},null,{"selectedTab":["selectedTabChanged"]}]]],["p-61190b12",[[1,"road-segmented-buttons",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-d1de4eb6",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"helper":[1],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]},null,{"value":["valueChanged"]}]]],["p-3dfa5636",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"loading":[4],"isOpen":[32],"currentValue":[32],"activeIndex":[32],"wasFocusedBeforeLoading":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[5,"mousedown","onClickOutside"],[8,"keydown","handleKeydown"]],{"loading":["loadingChanged"],"options":["onOptionsChange"]}]]],["p-6311f3f0",[[1,"road-skeleton"]]],["p-7aceed1a",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["p-5381957c",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]},null,{"checked":["checkedChanged"]}]]],["p-249b8592",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]},[[8,"roadtabbarchanged","onTabBarChanged"]]]]],["p-1f1021bc",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1537,"selected-tab"]},[[0,"roadTabButtonClick","onTabButtonClick"]],{"selectedTab":["selectedTabChanged"]}]]],["p-9b1fa6a6",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"disabled":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["p-da0a75ff",[[6,"road-table"]]],["p-ac64606d",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["p-0c6ad72e",[[1,"road-tag",{"color":[1],"contrast":[4]}]]],["p-3d4cd373",[[1,"road-text",{"color":[1]}]]],["p-c0f2eca7",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"resize":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]},null,{"value":["valueChanged"]}]]],["p-dbb675a2",[[1,"road-toolbar-title"]]],["p-85e18b2f",[[1,"road-toolbar-title-page"]]],["p-456f66fc",[[1,"road-toolbar-v2"]]],["p-335498ee",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["p-a4e45088",[[1,"road-avatar",{"size":[513]}]]],["p-4bbe3312",[[1,"road-card",{"elevation":[1],"button":[4],"value":[1],"selected":[516],"disabled":[516],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["p-7a51b3e1",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]},null,{"src":["srcChanged"]}]]]]'),e)}));
 //# sourceMappingURL=roadtrip.esm.js.map

package/dist/types/components/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { FocusTrap } from 'focus-trap';
+import { EventEmitter } from "../../stencil-public-runtime";
+import { FocusTrap } from "focus-trap";
 /**
  * @slot  - Content of the drawer.
  * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set
@@ -107,7 +107,9 @@ export declare class Drawer {
     /**
      * Find and focus the first element in the drawer
      */
-    private focusFirstElement;
+    /**
+     * Find and focus the first element in the drawer
+     */
     /**
      * Close the dialog when clicking on the cross or layer
      */
@@ -120,9 +122,7 @@ export declare class Drawer {
      * Close the dialog when press Escape key
      */
     onEscape(event: KeyboardEvent): void;
-    /**
-     * Call close function when clicking an element with data-dismiss="modal" attribute
-     */
     componentDidLoad(): void;
+    private getOrCreateFocusTrap;
     render(): any;
 }

package/hydrate/index.js

@@ -3940,7 +3940,7 @@ class ButtonBar {
     }; }
 }
 
-const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline)}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
+const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
 var RoadCardStyle0 = cardCss;
 
 /**
@@ -13021,7 +13021,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;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}";
 var RoadDrawerStyle0 = drawerCss;
 
 /**
@@ -13050,7 +13050,7 @@ class Drawer {
         /**
          * position of the drawer. e.g. left, right, bottom
          */
-        this.position = 'left';
+        this.position = "left";
         /**
          * Width of the drawer
          */
@@ -13079,6 +13079,19 @@ class Drawer {
             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
          */
@@ -13128,92 +13141,70 @@ class Drawer {
             }
         }, 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();
-                }
-                else {
-                    (_c = this.focusTrap) === null || _c === void 0 ? void 0 : _c.activate();
+            this.el.addEventListener("transitionend", () => {
+                if (this.enabledFocusTrap) {
+                    this.getOrCreateFocusTrap().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 ? (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`;
-        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 })))))));
+        const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
+        return (hAsync(Host, { key: '183f5f34021216b6bc02239d2bbb41ec760aeb10', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: '45fcf71e912175cf2f927c59ae336c6502ba5fd2', class: "road-drawer-wrapper" }, hAsync("div", { key: '0e1b5278667c12739b65fd90949ee7ffae2f55f8', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: '77c0d8d88d3598412e215edacbf6b60a0105c065', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: 'abe0864e65011cf7cea8fd4fcc1d80cc1c1b85bc', class: "drawer-content" }, hAsync("header", { key: '4d50f250b74b72d0d67677eb55e2930e67112145', 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: '5986fd06ad1123c4a271e70b28cabdbecd39f64a', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '00021b41466eaf23e8bb63437c47bb674b4591b4' })), hAsync("footer", { key: '9f8e288d2e51f36ebadd767c833238aa35935afc', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: '96c456c682407d5dd90b31d25344df030747a09b', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/hydrate/index.mjs

@@ -3936,7 +3936,7 @@ class ButtonBar {
     }; }
 }
 
-const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline)}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
+const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
 var RoadCardStyle0 = cardCss;
 
 /**
@@ -13017,7 +13017,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;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}";
 var RoadDrawerStyle0 = drawerCss;
 
 /**
@@ -13046,7 +13046,7 @@ class Drawer {
         /**
          * position of the drawer. e.g. left, right, bottom
          */
-        this.position = 'left';
+        this.position = "left";
         /**
          * Width of the drawer
          */
@@ -13075,6 +13075,19 @@ class Drawer {
             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
          */
@@ -13124,92 +13137,70 @@ class Drawer {
             }
         }, 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();
-                }
-                else {
-                    (_c = this.focusTrap) === null || _c === void 0 ? void 0 : _c.activate();
+            this.el.addEventListener("transitionend", () => {
+                if (this.enabledFocusTrap) {
+                    this.getOrCreateFocusTrap().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 ? (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`;
-        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 })))))));
+        const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
+        return (hAsync(Host, { key: '183f5f34021216b6bc02239d2bbb41ec760aeb10', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: '45fcf71e912175cf2f927c59ae336c6502ba5fd2', class: "road-drawer-wrapper" }, hAsync("div", { key: '0e1b5278667c12739b65fd90949ee7ffae2f55f8', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: '77c0d8d88d3598412e215edacbf6b60a0105c065', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: 'abe0864e65011cf7cea8fd4fcc1d80cc1c1b85bc', class: "drawer-content" }, hAsync("header", { key: '4d50f250b74b72d0d67677eb55e2930e67112145', 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: '5986fd06ad1123c4a271e70b28cabdbecd39f64a', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '00021b41466eaf23e8bb63437c47bb674b4591b4' })), hAsync("footer", { key: '9f8e288d2e51f36ebadd767c833238aa35935afc', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: '96c456c682407d5dd90b31d25344df030747a09b', 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.49.0",
+  "version": "3.50.0",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia/driverservices/experience-platform/roadtrip/components",