https://cdn.ui.porsche.com/porsche-design-system/components/porsch…esign-system.flyout.84de21626bbe47cbfbc2.js

1"use strict";(self.webpackChunkPorscheDesignSystem_4_7_0=self.webpackChunkPorscheDesignSystem_4_7_0||[]).push([["flyout"],{6241(t,o,e){var r=e(2505);e.d(o,["p",0,t=>{if(t)return Object.fromEntries(Object.entries((0,r.e)(t)).map(([t,o])=>[t,"boolean"==typeof o?`${o}`:o]))},"s",0,(...t)=>t.filter(Boolean).join(" ")||null])},3933(t,o,e){e.d(o,["b",0,"--p-blur-frosted"])},2975(t,o,e){e.d(o,["c",0,"--p-color-canvas"])},1042(t,o,e){e.d(o,["c",0,"--p-color-frosted"])},4682(t,o,e){e.d(o,["c",0,"--p-color-frosted-strong"])},1039(t,o,e){e.d(o,["c",0,"--p-color-primary"])},6295(t,o,e){e.d(o,["c",0,"--p-color-surface"])},6685(t,o,e){const r=t=>{const o=t.trim(),e=Number.parseFloat(o);return Number.isNaN(e)?0:o.endsWith("ms")?e:1e3*e},i="overlay: auto",s="transition-behavior: allow-discrete";e.d(o,["c",0,t=>{const{getElement:o,isShown:e,show:n,hide:a}=t;let d;const l=()=>{d&&(clearTimeout(d),d=void 0)};return{requestShow:()=>{l(),e()||n()},requestHide:()=>{if(e())if("undefined"!=typeof CSS&&CSS.supports(i)&&CSS.supports(s))a();else{l();const t=o(),i=(t?(t=>{const{transitionDuration:o,transitionDelay:e}=getComputedStyle(t),i=o.split(","),s=e.split(",");return i.reduce((t,o,e)=>{const i=r(o)+r(s[e]??"0s");return i>t?i:t},0)})(t):0)+50;d=setTimeout(()=>{l(),e()&&a()},i)}},cancel:l}},"o",0,t=>({[`@supports (${i}) and (${s})`]:t})])},1822(t,o,e){var r=e(2505),i=e(3114),s=e(4247),n=e(6685),a=e(3827),d=e(1039),l=e(7362),c=e(4265),h=e(3933),p=e(1864),u=e(2640),b=e(1042),g=e(1736),f=e(1797),m=e(6295),k=e(2975),v=e(7202),$=e(845);const y=t=>{const o=t.target;return"scroller"===o.className||"DIALOG"===o.tagName},x="--_p-dialog-a",w=(0,s.r)(g.r),C=(0,s.r)(l.s),S=`calc(${w} + ${(0,s.r)(l.s)})`,D=(0,s.r)(c.s);e.d(o,["B",0,["blur","shading"],"D",0,({inert:t,dialogRef:o,scrollerRef:e,containerClass:s,ariaAttributes:n,onCancel:a,onClick:d,onMouseDown:l,onTransitionEnd:c,onDismiss:h,dismissable:p=!1,header:u,footer:b,subFooter:g},f)=>(0,r.x)("dialog",{inert:t,tabIndex:-1,ref:o,onCancel:a,onMouseDown:l,onClick:d,onTransitionEnd:c,...n??{}},(0,r.x)("div",{class:"scroller",ref:e},(0,r.x)("div",{class:s},p&&(0,r.x)(i.F,{label:`Dismiss ${s}`,onClick:h}),u,f,b,g))),"a",0,()=>({color:(0,s.r)(d.c),background:(0,s.r)(x)}),"b",0,(t,o)=>{const e=t?"moderate":"short",r=t?"in":"out";return{...t?{opacity:1,transform:"translate3d(0,0,0)"}:{opacity:0,transform:"^"===o?"translate3d(0,25vh,0)":`translate3d(${">"===o?"-":""}100%,0,0)`,"&:dir(rtl)":{transform:"^"===o?"translate3d(0,25vh,0)":`translate3d(${">"===o?"":"-"}100%,0,0)`}},transition:`${(0,s.c)("opacity",e,r)}, ${(0,s.c)("transform",e,r)}`}},"c",0,t=>{const o="rgba(255,255,255,.01)";return{position:"absolute",isolation:"isolate",display:"grid",..."fullscreen"===t?{inset:0}:{insetBlock:0,["start"===t?"insetInlineStart":"insetInlineEnd"]:0},overflow:"hidden auto",overscrollBehaviorY:"none",background:o,transform:"translate3d(0,0,0)"}},"d",0,()=>({position:"relative",display:"grid",gridTemplate:`auto/${(0,s.r)(a.s)} minmax(0,1fr) ${(0,s.r)(a.s)}`,gap:`${(0,s.r)(l.s)} calc(${(0,s.r)(c.s)} - ${(0,s.r)(a.s)})`,paddingTop:C,paddingBottom:S,alignContent:"flex-start",transform:"translate3d(0,0,0)"}),"e",0,(t,o="blur")=>{const e="blur"===o,r=t?"long":"moderate",i=t?"in":"out",a=(0,s.r)(s.i,t?"0s":s.m[r]),d=`visibility 0s linear ${a}, width 0s linear ${a}, height 0s linear ${a}, ${(0,s.c)("background-color",r,i)}, ${(0,s.c)("-webkit-backdrop-filter",r,i)}, ${(0,s.c)("backdrop-filter",r,i)}`;return{all:"unset",position:"fixed",inset:0,maxWidth:"100dvw",maxHeight:"100dvh",overflow:"hidden",display:"block",userSelect:"text",outline:0,...t?{width:"100dvw",height:"100dvh",visibility:"inherit",pointerEvents:"auto",background:(0,s.r)(p.c),...e&&{WebkitBackdropFilter:(0,s.r)(h.b),backdropFilter:(0,s.r)(h.b)}}:{width:"0px",height:"0px",visibility:"hidden",pointerEvents:"none",background:"transparent"},transition:d,...(0,n.o)({transition:`${d}, ${(0,s.c)("overlay",r,i)} allow-discrete`}),overlay:"none","&:modal":{overlay:"auto"},"&::backdrop":{display:"none"}}},"f",0,()=>({gridColumn:"1/-1",zIndex:3,paddingInline:D,backgroundColor:(0,s.r)(x)}),"g",0,t=>({...(0,i.g)(t),gridArea:"1/3",zIndex:5,position:"sticky",top:(0,s.r)(a.s),marginTop:`calc(-1 * ${C} + ${(0,s.r)(a.s)})`,marginInlineEnd:(0,s.r)(a.s),placeSelf:"flex-start flex-end"}),"h",0,()=>{const t=`calc(${S} - ${w})`,o=`12 * ${(0,s.r)(v.s)}`;return{gridColumn:"1/-1",zIndex:2,position:"sticky",bottom:"-.1px",marginBlock:`calc(-1 * ${t})`,padding:`${t} ${D}`,background:`linear-gradient(0deg,${(0,s.r)(x)} 0%,${(0,s.r)(x)} 20%,transparent 80%)`,"&[data-stuck]::after":{content:'""',zIndex:-1,position:"absolute",inset:`calc(${t} - ${o}) calc(${D} - ${o})`,background:(0,s.r)(b.c),borderRadius:(0,s.r)(u.r),WebkitBackdropFilter:(0,s.r)(h.b),backdropFilter:(0,s.r)(h.b)}}},"i",0,w,"j",0,()=>{const t=C,o=(0,s.r)($.s);return{gridColumn:"1/-1",zIndex:1,position:"sticky",top:0,marginBlock:`calc(-1 * ${t}) calc(-1 * ${o})`,padding:`${t} ${D} ${o}`,background:`linear-gradient(180deg,${(0,s.r)(x)} 0%,${(0,s.r)(x)} 80%,transparent 100%)`}},"k",0,()=>({gridColumn:"2/3",zIndex:0}),"l",0,()=>({display:"block","&:first-of-type":{gridRowStart:1}}),"m",0,t=>

1({"--pds-internal-grid-outer-column":`calc(${(0,s.r)(c.s)} - ${f.g})`,"--pds-internal-grid-margin":`calc(${(0,s.r)(c.s)} * -1)`,"--pds-internal-grid-width-min":"auto","--pds-internal-grid-width-max":"none",[x]:"surface"===t?(0,s.r)(m.c):(0,s.r)(k.c)}),"n",0,D,"o",0,S,"p",0,C,"q",0,(t,o,e=!1)=>{t.preventDefault(),e||o()},"r",0,(t,o,e,r=!1)=>{e||r||!y(t)||o()},"s",0,(t,o,e,r)=>{"background-color"===t.propertyName&&(o?e.emit(t):r.emit(t))},"t",0,y,"u",0,(t,o)=>{o.scrollTo(0,0),t.inert=!0,t.showModal(),t.inert=!1,t.focus()}])},3114(t,o,e){var r=e(2505),i=e(4247),s=e(451),n=e(2112),a=e(6809),d=e(3933),l=e(7957),c=e(5849),h=e(7057),p=e(1042),u=e(4682),b=e(1039),g=e(2975),f=e(6295);const m=(0,n.g)('<path d="m18 6.706-5.294 5.294 5.294 5.294-.706.706-5.294-5.294-5.294 5.294-.706-.706 5.294-5.294-5.294-5.294.706-.706 5.294 5.294 5.294-5.294z"/>');e.d(o,["F",0,({label:t,onClick:o,ariaDescription:e,refCallback:i})=>(0,r.x)("button",{class:"dismiss",type:"button",onClick:o,ref:i,...e?{"aria-description":e}:{}},(0,r.x)("span",null,t)),"g",0,t=>{const{textColor:o,backgroundColor:e,backgroundColorHover:r}=(t=>({canvas:{textColor:(0,i.r)(b.c),backgroundColor:(0,i.r)(g.c),backgroundColorHover:(0,i.r)(f.c)},surface:{textColor:(0,i.r)(b.c),backgroundColor:(0,i.r)(f.c),backgroundColorHover:(0,i.r)(g.c)},frosted:{textColor:(0,i.r)(b.c),backgroundColor:(0,i.r)(u.c),backgroundColorHover:(0,i.r)(p.c)}}[t]))(t);return{all:"unset",boxSizing:"border-box",display:"grid",placeItems:"center",padding:"6px",borderRadius:(0,i.r)(h.r),font:`${(0,i.r)(l.f)} ${(0,i.r)(c.t)} / ${(0,i.r)(a.l)} ${(0,i.r)(a.f)}`,backgroundColor:e,color:o,cursor:"pointer",..."frosted"===t&&{WebkitBackdropFilter:(0,i.r)(d.b),backdropFilter:(0,i.r)(d.b)},transition:`${(0,i.c)("background-color")}, ${(0,i.c)("color")}`,...(0,i.f)({forcedColorAdjust:"none",background:"Canvas",boxShadow:"inset 0 0 0 2px ButtonBorder",color:"ButtonText"}),"&:focus-visible":(0,i.b)(),...(0,s.h)({"&:hover":{backgroundColor:r,...(0,i.f)({background:"Canvas"})}}),"&::before":{content:'""',width:(0,i.r)(a.l),height:(0,i.r)(a.l),WebkitMask:`${m} center/contain no-repeat`,mask:`${m} center/contain no-repeat`,background:"currentColor"},"& span":(0,i.d)()}}])},7957(t,o,e){e.d(o,["f",0,"--p-font-weight-normal"])},2112(t,o,e){e.d(o,["g",0,t=>`url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${t}</svg>')`])},698(t,o,e){var r=e(2505);e.d(o,["g",0,(t,o)=>(0,r.d)(t,`:scope>[slot="${o}"]`)])},3372(t,o,e){var r=e(2505);e.d(o,["g",0,(t,o)=>(0,r.d)(t,`[slot="${o}"]`)?.textContent])},1797(t,o,e){e.d(o,["g",0,"clamp(16px, 1.25vw + 12px, 36px)"])},7050(t,o,e){e.d(o,["h",0,(t,o)=>null===t||null===o||"object"!=typeof t||"object"!=typeof o?t!==o:Array.isArray(t)&&Array.isArray(o)?!(t.length===o.length&&t.every((t,e)=>t===o[e])):!(Object.keys(t).length===Object.keys(o).length&&Object.entries(t).every(([t,e])=>e===o[t]))])},5697(t,o,e){var r=e(698);e.d(o,["h",0,(t,o)=>!!(0,r.g)(t,o)])},4247(t,o,e){const r="--p-duration-md",i="--p-duration-sm",s="--p-duration-xl",n="--p-ease-in-out",a=(t,o)=>`var(${t}${void 0===o?"":`,${o}`})`,d=t=>({"@media(forced-colors:active)":t}),l={short:a(i),moderate:a(r),long:a("--p-duration-lg"),veryLong:a(s)},c={base:a(n),in:a("--p-ease-in"),out:a("--p-ease-out"),linear:"linear"},h="--p-transition-duration",p="--p-animation-duration",u=t=>`${t} !important`,b=t=>Object.entries(t).reduce((t,[o,e])=>(null===e||(t[o]="object"==typeof e?b(e):u(e)),t),{});e.d(o,["a",0,b,"b",0,(t=2)=>({outline:`2px solid ${a("--p-color-focus")}`,outlineOffset:`${t}px`,...d({outlineColor:"Highlight"})}),"c",0,(t,o="short",e="base",r)=>`${t} ${a(h,l[o])} ${c[e]}`,"d",0,(t=!0,o)=>t?{position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap"}:{position:"static",width:"auto",height:"auto",padding:0,margin:0,overflow:"visible",clip:"auto",whiteSpace:"normal",...o},"e",0,u,"f",0,d,"g",0,t=>({opacity:.4,...d({opacity:1,color:"GrayText",...t})}),"h",0,{"&([hidden])":{display:"none"}},"i",0,h,"j",0,s,"k",0,p,"l",0,i,"m",0,l,"n",0,r,"o",0,n,"p",0,(t,o="short",e="base")=>`${t}

1 ${a(p,l[o])} ${c[e]}`,"r",0,a])},451(t,o,e){e.d(o,["h",0,t=>({"@media(hover:hover)":t})])},6809(t,o,e){e.d(o,["f",0,"--p-font-porsche-next","l",0,"--p-leading-normal"])},7693(t,o,e){const r=new Map,i=new Map,s={getIntersectionObserverStickyArea:t=>new IntersectionObserver(t=>{for(const{target:o,isIntersecting:e}of t)o.toggleAttribute("data-stuck",!e)},{root:t,threshold:1})};e.d(o,["o",0,(t,o)=>{let e=r.get(t);e||(e=s.getIntersectionObserverStickyArea(t),r.set(t,e)),i.has(o)||(e.observe(o),i.set(o,e))}])},7213(t,o,e){e.r(o);var r=e(2505),i=e(6241),s=e(3372),n=e(5697),a=e(1822),d=e(7693),l=e(7050),c=e(1864),h=e(6685),p=e(4247);e(698),e(3114);const u=(t,o,e,i,s,n,d,l,c)=>{const h="start"===i,u="fixed"===l;return(0,r.i)({"@global":{":host":{display:"contents",...(0,p.a)({"--ref-p-flyout-pt":a.p,"--ref-p-flyout-pb":a.o,"--ref-p-flyout-px":a.n,...(0,a.m)(o),...p.h})},slot:{...(0,a.l)(),"&:not([name])":(0,a.k)(),...s&&{"&[name=header]":{...(0,a.j)(),...h?{borderStartEndRadius:a.i}:{borderStartStartRadius:a.i}}},...n&&{"&[name=footer]":(0,a.h)()},...d&&{"&[name=sub-footer]":(0,a.f)()}},dialog:(0,a.e)(t,e)},scroller:{...(0,a.c)(h?"start":"end"),...(0,a.b)(t,h?">":"<"),"&:focus-visible":{outline:"none"}},flyout:{...(0,a.d)(),...(0,a.a)(),...(0,r.l)(c,t=>t?{width:"100dvw",minWidth:"auto",maxWidth:"none",borderRadius:0,clipPath:"none","&:dir(rtl)":{clipPath:"none"}}:{width:(0,p.r)("--p-flyout-width","auto"),minWidth:"320px",maxWidth:"100vw",clipPath:h?`inset(0 round 0 ${a.i} ${a.i} 0)`:`inset(0 round ${a.i} 0 0 ${a.i})`,"&:dir(rtl)":{clipPath:h?`inset(0 round ${a.i} 0 0 ${a.i})`:`inset(0 round 0 ${a.i} ${a.i} 0)`},...h?{borderStartEndRadius:a.i,borderEndEndRadius:a.i,...(0,p.f)({borderInlineEnd:"2px solid CanvasText"})}:{borderStartStartRadius:a.i,borderEndStartRadius:a.i,...(0,p.f)({borderInlineStart:"2px solid CanvasText"})}}),...u&&{gridTemplateRows:s?"auto 1fr auto":"1fr"}},dismiss:(0,a.g)(o)})},b=new Map,g=new Map,f=(t,o)=>{g.get(t).replaceSync(`:host{--p-flyout-sticky-top:${o}px}`)},m=t=>new ResizeObserver(o=>{for(const e of o)f(t,Math.floor(e.target.getBoundingClientRect().height))}),k={open:r.A.boolean,background:r.A.oneOf(["canvas","surface"]),position:r.A.oneOf(["start","end"]),disableBackdropClick:r.A.boolean,backdrop:r.A.oneOf(a.B),fullscreen:r.A.breakpoint("boolean"),footerBehavior:r.A.oneOf(["sticky","fixed"]),aria:r.A.aria(["aria-label"])};e.d(o,["p_flyout",0,class{constructor(t){(0,r.r)(this,t),this.dismiss=(0,r.z)(this,"dismiss",3),this.motionVisibleEnd=(0,r.z)(this,"motionVisibleEnd",3),this.motionHiddenEnd=(0,r.z)(this,"motionHiddenEnd",3),this.open=!1,this.position="end",this.disableBackdropClick=!1,this.background="canvas",this.backdrop="blur",this.footerBehavior="sticky",this.fullscreen=!1,this.isPointerDownInside=!1,this.topLayer=(0,h.c)({getElement:()=>this.dialog,isShown:()=>!!this.dialog?.open,show:()=>(0,a.u)(this.dialog,this.scroller),hide:()=>this.dialog?.close()}),this.onDialogCancel=t=>(0,a.q)(t,()=>this.dismissDialog("escape")),this.onDialogBackdropClick=t=>(0,a.r)(t,()=>this.dismissDialog("backdrop"),this.disableBackdropClick,this.isPointerDownInside),this.onDismissButtonClick=()=>this.dismissDialog("dismiss-button"),this.dismissDialog=t=>{this.dismiss.emit({reason:t})},this.updateSlotObserver=()=>{var t,o,e;this.hasHeader&&(0,d.o)(this.scroller,this.header),this.hasFooter&&(0,d.o)(this.scroller,this.footer),t=this.host,o=this.hasHeader,e=this.header,(0,r.I)()&&(o&&!b.has(t)?(b.set(t,m(t)),b.get(t).observe(e)):!o&&b.has(t)&&(f(t,0),b.get(t).disconnect(),b.delete(t)))}}componentShouldUpdate(t,o){return(0,l.h)(t,o)}connectedCallback(){(0,r.C)(this.host,()=>{(0,r.f)(this.host)},void 0,{subtree:!1,childList:!0,attributes:!1})}componentWillRender(){(0,c.s)(this.open)}componentDidRender(){this.open?this.topLayer.requestShow():this.topLayer.requestHide()}componentDidLoad(){var t;t=this.host,(0,r.I)()&&(g.set(t,new CSSStyleSheet),t.shadowRoot.adoptedStyleSheets.push(g.get(t)),f(t,0)),this.updateSlotObserver()}componentDidUpdate(){this.updateSlotObserver()}disconnectedCallback(){(0,c.s)(!1),this.topLayer.cancel(),(0,r.D)(this.host)}render(){return(0,r.v)(this,k),this.hasHeader=(0,n.h)(this.host,"header"),this.hasFooter=(0,n.h)(this.host,"footer"),this.hasSubFooter=(0,n.h)(this.host,"sub-footer"),(0,r.w)(this.host,u,this.open,this.background,this.backdrop,this.position,this.hasHeader,this.hasFooter,this.hasSubFooter,this.footerBehavior,this.fullscreen),(0,r.x)(a.D,{key:"8b2ce56c2c1f4f179971ff501e6d24b1f034b97a",inert:!this.open,dialogRef:t=>this.dialog=t,scrollerRef:t=>this.scroller=t,dismissable:!0,onCancel:this.onDialogCancel,onMouseDown:t=>this.isPointerDownInside=!(0,a.t)(t),onClick:this.onDialogBackdropClick,onTransitionEnd:t=>(0,a.s)(t,this.open,this.motionVisibleEnd,this.motionHiddenEnd),onDismiss:this.onDismissButtonClick,containerClass:"flyout",header:this.hasHeader?(0,r.x)("slot",{name:"header",ref:t=>this.header=t}):void 0,footer:this.hasFooter?(0,r.x)("slot",{name:"footer",ref:t=>this.footer=t}):void 0,subFooter:this.hasSubFooter?(0,r.x)("slot",{name:"sub-footer"}):void 0,ariaAttributes:(0,i.p)({"aria-modal":!0,"aria-label":this.hasHeader?(0,s.g)(this.host,"header"):"Flyout",...(0,i.p)(this.aria)})},(0,r.x)("slot",{key:"2aed02ad805a67cfb56ec32dbed7e252e2e49d4f"}))}get host(){return(0,r.y)(this)}}])},2640(t,o,e){e.d(o,["r",0,"--p-radius-2xl"])},1736(t,o,e){e.d(o,["r",0,"--p-radius-3xl"])},7057(t,o,e){e.d(o,["r",0,"--p-radius-full"])},1864(t,o,e){e.d(o,["c",0,"--p-color-backdrop","s",0,t=>{document.body.style.overflow=t?"hidden":""}])},4265(t,o,e){e.d(o,["s",0,"--p-spacing-fluid-lg"])},7362(t,o,e){e.d(o,["s",0,"--p-spacing-fluid-md"])},3827(t,o,e){e.d(o,["s",0,"--p-spacing-fluid-sm"])},7202(t,o,e){e.d(o,["s",0,"--p-spacing-static-2xs"])},845(t,o,e){e.d(o,["s",0,"--p-spacing-static-md"])},5849(t,o,e){e.d(o,["t",0,"--p-typescale-sm"])}}]);