https://1wqdhu.life/resources/v1/app/assets/modal-header-Pxrha-G-.js

1import{defineComponent as R,useCssVars as E,useTemplateRef as P,toRef as b,ref as O,computed as q,openBlock as t,createElementBlock as n,normalizeClass as a,createElementVNode as r,createBlock as i,unref as s,withCtx as y,resolveDynamicComponent as m,createCommentVNode as u,Fragment as f,renderList as C,createVNode as I,createTextVNode as K,toDisplayString as g,renderSlot as L,withDirectives as S}from"vue";import{c5 as U,cq as Z,bT as j,Z as G}from"./logger-B4OCWT-4.js";import{b as J,c as k}from"./plugin-feature-flags-D9VJsscs.js";import{A as T}from"./arrow-back-BwjDU6vO.js";import{C as Q}from"./custom-html-CSF7RBTT.js";import{g as X,v as w}from"./test-manager-DesYLJOQ.js";const Y=["inert"],x={key:1},_=["inert"],ee={key:2,ref:"overlayHeaderTrigger"},te=R({__name:"modal-header",props:{title:{},titleButton:{},withoutFloatingHeader:{type:Boolean},floatingHeaderTitle:{},subtitle:{},isBackShown:{type:Boolean},cutIn:{type:Boolean},background:{default:"var(--modal-color-bg)"},backText:{},buttons:{}},emits:["close","back"],setup(l,{emit:V}){E(e=>({e18cc120:e.background,v873b5fe6:D.value}));const v=l,A=V,M=U(),p=P("overlayHeaderTrigger"),{customization:B}=Z(),z=b(()=>B?.value?.components?.ModalHeader?.backButtonVariant??"accent"),W=b(()=>B?.value?.components?.ModalHeader?.headerButtonsVariant??"tertiary"),D=b(()=>B?.value?.components?.ModalHeader?.titleTextWrap??"balance"),H=O(!1),F=b(()=>v.title||v.subtitle||v.isBackShown),N=b(()=>v.floatingHeaderTitle??v.title??""),h=q(()=>[...v.buttons??[],{Icon:J,onClick:()=>{A("close")},testId:"close"}]);return j(()=>p.value,([e])=>{H.value=e?.isIntersecting===!1},{threshold:1,root:M}),(e,d)=>(t(),n("div",{class:a(e.$style.root)},[r("div",{class:a(e.$style.buttonsHolder)},[r("div",{class:a(e.$style.titleButtonBlock)},[!l.title&&l.titleButton?(t(),i(s(k),{key:0,size:"m",variant:s(B)?.components?.ModalHeader?.buttonsVariant??"tertiary",onClick:d[0]||(d[0]=o=>l.titleButton?.onClick())},{default:y(({iconSize:o})=>[l.titleButton?.Icon?(t(),i(m(l.titleButton.Icon),{key:0,size:o},null,8,["size"])):u("",!0)]),_:1},8,["variant"])):u("",!0)],2),r("div",{class:a([e.$style.buttons,e.$style.buttonsArray])},[(t(!0),n(f,null,C(h.value,(o,c)=>(t(),i(s(k),{key:c,class:a(e.$style.button),size:"m",variant:W.value,"data-testid":s(X)(o.testId,"modal-header-button"),onClick:$=>o.onClick()},{default:y(({iconSize:$})=>[(t(),i(m(o.Icon),{size:$},null,8,["size"]))]),_:2},1032,["class","variant","data-testid","onClick"]))),128))],2)],2),r("div",{class:a(e.$style.overlayHeaderHolder)},[r("div",{class:a(e.$style.overlayHeaderClipper)},[r("div",{class:a([e.$style.overlayHeader,!l.withoutFloatingHeader&&H.value&&e.$style.active]),inert:!H.value},[l.isBackShown?(t(),i(s(k),{key:0,class:a(e.$style.back),size:"m",variant:z.value,"data-testid":"modal-back-button",onClick:d[1]||(d[1]=o=>e.$emit("back"))},{default:y(({iconSize:o})=>[I(s(T),{size:o},null,8,["size"]),K(" "+g(l.backText),1)]),_:1},8,["class","variant"])):(t(),n("div",x)),l.withoutFloatingHeader?u("",!0):(t(),i(s(Q),{key:2,class:a(e.$style.title),html:N.value,"allowed-tags":[],"data-testId":"modal-header-floating-title"},null,8,["class","html"])),r("div",{class:a([e.$style.buttonsStub,e.$style.buttonsArray])},[(t(!0),n(f,null,C(h.value,(o,c)=>(t(),i(m(o.Icon),{key:c,size:"m"}))),128))],2)],10,Y)],2)],2),e.$slots.cover?(t(),n("div",{key:0,class:a([e.$style.coverHolder,l.cutIn&&e.$style.cutIn])},[r("div",{class:a(e.$style.coverButtonsHolder)},[r("div",{class:a([e.$style.buttons,e.$style.buttonsArray])},[(t(!0),n(f,null,C(h.value,(o,c)=>(t(),n("div",{key:c,class:a(e.$style.coverButtonStack)},[r("div",{class:a(e.$style.coverButtonBackdrop)},null,2),I(s(k),{inert:"",size:"m",variant:"staticPrimary"},{default:y(({iconSize:$})=>[(t(),i(m(o.Icon),{size:$},null,8,["size"]))]),_:2},1024)],2))),128))],2)],2),L(e.$slots,"cover")],2)):u("",!0),F.value?(t(),n("div",{key:1,class:a([e.$style.primaryHeader,l.isBackShown&&e.$style.primaryHeaderWithBack]),inert:H.value},[l.isBackShown?(t(),i(s(k),{key:0,class:a(e.$style.back),size:"m",variant:z.value,"data-testid":"modal-back-button",onClick:d[2]||(d[2]=o=>e.$emit("back"))},{default:y(({iconSize:o})=>[I(s(T),{size:o},null,8,["size"]),K(" "+g(l.backText),1)]),_:1}

1,8,["class","variant"])):u("",!0),r("div",{ref:"overlayHeaderTrigger",class:a([e.$style.buttonsStub,e.$style.buttonsArray])},[(t(!0),n(f,null,C(h.value,(o,c)=>(t(),i(m(o.Icon),{key:c,size:"m"}))),128))],2),r("div",{class:a(e.$style.info)},[r("div",{class:a(e.$style.titleButton)},[S((t(),n("div",{class:a(e.$style.title),"data-testId":"modal-header-title"},[K(g(l.title),1)],2)),[[s(w)]]),l.title&&l.titleButton?(t(),i(s(k),{key:0,size:"m",variant:"tertiary",onClick:d[3]||(d[3]=o=>l.titleButton?.onClick())},{default:y(({iconSize:o})=>[l.titleButton?.Icon?(t(),i(m(l.titleButton.Icon),{key:0,size:o},null,8,["size"])):u("",!0)]),_:1})):u("",!0)],2),l.subtitle?S((t(),n("div",{key:0,class:a(e.$style.subtitle),"data-testid":"modal-header-subtitle"},[K(g(l.subtitle),1)],2)),[[s(w)]]):u("",!0)],2)],10,_)):(t(),n("div",ee,null,512))],2))}}),ae="modal-header_buttonsHolder-9Ka9l",le="modal-header_buttonsArray-9Ka9l",oe="modal-header_buttons-9Ka9l",re="modal-header_button-9Ka9l",se="modal-header_buttonsStub-9Ka9l",ne="modal-header_coverButtonsHolder-9Ka9l",ie="modal-header_coverButtonStack-9Ka9l",de="modal-header_coverButtonBackdrop-9Ka9l",ue="modal-header_coverHolder-9Ka9l",ce="modal-header_cutIn-9Ka9l",ve="modal-header_titleButtonBlock-9Ka9l",ye="modal-header_titleButton-9Ka9l",me="modal-header_title-9Ka9l",ke="modal-header_subtitle-9Ka9l",be="modal-header_primaryHeader-9Ka9l",Be="modal-header_primaryHeaderWithBack-9Ka9l",He="modal-header_back-9Ka9l",he="modal-header_info-9Ka9l",$e="modal-header_overlayHeaderHolder-9Ka9l",fe="modal-header_overlayHeaderClipper-9Ka9l",Ce="modal-header_overlayHeader-9Ka9l",Ke="modal-header_active-9Ka9l",ge="modal-header_root-9Ka9l",Ie={buttonsHolder:ae,buttonsArray:le,buttons:oe,button:re,buttonsStub:se,coverButtonsHolder:ne,coverButtonStack:ie,coverButtonBackdrop:de,coverHolder:ue,cutIn:ce,titleButtonBlock:ve,titleButton:ye,title:me,subtitle:ke,primaryHeader:be,primaryHeaderWithBack:Be,back:He,info:he,overlayHeaderHolder:$e,overlayHeaderClipper:fe,overlayHeader:Ce,active:Ke,root:ge},ze={$style:Ie},pe=G(te,[["__cssModules",ze]]);export{pe as M};
2(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(`.modal-header_buttonsHolder-9Ka9l{z-index:1001;position:sticky;top:0}.modal-header_buttonsArray-9Ka9l{justify-content:flex-end;gap:var(--spacing-20);display:flex}.modal-header_buttons-9Ka9l{position:absolute;inset-block-start:var(--modal-padding-modal-mobile);inset-inline-end:var(--modal-padding-modal-mobile)}@media screen and (min-width:1024px){.modal-header_buttons-9Ka9l{inset-block-start:var(--modal-padding-modal-desktop);inset-inline-end:var(--modal-padding-modal-desktop)}}.modal-header_buttonsStub-9Ka9l{visibility:hidden}.modal-header_coverButtonsHolder-9Ka9l{position:sticky;top:0}.modal-header_coverButtonStack-9Ka9l{place-items:center;display:grid;position:relative}.modal-header_coverButtonStack-9Ka9l>*{grid-area:1/1}.modal-header_coverButtonBackdrop-9Ka9l{z-index:-1;width:var(--size-control-s);height:var(--size-control-s);background-color:var(--color-background-base-alfa-static-black-20);border-radius:50%;position:absolute}.modal-header_coverHolder-9Ka9l{z-index:1002;background:var(--e18cc120);pointer-events:none;width:calc(100% + .5px);-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}.modal-header_coverHolder-9Ka9l.modal-header_cutIn-9Ka9l{margin-bottom:calc(var(--modal-rounding)*-1);-webkit-mask-image:linear-gradient(#000, #000 calc(100% - var(--modal-rounding)), #0000 calc(100% - var(--modal-rounding)), #0000);-webkit-mask-image:linear-gradient(#000, #000 calc(100% - var(--modal-rounding)), #0000 calc(100% - var(--modal-rounding)), #0000);mask-image:linear-gradient(#000, #000 calc(100% - var(--modal-rounding)), #0000 calc(100% - var(--modal-rounding)), #0000)}@supports (mask-mode:luminance){.modal-header_coverHolder-9Ka9l.modal-header_cutIn-9Ka9l{-webkit-mask-image:url("data:image/svg+xml,        <svg xmlns='http://www.w3.org/2000/svg'>          <rect width='100%' height='100%' fill='white'/>          <rect width='calc(100% - 2px)' height='100%' fill='black' y='calc(50% - 2px)' rx='50vh' x='1px'/>          <rect width='calc(100% - 2px)' height='100%' fill='black' y='calc(100% - 2px)' x='1px'/>        </svg>"),linear-gradient(#fff,#fff);mask-image:url("data:image/svg+xml,        <svg xmlns='http://www.w3.org/2000/svg'>          <rect width='100%' height='100%' fill='white'/>          <rect width='calc(100% - 2px)' height='100%' fill='black' y='calc(50% - 2px)' rx='50vh' x='1px'/>          <rect width='calc(100% - 2px)' height='100%' fill='black' y='calc(100% - 2px)' x='1px'/>        </svg>"),linear-gradient(#fff,#fff);-webkit-mask-position:-1px 100%,-1px -1px;mask-position:-1px 100%,-1px -1px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-source-type:luminance;mask-mode:luminance;-webkit-mask-size:calc(100% + 2px) calc(var(--modal-rounding)*2), calc(100% + 2px) calc(100% - var(--modal-rounding) - 1px);-webkit-mask-size:calc(100% + 2px) calc(var(--modal-rounding)*2), calc(100% + 2px) calc(100% - var(--modal-rounding) - 1px);mask-size:calc(100% + 2px) calc(var(--modal-rounding)*2), calc(100% + 2px) calc(100% - var(--modal-rounding) - 1px)}}.modal-header_titleButtonBlock-9Ka9l{position:absolute;inset-block-start:var(--modal-padding-modal-mobile);inset-inline-start:var(--modal-padding-modal-mobile)}@media screen and (min-width:1024px){.modal-header_titleButtonBlock-9Ka9l{inset-block-start:var(--modal-padding-modal-desktop);inset-inline-start:var(--modal-padding-modal-desktop)}}

2.modal-header_titleButton-9Ka9l{align-items:center;gap:var(--spacing-12);display:flex}.modal-header_title-9Ka9l{color:var(--color-content-base-primary);white-space:pre-wrap;font-family:var(--font-display-body-label-font-family);font-size:var(--font-display-body-label-font-size);font-weight:var(--font-display-body-label-font-weight);letter-spacing:var(--font-display-body-label-letter-spacing);line-height:var(--font-display-body-label-line-height);text-transform:var(--font-display-body-label-text-case)}.modal-header_subtitle-9Ka9l{color:var(--color-content-base-secondary)}.modal-header_primaryHeader-9Ka9l{column-gap:var(--spacing-8);padding-block:var(--modal-padding-modal-mobile) var(--modal-padding-modal-header-bottom-mobile);padding-inline:var(--modal-padding-modal-mobile);grid-template-columns:auto max-content;grid-template-areas:"back buttons""info buttons";display:grid}@media screen and (min-width:1024px){.modal-header_primaryHeader-9Ka9l{padding-block:var(--modal-padding-modal-desktop) var(--modal-padding-modal-header-bottom-desktop);padding-inline:var(--modal-padding-modal-desktop)}}.modal-header_primaryHeader-9Ka9l.modal-header_primaryHeaderWithBack-9Ka9l{grid-template-columns:1fr 1fr;grid-template-areas:"back buttons""info info"}.modal-header_primaryHeader-9Ka9l .modal-header_back-9Ka9l{margin-bottom:var(--spacing-16);grid-area:back;justify-self:start}.modal-header_primaryHeader-9Ka9l .modal-header_buttonsStub-9Ka9l{grid-area:buttons}.modal-header_primaryHeader-9Ka9l .modal-header_info-9Ka9l{grid-area:info}.modal-header_primaryHeader-9Ka9l .modal-header_title-9Ka9l{font-family:var(--font-headline-font-family);font-size:var(--font-headline-h2-mobile-font-size);font-weight:var(--font-headline-h2-mobile-font-weight);letter-spacing:var(--font-headline-h2-mobile-letter-spacing);line-height:var(--font-headline-h2-mobile-line-height);text-transform:var(--font-headline-text-case);text-wrap:balance;white-space-collapse:preserve-breaks}@media (min-width:1024px){.modal-header_primaryHeader-9Ka9l .modal-header_title-9Ka9l{font-size:var(--font-headline-h2-desktop-font-size);font-weight:var(--font-headline-h2-desktop-font-weight);letter-spacing:var(--font-headline-h2-desktop-letter-spacing);line-height:var(--font-headline-h2-desktop-line-height)}}.modal-header_primaryHeader-9Ka9l .modal-header_title-9Ka9l{overflow-wrap:anywhere;text-wrap:var(--v873b5fe6)}.modal-header_primaryHeader-9Ka9l .modal-header_subtitle-9Ka9l{font-family:var(--font-body-font-family);font-size:var(--font-body-regular-font-size);font-weight:var(--font-body-regular-font-weight);letter-spacing:var(--font-body-regular-letter-spacing);line-height:var(--font-body-regular-line-height);margin-top:var(--spacing-12)}.modal-header_overlayHeaderHolder-9Ka9l{z-index:1000;position:sticky;top:0}.modal-header_overlayHeaderClipper-9Ka9l{top:-1px;pointer-events:none;position:absolute;inset-inline:0;overflow:hidden}.modal-header_overlayHeader-9Ka9l{padding:var(--modal-padding-modal-mobile);padding-top:calc(1px + var(--modal-padding-modal-mobile));border-bottom:1px solid var(--color-border-base-alfa-container);background:var(--modal-color-bg);pointer-events:all;grid-template-columns:1fr minmax(0,auto) 1fr;transition:transform .1s ease-in;display:grid;transform:translateY(-101%)}@media screen and (min-width:1024px){.modal-header_overlayHeader-9Ka9l{padding:var(--modal-padding-modal-desktop)}}.modal-header_overlayHeader-9Ka9l.modal-header_active-9Ka9l{transition-timing-function:ease-out;transform:translateY(-1px)}.modal-header_overlayHeader-9Ka9l .modal-header_back-9Ka9l{justify-self:start;margin-inline-end:var(--spacing-12)}.modal-header_overlayHeader-9Ka9l .modal-header_buttonsStub-9Ka9l{margin-inline-start:var(--spacing-12)}.modal-header_overlayHeader-9Ka9l .modal-header_title-9Ka9l{font-family:var(--font-display-body-font-family);font-size:var(--font-display-body-semibold-font-size);font-weight:var(--font-display-body-semibold-font-weight);letter-spacing:var(--font-display-body-semibold-letter-spacing);line-height:var(--font-display-body-semibold-line-height);color:var(--color-content-base-primary);text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.modal-header_root-9Ka9l{display:contents}:is(.modal-header_root-9Ka9l:has(.modal-header_button-9Ka9l:first-child:focus-visible) .modal-header_coverButtonStack-9Ka9l:first-child .modal-header_coverButtonBackdrop-9Ka9l,.modal-header_root-9Ka9l:has(.modal-header_button-9Ka9l:nth-child(2):focus-visible) .modal-header_coverButtonStack-9Ka9l:nth-child(2) .modal-header_coverButtonBackdrop-9Ka9l,.modal-header_root-9Ka9l:has(.modal-header_button-9Ka9l:nth-child(3):focus-visible) .modal-header_coverButtonStack-9Ka9l:nth-child(3) .modal-header_coverButtonBackdrop-9Ka9l){outline:none}@supports not (width:1lh){:is(.modal-header_root-9Ka9l:has(.modal-header_button-9Ka9l:first-child:focus-visible) .modal-header_coverButtonStack-9Ka9l:first-child .modal-header_coverButtonBackdrop-9Ka9l,.modal-header_root-9Ka9l:has(.modal-header_button-9Ka9l:nth-child(2):focus-visible) .modal-header_coverButtonStack-9Ka9l:nth-child(2) .modal-header_coverButtonBackdrop-9Ka9l,.modal-header_root-9Ka9l:has(.modal-header_button-9Ka9l:nth-child(3):focus-visible) .modal-header_coverButtonStack-9Ka9l:nth-child(3) .modal-header_coverButtonBackdrop-9Ka9l){box-shadow:0 0 0 var(--spacing-2) var(--color-solid-brand-primary-alfa-68)}}@supports (width:1lh){:is(.modal-header_root-9Ka9l:has(.modal-header_button-9Ka9l:first-child:focus-visible) .modal-header_coverButtonStack-9Ka9l:first-child .modal-header_coverButtonBackdrop-9Ka9l,.modal-header_root-9Ka9l:has(.modal-header_button-9Ka9l:nth-child(2):focus-visible) .modal-header_coverButtonStack-9Ka9l:nth-child(2) .modal-header_coverButtonBackdrop-9Ka9l,.modal-header_root-9Ka9l:has(.modal-header_button-9Ka9l:nth-child(3):focus-visible) .modal-header_coverButtonStack-9Ka9l:nth-child(3) .modal-header_coverButtonBackdrop-9Ka9l){outline:var(--spacing-2) solid var(--color-solid-brand-primary-alfa-68);outline-offset:var(--spacing-2)}}`)),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();