{"version":3,"sources":["../../../src/components/menu/menu.styles.ts","../../../src/components/menu/menu.ts","../../../src/components/menu-item/menu-item.styles.ts","../../../src/components/menu-item/menu-item.ts","../../../src/components/dropdown/dropdown.styles.ts","../../../src/components/dropdown/dropdown.ts","../../../src/components/message-bar/message-bar.styles.ts","../../../src/components/message-bar/message-bar.ts","../../../src/components/visually-hidden/visually-hidden.styles.ts","../../../src/components/visually-hidden/visually-hidden.ts","../../../src/utilities/scroll.ts","../../../src/components/fly-in-panel/fly-in-panel.styles.ts","../../../src/components/fly-in-panel/fly-in-panel.ts","../../../src/components/search-box/search-box.styles.ts","../../../src/components/search-box/search-box.ts","../../../src/components/command-bar/command-bar.styles.ts","../../../src/components/command-bar/command-bar.ts"],"names":["Canvas","CanvasText","usesArrowKeys","expandedItem","focusIndex","isNestedMenu","this","parentElement","HTMLElement","getAttribute","startsWith","hasAttribute","handleMenuKeyDown","e","defaultPrevented","menuItems","key","setFocus","preventDefault","length","handleFocusOut","contains","relatedTarget","collapseExpandedItem","setAttribute","handleItemFocus","target","indexOf","handleExpandedChanged","expanded","removeItemListeners","forEach","removeEventListener","handleSlotChange","isConnected","setItems","removeAttribute","domChildren","filter","isMenuItemElement","reduce","r","querySelector","quickNav","addEventListener","startColumnCount","handleChange","role","checked","includes","classList","super","connectedCallback","setTimeout","disconnectedCallback","Array","from","children","focus","styles","reactEvents","onHeReady","CustomEvent","ButtonFace","ButtonText","Highlight","HighlightText","GrayText","hasSlotController","hasSubmenu","disabled","submenuFixedPlacement","handleMenuItemKeyDown","click","expandAndFocus","handleMenuItemClick","async","invoke","handleMouseOver","handleMouseOut","i","findRootNode","activeElement","updateComplete","submenu","handleSubmenuSlotChange","slottedMenus","handleStartSlotChange","_role","href","navTo","navTarget","setRole","emit","bubbles","toString","setAriaChecked","emitChange","firstUpdated","isLink","link","dir","test","current","scope","tag","onHeChange","onHeExpandedChange","slot","selector","flatten","attribute","reflect","t","type","Boolean","waitUntilFirstUpdate","scopedEventName","baseName","position","fixedPlacement","handleMenuDefaultSlotChange","items","querySelectorAll","boundHandleMenuItemKeyDown","boundHandleKeyDown","handleKeyDown","bind","handlePageClick","composedPath","open","requestClose","handleDropdownChange","handleClick","triggerIsDisabled","setTriggerAttribute","trigger","menu","id","name","assignedElements","setAriaLabel","removeMenuListener","attachMenuListener","menuDefaultSlot","shadowRoot","document","emitAfterShow","emitAfterHide","ariaDisabled","stopPropagation","KeyboardEvent","shiftKey","emitRequestClose","menuWrapper","hide","dropdown","handleTriggerSlotChange","viewportElement","content","handlePopupTransition","handleDefaultSlotChange","onHeDropdownShow","onHeDropdownAfterShow","onHeDropdownHide","onHeDropdownAfterHide","onHeDropdownRequestClose","onHeShow","onHeAfterShow","onHeHide","onHeAfterHide","onHeRequestClose","opacity","transform","close","closeTimeout","direction","transitionSpeed","noCloseButton","duration","appearance","iconName","multiline","visible","_direction","getIconName","setMultiline","toggle","initResizeObserver","startDuration","then","resizeObserver","unobserve","disconnect","clearTimeout","window","expandable","messageContainer","offsetWidth","clientHeight","messageContent","ResizeObserver","observe","originalTrigger","show","Promise","resolve","base","keyFrames","easing","toggleExpand","localize","term","onHeMessageBarShow","onHeMessageBarAfterShow","onHeMessageBarHide","onHeMessageBarAfterHide","Number","Set","createElement","add","body","delete","size","remove","textContent","head","append","heading","placement","contained","noHeader","hasPreventScroll","handleResize","nonStickyHeader","_placement","modal","wrapper","hidden","panel","deactivate","activate","initialFocus","hasUpdated","emitScopedEvent","cancelable","getAutofocus","preventScroll","actionButtons","closeButton","footer","header","String","fromCharCode","onHeFlyInShow","onHeFlyInAfterShow","onHeFlyInHide","onHeFlyInAfterHide","onHeFlyInInitialFocus","onHeFlyInRequestClose","onHeInitialFocus","formSubmitController","placeholder","value","_value","invalid","input","checkValidity","requestUpdate","select","setSelectionRange","setRangeText","emitInput","metaKey","ctrlKey","altKey","submit","label","helpText","readonly","hadFocus","hideLabel","requiredTemplate","hasFocus","required","minlength","maxlength","autocapitalize","autocomplete","autocorrect","autofocus","spellcheck","pattern","enterkeyhint","inputmode","handleInput","handleInvalid","handleClearClick","errorTextTemplate","onHeBlur","onHeClear","onHeFocus","onHeInput","onHeSearch","hasOverflow","overflowItems","searchDialogOpen","searchDialogFull","overflowSet","Map","isOverflowing","actions","clientWidth","maxEndWidth","lastWidth","actionsPosition","push","tagName","toLowerCase","hostElement","text","innerText","icons","parseSlottedIcons","subMenuItems","parseOverFlowItem","map","parseDropdown","reverse","detail","overflowedElements","actionElements","end","find","set","emitOverflowStatus","generateOverflowMenu","hideSearchOverlay","overFlowTemplate","showSearchOverlay","searchTemplate","onHeOverflow","o"],"mappings":"iVAIO,EAAQ,ghCAGT,IA+Bc,IAAaA,OAClB,IAAaC,WACF,IAAaA,YChBhC,gBAAmB,IAAnB,kCAMK,KAAAC,eAAgB,EAClB,KAAAC,aAAgC,KAChC,KAAAC,YAAsB,EAgCb,KAAAC,aAAe,KAhElC,MAiEI,OACyB,OAAvBC,KAAKC,eACLD,KAAKC,yBAAyBC,eAC7B,SAAAF,KAAKC,cAAcE,aAAa,cAAhC,IAAyCC,WAAW,cACnDJ,KAAKC,cAAcI,aAAa,eAChC,IAkBC,KAAAC,kBAAqBC,IAC1B,IAAIA,EAAEC,uBAAuC,IAAnBR,KAAKS,UAG/B,OAAQF,EAAEG,KAAA,IACH,YAIH,OAFAV,KAAKW,SAASX,KAAKF,WAAa,EAAG,QACnCS,EAAEK,iBACF,IACG,UAIH,OAFAZ,KAAKW,SAASX,KAAKF,WAAa,GAAI,QACpCS,EAAEK,iBACF,IACG,MAIH,OAFAZ,KAAKW,SAASX,KAAKS,UAAUI,OAAS,GAAI,QAC1CN,EAAEK,iBACF,IACG,OAIH,OAFAZ,KAAKW,SAAS,EAAG,QACjBJ,EAAEK,iBACF,QAIA,OAAO,IAKL,KAAAE,eAAkBP,IACxB,IAAKP,KAAKe,SAASR,EAAES,qBAAgD,IAAnBhB,KAAKS,UAAyB,CAC9ET,KAAKiB,uBAEL,IAAM,EAAqB,EAE3BjB,KAAKS,UAAUT,KAAKF,YAAYoB,aAAa,WAAY,MAEzDlB,KAAKS,UAAU,GAAYS,aAAa,WAAY,KAEpDlB,KAAKF,WAAa,IAId,KAAAqB,gBAAmBZ,IACzB,IAAM,EAA0BA,EAAEa,YAEX,IAAnBpB,KAAKS,WAA2B,IAAeT,KAAKS,UAAUT,KAAKF,cACrEE,KAAKS,UAAUT,KAAKF,YAAYoB,aAAa,WAAY,MACzDlB,KAAKF,WAAaE,KAAKS,UAAUY,QAAQ,GACzC,EAAWH,aAAa,WAAY,OAIhC,KAAAI,sBAAyBf,IAC/B,GACEA,EAAEC,kBACW,OAAbD,EAAEa,aACiB,IAAnBpB,KAAKS,WACLT,KAAKS,UAAUY,QAAQd,EAAEa,QAAyB,EAElD,OAGFb,EAAEK,iBACF,IAAM,EAAwBL,EAAEa,OAGN,OAAtBpB,KAAKH,cAAyB,IAAgBG,KAAKH,eAAyC,IAAzB,EAAY0B,SAK/E,EAAYA,WACY,OAAtBvB,KAAKH,cAAyBG,KAAKH,eAAiB,IACtDG,KAAKH,aAAa0B,UAAW,GAE/BvB,KAAKS,UAAUT,KAAKF,YAAYoB,aAAa,WAAY,MACzDlB,KAAKH,aAAe,EACpBG,KAAKF,WAAaE,KAAKS,UAAUY,QAAQ,GACzC,EAAYH,aAAa,WAAY,MAXrClB,KAAKH,aAAe,MAehB,KAAA2B,oBAAsB,UACL,IAAnBxB,KAAKS,WACPT,KAAKS,UAAUgB,QAAS,IACtB,EAAKC,oBAAoB,qBAAsB1B,KAAKsB,uBACpD,EAAKI,oBAAoB,QAAS1B,KAAKmB,oBAKrC,KAAAQ,iBAAmB,KAIrB3B,KAAK4B,kBAAkC,IAAnB5B,KAAKS,WAC3BT,KAAK6B,WAGH7B,KAAKD,eACPC,KAAKkB,aAAa,OAAQ,WACa,YAA9BlB,KAAKG,aAAa,SAC3BH,KAAK8B,gBAAgB,SAKlB,KAAAD,SAAW,KAChB,IAAM,EAAsB7B,KAAK+B,cAEjC/B,KAAKwB,sBACLxB,KAAKS,UAAY,EAEjB,IAAM,EAAYT,KAAKS,UAAUuB,OAAOhC,KAAKiC,mBAGzC,EAAUpB,SACZb,KAAKF,WAAa,GAuBpB,IAAM,EAA8B,EAAUoC,OAAO,CAAC,EAAK,KACzD,IAAM,EArBR,SAAuB,GAErB,IAAMC,EAAmC,SAA5B,EAAGhC,aAAa,QAAqB,WAAa,EAAGA,aAAa,QACzE,EAAY,EAAGiC,cAAc,gBAEnC,OAAK,EAAgBC,UAAqB,kBAATF,EACV,OAAd,EAAqB,EAAI,EAGrB,aAATA,GAAqC,OAAd,GAEP,aAATA,GAAqC,OAAd,EADzB,EAGW,aAATA,GAAqC,OAAd,EACzB,EAEA,EAKY,CAAc,GAEnC,OAAO,EAAM,EAAe,EAAM,GACjC,GAEH,EAAUV,QAAQ,CAAC,EAAmB,KACpC,EAAKP,aAAa,WAAsB,IAAV,EAAc,IAAM,MAClD,EAAKoB,iBAAiB,qBAAsBtC,KAAKsB,uBACjD,EAAKgB,iBAAiB,QAAStC,KAAKmB,iBAEhC,aAAgB,IAClB,EAAKoB,iBAAmB,MAMtB,KAAAC,aAAgBjC,IACtB,QAAuB,IAAnBP,KAAKS,UACP,OAEF,IAAM,EAA4BF,EAAEa,OAC9B,EAA0BpB,KAAKS,UAAUY,QAAQ,GAEvD,IAAyB,IAArB,GAIyB,kBAAzB,EAAgBoB,OAAwD,IAA5B,EAAgBC,QAAkB,CAChF,IAAK,IAAI,EAAI,EAAkB,EAAG,GAAK,IAAK,EAAG,CAC7C,IAAM,EAAgB1C,KAAKS,UAAU,GAC/B,EAAsB,EAAKN,aAAa,QAI9C,GAHa,kBAAT,IACD,EAAkBuC,SAAU,GAElB,cAAT,EACF,MAGJ,IAAM,EAAmB1C,KAAKS,UAAUI,OAAS,EACjD,IAAK,IAAI,EAAI,EAAkB,EAAG,GAAK,IAAY,EAAG,CACpD,IAAM,EAAgBb,KAAKS,UAAU,GAC/B,EAAsB,EAAKN,aAAa,QAI9C,GAHa,kBAAT,IACD,EAAkBuC,SAAU,GAElB,cAAT,EACF,SAYA,KAAAT,kBAAqB1B,GAEzBA,aAAcL,cACb,CAAC,WAAY,mBAAoB,iBAAiByC,SAASpC,EAAGJ,aAAa,UAC1EI,EAAGqC,UAAU7B,SAAS,iBAlQ5B,oBACE8B,MAAMC,oBAEN9C,KAAKkB,aAAa,OAAQ,QAE1B6B,WAAW,KAGT/C,KAAK6B,aAGP7B,KAAKsC,iBAAiB,YAAatC,KAAKwC,cACxCxC,KAAKsC,iBAAiB,UAAWtC,KAAKM,mBACtCN,KAAKsC,iBAAiB,WAAYtC,KAAKc,gBAGzC,uBACE+B,MAAMG,uBACNhD,KAAKwB,sBACLxB,KAAKS,eAAY,EACjBT,KAAK0B,oBAAoB,YAAa1B,KAAKwC,cAC3CxC,KAAK0B,oBAAoB,UAAW1B,KAAKM,mBACzCN,KAAK0B,oBAAoB,WAAY1B,KAAKc,gBAc5C,QACEd,KAAKW,SAAS,EAAG,GAInB,uBAC4B,OAAtBX,KAAKH,eACPG,KAAKH,aAAa0B,UAAW,EAC7BvB,KAAKH,aAAe,MA6MhB,cACN,OAAOoD,MAAMC,KAAKlD,KAAKmD,UAAUnB,OAAO,IAAU,EAAM3B,aAAa,WAY/D,SAAS,EAAoB,GACnC,QAAuB,IAAnBL,KAAKS,UAIT,KAAO,GAAc,GAAK,EAAaT,KAAKS,UAAUI,QAAQ,CAC5D,IAAM,EAAiBb,KAAKS,UAAU,GAEtC,GAAIT,KAAKiC,kBAAkB,GAAQ,CAE7BjC,KAAKF,YAAc,GAAKE,KAAKS,UAAUI,QAAUb,KAAKF,WAAa,GACrEE,KAAKS,UAAUT,KAAKF,YAAYoB,aAAa,WAAY,MAI3DlB,KAAKF,WAAa,EAGlB,EAAMoB,aAAa,WAAY,KAG/B,EAAMkC,QAEN,MAGF,GAAc,GAIR,SACR,OAAO,kEAAyBpD,KAAK2B,oBAnThC,EAAA0B,OAAS,CAAC,IAAiB,GAC3B,EAAAC,YAAc,CACnBC,UAAW,IAAIC,YAAY,aAU7B,aADC,eACD,uBA2SF,IAAO,EAxTA,eADN,YAAU,SACJ,GCrBA,EAAQ,y0QA6RW,IAAaC,WACxB,IAAaC,WACN,IAAaA,WAIpB,IAAaA,WAUF,IAAaC,UACxB,IAAaC,cAMF,IAAaD,UACjB,IAAaA,UACpB,IAAaC,cAI+B,IAAaF,WAMpD,IAAaC,UAClB,IAAaC,cAMR,IAAalE,OAClB,IAAamE,SAKN,IAAaH,WAMb,IAAaE,cAKf,IAAaA,cAMlB,IAAaA,eC1SrB,gBAAuB,IAAvB,kCAQY,KAAAE,kBAAoB,IAAI,IAAkB9D,KAAM,YAAa,QAAS,OACtE,KAAA+D,YAAsB,EAkDK,KAAAC,UAAoB,EAGpB,KAAAzC,UAAoB,EAGnC,KAAAkB,KAAqB,WAOlD,KAAAwB,uBAAiC,EAIjC,KAAA1B,iBAAwC,EAIxC,KAAAF,UAAoB,EA0IZ,KAAA6B,sBAAyB3D,IAC/B,GAAIA,EAAEC,iBACJ,OAAO,EAGT,OAAQD,EAAEG,KAAA,IACH,YACA,IACH,OAAAV,KAAKmE,QACL5D,EAAEK,kBACK,MAEJ,aAEH,OAAAZ,KAAKoE,iBACL7D,EAAEK,kBACK,MAEJ,YAEH,GAAIZ,KAAKuB,SACP,OAAAvB,KAAKuB,UAAW,EAChBvB,KAAKoD,QACL7C,EAAEK,kBACK,EAIb,OAAO,GAGD,KAAAyD,oBAAsBC,UACxB/D,EAAEC,mBAAoBR,KAAKgE,WAI/BhE,KAAKuE,UAEE,GAGD,KAAAC,gBAAmBjE,IACrBP,KAAKgE,WAAahE,KAAK+D,YAAc/D,KAAKuB,WAI9CvB,KAAKuB,UAAW,IAET,GAGD,KAAAkD,eAAkBlE,IApU5B,IAAAmE,EAqUI,OACG1E,KAAKuB,UACNvB,KAAKe,SAAS,SAAAf,KAAK2E,aAAa3E,YAAlB,IAAyB4E,gBACtCrE,EAAEa,SAAWpB,MAAQA,KAAKe,SAASf,KAAKoC,cAAc,aAKzDpC,KAAKuB,UAAW,IAET,GAGD,KAAA6C,eAAiBE,WAClBtE,KAAK+D,aAIV/D,KAAKuB,UAAW,QAEVvB,KAAK6E,eACV7E,KAAK8E,QAAwB1B,QAC9BpD,KAAKkB,aAAa,WAAY,QAGxB,KAAA6D,wBAA0B,KAChC/E,KAAK8E,QAAU9E,KAAKgF,aAAa,GAAKhF,KAAKgF,aAAa,QAAK,GAGvD,KAAAC,sBAAwB,KAE1BjF,KAAKC,yBAAyB,GAAMD,KAAKC,cAAc4B,YA3RjDqD,YACV,MAAqC,SAA9BlF,KAAKG,aAAa,QAAqB,WAAaH,KAAKyC,KAAA,aAIhE,IAAM,IAAczC,KAAKmF,OAASnF,KAAK+D,aAAe/D,KAAKgE,SAG3D,SAAI,IAAahE,KAAKqC,UAA2B,kBAAfrC,KAAKkF,QAEhC,GAA4B,aAAflF,KAAKkF,MAwD3B,oBACMlF,KAAKoF,QAAOpF,KAAKmF,KAAOnF,KAAKoF,OAKnC,wBACMpF,KAAKqF,YAAWrF,KAAKoB,OAASpB,KAAKqF,WAKzC,cACErF,KAAKsF,UAKP,kBACEtF,KAAKgE,SAAWhE,KAAKkB,aAAa,gBAAiB,QAAUlB,KAAK8B,gBAAgB,iBAKpF,kBACM9B,KAAK+D,YACP/D,KAAKuF,KAAK,qBAAsB,CAAEC,SAAS,IAO/C,kBACExF,KAAK+D,WACD/D,KAAKkB,aAAa,gBAAiBlB,KAAKuB,SAASkE,YACjDzF,KAAK8B,gBAAgB,iBAK3B,cACE9B,KAAKsF,UACLtF,KAAK0F,iBAGD1F,KAAKC,yBAAyB,GAAMD,KAAKC,cAAc4B,WAK7D,iBACE7B,KAAK0F,iBACL1F,KAAK2F,aAMP,iBACE3F,KAAK+D,aAAe/D,KAAK8E,SAA0B,aAAf9E,KAAKkF,MACzClF,KAAK+D,WAAa/D,KAAKkB,aAAa,gBAAiB,QAAUlB,KAAK8B,gBAAgB,iBAKtF,kBACE9B,KAAKsF,UAGP,oBACEzC,MAAMC,oBACN9C,KAAKsC,iBAAiB,UAAWtC,KAAKkE,uBACtClE,KAAKsC,iBAAiB,QAAStC,KAAKqE,qBACpCrE,KAAKsC,iBAAiB,YAAatC,KAAKwE,iBACxCxE,KAAKsC,iBAAiB,WAAYtC,KAAKyE,gBAGzC,uBACE5B,MAAMG,uBACNhD,KAAK0B,oBAAoB,UAAW1B,KAAKkE,uBACzClE,KAAK0B,oBAAoB,QAAS1B,KAAKqE,qBACvCrE,KAAK0B,oBAAoB,YAAa1B,KAAKwE,iBAC3CxE,KAAK0B,oBAAoB,WAAY1B,KAAKyE,gBAC1CzE,KAAK8E,aAAU,EAGjB,eACEjC,MAAM+C,eACN5F,KAAKsF,UACLtF,KAAK0F,iBAAA,cArOT,MAyOQ1F,KAAK6F,SAAW7F,KAAKgE,SAAW,eAAMhE,KAAK8F,OAAX,EAAkB3B,QACjDtB,MAAMsB,QAGL,iBACQ,kBAAdnE,KAAKyC,MAA0C,qBAAdzC,KAAKyC,KAClCzC,KAAKkB,aAAa,kBAAmBlB,KAAK0C,SAAS+C,YACnDzF,KAAK8B,gBAAgB,gBAGnB,UACN9B,KAAKkB,aAAa,OAAQlB,KAAK6F,OAAS,OAAS7F,KAAKqC,SAAW,gBAAkBrC,KAAKkF,OAAA,eAIxF,IAAIlF,KAAKgE,SAIT,OAAQhE,KAAKkF,OAAA,IACN,mBACHlF,KAAK0C,SAAW1C,KAAK0C,QACrB,UAEG,WACC1C,KAAK+D,WACP/D,KAAKoE,iBAELpE,KAAK2F,aAEP,UAEG,gBACE3F,KAAK0C,UACR1C,KAAK0C,SAAU,IA4Ff,aACN1C,KAAKuF,KAAK,aAGF,SACR,IAAM,EAAMvF,KAAK6F,OAAS,uCAAa,0CAEjC,EAAW,8jBACZ,EACM,YAAU7F,KAAK+D,WAAa,cAAW,GAEtC,YAAS,CACf,aAAa,EACb,sBAAuB/D,KAAKgE,SAC5B,sBAAuBhE,KAAKuB,SAAA,6BACNvB,KAAKuC,oBAAqB,EAChD,sBAAuBvC,KAAKqC,SAAA,sBACbrC,KAAK+F,OAAQ,EAC5B,yBAA0B/F,KAAK8D,kBAAkBkC,KAAK,aACtD,uBAAwBhG,KAAK8D,kBAAkBkC,KAAK,SACpD,qBAAsBhG,KAAK8D,kBAAkBkC,KAAK,OAClD,yBAA0BhG,KAAK+D,WAC/B,kBAAmB/D,KAAK6F,OACxB,qBAAsB7F,KAAK6F,QAAU7F,KAAKiG,UAErC,YAAUjG,KAAK6F,OAAS,gBAAa,GAC7B,YAAU7F,KAAK6F,QAAU7F,KAAKiG,QAAU,YAAS,GACzD,YAAUjG,KAAK6F,OAAS7F,KAAKmF,UAAO,GAClC,YAAUnF,KAAK6F,OAAS7F,KAAKoB,YAAS,GACpC,YAAUpB,KAAK6F,OAAS,UAAO,GAExC,YACc,qBAAd7F,KAAKyC,KACL,IAAM,0aAICzC,KAAKkG,MAAMC,IAAI,QAIbnG,KAAKkG,MAAMC,IAAI,UAMxB,YACc,kBAAdnG,KAAKyC,OAA6BzC,KAAKqC,SACvC,IAAM,2WAW2BrC,KAAKiF,sBAQtC,YACAjF,KAAK+D,WACL,IAAM,whBAIK/D,KAAKkG,MAAMC,IAAI,QAIbnG,KAAKkG,MAAMC,IAAI,UAM5B,GAGA,EAAc,iFAAwCnG,KAAK+E,yBAEjE,OAAO,sDACH,YACA/E,KAAK+D,WACL,IAAM,kYACD/D,KAAKkG,MAAMC,IAAI,SACNnG,KAAKuB,SACU,QAAbvB,KAAK+F,IAAgB,aAAe,cAIrC/F,KAAKiE,sBAAwB,QAAU,WAIhD,EACA,EACAjE,KAAKkG,MAAMC,IAAI,UAErB,IAAM,+FACF,EACY,OA5Zf,EAAA9C,OAAS,CAAC,IAAiB,GAC3B,EAAAC,YAAc,CACnBC,UAAW,IAAIC,YAAY,YAC3B4C,WAAY,IAAI5C,YAAY,aAC5B6C,mBAAoB,IAAI7C,YAAY,uBAIrB,aAAhB,eAAgB,4BACA,aAAhB,eAAgB,yBAGT,aADP,YAAsB,CAAE8C,KAAM,UAAWC,SAAU,gBAAiBC,SAAS,KACtE,8BAGA,aADP,YAAW,MACJ,sBAmB2B,aAAlC,YAAS,CAAEC,UAAW,YAAY,uBAMI,aAAtC,YAAS,CAAEA,UAAW,gBAAgB,2BAMV,aAA5B,YAAS,CAAEC,SAAS,KAAQ,sBAMjB,aAAX,eAAWC,EAAA,sBAGgC,aAA3C,YAAS,CAAEC,KAAMC,QAASH,SAAS,KAAQ,yBAGA,aAA3C,YAAS,CAAEE,KAAMC,QAASH,SAAS,KAAQ,0BAGA,aAA3C,YAAS,CAAEE,KAAMC,QAASH,SAAS,KAAQ,0BAGf,aAA5B,YAAS,CAAEA,SAAS,KAAQ,sBAGe,aAA3C,YAAS,CAAEE,KAAMC,QAASH,SAAS,KAAQ,yBAI5C,aADC,YAAS,CAAED,UAAW,0BAA2BG,KAAMC,QAASH,SAAS,KAC1E,uCAIA,aADC,YAAS,CAAED,WAAW,KACvB,kCAIA,aADC,YAAS,CAAEA,WAAW,KACvB,0BAIA,aADC,YAAM,UACP,mCAMA,aADC,YAAM,cACP,uCAMA,aADC,YAAM,OAAQ,CAAEK,sBAAsB,KACvC,6BAMA,aADC,YAAM,aACP,iCAMA,aADC,YAAM,aACP,iCASA,aAFC,YAAM,YACN,YAAM,eACP,iCAQA,aADC,YAAM,OAAQ,CAAEA,sBAAsB,KACvC,6BAUA,aADC,YAAM,UAAW,CAAEA,sBAAsB,KAC1C,gCAQA,aAFC,YAAM,WACN,YAAM,SACP,gCAOA,aADC,YAAM,aACP,iCA8QF,IAAO,EApaA,eADN,YAAU,YAAa,CAAC,IAAM,OACxB,I,+LCnDA,EAAQ,qxDAaT,IAgDoB,IAAanH,WAStB,IAAa+D,YCrC1B,EAAmB,EAGnB,EAAS,EAwCN,gBAAuB,IAAvB,kCAqBK,KAAAqD,gBAAkB,EAASC,SA6BrC,KAAAC,SAAmC,eAOnC,KAAAC,gBAA0B,EA2FhB,KAAAC,4BAA8B7C,gBAChCtE,KAAK6E,eAEX7E,KAAKoH,MAAQ,IAAIpH,KAAKqH,iBAAiB,kBAEvCrH,KAAKoH,MAAM3F,QAAS,IAClB,EAAKa,iBAAiB,UAAWtC,KAAKsH,4BACtC,EAAKrD,uBAAwB,KAIvB,KAAAsD,mBAAqBvH,KAAKwH,cAAcC,KAAKzH,MAC7C,KAAAsH,2BAA6BtH,KAAKkE,sBAAsBuD,KAAKzH,MAc7D,KAAA0H,gBAAmBnH,IACvBA,EAAEoH,eAAehF,SAAS3C,QAAUA,KAAK4H,MAE7C5H,KAAK6H,aAAa,aAsHV,KAAAC,qBAAwBvH,IAvXpC,MAyXI,IAAM,EAAQ,SAAAA,EAAEa,aAAF,IAAuBqB,MAEhC,GAED,EAAKrC,WAAW,aAClBJ,KAAK6H,aAAa,WAkBZ,KAAAE,YAAexH,IACvB,IAAIP,KAAKgI,oBAAqBzH,EAAEC,iBAIhC,KAAkB,IAAdR,KAAK4H,KAEP,YADA5H,KAAK6H,aAAa,WAIpB7H,KAAK4H,MAAO,IA7Qd,oBACE5H,KAAKiI,oBAAoBjI,KAAKkI,QAAU,WAAYlI,KAAK4H,KAAKnC,YAE1DzF,KAAK4H,MAEP5H,KAAKkB,aAAa,WAAY,MAC9B6B,WAAW,KAnJjB,MAoJQ,SAAA/C,KAAKoH,MAAM,KAAX,EAAehE,WAGjBpD,KAAK8B,gBAAgB,YAOzB,gBACO9B,KAAKmI,OAASnI,KAAKkI,UAExBlI,KAAKiI,oBAAoBjI,KAAKkI,QAAS,WAAYlI,KAAK4H,KAAKnC,YAC7DzF,KAAKiI,oBAAoBjI,KAAKkI,QAAS,WAAY,QAK9ClI,KAAKkI,QAAQE,KAChBpI,KAAKkI,QAAQE,GAAK,sBAAL,SAA6B,IAGvCpI,KAAKmI,KAAKC,KACbpI,KAAKmI,KAAKC,GAAK,WAAL,SAAkB,IAGzBpI,KAAKmI,KAAKhI,aAAa,oBAC1BH,KAAKmI,KAAKjH,aAAa,kBAAmBlB,KAAKkI,QAAQE,KAIjD,wBAAwB7H,GApLpC,IAAAmE,EAAA,EAqLI,IAAMiC,EAASpG,EAAEa,OAGjB,GAAoB,YAAhBuF,EAAO0B,KAAoB,OAE/B,IAAM,EAAW1B,EAAO2B,iBAAiB,CAAE9B,SAAS,KAE/C,EAAS3F,SAGd,SAAAb,KAAKkI,UAAL,EAAcxG,oBAAoB,QAAS1B,KAAK+H,aAEhD/H,KAAKkI,QAAU,EAAS,GAGxB,SAAAlI,KAAKkI,UAAL,EAAc5F,iBAAiB,QAAStC,KAAK+H,aAE7C/H,KAAKuI,gBAGG,wBAAwBhI,GAGhC,IAAM,EAAe,EAFJa,OAGdkH,iBAAiB,CAAE9B,SAAS,IAC5BxE,OAAO,GAAkC,SAA5B,EAAG7B,aAAa,SAE5B,EAAaU,QAAU,IAE3Bb,KAAKmI,KAAO,EAAa,GAEzBnI,KAAKwI,qBACLxI,KAAKyI,qBACLzI,KAAKuI,gBAGG,qBAzNZ,UA0NIvI,KAAK0I,gBAAkB,OAAA/B,EAAA,SAAA3G,KAAKmI,WAAL,IAAWQ,iBAAX,EAAAhC,EAAuBvE,cAAc,oBAC5D,SAAApC,KAAK0I,kBAAL,EAAsBpG,iBAAiB,aAActC,KAAKmH,6BAC1DnH,KAAKmH,8BAGG,qBA/NZ,MAgOI,SAAAnH,KAAK0I,kBAAL,EAAsBhH,oBAAoB,aAAc1B,KAAKmH,6BAAA,0BAmB7DtE,MAAMC,oBAEN8F,SAAStG,iBAAiB,QAAStC,KAAK0H,iBACxC1H,KAAKsC,iBAAiB,YAAatC,KAAK8H,sBACxC9H,KAAKsC,iBAAiB,UAAWtC,KAAKuH,0BAEhCvH,KAAK6E,eAEX7E,KAAKiI,oBAAoBjI,KAAKkI,QAAU,WAAYlI,KAAK4H,KAAKnC,YAShE,eACE5C,MAAM+C,eACN5F,KAAKyI,qBAGP,uBACEG,SAASlH,oBAAoB,QAAS1B,KAAK0H,iBAC3C1H,KAAKwI,qBACLxI,KAAK0B,oBAAoB,YAAa1B,KAAK8H,sBAC3C9H,KAAK0B,oBAAoB,UAAW1B,KAAKuH,oBACzC1E,MAAMG,uBAAA,aAKN,IAAIhD,KAAK4H,KAET,OAAA7E,WAAW,IAAO/C,KAAK4H,MAAO,GACvB,YAAa5H,KAAM,MAAN,OAAYA,KAAK+G,gBAAA,4CAGDxG,SAC9BP,KAAK6E,eACX7E,KAAK4H,KAAO5H,KAAK6I,gBAAkB7I,KAAK8I,gBAAA,wBAIxC,GAAoB,MAAhB9I,KAAKkI,QAAiB,OAAO,EAEjC,IAAM,EAAUlI,KAAKkI,QAErB,OAAO,EAAQ7H,aAAa,aAAwC,SAAzB,EAAQ0I,aAG3C,cAAcxI,GAtS1B,QAAAmE,EAAA,EA4SI,GALc,WAAVnE,EAAEG,KAAoBV,KAAK4H,OAC7B5H,KAAK6H,aAAa,YAClBtH,EAAEyI,mBAGChJ,KAAKkI,UAAWlI,KAAKgI,kBAE1B,GAAIhI,KAAK4H,KAEP,OAAQrH,EAAEG,KAAA,IACH,YACH,OAAIH,EAAEa,SAAWpB,KAAKkI,UACtB3H,EAAEK,iBAGF,OAAA+F,EAAA3G,KAAKmI,OAALxB,EAAWvD,SACJ,OAEJ,UACH,OAAI7C,EAAEa,SAAWpB,KAAKkI,UACtB3H,EAAEK,iBAGF,SAAAZ,KAAKmI,OAAL,EAAW7H,kBAAkB,IAAI2I,cAAc,UAAW,CAAEvI,IAAK,UAC1D,OAEJ,WACA,MACH,OAAIH,EAAEa,SAAWpB,KAAKkI,UACtB3H,EAAEK,iBAGF,SAAAZ,KAAKmI,OAAL,EAAW7H,kBAAkB,IAAI2I,cAAc,UAAW,CAAEvI,IAAKH,EAAEG,QAC5D,OAEJ,MACH,OAAIH,EAAE2I,UACA3I,EAAEa,SAAWpB,KAAKkI,SAAWlI,KAAK4H,OACpCrH,EAAEK,iBACFZ,KAAK6H,aAAa,cAEb,GAGJ7H,KAAKmI,MAEV5H,EAAEK,iBAEEL,EAAEa,SAAWpB,KAAKkI,QAEpB,SAAAlI,KAAKmI,OAAL,EAAW/E,SAGXpD,KAAK6H,aAAa,YAClB7H,KAAKkI,QAAQ9E,UAGR,QAbS,UAiBhB,OAAO,OAIX,OAAQ7C,EAAEG,KAAA,IACH,gBACA,UACH,OAAKH,EAAEoH,eAAehF,SAAS3C,KAAKkI,WAEpC3H,EAAEK,iBACFZ,KAAK4H,MAAO,GACL,GAJ8C,QAOrD,OAAO,GAgBL,sBAAsBrH,GAlYlC,MAoYI,OAAe,UAAVA,EAAEG,KAA6B,MAAVH,EAAEG,OAAiBV,KAAK4H,OAAM,OAAAjB,EAAA3G,KAAKkI,UAALvB,EAAcvD,UAC/D,qBAGoB,GAxY/B,MAyYyB,QAAApD,KAAKmJ,iBAAiB,EAAQnJ,KAAKoJ,eAGxD,SAAApJ,KAAKkI,UAAL,EAAc9E,SACP,GAgBC,oBACR7C,EACA,EACA,GAEA,IAAKA,EAAS,OAEd,IAAM,EAAOA,EAAQqC,UAAU7B,SAAS,gBAAkB,iBAAoB,GAC9ER,EAAQW,aAAa,EAAM,GAGnB,uBACRX,EACA,GAEA,IAAKA,EAAS,OAEd,IAAM,EAAOA,EAAQqC,UAAU7B,SAAS,gBAAkB,iBAAoB,GAC9ER,EAAQuB,gBAAgB,GAGhB,eAAevB,IAClBP,KAAK4H,MAAQ5H,KAAKmI,MAEvBpF,WAAW,KArbf,QAsbU/C,KAAKe,SAAS,OAAA4F,EAAA3G,KAAK2E,aAAa3E,YAAlB,EAAA2G,EAAyB/B,iBAC3C,SAAA5E,KAAKkI,UAAL,EAAc9E,QACdpD,KAAKqJ,UAIT,SACE,OAAO,+pBACQ,YAAS,CACpBC,UAAU,EACV,iBAAkBtJ,KAAK4H,OAIP5H,KAAKuJ,wBAIlBvJ,KAAKkG,MAAMC,IAAI,SAOJnG,KAAKiH,SACNjH,KAAKkH,eAAiB,QAAU,WAKjClH,KAAK4H,KACE5H,KAAKwJ,gBACNxJ,KAAKwJ,gBACDxJ,KAAKwJ,gBAGvBxJ,KAAKyJ,UACLzJ,KAAKkG,MAAMC,IAAI,UAKf,UACR,OAAO,2RAEcnG,KAAK0J,sBACF1J,KAAK0J,sBAGb1J,KAAKc,eACHd,KAAK4H,KAAO,QAAU,OAEhB5H,KAAK2J,yBAK/B,yBAAyB,GACvB,SACE3J,KAAK4H,MACL,GACiD,kBAAhD,EAAuBzH,aAAa,UACpC,iBAAqBuC,YApanB,EAAAW,OAAS,CAAC,IAAiB,GAC3B,EAAAC,YAAc,CACnBC,UAAW,IAAIC,YAAY,YAC3BoG,iBAAkB,IAAIpG,YAAY,oBAClCqG,sBAAuB,IAAIrG,YAAY,0BACvCsG,iBAAkB,IAAItG,YAAY,oBAClCuG,sBAAuB,IAAIvG,YAAY,0BACvCwG,yBAA0B,IAAIxG,YAAuC,6BAErEyG,SAAU,IAAIzG,YAAY,WAE1B0G,cAAe,IAAI1G,YAAY,iBAE/B2G,SAAU,IAAI3G,YAAY,WAE1B4G,cAAe,IAAI5G,YAAY,iBAE/B6G,iBAAkB,IAAI7G,YAAuC,qBAMrD,aADT,eACS,yBAGA,aADT,eACS,sBAGA,aADT,eACS,iCAGA,aADT,eACS,iCAIH,aADN,eACM,uBAGG,aADT,YAAM,cACG,uBAGA,aADT,YAAM,kBACG,6BAOV,aADC,YAAS,CAAEkD,SAAS,KACrB,0BAOA,aADC,YAAS,CAAEA,SAAS,EAAMD,UAAW,kBAAmBG,KAAMC,WAC/D,gCAIA,aADC,YAAM,SACP,mCAiBA,aAFC,YAAM,WACN,YAAM,SACP,8BA4VF,IAAO,EA1aA,eADN,YAAU,WAAY,CAAC,OACjB,I,2MC7EA,EAAQ,qzIAgKW,IAAalH,WAIxB,IAAaA,YC1JtB,EACG,CACLiI,KAAM,CACJ,CAAE0C,QAAS,EAAGC,UAAW,oBACzB,CAAED,QAAS,EAAGC,UAAW,kBAE3BC,MAAO,CACL,CAAEF,QAAS,EAAGC,UAAW,iBACzB,CAAED,QAAS,EAAGC,UAAW,sBARzB,EAWE,CACJ3C,KAAM,CACJ,CAAE0C,QAAS,EAAGC,UAAW,qBACzB,CAAED,QAAS,EAAGC,UAAW,kBAE3BC,MAAO,CACL,CAAEF,QAAS,EAAGC,UAAW,iBACzB,CAAED,QAAS,EAAGC,UAAW,uBAuCxB,gBAAyB,IAAzB,kCAmBG,KAAAE,aAA8B,KAI9B,KAAA3G,kBAAoB,IAAI,IAAkB9D,KAAM,YAAa,UAAW,QAEtE,KAAA+G,gBAAkB,EAAWC,SAQ3B,KAAA0D,UAAgD,MAgBD,KAAAC,gBAAkB,IAGjC,KAAApJ,UAAoB,EAGU,KAAAqJ,eAAyB,EAMvE,KAAAC,SAAW,IAG3B,KAAAC,WAAkE,OAoBtE,KAAAC,SAAmB,OAGnB,KAAAC,WAAqB,EAGrB,KAAAC,SAAmB,EArDfC,iBACV,OAAQlL,KAAK0K,WAAA,IACN,QACH,MAAoB,QAAb1K,KAAK+F,IAAgB,QAAU,WACnC,MACH,MAAoB,QAAb/F,KAAK+F,IAAgB,OAAS,gBAErC,OAAO/F,KAAK0K,WA2BlB,uBAAuB,EAAkB,GACnC,IAAa,IACf1K,KAAK+K,SAAW/K,KAAKmL,YAAY,IAMrC,yBACEnL,KAAKoL,eAcP,sBACEpL,KAAK4C,UAAUyI,OAAO,aAAcrL,KAAKiL,SAG3C,oBACEpI,MAAMC,oBACN9C,KAAKsL,qBAGP,eACEzI,MAAM+C,eAEF5F,KAAK4H,MACP5H,KAAKiL,SAAU,EACfjL,KAAKuL,gBACLvL,KAAK6E,eAAe2G,KAAK,IAAMxL,KAAKoL,iBAEpCpL,KAAKiL,SAAU,EAInB,uBACEjL,KAAKyL,eAAeC,UAAU1L,MAC9BA,KAAKyL,eAAeE,aACpB9I,MAAMG,uBAAA,gBAIN,OAAQhD,KAAKkL,YAAA,IACN,OACH,OAAO,EAAW,QAElB,OAAO,GAIL,gBAEFlL,KAAKyK,cACPmB,aAAa5L,KAAKyK,cAGhBzK,KAAK6K,SAAW,GAAK7K,KAAK6K,SAAW,MACvC7K,KAAKyK,aAAeoB,OAAO9I,WAAW,KAChC/C,KAAK4H,MACP5H,KAAKqJ,QAENrJ,KAAK6K,WAIJ,mBACN7K,KAAKoL,eAGC,eA3NV,YA4NI,GAAKpL,KAAK4H,KAEV,QAAwB,IAApB5H,KAAK8L,WACP9L,KAAKgL,UAAYhL,KAAK8L,gBAAA,GACb9L,KAAKuB,SACdvB,KAAKgL,WAAY,MACZ,CACL,IAAM,GAAiB,SAAAhL,KAAK+L,uBAAL,IAAuBC,cAAe,EAC7D,GAAuB,IAAnB,EAAsB,OAE1B,IAAM,GAAkB,SAAAhM,KAAK+L,uBAAL,IAAuBE,eAAgB,EAC/D,GAAwB,IAApB,EAAuB,OAE3B,IAEM,IAFe,SAAAjM,KAAKkM,qBAAL,IAAqBF,cAAe,IAEvB,EAC5B,IAFgB,SAAAhM,KAAKkM,qBAAL,IAAqBD,eAAgB,GAEzB,EAAkB,EAEpDjM,KAAKgL,UAAY,GAAa,GAI1B,qBACNhL,KAAKyL,eAAiB,IAAIU,eAAe,IAAMnM,KAAKoL,gBACpDpL,KAAKyL,eAAeW,QAAQpM,MAIvB,eAxPT,MAyPIA,KAAKuB,UAAYvB,KAAKuB,SAElBvB,KAAKuB,WACP,SAAAvB,KAAKkM,iBAAL,EAAqB9I,SAIjB,YAAY,GAClB,OAAQ,OACD,UACH,MAAO,gBACJ,UACH,MAAO,cACJ,QACH,MAAO,iBACJ,iBAEH,MAAO,qBA1Qf,QA+QI,OAAApD,KAAKqM,gBAAkB,SAAArM,KAAK2E,aAAa3E,YAAlB,IAAyB4E,oBAC1C/B,MAAMyJ,OACZ,SAAAtM,KAAKkM,iBAAL,EAAqB9I,QACdmJ,QAAQC,UAAA,aAIf,GAAKxM,KAAK4H,KAIV,OAAI5H,KAAKyK,cACPmB,aAAa5L,KAAKyK,cAGpBzK,KAAKuB,UAAW,EAGZvB,KAAKqM,iBAAyD,mBAA/BrM,KAAKqM,gBAAgBjJ,OACtDpD,KAAKqM,gBAAgBjJ,QAGhBP,MAAMwG,OAAA,oBAMRrJ,KAAKyM,OAINzM,KAAK4H,YACD,YAAe5H,KAAKyM,MAC1BzM,KAAKiL,SAAU,QACT,YAAUjL,KAAKyM,KAAMzM,KAAK0M,UAAU9E,KAAM,CAAEiD,SAAU7K,KAAK2K,gBAAiBgC,OAAQ,SAC1F3M,KAAKuL,gBACLvL,KAAK6I,wBAEC,YAAU7I,KAAKyM,KAAMzM,KAAK0M,UAAUlC,MAAO,CAAEK,SAAU7K,KAAK2K,gBAAiBgC,OAAQ,SAC3F3M,KAAKiL,SAAU,EACfjL,KAAKyK,aAAe,KACpBzK,KAAK8I,kBAIT,SACE,OAAO,k3BAKC,YAAS,CACT,eAAe,EACf,oBAAqB9I,KAAK4H,KAC1B,0BAA2B5H,KAAKuB,SAChC,wBAAyBvB,KAAKuB,SAAA,wBACbvB,KAAK8K,cAAe,EACrC,2BAA4B9K,KAAK8D,kBAAkBkC,KAAK,cAE/ChG,KAAKiL,QAKPjL,KAAKkG,MAAMC,IAAI,QAAiBnG,KAAK+K,SAAe/K,KAAKkG,MAAMC,IAAI,QAKlDnG,KAAK2B,iBAIxB3B,KAAKuB,SAAgD,GAArC,kEAEjBvB,KAAKgL,UACD,6cACGhL,KAAKkG,MAAMC,IAAI,UAGJnG,KAAKuB,SACRvB,KAAK4M,aAEX5M,KAAKkG,MAAMC,IAAI,QACTnG,KAAKuB,SAAW,kBAAoB,oBAClCvB,KAAK6M,SAASC,KAAK,aACzB9M,KAAKkG,MAAMC,IAAI,QAClBnG,KAAKkG,MAAMC,IAAI,WAEnB,GAGHnG,KAAK4K,cAWF,GAVA,0VACG5K,KAAKkG,MAAMC,IAAI,UAGPnG,KAAKqJ,KAEXrJ,KAAKkG,MAAMC,IAAI,QAA+BnG,KAAK6M,SAASC,KAAK,iBAChE9M,KAAKkG,MAAMC,IAAI,QACjBnG,KAAKkG,MAAMC,IAAI,WAO3BnG,KAAKuB,SACD,uMAKA,MA3TP,EAAA8B,OAAS,CAAC,IAAiB,GAC3B,EAAAC,YAAc,CACnBC,UAAW,IAAIC,YAAY,YAC3BuJ,mBAAoB,IAAIvJ,YAAY,uBACpCwJ,wBAAyB,IAAIxJ,YAAY,6BACzCyJ,mBAAoB,IAAIzJ,YAAY,uBACpC0J,wBAAyB,IAAI1J,YAAY,6BAEzCyG,SAAU,IAAIzG,YAAY,WAE1B0G,cAAe,IAAI1G,YAAY,iBAE/B2G,SAAU,IAAI3G,YAAY,WAE1B4G,cAAe,IAAI5G,YAAY,kBAKF,aAA9B,YAAM,iBAAwB,sBACmB,aAAjD,YAAM,oCAA2C,kCACM,aAAvD,YAAM,0CAAiD,gCAW5C,aAAX,eAAW,2BAIA,aADX,eACW,4BAY+C,aAA1D,YAAS,CAAEoD,KAAMuG,OAAQ1G,UAAW,sBAAsB,iCAGf,aAA3C,YAAS,CAAEG,KAAMC,QAASH,SAAS,KAAQnG,EAAA,wBAG8B,aAAzE,YAAS,CAAEqG,KAAMC,QAASH,SAAS,EAAMD,UAAW,qBAAqB,+BAM9C,aAA3B,YAAS,CAAEG,KAAMuG,UAAU,0BAGhB,aAAX,eAAW,4BAGgC,aAA3C,YAAS,CAAEvG,KAAMC,QAASH,SAAS,KAAQnG,EAAA,0BAI5C,aADC,YAAM,eACP,wCAQA,aADC,YAAM,eACP,wCAKQ,aADP,eACO,0BAGA,aADP,eACO,2BAGA,aADP,eACO,yBAIR,aADC,YAAM,YACP,qCAsIM,aADL,YAAM,OAAQ,CAAEuG,sBAAsB,KACjC,4BAgGR,IAAO,EApUA,eADN,YAAU,cAAe,CAAC,IAAQ,OAC5B,I,mICnEA,EAAQ,qFAET,KCeC,gBAA6B,IAMlC,SACE,OAAO,qDANF,EAAAzD,OAAS,CAAC,IAAiB,GAC3B,EAAAC,YAAc,CACnBC,UAAW,IAAIC,YAAY,aAQ/B,IAAO,EAXA,eADN,YAAU,oBACJ,I,iCCpBP,wEAAM,EAAc,IAAI4J,IAGlB,EAAQxE,SAASyE,cAAc,SA0B9B,SAAS,EAAkB,GAChC,EAAYC,IAAI,GAChB1E,SAAS2E,KAAK3K,UAAU0K,IAAI,kBAMvB,SAAS,EAAoB,GAClC,EAAYE,OAAO,GAEM,IAArB,EAAYC,MACd7E,SAAS2E,KAAK3K,UAAU8K,OAAO,kBArCnC,EAAMC,YAAc,0DAKpB/E,SAASgF,KAAKC,OAAO,I,2OCLd,EAAQ,01IAqET,IA4HS,IAAalO,WAKR,IAAaD,OACH,IAAaC,WAMjB,IAAaD,QC1LjC,EACG,CACLkI,KAAM,CACJ,CAAE0C,QAAS,EAAGC,UAAW,oBACzB,CAAED,QAAS,EAAGC,UAAW,kBAE3BC,MAAO,CACL,CAAEF,QAAS,EAAGC,UAAW,iBACzB,CAAED,QAAS,EAAGC,UAAW,sBARzB,EAWE,CACJ3C,KAAM,CACJ,CAAE0C,QAAS,EAAGC,UAAW,qBACzB,CAAED,QAAS,EAAGC,UAAW,kBAE3BC,MAAO,CACL,CAAEF,QAAS,EAAGC,UAAW,iBACzB,CAAED,QAAS,EAAGC,UAAW,uBAlBzB,EAqBE,CAAC,CAAEA,UAAW,YAAc,CAAEA,UAAW,eAAiB,CAAEA,UAAW,aA+DxE,gBAAyB,IAgH9B,cACE1H,QAzFM,KAAAiB,kBAAoB,IAAI,IAAkB9D,KAAM,YAAa,UAAW,SAAU,WAChF,KAAA+G,gBAAkB,SAGgB,KAAAa,MAAO,EAGQ,KAAA+C,gBAAkB,IASjE,KAAAmD,QAAU,GAQV,KAAAC,UAAgD,MAmBhB,KAAAC,WAAY,EAKY,KAAAC,UAAW,EAyBvE,KAAAC,kBAA4B,EAC5B,KAAAzC,eAAiB,IAAIU,eAAe,IAAMnM,KAAKmO,gBAEtC,KAAAC,iBAAkB,EA2G3B,KAAA5G,cAAiB,IACL,WAAd,EAAM9G,MACR,EAAMsI,kBACNhJ,KAAK6H,aAAa,cAEb,GAlGPe,SAASyE,cAAc,OAAOjK,MAAM,qBAEhC,OAAApD,KAAKkO,kBAAmB,GACjB,KAjEDG,iBACV,OAAQrO,KAAK+N,WAAA,IACN,QACH,MAAoB,QAAb/N,KAAK+F,IAAgB,QAAU,WACnC,MACH,MAAoB,QAAb/F,KAAK+F,IAAgB,OAAS,gBAErC,OAAO/F,KAAK+N,WAAA,gBA6ChB,OAAQ/N,KAAKqO,YAAA,IACN,OACH,OAAO,EAAW,QAElB,OAAO,GAcb,oBACExL,MAAMC,oBACN9C,KAAKsO,MAAQ,IAAI,IAAMtO,MACvBA,KAAKkB,aAAa,WAAY,MAGhC,eACE2B,MAAM+C,eACN5F,KAAKuO,QAAQC,QAAUxO,KAAK4H,KAC5B5H,KAAKyL,eAAeW,QAAQpM,KAAKyO,OAGnC,uBACE5L,MAAMG,uBACNhD,KAAKsO,MAAMI,aACX,YAAoB1O,MACpBA,KAAKyL,eAAeC,UAAU1L,KAAKyO,OACnCzO,KAAKyL,eAAeE,aAAA,mBAtPxB,IAAAjH,EA4PI,GAAI1E,KAAK4H,KAEP5H,KAAKqM,gBAAkB,SAAArM,KAAK2E,aAAa3E,YAAlB,IAAyB4E,cAChD5E,KAAKsO,MAAMK,WAEN3O,KAAKgO,WACR,YAAkBhO,MAGpBA,KAAKsC,iBAAiB,UAAWtC,KAAKwH,qBAEhCxH,KAAK6E,qBACL,YAAe7E,KAAKuO,SAC1BvO,KAAKuO,QAAQC,QAAS,EAGlBxO,KAAKkO,kBACPlO,KAAK4O,qBAGD,YAAU5O,KAAKyO,MAAOzO,KAAK0M,UAAU9E,KAAM,CAAEiD,SAAU7K,KAAK2K,gBAAiBgC,OAAQ,SACtF3M,KAAKkO,kBACRlO,KAAK4O,eAGP5O,KAAK6I,oBACA,CACL,IAAK7I,KAAK6O,WAAY,OAGtB7O,KAAKsO,MAAMI,mBAEL,YAAU1O,KAAKyO,MAAOzO,KAAK0M,UAAUlC,MAAO,CAAEK,SAAU7K,KAAK2K,gBAAiBgC,OAAQ,SAC5F3M,KAAKuO,QAAQC,QAAS,EAEtB,YAAoBxO,MACpBA,KAAK0B,oBAAoB,UAAW1B,KAAKwH,eAGzC,IAAM,EAAUxH,KAAKqM,gBACjB,GAAoC,mBAAlB,EAAQjJ,OAC5BL,WAAW,IAAM,EAAQK,SAG3BpD,KAAK8I,iBAID,eA5SV,MA6SI,IAAMpE,EAAe1E,KAAK8O,gBAAgB,gBAAiB,CAAEC,YAAY,IAEnE,EAAkB/O,KAAKuF,KAAK,mBAAoB,CAAEwJ,YAAY,IAEhErK,EAAalE,kBAAoB,EAAgBA,kBAErD,SAAAR,KAAKgP,iBAAL,EAAqB5L,MAAM,CAAE6L,eAAe,IAGtC,aAAa,GACnBjP,KAAKmJ,iBAAiB,EAAQnJ,KAAKyO,MAAO,EAAiB,CAAE5D,SAAU7K,KAAK2K,gBAAiBgC,OAAQ,SAe/F,eACgC,OAC/B,KADoCvK,cAAc,gBACrCpC,KAAKkP,cAAc,IAAMlP,KAAKmP,YAO5C,eACN,IAAKnP,KAAKoP,SAAWpP,KAAKqP,OAAQ,OAClC,IAAM,GAAerP,KAAKoP,OAAOnD,cAAgB,IAAMjM,KAAKqP,OAAOpD,cAAgB,GACnFjM,KAAKoO,gBAAkB,EAAwC,GAA1BpO,KAAKyO,MAAMxC,aAGlD,SACE,OAAO,8pBAGK,YAAS,CACf,UAAU,EACV,eAAgBjM,KAAK4H,KACrB,4BAA6B5H,KAAKoO,gBAAA,mBACtBpO,KAAKqO,cAAe,EAChC,oBAAqBrO,KAAKgO,UAC1B,iBAAkBhO,KAAKgO,UACvB,qBAAsBhO,KAAK8D,kBAAkBkC,KAAK,UAClD,sBAAuBhG,KAAK8D,kBAAkBkC,KAAK,aAGA,IAAMhG,KAAK6H,aAAa,WAM7D7H,KAAK4H,KAAO,QAAU,OACvB5H,KAAKiO,SAAWjO,KAAK8N,QAAU,GACzB9N,KAAKiO,SAAgC,GAArB,UAAGjO,KAAKoI,GAAA,UAExCpI,KAAKiO,SAmBJ,qPAAQjO,KAAKkG,MAAMC,IAAI,mBACpBnG,KAAKkG,MAAMC,IAAI,UAAiE,IACjFnG,KAAK6H,aAAa,gBACf7H,KAAKkG,MAAMC,IAAI,QAAgCnG,KAAK6M,SAASC,KAAK,SAAe9M,KAAKkG,MAAMC,IAC/F,QAEEnG,KAAKkG,MAAMC,IAAI,UACjBnG,KAAKkG,MAAMC,IAAI,oBAzBjB,ysBAMuDnG,KAAKoI,GAAA,UAC1BpI,KAAK8N,SAAWwB,OAAOC,aAAa,OAG7DvP,KAAKkG,MAAMC,IAAI,UAA+D,IACrFnG,KAAK6H,aAAa,gBACT7H,KAAKkG,MAAMC,IAAI,QAAgCnG,KAAK6M,SAASC,KACtE,SACM9M,KAAKkG,MAAMC,IAAI,QACbnG,KAAKkG,MAAMC,IAAI,cAlR9B,EAAA9C,OAAS,CAAC,IAAiB,GAC3B,EAAAC,YAAc,CACnBC,UAAW,IAAIC,YAAY,YAC3BgM,cAAe,IAAIhM,YAAY,kBAC/BiM,mBAAoB,IAAIjM,YAAY,wBACpCkM,cAAe,IAAIlM,YAAY,kBAC/BmM,mBAAoB,IAAInM,YAAY,wBACpCoM,sBAAuB,IAAIpM,YAAY,2BACvCqM,sBAAuB,IAAIrM,YAAkC,2BAE7DyG,SAAU,IAAIzG,YAAY,WAE1B0G,cAAe,IAAI1G,YAAY,iBAE/B2G,SAAU,IAAI3G,YAAY,WAE1B4G,cAAe,IAAI5G,YAAY,iBAE/BsM,iBAAkB,IAAItM,YAAY,oBAElC6G,iBAAkB,IAAI7G,YAAkC,qBAOd,aAA3C,YAAS,CAAEoD,KAAMC,QAASH,SAAS,KAAQ,sBAGe,aAA1D,YAAS,CAAEE,KAAMuG,OAAQ1G,UAAW,sBAAsB,iCAG/C,aAAX,eAAW,sBAMA,aAAX,eAAW,yBAQA,aAAX,eAAW,2BAIA,aADX,eACW,4BAegC,aAA3C,YAAS,CAAEG,KAAMC,QAASH,SAAS,KAAQ,2BAKwB,aAAnE,YAAS,CAAED,UAAW,YAAaG,KAAMC,QAASH,SAAS,KAAQ,0BAG5D,aADP,YAAM,mBACC,uBAGA,aADP,YAAM,oBACC,wBAGA,aADP,YAAM,oBACC,wBAGA,aADP,YAAM,qBACC,yBAGA,aADP,YAAM,YACC,yBAGA,aADP,YAAM,mBACC,6BAGA,aADP,YAAsB,CAAEJ,KAAM,UAAWC,SAAU,gBAC5C,+BAOS,aAAhB,eAAgB,iCAGL,aADX,eACW,2BAyCN,aADL,YAAM,SACD,4BA2JR,IAAO,EA3SA,eADN,YAAU,eAAgB,CAAC,IAAQ,IAAM,OACnC,I,oMCzGA,EAAQ,4gHC+CR,gBAAwB,IAgF7B,cACE1D,QAlEe,KAAAkN,qBAAuB,IAAI,IAAqB/P,MAChD,KAAA8D,kBAAoB,IAAI,IAAkB9D,KAAM,YAAa,SACpE,KAAAJ,eAAgB,EAGG,KAAAgH,KAUjB,OAsDL5G,KAAKgQ,cACRhQ,KAAKgQ,YAAchQ,KAAK6M,SAASC,KAAK,WAhBtCmD,YACF,OAAOjQ,KAAKkQ,OAAA,UAGJ,GA1HZ,MA4HI,MADMD,MAAQ,EACTjQ,KAAK6O,aACV7O,KAAKmQ,UAAW,SAAAnQ,KAAKoQ,YAAL,IAAYC,iBAC5BrQ,KAAKsQ,iBAYP,eA1IF,MA2IIzN,MAAM+C,eACN5F,KAAKmQ,UAAW,SAAAnQ,KAAKoQ,YAAL,IAAYC,iBAI9B,SAhJF,MAiJI,SAAArQ,KAAKoQ,QAAL,EAAYG,SAId,kBACE,EACA,GAEA,IADA,yDAAsD,OAxJ1D,MA0JI,SAAAvQ,KAAKoQ,QAAL,EAAYI,kBAAkB,EAAgB,EAAc,GAI9D,aACE,EACA,EACA,GAEA,IADA,yDAAsD,WAlK1D,QAoKI,SAAAxQ,KAAKoQ,QAAL,EAAYK,aAAa,EAAa,EAAO,EAAK,GAE9CzQ,KAAKoQ,OAASpQ,KAAKiQ,SAAU,SAAAjQ,KAAKoQ,YAAL,IAAYH,SAC3CjQ,KAAKiQ,MAAQjQ,KAAKoQ,MAAMH,MACxBjQ,KAAK0Q,YACL1Q,KAAK2F,cAID,eACF3F,KAAKoQ,OAASpQ,KAAKiQ,QAAUjQ,KAAKoQ,MAAMH,QAC1CjQ,KAAKiQ,MAAQjQ,KAAKoQ,MAAMH,MACxBjQ,KAAK2F,cAID,iBAAiBpF,GApL3B,MAqLIP,KAAKiQ,MAAQ,GACbjQ,KAAKuF,KAAK,YACVvF,KAAK0Q,YACL1Q,KAAK2F,aACL3F,KAAKuF,KAAK,aACV,SAAAvF,KAAKoQ,QAAL,EAAYhN,QAEZ7C,EAAMyI,kBAGA,cACNhJ,KAAKiQ,MAAQjQ,KAAKoQ,MAAOH,MACzBjQ,KAAK0Q,YAGC,gBACN1Q,KAAKmQ,SAAU,EAGT,cAAc5P,GACpB,IAAM,EAAcA,EAAMoQ,SAAWpQ,EAAMqQ,SAAWrQ,EAAM2I,UAAY3I,EAAMsQ,OAI5D,UAAdtQ,EAAMG,MAAoB,IAC5BV,KAAK2F,aACL3F,KAAKuF,KAAK,aACVxC,WAAW,KACJxC,EAAMC,kBACTR,KAAK+P,qBAAqBe,YAMlC,SACE,IAAM,EAAe9Q,KAAK8D,kBAAkBkC,KAAK,SAC3C,EAAkBhG,KAAK8D,kBAAkBkC,KAAK,aAC9C,IAAWhG,KAAK+Q,SAAiB,EACjC,IAAc/Q,KAAKgR,YAAoB,EACvC,GAAgBhR,KAAKgE,WAAahE,KAAKiR,WAAmC,iBAAfjR,KAAKiQ,OAAsBjQ,KAAKiQ,MAAOpP,OAAS,GAEjH,OAAO,mtDAGK,YAAS,CACf,gBAAgB,EAChB,0BAA2B,EAC3B,8BAA+B,EAC/B,0BAA2Bb,KAAKmQ,QAChC,gCAAiCnQ,KAAKkR,WAK9B,YAAS,CACf,uBAAuB,EACvB,kBAAmBlR,KAAKmR,YAGZ,EAAW,QAAU,OAEdnR,KAAK+Q,MACxB/Q,KAAKoR,mBAKG,YAAS,CACf,cAAc,EACd,uBAAwBpR,KAAKgE,SAC7B,sBAAuBhE,KAAKqR,SAC5B,qBAAsBrR,KAAKiQ,MAC3B,sBAAuBjQ,KAAKmQ,UAIzBnQ,KAAKkG,MAAMC,IAAI,QACdnG,KAAKkG,MAAMC,IAAI,QAOZ,YAAUnG,KAAKqI,MACVrI,KAAKgE,SACLhE,KAAKiR,UAAYjR,KAAKgE,SACtBhE,KAAKsR,SACH,YAAUtR,KAAKgQ,aACjB,YAAUhQ,KAAKuR,WACf,YAAUvR,KAAKwR,WAClB,YAAKxR,KAAKiQ,MAAOxK,YACT,YAAUzF,KAAKyR,gBACjB,YAAUzR,KAAK0R,cAChB,YAAU1R,KAAK2R,aAChB3R,KAAK4R,UACL,YAAU5R,KAAK6R,YAClB,YAAU7R,KAAK8R,SACV,YAAU9R,KAAK+R,cAClB,YAAU/R,KAAKgS,WACXhS,KAAKgE,SAAW,OAAS,QAE1BhE,KAAKmQ,SAAWnQ,KAAKkR,SAAW,OAAS,QAC9ClR,KAAKwC,aACNxC,KAAKiS,YACHjS,KAAKkS,cACLlS,KAAKwH,cAGhB,EACI,0dAKexH,KAAK6M,SAASC,KAAK,eACvB9M,KAAKmS,iBAGXnS,KAAKkG,MAAMC,IAAI,QACdnG,KAAKkG,MAAMC,IAAI,SAGrB,GAOA,YAAS,CACf,2BAA2B,EAC3B,kBAAmBnG,KAAKmR,YAEZ,EAAc,QAAU,OAEbnR,KAAKgR,SAE9BhR,KAAKoS,uBA9QN,EAAA/O,OAAS,CAAC,IAAiB,IAAmB,GAC9C,EAAAC,YAAc,CACnBC,UAAW,IAAIC,YAAY,YAC3B6O,SAAU,IAAI7O,YAAY,WAC1B4C,WAAY,IAAI5C,YAAY,aAC5B8O,UAAW,IAAI9O,YAAY,YAC3B+O,UAAW,IAAI/O,YAAY,YAC3BgP,UAAW,IAAIhP,YAAY,YAC3BiP,WAAY,IAAIjP,YAAY,cAIpB,aADT,YAAM,yBACG,uBAOmB,aAA5B,YAAS,CAAEkD,SAAS,KAAQC,EAAA,oBAaD,aAA3B,YAAS,CAAEC,KAAMuG,UAAU,2BAGA,aAA3B,YAAS,CAAEvG,KAAMuG,UAAU,2BAGhB,aAAX,eAAW,yBAGA,aAAX,eAAW,gCAMA,aAAX,eAAW,6BAMA,aAAX,eAAW,8BAKA,aAAX,eAAW,8BAGgC,aAA3C,YAAS,CAAEvG,KAAMC,QAASH,SAAS,KAAQ,4BAGhC,aAAX,eAAW,2BAIR,aADH,YAAS,CAAEA,SAAS,KACjB,uBAgNN,IAAO,EArRA,eADN,YAAU,aAAc,CAAC,OACnB,I,mNC/CA,EAAQ,4mDC6ER,gBAAyB,IAAzB,kCAoBY,KAAAgM,aAAc,EACd,KAAAC,cAA0C,GAC1C,KAAAC,kBAA4B,EAC5B,KAAAC,kBAA4B,EAErC,KAAAC,YAAc,IAAIC,IAClB,KAAAC,cAAiB,GAAsBhT,KAAKiT,QAAQC,YAAc,EAClE,KAAAC,YAAc,EAMd,KAAA1H,eAAiB,IAAIU,eAAe,IAAMnM,KAAKmO,gBAE/C,KAAAiF,UAAY,EAGyB,KAAAC,gBAAmC,QAGpE,KAAAtC,MAAgB/Q,KAAK6M,SAASC,KAAK,YAG2B,KAAA5F,gBAAiB,EAExE,KAAApD,kBAAoB,IAAI,IAAkB9D,KAAM,YAAa,UAExE,kBAAkBO,EAAsB,GAC9C,IAAM,EAAe,IAAIA,EAAQ8G,iBAAiB,aAC5C,EAAS,GAEf,IAAK,IAAI,EAAI,EAAG,EAAI,EAAaxG,OAAQ,IAAK,CAC5C,IAAQwH,KAAA,EAAM/B,KAAA,GAAS,EAAa,GAMpC,GAJI,KAAU,GAA0B,QAAT,IAC7B,EAAOgN,KAAK,CAAEjL,KAAA,EAAM/B,KAAA,IAGlB/F,EAAQgT,QAAQC,gBAAkBxT,KAAKkG,MAAMqN,QAAQ,YACvD,MAIJ,OAAO,EAGD,kBAAkBhT,EAAsB,GAC9C,MAAO,CACLkT,YAAalT,EACbgT,QAAShT,EAAQgT,QACjBG,KAAMnT,EAAQoN,aAAepN,EAAQoT,UACrCC,MAAO5T,KAAK6T,kBAAkBtT,EAAS,GACvCuT,aAAc,GACd9P,SAAUzD,EAAQF,aAAa,aAI3B,cAAc,GACpB,IAAM,EAASL,KAAK+T,kBAAkB,GAAU,GAIhD,MAHiB,IAAI,EAAS5Q,UAGrB6Q,IAAI,IACQ,YAAf,EAAM1N,OACR,EAAOoN,KAAO,EAAM/F,aAAe,EAASgG,eAKhD,iBAD4BvM,QAAS,IAC3B4M,IAAI,CAAC,EAAoB,KACjC,EAAOF,aAAaR,KAAK,2BAAKtT,KAAK+T,kBAAkB,IAA5B,CAAuC3L,GAAI,WAAJ,OAAe,QAG1E,EAGD,uBACN,IAAM,EAAoC,GACtC,EAAQ,EAEZpI,KAAK8S,YAAYrR,QAAS,IACxB,QAAQ,QACD,EAAQpB,aAAa,UACxB,EAAQiT,KAAK,2BAAKtT,KAAK+T,kBAAkB,IAA5B,CAAgD3L,GAAI,QAAJ,OAAY,MACzE,WACG,EAAQ/H,aAAa,YACxB,EAAQiT,KAAK,2BAAKtT,KAAKiU,cAAc,IAAxB,CAA8C7L,GAAI,YAAJ,OAAgB,MAG/E,MAGFpI,KAAK2S,cAAgB,IAAI,EAAQuB,WAG3B,qBACN,IAAM3T,EAA0B,GAChCP,KAAK8S,YAAYrR,QAAQ,IACnB,EAAK+M,QACPjO,EAAS+S,KAAK,KAIlBtT,KAAKuF,KAAK,cAAe,CACvB4O,OAAQ,CACNC,mBAAoB7T,KAMnB,eACL,IAAKP,KAAKqU,eAAgB,OAE1B,IAAM,EAAYrU,KAAKyM,KAAKyG,YAAclT,KAAKmT,YACzC,EAAcnT,KAAKgT,cAAc,GACjC,EAAuBhT,KAAK8S,YAAYrF,KAC9CzN,KAAK2S,cAAgB,GACrB,IAAM,EAAiB3S,KAAKyM,KAAKyG,YAC3B,EAAY,EAAiBlT,KAAKoT,UAAY,SAAW,UAM/D,GAJIpT,KAAKsU,IAAIpB,YAAclT,KAAKmT,cAC9BnT,KAAKmT,YAAcnT,KAAKsU,IAAIpB,aAG1B,EAEF,IAAIlT,KAAKqU,gBAAgBH,UAAUK,KAAK,IACjC,EAAK/F,SACR,EAAKA,QAAS,EACdxO,KAAK8S,YAAY0B,IAAI,EAAM,KAErBxU,KAAKgT,cAAc,cAEnB,GAA6B,WAAd,EAAwB,CAEjD,IAAM,EAAS,IAAIhT,KAAKqU,gBAAgBE,KAAK,IACvC,EAAK/F,SACP,EAAKA,QAAS,EACdxO,KAAK8S,YAAYtF,OAAO,IAGnBxN,KAAKgT,cAAc,KAIxB,IACF,EAAOxE,QAAS,EAChBxO,KAAK8S,YAAY0B,IAAI,EAAQ,IAIjCxU,KAAK6S,iBAAmB7S,KAAK8S,YAAYrF,KAAOzN,KAAKqU,eAAexT,OACpEb,KAAK4S,kBAAmB,EAEpB5S,KAAKoT,YAAc,IACrBpT,KAAKoT,UAAY,GAGfpT,KAAK0S,cAAgB1S,KAAK8S,YAAYrF,KAAO,IAC/CzN,KAAK0S,YAAc1S,KAAK8S,YAAYrF,KAAO,GAGzCzN,KAAK8S,YAAYrF,OAAS,GAC5BzN,KAAKyU,qBAIT,eACE5R,MAAM+C,eAEF5F,KAAKyM,OACPzM,KAAKoT,UAAYpT,KAAKyM,KAAKyG,aAG7BlT,KAAKyL,eAAeW,QAAQpM,KAAKyM,MAGnC,oBACE5J,MAAMC,oBAINC,WAAW,KACT/C,KAAKmO,iBAIT,uBACEnO,KAAKoT,UAAY,EACjBpT,KAAKyL,eAAeC,UAAU1L,KAAKyM,MACnCzM,KAAKyL,eAAeE,aACpB9I,MAAMG,uBAGA,iBAAiBzC,GAEvB,IAAM,EAAW,EADEa,OACGkH,iBAAiB,CAAE9B,SAAS,IAClDxG,KAAKqU,eAAiB,EAGhB,mBACN,OAAO,k4BACJrU,KAAKkG,MAAMC,IAAI,YAWbnG,KAAKkG,MAAMC,IAAI,UAaPnG,KAAK0U,qBAEZ1U,KAAKkG,MAAMC,IAAI,QAA8BnG,KAAK6M,SAASC,KAAK,gBAAsB9M,KAAKkG,MAAMC,IAAI,QACrGnG,KAAKkG,MAAMC,IAAI,UAChBnG,KAAKkG,MAAMC,IAAI,QACd,YACAnG,KAAK2S,cACL,GAAgB,EAAavK,GAC7B,GAAgB,yRACXpI,KAAKkG,MAAMC,IAAI,aAEGnG,KAAKkH,eACf,IAAM,EAAauM,YAAYtP,QAC5B,EAAaH,SAAW,WAAa,GAE/C,YACA,EAAa4P,MACb,GACE,sEAAS5T,KAAKkG,MAAMC,IAAI,QAAiB,EAAKG,MAAQ,QAAiB,EAAK+B,KAAUrI,KAAKkG,MAAMC,IAC/F,UAGJ,EAAauN,KAEb,EAAaI,aAAajT,OAAS,EAC/B,2GAAQb,KAAKkG,MAAMC,IAAI,QACvB,YACA,EAAa2N,aACb,GAAW,EAAQ1L,GACnB,GACE,0WACGpI,KAAKkG,MAAMC,IAAI,aAEGnG,KAAKkH,eACf,IAAM,EAAQuM,YAAYtP,QACvB,EAAQH,SAAW,OAAS,GAEtC,YACA,EAAQ4P,MACR,GACE,sEAAS5T,KAAKkG,MAAMC,IAAI,QAAiB,EAAKG,MAAQ,QACpD,EAAK+B,KACDrI,KAAKkG,MAAMC,IAAI,UAEvB,EAAQuN,KACR1T,KAAKkG,MAAMC,IAAI,eAGrBnG,KAAKkG,MAAMC,IAAI,SAEf,GAEJnG,KAAKkG,MAAMC,IAAI,eAGrBnG,KAAKkG,MAAMC,IAAI,QACjBnG,KAAKkG,MAAMC,IAAI,aAIb,oBACNnG,KAAK4S,kBAAmB,EAGlB,oBACN5S,KAAK4S,kBAAmB,EAGlB,iBACN,IAAM,EAAa5S,KAAK4S,mBAAqB5S,KAAK6S,iBAClD,OAAO,+hBAEK,YAAS,CACf,sBAAsB,EACtB,2BAA4B,EAC5B,4BAA6B,MAGnB7S,KAAK6S,mBAAsB7S,KAAK6S,kBAAoB7S,KAAK4S,kBAElE5S,KAAKkG,MAAMC,IAAI,UAEPnG,KAAK2U,mBACH,EAER3U,KAAKkG,MAAMC,IAAI,QAGRnG,KAAK6M,SAASC,KAAK,QAEzB9M,KAAKkG,MAAMC,IAAI,QACjBnG,KAAKkG,MAAMC,IAAI,WAQf,SACR,IAAM,EAAgBnG,KAAK8D,kBAAkBkC,KAAK,UAC5C,EAAahG,KAAK4S,mBAAqB5S,KAAK6S,iBAClD,OAAO,y0CAC6C7S,KAAK+Q,MAG3C,YAAS,CACf,uBAAuB,EACvB,YAAsC,QAAzB/Q,KAAKqT,kBAEV,GAAiB,EAGLrT,KAAK2B,iBAGf3B,KAAK0S,YAAc,8BAAgC,4BAEzD1S,KAAK4U,mBAMH,YAAS,CACf,mBAAmB,EACnB,2BAA4B,IAGuB,GAAiB,EAEjE5U,KAAKkG,MAAMC,IAAI,UAKP,IAAMnG,KAAK6U,qBACT,GAAiB7U,KAAK6S,kBAAoB7S,KAAK4S,iBAEvD5S,KAAKkG,MAAMC,IAAI,QAIRnG,KAAK6M,SAASC,KAAK,UACzB9M,KAAKkG,MAAMC,IAAI,QAEfnG,KAAK6M,SAASC,KAAK,UAErB9M,KAAKkG,MAAMC,IAAI,UACjBnG,KAAK8U,oBA5YV,EAAAzR,OAAS,CAAC,IAAiB,GAC3B,EAAAC,YAAc,CACnBC,UAAW,IAAIC,YAAY,YAC3BuR,aAAc,IAAIvR,YAAqC,eACvDoG,iBAAkB,IAAIpG,YAAY,oBAClCqG,sBAAuB,IAAIrG,YAAY,0BACvCsG,iBAAkB,IAAItG,YAAY,oBAClCuG,sBAAuB,IAAIvG,YAAY,0BAEvCyG,SAAU,IAAIzG,YAAY,WAE1B0G,cAAe,IAAI1G,YAAY,iBAE/B2G,SAAU,IAAI3G,YAAY,WAE1B4G,cAAe,IAAI5G,YAAY,kBAGhB,aAAhB,eAAgB,gCACA,aAAhB,eAAgB,6BACA,aAAhB,eAAgBwR,EAAA,6BACA,aAAhB,eAAgB,kCACA,aAAhB,eAAgB,kCAMc,aAA9B,YAAM,iBAAwB,sBACQ,aAAtC,YAAM,yBAAgC,yBACJ,aAAlC,YAAM,qBAA4B,qBAOU,aAA5C,YAAS,CAAEvO,UAAW,sBAAsB,iCAGjC,aAAX,eAAW,uBAG8D,aAAzE,YAAS,CAAEG,KAAMC,QAASJ,UAAW,kBAAmBC,SAAS,KAAQ,gCAyW5E,IAAO,EArZA,eADN,YAAU,cAAe,CAAC,IAAQ,IAAU,IAAM,IAAU,OACtD","file":"en-us/dashboard/account/exp/staticres/static/js/0.81ec80b0.chunk.js","sourcesContent":["import { css } from 'lit';\nimport { litElevation } from '../../internal/styles/elevation.js';\nimport { SystemColors } from '../../utilities/system-colors.js';\n\nexport default css`\n :host {\n --he-elevation: 8;\n ${litElevation};\n display: block;\n background: var(--he-color-surface-background);\n border-radius: var(--he-menu-control-border-radius);\n margin: 0;\n padding: 0;\n max-width: 368px;\n min-width: 180px;\n width: max-content;\n }\n\n ::slotted(hr) {\n box-sizing: content-box;\n height: 0;\n margin: 0;\n border: none;\n border-top: var(--he-form-control-border-width) solid var(--he-color-neutral-200);\n }\n\n ::slotted(.he-menu-item:first-child) {\n border-top-left-radius: var(--he-menu-control-border-radius);\n border-top-right-radius: var(--he-menu-control-border-radius);\n }\n\n ::slotted(.he-menu-item:last-child) {\n border-bottom-left-radius: var(--he-menu-control-border-radius);\n border-bottom-right-radius: var(--he-menu-control-border-radius);\n }\n\n @media screen and (forced-colors: active) {\n :host {\n background: ${SystemColors.Canvas};\n color: ${SystemColors.CanvasText};\n border: 1px solid ${SystemColors.CanvasText};\n }\n }\n`;\n","import { html } from 'lit/static-html.js';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { MenuItem, MenuItemColumnCount } from '../menu-item/menu-item.js';\nimport HarmonyElement from '../../base-components/base.js';\nimport componentStyles from '../../internal/styles/component.styles.js';\nimport { Component } from '../../utilities/decorators.js';\nimport styles from './menu.styles.js';\n\n/**\n *\n * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.\n *\n * @tag he-menu\n * @since 1.3\n * @status stable\n * @figma https://www.figma.com/file/UvgzWQM5R18Lrs4VHs2UPd/Partner-Center-extended-toolkit?type=design&node-id=86%3A19259&mode=design&t=FrLbCdXM439ktBGm-1\n *\n * @slot - Supports he-menu-item elements or elements with a role of 'menuitem', 'menuitemcheckbox', and 'menuitemradio'.\n *\n * @cssproperty [--he-elevation=8] - Elevation of the menu.\n *\n * @event he-ready - Emitted when the component has completed its initial render.\n */\n@Component('menu')\nexport class Menu extends HarmonyElement {\n static styles = [componentStyles, styles];\n static reactEvents = {\n onHeReady: new CustomEvent('he-ready'),\n };\n\n protected usesArrowKeys = true;\n private expandedItem: MenuItem | null = null;\n private focusIndex: number = -1; // The index of the focusable element in menuItems\n private menuItems?: Element[];\n\n /** @internal used by QuickNav */\n @queryAssignedElements()\n items!: Array<HTMLElement>;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.setAttribute('role', 'menu');\n\n setTimeout(() => {\n // wait until children have had a chance to\n // connect before setting/checking their props/attributes\n this.setItems();\n });\n\n this.addEventListener('he-change', this.handleChange);\n this.addEventListener('keydown', this.handleMenuKeyDown);\n this.addEventListener('focusout', this.handleFocusOut);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeItemListeners();\n this.menuItems = undefined;\n this.removeEventListener('he-change', this.handleChange);\n this.removeEventListener('keydown', this.handleMenuKeyDown);\n this.removeEventListener('focusout', this.handleFocusOut);\n }\n\n private readonly isNestedMenu = (): boolean => {\n return (\n this.parentElement !== null &&\n this.parentElement instanceof HTMLElement &&\n (this.parentElement.getAttribute('role')?.startsWith('menuitem') ||\n this.parentElement.hasAttribute('menu-item') ||\n false)\n );\n };\n\n /** Focuses the first item in the menu. */\n focus() {\n this.setFocus(0, 1);\n }\n\n /** Collapses any expanded menu items. */\n collapseExpandedItem() {\n if (this.expandedItem !== null) {\n this.expandedItem.expanded = false;\n this.expandedItem = null;\n }\n }\n\n /** @internal used by dropdown */\n public handleMenuKeyDown = (e: KeyboardEvent) => {\n if (e.defaultPrevented || this.menuItems === undefined) {\n return;\n }\n switch (e.key) {\n case 'ArrowDown':\n // go forward one index\n this.setFocus(this.focusIndex + 1, 1);\n e.preventDefault();\n return;\n case 'ArrowUp':\n // go back one index\n this.setFocus(this.focusIndex - 1, -1);\n e.preventDefault();\n return;\n case 'End':\n // set focus on last item\n this.setFocus(this.menuItems.length - 1, -1);\n e.preventDefault();\n return;\n case 'Home':\n // set focus on first item\n this.setFocus(0, 1);\n e.preventDefault();\n return;\n\n default:\n // if we are not handling the event, do not prevent default\n return true;\n }\n };\n\n // if focus is moving out of the menu, reset to a stable initial state\n private handleFocusOut = (e: FocusEvent) => {\n if (!this.contains(e.relatedTarget as Element) && this.menuItems !== undefined) {\n this.collapseExpandedItem();\n // find our first focusable element\n const focusIndex: number = 0; // this.menuItems.findIndex(this.isFocusableElement);\n // set the current focus index's tabindex to -1\n this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');\n // set the first focusable element tabindex to 0\n this.menuItems[focusIndex].setAttribute('tabindex', '0');\n // set the focus index\n this.focusIndex = focusIndex;\n }\n };\n\n private handleItemFocus = (e: FocusEvent) => {\n const targetItem: HTMLElement = e.target as HTMLElement;\n\n if (this.menuItems !== undefined && targetItem !== this.menuItems[this.focusIndex]) {\n this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');\n this.focusIndex = this.menuItems.indexOf(targetItem);\n targetItem.setAttribute('tabindex', '0');\n }\n };\n\n private handleExpandedChanged = (e: Event) => {\n if (\n e.defaultPrevented ||\n e.target === null ||\n this.menuItems === undefined ||\n this.menuItems.indexOf(e.target as HTMLElement) < 0\n ) {\n return;\n }\n\n e.preventDefault();\n const changedItem: MenuItem = e.target as MenuItem;\n\n // closing an expanded item without opening another\n if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {\n this.expandedItem = null;\n return;\n }\n\n if (changedItem.expanded) {\n if (this.expandedItem !== null && this.expandedItem !== changedItem) {\n this.expandedItem.expanded = false;\n }\n this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');\n this.expandedItem = changedItem;\n this.focusIndex = this.menuItems.indexOf(changedItem);\n changedItem.setAttribute('tabindex', '0');\n }\n };\n\n private removeItemListeners = () => {\n if (this.menuItems !== undefined) {\n this.menuItems.forEach((item: HTMLElement) => {\n item.removeEventListener('he-expanded-change', this.handleExpandedChanged);\n item.removeEventListener('focus', this.handleItemFocus);\n });\n }\n };\n\n private handleSlotChange = () => {\n // only update children after the component is connected and\n // the setItems has run on connectedCallback\n // (menuItems is undefined until then)\n if (this.isConnected && this.menuItems !== undefined) {\n this.setItems();\n }\n\n if (this.isNestedMenu()) {\n this.setAttribute('slot', 'submenu');\n } else if (this.getAttribute('slot') === 'submenu') {\n this.removeAttribute('slot');\n }\n };\n\n /** @internal used by menu item */\n public setItems = () => {\n const newItems: Element[] = this.domChildren();\n\n this.removeItemListeners();\n this.menuItems = newItems;\n\n const menuItems = this.menuItems.filter(this.isMenuItemElement);\n\n // if our focus index is not -1 we have items\n if (menuItems.length) {\n this.focusIndex = 0;\n }\n\n function elementIndent(el: HTMLElement): MenuItemColumnCount {\n // if menu item is a link, it will have role none as the menuitem role is on the link in the shadow root\n const role = el.getAttribute('role') === 'none' ? 'menuitem' : el.getAttribute('role');\n const startSlot = el.querySelector('[slot=start]');\n\n if ((el as MenuItem).quickNav && role === 'menuitemradio') {\n return startSlot === null ? 0 : 1;\n }\n\n if (role !== 'menuitem' && startSlot === null) {\n return 1;\n } else if (role === 'menuitem' && startSlot !== null) {\n return 1;\n } else if (role !== 'menuitem' && startSlot !== null) {\n return 2;\n } else {\n return 0;\n }\n }\n\n const indent: MenuItemColumnCount = menuItems.reduce((acc, current) => {\n const elementValue = elementIndent(current);\n\n return acc > elementValue ? acc : elementValue;\n }, 0);\n\n menuItems.forEach((item: HTMLElement, index: number) => {\n item.setAttribute('tabindex', index === 0 ? '0' : '-1');\n item.addEventListener('he-expanded-change', this.handleExpandedChanged);\n item.addEventListener('focus', this.handleItemFocus);\n\n if (item instanceof MenuItem) {\n item.startColumnCount = indent;\n }\n });\n };\n\n // handle change from child element\n private handleChange = (e: CustomEvent) => {\n if (this.menuItems === undefined) {\n return;\n }\n const changedMenuItem: MenuItem = e.target as MenuItem;\n const changeItemIndex: number = this.menuItems.indexOf(changedMenuItem);\n\n if (changeItemIndex === -1) {\n return;\n }\n\n if (changedMenuItem.role === 'menuitemradio' && changedMenuItem.checked === true) {\n for (let i = changeItemIndex - 1; i >= 0; --i) {\n const item: Element = this.menuItems[i];\n const role: string | null = item.getAttribute('role');\n if (role === 'menuitemradio') {\n (item as MenuItem).checked = false;\n }\n if (role === 'separator') {\n break;\n }\n }\n const maxIndex: number = this.menuItems.length - 1;\n for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {\n const item: Element = this.menuItems[i];\n const role: string | null = item.getAttribute('role');\n if (role === 'menuitemradio') {\n (item as MenuItem).checked = false;\n }\n if (role === 'separator') {\n break;\n }\n }\n }\n };\n\n // get an array of valid DOM children\n private domChildren(): Element[] {\n return Array.from(this.children).filter(child => !child.hasAttribute('hidden'));\n }\n\n // check if the item is a menu item\n private isMenuItemElement = (el: Element): el is HTMLElement => {\n return (\n el instanceof HTMLElement &&\n (['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(el.getAttribute('role') as string) ||\n el.classList.contains('he-menu-item'))\n );\n };\n\n private setFocus(focusIndex: number, adjustment: number) {\n if (this.menuItems === undefined) {\n return;\n }\n\n while (focusIndex >= 0 && focusIndex < this.menuItems.length) {\n const child: Element = this.menuItems[focusIndex];\n\n if (this.isMenuItemElement(child)) {\n // change the previous index to -1\n if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {\n this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');\n }\n\n // update the focus index\n this.focusIndex = focusIndex;\n\n // update the tabindex of next focusable element\n child.setAttribute('tabindex', '0');\n\n // focus the element\n child.focus();\n\n break;\n }\n\n focusIndex += adjustment;\n }\n }\n\n protected render() {\n return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n }\n}\n\nexport default Menu;\n","import { css } from 'lit';\nimport { SystemColors } from '../../utilities/system-colors.js';\n\nexport default css`\n :host {\n --x-padding: var(--he-spacing-x-small);\n --icon-slot-size: 32px;\n\n position: relative;\n display: block;\n overflow: visible;\n outline: none;\n height: var(--he-menu-control-height);\n padding: 0;\n margin: 0;\n white-space: nowrap;\n color: var(--he-neutral-foreground);\n fill: currentColor;\n cursor: pointer;\n font-size: var(--he-font-size-medium);\n line-height: var(--he-line-height-normal);\n user-select: none;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n .menu-item {\n display: grid;\n grid-template-columns: minmax(var(--x-padding), auto) auto 1fr minmax(var(--x-padding), auto) auto;\n grid-template-rows: 1fr;\n justify-items: center;\n align-items: center;\n height: 100%;\n }\n\n .menu-item--indent-1 {\n grid-template-columns: var(--icon-slot-size) auto 1fr minmax(var(--x-padding), auto) auto;\n }\n\n .menu-item--indent-2 {\n grid-template-columns: var(--icon-slot-size) var(--icon-slot-size) 1fr minmax(var(--x-padding), auto) auto;\n }\n\n :host(:focus-visible) .menu-item {\n box-shadow: inset var(--he-focus-ring);\n }\n\n :host(:hover:not([disabled])) {\n background-color: var(--he-neutral-fill-stealth-hover);\n }\n\n :host(:active:not([disabled])),\n :host([expanded]) {\n background-color: var(--he-neutral-fill-stealth-active);\n }\n\n :host([disabled]) {\n cursor: 'not-allowed';\n opacity: var(--he-form-control-disabled-opacity);\n }\n\n :host([disabled]:hover) .start,\n :host([disabled]:hover) .end,\n :host([disabled]:hover)::slotted(svg) {\n fill: currentColor;\n }\n\n .content {\n grid-column-start: 3;\n justify-self: start;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n }\n\n .start,\n .end {\n display: flex;\n justify-content: center;\n pointer-events: none;\n }\n\n .start {\n color: var(--he-accent-foreground-rest);\n }\n\n .end {\n color: var(--he-type-secondary);\n }\n\n .menu-item--has-end .end {\n min-width: var(--icon-slot-size);\n margin-inline-start: var(--he-spacing-2x-small);\n }\n\n .expand-collapse-glyph-container {\n min-width: var(--icon-slot-size);\n justify-content: center;\n pointer-events: none;\n }\n\n ::slotted([slot='expand-collapse-indicator']),\n .expand-collapse-glyph {\n font-size: var(--he-chevron-size);\n fill: var(--he-color-neutral-600);\n color: var(--he-color-neutral-600);\n }\n\n .menu-item--rtl .expand-collapse-glyph {\n transform: rotate(180deg);\n }\n\n :host(:hover) .start,\n :host(:hover)::slotted(.he-icon[slot='start']) {\n color: var(--he-accent-foreground-hover);\n }\n\n :host(:active) .start,\n :host(:active)::slotted(.he-icon[slot='start']) {\n color: var(--he-accent-foreground-active);\n }\n\n ::slotted(svg) {\n width: var(--he-icon-size);\n height: var(--he-icon-size);\n display: flex;\n }\n\n ::slotted(.he-icon) {\n contain: size;\n }\n\n :host(:hover)::slotted(svg[slot='start']) {\n fill: var(--he-accent-foreground-hover);\n }\n\n :host(:active)::slotted(svg[slot='start']) {\n fill: var(--he-accent-foreground-active);\n }\n\n .input-container,\n .expand-collapse-glyph-container {\n display: none;\n }\n\n :host([role='menuitemcheckbox']) .input-container,\n :host([role='menuitemradio']) .input-container {\n display: grid;\n }\n\n .menu-item--has-submenu .expand-collapse-glyph-container {\n display: grid;\n }\n\n .menu-item--has-submenu .end,\n :host([role='menuitemcheckbox']) .end,\n :host([role='menuitemradio']) .end {\n grid-column-start: 4;\n }\n\n .expand-collapse,\n .checkbox,\n .radio {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 20px;\n height: 20px;\n box-sizing: border-box;\n outline: none;\n }\n\n .radio {\n border-radius: 999px;\n position: relative;\n background-color: var(--he-color-surface-background);\n border: var(--he-form-control-border-width) solid var(--he-color-neutral-600);\n }\n\n :host(:hover) .radio {\n border-color: var(--he-color-neutral-700);\n }\n\n :host(:active) .radio {\n border-color: var(--he-color-neutral-800);\n }\n\n .checkbox-indicator,\n .radio-indicator,\n ::slotted([slot='checkbox-indicator']),\n ::slotted([slot='radio-indicator']),\n ::slotted([slot='expand-collapse-indicator']) {\n display: none;\n }\n\n :host([aria-checked='true']) .checkbox-indicator,\n :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']) {\n width: var(--he-icon-size);\n height: var(--he-icon-size);\n display: block;\n fill: var(--he-color-neutral-800);\n color: var(--he-color-neutral-800);\n pointer-events: none;\n }\n\n :host([aria-checked='true']) .radio {\n border-color: var(--he-accent-fill-rest);\n }\n\n :host([aria-checked='true']:hover) .radio {\n border-color: var(--he-accent-fill-hover);\n }\n\n :host([aria-checked='true']:active) .radio {\n border-color: var(--he-accent-fill-active);\n }\n\n :host([aria-checked='true']) .radio-indicator {\n position: absolute;\n inset: 4px;\n border-radius: 999px;\n display: inline-block;\n background: var(--he-accent-fill-rest);\n pointer-events: none;\n }\n\n :host([aria-checked='true']:hover) .radio-indicator {\n background: var(--he-accent-fill-hover);\n }\n\n :host([aria-checked='true']:active) .radio-indicator {\n background: var(--he-accent-fill-active);\n }\n\n :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {\n display: block;\n pointer-events: none;\n }\n\n :host(:not([disabled]):hover) .menu-item--quicknav,\n :host(:not([disabled]):hover) .menu-item--link {\n color: var(--he-accent-foreground-rest);\n }\n\n :host(:not([disabled]):active) .menu-item--quicknav,\n :host(:not([disabled]):active) .menu-item--link {\n color: var(--he-neutral-foreground);\n }\n\n :host([aria-checked='true']) .menu-item--quicknav,\n :host([current]) .menu-item--link {\n background-color: var(--he-neutral-fill-stealth-active);\n position: relative;\n }\n\n :host([aria-checked='true']) .menu-item--quicknav::after,\n :host([current]) .menu-item--link::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n background: var(--he-accent-foreground-rest);\n }\n\n .menu-item--quicknav.menu-item--rtl::after,\n .menu-item--link.menu-item--rtl::after {\n right: -1px;\n left: auto;\n }\n\n .menu-item--quicknav .input-container {\n display: none;\n }\n\n @media screen and (forced-colors: active) {\n :host,\n .popup {\n forced-color-adjust: none;\n }\n\n :host {\n background-color: ${SystemColors.ButtonFace};\n color: ${SystemColors.ButtonText};\n border-color: ${SystemColors.ButtonText};\n }\n\n ::slotted(*) {\n color: ${SystemColors.ButtonText};\n fill: currentColor;\n }\n\n :host(:hover:not([disabled])),\n :host(:active:not([disabled])),\n :host(:hover:not([disabled])) .he-icon,\n :host(:active:not([disabled])) .he-icon,\n :host(:hover:not([disabled])) ::slotted(*),\n :host(:active:not([disabled])) ::slotted(*) {\n background-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([expanded]),\n :host([expanded]) .he-icon,\n :host([expanded]) ::slotted(*) {\n background-color: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host(:focus-visible) {\n box-shadow: 0 0 0 var(--he-focus-ring-width) inset ${SystemColors.ButtonText};\n }\n\n :host(:focus-visible),\n :host(:focus-visible) .he-icon,\n :host(:focus-visible) ::slotted(*) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([disabled]),\n :host([disabled]) .he-icon,\n :host([disabled]) ::slotted(*) {\n background: ${SystemColors.Canvas};\n color: ${SystemColors.GrayText};\n opacity: 1;\n }\n\n .radio {\n border-color: ${SystemColors.ButtonText};\n }\n\n :host(:hover) .radio,\n :host(:focus-visible) .radio,\n :host([aria-checked='true']) .radio {\n border-color: ${SystemColors.HighlightText};\n }\n\n :host([aria-checked='true']) .radio-indicator,\n :host([aria-checked='true']:hover) .radio-indicator {\n background: ${SystemColors.HighlightText};\n }\n\n :host([aria-checked='true']) .checkbox-indicator,\n :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),\n :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {\n color: ${SystemColors.HighlightText};\n }\n }\n`;\n","import { html, literal } from 'lit/static-html.js';\nimport { property, queryAssignedElements, queryAsync, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { when } from 'lit/directives/when.js';\nimport { watch } from '../../internal/watch.js';\nimport icon from '../icon/icon.js';\nimport popup from '../popup/popup.js';\nimport HarmonyElement from '../../base-components/base.js';\nimport { Menu } from '../menu/menu.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport componentStyles from '../../internal/styles/component.styles.js';\nimport { Component } from '../../utilities/decorators.js';\nimport styles from './menu-item.styles.js';\nimport type { Target } from '../../types.js';\n\nexport type MenuItemColumnCount = 0 | 1 | 2;\nexport type MenuItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';\n\n/**\n *\n * Menu items allow users to take an action by selecting from a list of choices.\n *\n * @tag he-menu-item\n * @since 1.3\n * @status stable\n * @figma https://www.figma.com/file/UvgzWQM5R18Lrs4VHs2UPd/Partner-Center-extended-toolkit?type=design&node-id=86%3A19259&mode=design&t=FrLbCdXM439ktBGm-1\n *\n * @dependency he-icon\n * @dependency he-popup\n *\n * @slot - The content of the menu item.\n * @slot start - Contents of the start slot are positioned before the item content.\n * @slot end - Contents of the end slot are positioned after the item content.\n * @slot submenu - The submenu slot - child menus are automatically placed here.\n * @slot checkbox-indicator - The checkbox indicator slot.\n * @slot menuItem-indicator - The menuItem indicator slot.\n * @slot expand-collapse-indicator - The expand/collapse indicator slot.\n *\n * @csspart start - The container that wraps the contents of the start slot.\n * @csspart content - The container that wraps the contents of the menu item.\n * @csspart end - The container that wraps the contents of the end slot.\n * @csspart submenu-region - The region that wraps the submenu.\n * @csspart checkbox - The checkbox container.\n * @csspart checkbox-indicator - The checkbox indicator.\n * @csspart radio - The radio container.\n * @csspart radio-indicator - The radio indicator.\n * @csspart expand-collapse - The expand/collapse container.\n * @csspart expand-collapse-glyph-container - The container that wraps the expand/collapse glyph.\n *\n * @event he-ready - Emitted when the component has completed its initial render.\n * @event he-change - Emitted when the item has been clicked or invoked via keyboard, and will be prevented if the menu item is disabled.\n * @event he-expanded-change - Emitted when the item has been expanded or collapsed.\n */\n@Component('menu-item', [icon, popup])\nexport class MenuItem extends HarmonyElement {\n static styles = [componentStyles, styles];\n static reactEvents = {\n onHeReady: new CustomEvent('he-ready'),\n onHeChange: new CustomEvent('he-change'),\n onHeExpandedChange: new CustomEvent('he-expanded-change'),\n };\n\n private readonly hasSlotController = new HasSlotController(this, '[default]', 'start', 'end');\n @state() private hasSubmenu: boolean = false;\n @state() private submenu?: HTMLElement;\n\n @queryAssignedElements({ slot: 'submenu', selector: '[role=\"menu\"]', flatten: true })\n private slottedMenus!: Array<HTMLElement>;\n\n @queryAsync('a')\n private link: Promise<HTMLAnchorElement | null>;\n\n private get _role(): MenuItemRole {\n return this.getAttribute('role') === 'none' ? 'menuitem' : this.role;\n }\n\n private get isLink(): boolean {\n const canBeLink = !!this.href && !this.hasSubmenu && !this.disabled;\n\n // quicknav used to assign radio to all menu items. if a quicknav has a href, assume they want links and not radios.\n if (canBeLink && this.quickNav && this._role === 'menuitemradio') return true;\n\n return canBeLink && this._role === 'menuitem';\n }\n\n /**\n * @deprecated Use `href` instead.\n * Used to add a link to the menu item. If this attribute is set, the menu item will render as an anchor tag. This attribute is ignored if the menu item is a \"menuitemcheckbox\", \"menuitemradio\", or has a submenu.\n */\n @property({ attribute: 'nav-to' }) navTo?: string;\n\n /**\n * @deprecated Use `target` instead.\n * The target window or frame to open the link in. This attribute is ignored if the menu item is a \"menuitemcheckbox\", \"menuitemradio\", or has a submenu.\n */\n @property({ attribute: 'nav-target' }) navTarget?: Target;\n\n /**\n * URL to navigate to when the menu item is clicked. If this attribute is set, the menu item will render as an anchor\n * tag. This attribute is ignored if the menu item is a \"menuitemcheckbox\", \"menuitemradio\", or has a submenu.\n */\n @property({ reflect: true }) href?: string;\n\n /**\n * The target window or frame to open the link in. This attribute is ignored if the menu item is a \"menuitemcheckbox\",\n * \"menuitemradio\", or has a submenu.\n */\n @property() target?: Target;\n\n /** For menu items with an `href`, marks this menu item as the current page in a navigation list. */\n @property({ type: Boolean, reflect: true }) current: boolean;\n\n /** Disables the menu item. */\n @property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\n /** Open status of child submenus. */\n @property({ type: Boolean, reflect: true }) expanded: boolean = false;\n\n /** The ARIA role of the menu item. */\n @property({ reflect: true }) role: MenuItemRole = 'menuitem';\n\n /** The checked state for elements with a role of 'menuitemradio' or 'menuitemcheckbox'. */\n @property({ type: Boolean, reflect: true }) checked: boolean;\n\n /** Enable this option to prevent the submenu from being clipped when the component is placed inside a container with `overflow: auto|hidden|scroll`. */\n @property({ attribute: 'submenu-fixed-placement', type: Boolean, reflect: true })\n submenuFixedPlacement: boolean = false;\n\n /** @internal used to determine indent size of nested menu */\n @property({ attribute: false })\n startColumnCount: MenuItemColumnCount = 0;\n\n /** @internal he-quick-nav sets this on slotted menu items */\n @property({ attribute: false })\n quickNav: boolean = false;\n\n /** @internal watcher */\n @watch('navTo')\n handleNavToChange() {\n if (this.navTo) this.href = this.navTo;\n }\n\n /** @internal watcher */\n @watch('navTarget')\n handleNavTargetChange() {\n if (this.navTarget) this.target = this.navTarget;\n }\n\n /** @internal watcher */\n @watch('href', { waitUntilFirstUpdate: true })\n hrefChanged() {\n this.setRole();\n }\n\n /** @internal watcher */\n @watch('disabled')\n disabledChanged() {\n this.disabled ? this.setAttribute('aria-disabled', 'true') : this.removeAttribute('aria-disabled');\n }\n\n /** @internal watcher */\n @watch('expanded')\n expandedChanged() {\n if (this.hasSubmenu) {\n this.emit('he-expanded-change', { bubbles: false });\n }\n }\n\n /** @internal watcher */\n @watch('expanded')\n @watch('hasSubmenu')\n setAriaExpanded() {\n this.hasSubmenu\n ? this.setAttribute('aria-expanded', this.expanded.toString())\n : this.removeAttribute('aria-expanded');\n }\n\n /** @internal watcher */\n @watch('role', { waitUntilFirstUpdate: true })\n roleChanged() {\n this.setRole();\n this.setAriaChecked();\n\n // recalculate indents if role is changed\n if (this.parentElement instanceof Menu) this.parentElement.setItems();\n }\n\n /** @internal watcher */\n @watch('checked', { waitUntilFirstUpdate: true })\n checkedChanged() {\n this.setAriaChecked();\n this.emitChange();\n }\n\n /** @internal watcher */\n @watch('submenu')\n @watch('role')\n submenuChanged() {\n this.hasSubmenu = !!this.submenu && this._role === 'menuitem';\n this.hasSubmenu ? this.setAttribute('aria-haspopup', 'menu') : this.removeAttribute('aria-haspopup');\n }\n\n /** @internal watcher */\n @watch('quickNav')\n quickNavChanged() {\n this.setRole();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this.handleMenuItemKeyDown);\n this.addEventListener('click', this.handleMenuItemClick);\n this.addEventListener('mouseover', this.handleMouseOver);\n this.addEventListener('mouseout', this.handleMouseOut);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.handleMenuItemKeyDown);\n this.removeEventListener('click', this.handleMenuItemClick);\n this.removeEventListener('mouseover', this.handleMouseOver);\n this.removeEventListener('mouseout', this.handleMouseOut);\n this.submenu = undefined;\n }\n\n firstUpdated() {\n super.firstUpdated();\n this.setRole();\n this.setAriaChecked();\n }\n\n async click() {\n if (this.isLink && !this.disabled) (await this.link)?.click();\n else super.click();\n }\n\n private setAriaChecked() {\n this.role === 'menuitemradio' || this.role === 'menuitemcheckbox'\n ? this.setAttribute('aria-checked', (!!this.checked).toString())\n : this.removeAttribute('aria-checked');\n }\n\n private setRole() {\n this.setAttribute('role', this.isLink ? 'none' : this.quickNav ? 'menuitemradio' : this._role);\n }\n\n private async invoke() {\n if (this.disabled) {\n return;\n }\n\n switch (this._role) {\n case 'menuitemcheckbox':\n this.checked = !this.checked;\n break;\n\n case 'menuitem':\n if (this.hasSubmenu) {\n this.expandAndFocus();\n } else {\n this.emitChange();\n }\n break;\n\n case 'menuitemradio':\n if (!this.checked) {\n this.checked = true;\n }\n break;\n }\n }\n\n private handleMenuItemKeyDown = (e: KeyboardEvent): boolean => {\n if (e.defaultPrevented) {\n return false;\n }\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n this.click();\n e.preventDefault();\n return false;\n\n case 'ArrowRight':\n //open/focus on submenu\n this.expandAndFocus();\n e.preventDefault();\n return false;\n\n case 'ArrowLeft':\n //close submenu\n if (this.expanded) {\n this.expanded = false;\n this.focus();\n e.preventDefault();\n return false;\n }\n }\n\n return true;\n };\n\n private handleMenuItemClick = async (e: MouseEvent) => {\n if (e.defaultPrevented || this.disabled) {\n return false;\n }\n\n this.invoke();\n\n return true;\n };\n\n private handleMouseOver = (e: MouseEvent): boolean => {\n if (this.disabled || !this.hasSubmenu || this.expanded) {\n return false;\n }\n\n this.expanded = true;\n\n return false;\n };\n\n private handleMouseOut = (e: MouseEvent): boolean => {\n if (\n !this.expanded ||\n this.contains(this.findRootNode(this)?.activeElement) ||\n (e.target !== this && this.contains(this.querySelector(':hover')))\n ) {\n return false;\n }\n\n this.expanded = false;\n\n return false;\n };\n\n private expandAndFocus = async () => {\n if (!this.hasSubmenu) {\n return;\n }\n\n this.expanded = true;\n\n await this.updateComplete;\n (this.submenu as HTMLElement).focus();\n this.setAttribute('tabindex', '-1');\n };\n\n private handleSubmenuSlotChange = () => {\n this.submenu = this.slottedMenus[0] ? this.slottedMenus[0] : undefined;\n };\n\n private handleStartSlotChange = () => {\n // recalculate indents if start slot is changed\n if (this.parentElement instanceof Menu) this.parentElement.setItems();\n };\n\n private emitChange() {\n this.emit('he-change');\n }\n\n protected render() {\n const tag = this.isLink ? literal`a` : literal`span`;\n\n const menuItem = html`\n <${tag}\n slot=${ifDefined(this.hasSubmenu ? 'anchor' : undefined)}\n part=\"base\"\n class=${classMap({\n 'menu-item': true,\n 'menu-item--disabled': this.disabled,\n 'menu-item--expanded': this.expanded,\n [`menu-item--indent-${this.startColumnCount}`]: true,\n 'menu-item--quicknav': this.quickNav,\n [`menu-item--${this.dir}`]: true,\n 'menu-item--has-content': this.hasSlotController.test('[default]'),\n 'menu-item--has-start': this.hasSlotController.test('start'),\n 'menu-item--has-end': this.hasSlotController.test('end'),\n 'menu-item--has-submenu': this.hasSubmenu,\n 'menu-item--link': this.isLink,\n 'menu-item--current': this.isLink && this.current,\n })}\n role=${ifDefined(this.isLink ? 'menuitem' : undefined)}\n aria-current=${ifDefined(this.isLink && this.current ? 'page' : undefined)}\n href=${ifDefined(this.isLink ? this.href : undefined)}\n target=${ifDefined(this.isLink ? this.target : undefined)}\n tabindex=${ifDefined(this.isLink ? '-1' : undefined)}\n >\n ${when(\n this.role === 'menuitemcheckbox',\n () => html`\n <span part=\"input-container\" class=\"input-container\">\n <span part=\"checkbox\" class=\"checkbox\">\n <slot name=\"checkbox-indicator\">\n <${this.scope.tag('icon')}\n name=\"checkmark\"\n part=\"checkbox-indicator\"\n class=\"checkbox-indicator\"\n ></${this.scope.tag('icon')}>\n </slot>\n </span>\n </span>\n `\n )}\n ${when(\n this.role === 'menuitemradio' && !this.quickNav,\n () => html`\n <span part=\"input-container\" class=\"input-container\">\n <span part=\"radio\" class=\"radio\">\n <slot name=\"radio-indicator\">\n <span part=\"radio-indicator\" class=\"radio-indicator\"></span>\n </slot>\n </span>\n </span>\n `\n )}\n <span part=\"start\" class=\"start\">\n <slot name=\"start\" @slotchange=${this.handleStartSlotChange}></slot>\n </span>\n <span class=\"content\" part=\"content\">\n <slot></slot>\n </span>\n <span part=\"end\" class=\"end\">\n <slot name=\"end\"></slot>\n </span>\n ${when(\n this.hasSubmenu,\n () => html`\n <span part=\"expand-collapse-glyph-container\" class=\"expand-collapse-glyph-container\">\n <span part=\"expand-collapse\" class=\"expand-collapse\">\n <slot name=\"expand-collapse-indicator\">\n <${this.scope.tag('icon')}\n name=\"ChevronRight\"\n class=\"expand-collapse-glyph\"\n part=\"expand-collapse-glyph\"\n ></${this.scope.tag('icon')}>\n </slot>\n </span>\n </span>\n `\n )}\n </${tag}>\n `;\n\n const submenuSlot = html`<slot name=\"submenu\" @slotchange=${this.handleSubmenuSlotChange}></slot>`;\n\n return html`\n ${when(\n this.hasSubmenu,\n () => html`\n <${this.scope.tag('popup')}\n ?active=${this.expanded}\n placement=${this.dir === 'rtl' ? 'left-start' : 'right-start'}\n flip\n flip-fallback-strategy=\"best-fit\"\n flip-fallback-placements=\"left right bottom top\"\n strategy=${this.submenuFixedPlacement ? 'fixed' : 'absolute'}\n part=\"popup\"\n class=\"popup\"\n >\n ${menuItem}\n ${submenuSlot}\n </${this.scope.tag('popup')}>\n `,\n () => html`\n ${menuItem}\n <div hidden>${submenuSlot}</div>\n `\n )}\n `;\n }\n}\n\nexport default MenuItem;\n","import { css } from 'lit';\nimport { SystemColors } from '../../utilities/system-colors.js';\nimport { litElevation } from '../../internal/styles/elevation.js';\n\nexport default css`\n :host {\n --max-menu-height: 360px;\n --he-elevation: 8;\n display: inline-block;\n position: relative;\n }\n\n .dropdown {\n height: 100%;\n }\n\n .menu-wrapper {\n ${litElevation};\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n background: var(--he-color-surface-background);\n border-radius: var(--he-menu-control-border-radius);\n overflow-x: hidden;\n overflow-y: auto;\n position: relative;\n z-index: 1;\n max-height: min(var(--auto-size-available-height), var(--max-menu-height));\n max-width: min(var(--auto-size-available-width), calc(max-content - 4px));\n opacity: 0;\n transition: opacity 0.33s ease;\n }\n\n .dropdown:not(.dropdown--open) .popup::part(popup) {\n display: block;\n visibility: hidden;\n width: 0;\n height: 0;\n }\n\n .popup::part(popup) {\n z-index: 1000;\n }\n\n .dropdown--open .menu-wrapper {\n opacity: 1;\n }\n\n ::slotted(.he-menu) {\n box-shadow: none;\n background: transparent;\n max-height: auto;\n }\n\n .dropdown--open ::slotted(.he-button[slot='trigger'][appearance='command']),\n .dropdown--open ::slotted(.he-button[slot='trigger'][appearance='stealth']) {\n --button-background-color: var(--button-background-color-hover);\n }\n\n ::slotted(.he-button-group__button--compound) {\n height: 100%;\n }\n\n @media screen and (forced-colors: active) {\n .menu-wrapper {\n border: 1px solid ${SystemColors.CanvasText};\n }\n\n ::slotted(.he-menu) {\n border: none;\n }\n\n .dropdown--open ::slotted(.he-button[slot='trigger'][appearance='command']),\n .dropdown--open ::slotted(.he-button[slot='trigger'][appearance='stealth']) {\n outline: ${SystemColors.ButtonText} solid 3px;\n outline-offset: -3px;\n }\n }\n`;\n","import { html } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { waitForEvent } from '../../utilities/wait-for-event.js';\nimport popup from '../popup/popup.js';\nimport HarmonyDismissibleElement from '../../base-components/dismissible.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../internal/styles/component.styles.js';\nimport { Component } from '../../utilities/decorators.js';\nimport styles from './dropdown.styles.js';\n\nimport type { Popup } from '../popup/popup.js';\nimport type { Menu } from '../menu/menu.js';\nimport type { MenuItem } from '../menu-item/menu-item.js';\n\n/** @deprecated This will be removed in the next major release */\nexport const DropdownPosition = {\n top: 'top',\n topStart: 'top-start',\n topEnd: 'top-end',\n topCenter: 'top-center',\n bottom: 'bottom',\n bottomStart: 'bottom-start',\n bottomEnd: 'bottom-end',\n bottomCenter: 'bottom-center',\n} as const;\n\n/** @deprecated This will be removed in the next major release */\nexport type DropdownPositionValues = (typeof DropdownPosition)[keyof typeof DropdownPosition];\n\nexport type DropdownCloseSource = 'change' | 'trigger' | 'document' | 'keyboard';\n\nexport interface DropdownRequestCloseEvent {\n source: DropdownCloseSource;\n}\n\n// id for slotted trigger (will only be added if one doesn't exist)\nlet dropdownButtonId = 0;\n\n// id for slotted menu (will only be added if one doesn't exist)\nlet menuId = 0;\n\n/**\n *\n * Dropdown allows showing content dropped down from a trigger element when it is clicked. Commonly used to display a dropdown menu with a list of actions.\n *\n * @tag he-dropdown\n * @since 3.0\n * @status stable\n * @figma https://www.figma.com/file/UvgzWQM5R18Lrs4VHs2UPd/Partner-Center-extended-toolkit?type=design&node-id=86%3A19262&mode=design&t=FrLbCdXM439ktBGm-1\n *\n * @dependency he-popup\n *\n * @slot - The default slot containing the menu to show when the trigger is clicked.\n * @slot trigger - The button or other element that will trigger the dropdown. (If more than one element is slotted, it will only use the first one.)\n *\n * @event he-ready - Emitted when the component has completed its initial render.\n * @event he-dropdown-show - Emitted when the dropdown menu is shown\n * @event he-dropdown-after-show - Emitted after the dropdown menu is shown and all transitions are complete\n * @event he-dropdown-hide - Emitted when the dropdown menu closes.\n * @event he-dropdown-after-hide - Emitted after the dropdown menu closes and all transitions are complete.\n * @event {DropdownRequestCloseEvent} he-dropdown-request-close - Emitted when the user attempts to\n * close the dropdown menu by selecting a menu item, clicking the trigger, clicking outside of the menu, or pressing the\n * escape key. Calling `event.preventDefault()` will prevent the menu from closing. You can check `event.detail.source`\n * to determine how the request was initiated. Avoid using this unless closing the menu will result in destructive\n * behavior and you have provided another method to close it.\n * @event he-show - (@deprecated) Use `he-dropdown-show` instead.\n * @event he-after-show - (@deprecated) Use `he-dropdown-after-show` instead.\n * @event he-hide - (@deprecated) Use `he-dropdown-hide` instead.\n * @event he-after-hide - (@deprecated) Use `he-dropdown-after-hide` instead.\n * @event {DropdownRequestCloseEvent} he-request-close - (@deprecated) Use `he-dropdown-request-close` instead.\n *\n * @csspart menu-wrapper - The wrapper containing the default slot.\n * @csspart popup - The popup component.\n * @csspart popup__popup - The popup component's container. Useful for adjusting z-index if the menu is showing behind other elements.\n *\n * @cssproperty [--he-elevation=8] - Elevation of the menu.\n * @cssproperty [--max-menu-height=360px] - Maximum height of the menu (will still be restricted to available space in the viewport).\n */\n@Component('dropdown', [popup])\nexport class Dropdown extends HarmonyDismissibleElement {\n static styles = [componentStyles, styles];\n static reactEvents = {\n onHeReady: new CustomEvent('he-ready'),\n onHeDropdownShow: new CustomEvent('he-dropdown-show'),\n onHeDropdownAfterShow: new CustomEvent('he-dropdown-after-show'),\n onHeDropdownHide: new CustomEvent('he-dropdown-hide'),\n onHeDropdownAfterHide: new CustomEvent('he-dropdown-after-hide'),\n onHeDropdownRequestClose: new CustomEvent<DropdownRequestCloseEvent>('he-dropdown-request-close'),\n /** @deprecated Use `onHeDropdownShow` instead. */\n onHeShow: new CustomEvent('he-show'),\n /** @deprecated Use `onHeDropdownAfterShow` instead. */\n onHeAfterShow: new CustomEvent('he-after-show'),\n /** @deprecated Use `onHeDropdownHide` instead. */\n onHeHide: new CustomEvent('he-hide'),\n /** @deprecated Use `onHeDropdownAfterHide` instead. */\n onHeAfterHide: new CustomEvent('he-after-hide'),\n /** @deprecated Use `onHeDropdownRequestClose` instead. */\n onHeRequestClose: new CustomEvent<DropdownRequestCloseEvent>('he-request-close'),\n };\n\n protected scopedEventName = Dropdown.baseName;\n\n @state()\n protected trigger: HTMLElement | undefined;\n\n @state()\n protected menu: Menu | undefined;\n\n @state()\n protected viewportElement: HTMLElement | null | undefined;\n\n @state()\n protected menuDefaultSlot: HTMLSlotElement | null | undefined;\n\n /** @internal used for submenus */\n @state()\n public items: MenuItem[];\n\n @query('.he-popup')\n protected popup: Popup;\n\n @query('.menu-wrapper')\n protected menuWrapper: HTMLElement;\n\n /**\n * Controls the placement of the menu to the trigger. When the position is undefined, it is placed above or below the\n * trigger based on available space.\n */\n @property({ reflect: true })\n position: DropdownPositionValues = 'bottom-start';\n\n /**\n * Whether the anchored region is positioned using css \"position: fixed\". Otherwise the region uses \"position: absolute\".\n * Fixed placement allows the dropdown contents to break out of parent containers.\n */\n @property({ reflect: true, attribute: 'fixed-placement', type: Boolean })\n fixedPlacement: boolean = false;\n\n /** @internal watcher */\n @watch('open')\n handleOpenChanged() {\n this.setTriggerAttribute(this.trigger!, 'expanded', this.open.toString());\n\n if (this.open) {\n // this is necessary for keydown event listeners when using non focusable slotted items\n this.setAttribute('tabindex', '-1');\n setTimeout(() => {\n this.items[0]?.focus();\n });\n } else {\n this.removeAttribute('tabindex');\n }\n }\n\n /** @internal watcher */\n @watch('trigger')\n @watch('menu')\n setAriaLabel() {\n if (!this.menu || !this.trigger) return;\n\n this.setTriggerAttribute(this.trigger, 'expanded', this.open.toString());\n this.setTriggerAttribute(this.trigger, 'haspopup', 'menu');\n\n // TODO: This causes axe test to fail, as FAST sets aria-controls on the <button> control inside the he-button shadowroot\n // this.trigger.setAttribute('aria-controls', this.menu.id);\n\n if (!this.trigger.id) {\n this.trigger.id = `he-dropdown-button-${++dropdownButtonId}`;\n }\n\n if (!this.menu.id) {\n this.menu.id = `he-menu-${++menuId}`;\n }\n\n if (!this.menu.getAttribute('aria-labelledby')) {\n this.menu.setAttribute('aria-labelledby', this.trigger.id);\n }\n }\n\n protected handleTriggerSlotChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n\n // don't change trigger if slot change event is coming from slots inside button\n if (target.name !== 'trigger') return;\n\n const elements = target.assignedElements({ flatten: true }) as HTMLElement[];\n\n if (!elements.length) return;\n\n // remove event listener from old trigger\n this.trigger?.removeEventListener('click', this.handleClick);\n\n this.trigger = elements[0];\n\n // add listener to new trigger\n this.trigger?.addEventListener('click', this.handleClick);\n\n this.setAriaLabel();\n }\n\n protected handleDefaultSlotChange(e: Event) {\n const target = e.target as HTMLSlotElement;\n\n const menuElements = target\n .assignedElements({ flatten: true })\n .filter(el => el.getAttribute('role') === 'menu') as Menu[];\n\n if (menuElements.length <= 0) return;\n\n this.menu = menuElements[0];\n\n this.removeMenuListener();\n this.attachMenuListener();\n this.setAriaLabel();\n }\n\n protected attachMenuListener() {\n this.menuDefaultSlot = this.menu?.shadowRoot?.querySelector('slot:not([name])');\n this.menuDefaultSlot?.addEventListener('slotchange', this.handleMenuDefaultSlotChange);\n this.handleMenuDefaultSlotChange();\n }\n\n protected removeMenuListener() {\n this.menuDefaultSlot?.removeEventListener('slotchange', this.handleMenuDefaultSlotChange);\n }\n\n // for notifier on slotted menu\n protected handleMenuDefaultSlotChange = async () => {\n await this.updateComplete;\n\n this.items = [...this.querySelectorAll('.he-menu-item')] as MenuItem[];\n\n this.items.forEach((item: MenuItem) => {\n item.addEventListener('keydown', this.boundHandleMenuItemKeyDown);\n item.submenuFixedPlacement = true;\n });\n };\n\n protected boundHandleKeyDown = this.handleKeyDown.bind(this);\n protected boundHandleMenuItemKeyDown = this.handleMenuItemKeyDown.bind(this);\n\n async connectedCallback() {\n super.connectedCallback();\n\n document.addEventListener('click', this.handlePageClick);\n this.addEventListener('he-change', this.handleDropdownChange);\n this.addEventListener('keydown', this.boundHandleKeyDown);\n\n await this.updateComplete;\n\n this.setTriggerAttribute(this.trigger!, 'expanded', this.open.toString());\n }\n\n protected handlePageClick = (e: Event) => {\n if (e.composedPath().includes(this) || !this.open) return;\n\n this.requestClose('document');\n };\n\n firstUpdated() {\n super.firstUpdated();\n this.attachMenuListener();\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handlePageClick);\n this.removeMenuListener();\n this.removeEventListener('he-change', this.handleDropdownChange);\n this.removeEventListener('keydown', this.boundHandleKeyDown);\n super.disconnectedCallback();\n }\n\n // override HarmonyDismissibleElement show()\n override async show(): Promise<void> {\n if (this.open) return;\n // timeout added to prevent close from external trigger\n setTimeout(() => (this.open = true));\n return waitForEvent(this, `he-${this.scopedEventName}-after-show`);\n }\n\n protected async handlePopupTransition(e: TransitionEvent) {\n await this.updateComplete;\n this.open ? this.emitAfterShow() : this.emitAfterHide();\n }\n\n protected get triggerIsDisabled(): boolean {\n if (this.trigger == null) return true;\n\n const trigger = this.trigger;\n\n return trigger.hasAttribute('disabled') || trigger.ariaDisabled === 'true';\n }\n\n protected handleKeyDown(e: KeyboardEvent) {\n if (e.key === 'Escape' && this.open) {\n this.requestClose('keyboard');\n e.stopPropagation();\n }\n\n if (!this.trigger || this.triggerIsDisabled) return;\n\n if (this.open) {\n // keyboard functions when dropdown is open\n switch (e.key) {\n case 'ArrowDown':\n if (e.target !== this.trigger) return true;\n e.preventDefault();\n\n // focus on first item\n this.menu?.focus();\n return false;\n\n case 'ArrowUp':\n if (e.target !== this.trigger) return true;\n e.preventDefault();\n\n // focus on last item\n this.menu?.handleMenuKeyDown(new KeyboardEvent('keydown', { key: 'End' }));\n return false;\n\n case 'Home':\n case 'End':\n if (e.target !== this.trigger) return true;\n e.preventDefault();\n\n // trigger key event in menu\n this.menu?.handleMenuKeyDown(new KeyboardEvent('keydown', { key: e.key }));\n return false;\n\n case 'Tab':\n if (e.shiftKey) {\n if (e.target === this.trigger && this.open) {\n e.preventDefault();\n this.requestClose('keyboard');\n }\n return true;\n }\n\n if (!this.menu) return;\n\n e.preventDefault();\n\n if (e.target === this.trigger) {\n // focus on first item\n this.menu?.focus();\n } else {\n // close menu and focus on trigger\n this.requestClose('keyboard');\n this.trigger.focus();\n }\n\n return false;\n\n default:\n // if we are not handling the event, do not prevent default\n return true;\n }\n } else {\n // keyboard functions when dropdown is closed\n switch (e.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n if (!e.composedPath().includes(this.trigger)) return true;\n\n e.preventDefault();\n this.open = true;\n return false;\n\n default:\n return true;\n }\n }\n }\n\n protected handleDropdownChange = (e: Event) => {\n // close menu when menuitem is picked\n const role = (e.target as MenuItem)?.role;\n\n if (!role) return;\n\n if (role.startsWith('menuitem')) {\n this.requestClose('change');\n }\n };\n\n protected handleMenuItemKeyDown(e: KeyboardEvent): boolean {\n // focus back on trigger element if change is triggered through keyboard\n if ((e.key === 'Enter' || e.key === ' ') && !this.open) this.trigger?.focus();\n return true;\n }\n\n protected async requestClose(source: DropdownCloseSource) {\n const requestClose = this.emitRequestClose(source, this.menuWrapper);\n if (!requestClose) return false;\n\n this.trigger?.focus();\n return true;\n }\n\n protected handleClick = (e: MouseEvent) => {\n if (this.triggerIsDisabled || e.defaultPrevented) {\n return;\n }\n\n if (this.open === true) {\n this.requestClose('trigger');\n return;\n }\n\n this.open = true;\n };\n\n protected setTriggerAttribute(\n element: HTMLElement,\n attribute: 'expanded' | 'pressed' | 'label' | 'current' | 'haspopup' | 'controls',\n value: string\n ) {\n if (!element) return;\n\n const attr = element.classList.contains('he-focusable') ? attribute : `aria-${attribute}`;\n element.setAttribute(attr, value);\n }\n\n protected removeTriggerAttribute(\n element: HTMLElement,\n attribute: 'expanded' | 'pressed' | 'label' | 'current' | 'haspopup' | 'controls'\n ) {\n if (!element) return;\n\n const attr = element.classList.contains('he-focusable') ? attribute : `aria-${attribute}`;\n element.removeAttribute(attr);\n }\n\n protected handleFocusOut(e: FocusEvent) {\n if (!this.open || this.menu) return;\n\n setTimeout(() => {\n if (this.contains(this.findRootNode(this)?.activeElement)) return;\n this.trigger?.focus();\n this.hide();\n });\n }\n\n render() {\n return html`\n <div class=${classMap({\n dropdown: true,\n 'dropdown--open': this.open,\n })}>\n <slot\n id=\"anchor\" name=\"trigger\"\n @slotchange=${this.handleTriggerSlotChange}\n >\n </slot>\n\n <${this.scope.tag('popup')}\n class=\"popup\"\n part=\"popup\"\n exportparts=\"\n base:popup,\n popup:popup__popup\n \"\n placement=${this.position}\n strategy=${this.fixedPlacement ? 'fixed' : 'absolute'}\n shift\n shift-padding=\"4\"\n auto-size=\"both\"\n flip\n ?active=${this.open}\n .shiftBoundary=${this.viewportElement}\n .flipBoundary=${this.viewportElement}\n .autoSizeBoundary=${this.viewportElement}\n anchor=\"anchor\"\n >\n ${this.content()}\n </${this.scope.tag('popup')}>\n </div>\n `;\n }\n\n protected content() {\n return html`\n <div\n @transitionend=${this.handlePopupTransition}\n @transitioncancel=${this.handlePopupTransition}\n class=\"menu-wrapper\"\n part=\"menu-wrapper\"\n @focusout=${this.handleFocusOut}\n aria-hidden=${this.open ? 'false' : 'true'}\n >\n <slot @slotchange=${this.handleDefaultSlotChange}></slot>\n </div>\n `;\n }\n\n isAlreadyCheckedMenuItem(target: EventTarget | null): boolean {\n return !!(\n this.open &&\n target &&\n (target as HTMLElement).getAttribute('role') === 'menuitemradio' &&\n (target as MenuItem)?.checked\n );\n }\n}\n\nexport default Dropdown;\n","import { css } from 'lit';\nimport { SystemColors } from '../../utilities/system-colors.js';\n\nexport default css`\n :host {\n display: block;\n }\n\n /* Prevents margins users are putting on message bar from showing, except when message bar is open or animating. */\n :host(.he-hidden) {\n margin: 0 !important;\n }\n\n ::slotted([slot='actions']) .he-button {\n height: var(--he-form-control-height-small) !important;\n font-size: var(--he-font-size-medium) !important;\n margin: 0 var(--he-spacing-2x-small);\n }\n\n .message-bar__wrapper {\n overflow: hidden;\n }\n\n .message-bar {\n position: relative;\n display: flex;\n flex-direction: column;\n background-color: var(--he-color-surface-background);\n font-weight: var(--he-font-weight-normal);\n min-height: var(--he-form-control-height);\n width: 100%;\n }\n\n .message-bar__content {\n display: flex;\n align-items: flex-start;\n width: 100%;\n line-height: var(--he-line-height-normal);\n }\n\n .message-bar-icon {\n flex: 0;\n font-size: var(--he-font-size-large);\n min-width: var(--he-font-size-large);\n min-height: var(--he-font-size-large);\n margin-top: var(--he-spacing-x-small);\n margin-inline-start: var(--he-spacing-small);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .message-bar__message-container {\n flex: 1;\n font-family: var(--he-body-font);\n font-size: var(--he-font-size-small);\n font-weight: var(--he-font-weight-normal);\n line-height: var(--he-line-height-small);\n margin: var(--he-spacing-x-small) var(--he-spacing-x-small);\n display: flex;\n min-width: 0px;\n }\n\n .message-bar--collapsed .message-bar__message-container {\n max-height: var(--he-line-height-small);\n overflow: hidden;\n }\n\n .message-bar--collapsed .message-bar__message-inner-container {\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .message-bar--expanded .message-bar__message-inner-container {\n white-space: normal;\n word-break: break-word;\n }\n\n .message-bar__actions {\n flex: 0;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: var(--he-form-control-height);\n }\n\n .message-bar__button .he-icon {\n font-size: var(--he-font-size-small);\n }\n\n .message-bar__footer {\n display: none;\n }\n\n .message-bar--has-actions .message-bar__footer {\n display: flex;\n margin: var(--he-spacing-2x-small) var(--he-spacing-x-small);\n justify-content: flex-end;\n }\n\n /* Appearance Styles */\n .message-bar--info {\n background-color: var(--he-color-neutral-100);\n }\n\n .message-bar--info .message-bar__button {\n --button-background-color-hover: var(--he-color-neutral-200);\n --button-background-color-active: var(--he-color-neutral-250);\n }\n\n .message-bar--notice {\n background-color: var(--he-color-primary-100);\n }\n\n .message-bar--notice .message-bar-icon {\n color: var(--he-color-neutral-700);\n }\n\n .message-bar--notice .message-bar__button {\n --button-background-color-hover: var(--he-color-primary-200);\n --button-background-color-active: var(--he-color-primary-300);\n }\n\n .message-bar--success {\n background-color: var(--he-color-success-100);\n }\n\n .message-bar--success .message-bar-icon {\n color: var(--he-color-success-700);\n }\n\n .message-bar--success .message-bar__button {\n --button-background-color-hover: var(--he-color-success-200);\n --button-background-color-active: var(--he-color-success-300);\n }\n\n .message-bar--warning {\n background-color: var(--he-color-warning-100);\n }\n\n .message-bar--warning .message-bar__button {\n --button-background-color-hover: var(--he-color-warning-200);\n --button-background-color-active: var(--he-color-warning-300);\n }\n\n .message-bar--error {\n background-color: var(--he-color-danger-100);\n }\n\n .message-bar--error .message-bar-icon {\n color: var(--he-color-danger-700);\n }\n\n .message-bar--error .message-bar__button {\n --button-background-color-hover: var(--he-color-danger-200);\n --button-background-color-active: var(--he-color-danger-300);\n }\n\n /* High contrast */\n @media screen and (forced-colors: active) {\n .message-bar {\n border: 1px solid ${SystemColors.CanvasText};\n }\n\n .message-bar-icon {\n color: ${SystemColors.CanvasText};\n }\n }\n`;\n","import { html } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { watch } from '../../internal/watch.js';\nimport { animateTo, stopAnimations } from '../../internal/animations.js';\nimport button from '../button/button.js';\nimport icon from '../icon/icon.js';\nimport HarmonyDismissibleElement from '../../base-components/dismissible.js';\nimport componentStyles from '../../internal/styles/component.styles.js';\nimport { Component } from '../../utilities/decorators.js';\nimport styles from './message-bar.styles.js';\n\nconst KEY_FRAMES = {\n right: {\n open: [\n { opacity: 0, transform: 'translateX(100%)' },\n { opacity: 1, transform: 'translateX(0)' },\n ],\n close: [\n { opacity: 1, transform: 'translateX(0)' },\n { opacity: 0, transform: 'translateX(100%)' },\n ],\n },\n left: {\n open: [\n { opacity: 0, transform: 'translateX(-100%)' },\n { opacity: 1, transform: 'translateX(0)' },\n ],\n close: [\n { opacity: 1, transform: 'translateX(0)' },\n { opacity: 0, transform: 'translateX(-100%)' },\n ],\n },\n};\n\n/**\n *\n * A message bar is a banner that displays errors, warnings, or important information. For example, if a file failed to upload an error message bar will appear.\n *\n * @tag he-message-bar\n * @since 2.1\n * @status stable\n * @figma https://www.figma.com/file/UvgzWQM5R18Lrs4VHs2UPd/Partner-Center-extended-toolkit?type=design&node-id=86%3A19294&mode=design&t=FrLbCdXM439ktBGm-1\n *\n * @slot - The message content of the message bar.\n * @slot icon - Optional icon to override the built-in icons.\n * @slot actions - Optional action buttons to display for the message bar.\n *\n * @event he-ready - Emitted when the component has completed its initial render.\n * @event he-message-bar-show - Emitted when the message bar is opened.\n * @event he-message-bar-after-show - Emitted after the message bar is opened and the transitions are complete.\n * @event he-message-bar-hide - Emitted when the message bar is closed.\n * @event he-message-bar-after-hide - Emitted after the message bar is closed and the transitions are complete.\n * @event he-show - (@deprecated) Use `he-message-bar-show` instead.\n * @event he-after-show - (@deprecated) Use `he-message-bar-after-show` instead.\n * @event he-hide - (@deprecated) Use `he-message-bar-hide` instead.\n * @event he-after-hide - (@deprecated) Use `he-message-bar-after-hide` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The \"content\" of the collapsed or single line message.\n * @csspart footer - The footer portion of the message only displayed when expanded.\n * @csspart icon - The icon of the message bar.\n * @csspart message - The base of the message portion of the bar.\n * @csspart actions - The base of the actions slot's content.\n *\n * @dependency he-button\n * @dependency he-icon\n */\n@Component('message-bar', [button, icon])\nexport class MessageBar extends HarmonyDismissibleElement {\n static styles = [componentStyles, styles];\n static reactEvents = {\n onHeReady: new CustomEvent('he-ready'),\n onHeMessageBarShow: new CustomEvent('he-message-bar-show'),\n onHeMessageBarAfterShow: new CustomEvent('he-message-bar-after-show'),\n onHeMessageBarHide: new CustomEvent('he-message-bar-hide'),\n onHeMessageBarAfterHide: new CustomEvent('he-message-bar-after-hide'),\n /** @deprecated Use `onHeMessageBarShow` instead. */\n onHeShow: new CustomEvent('he-show'),\n /** @deprecated Use `onHeMessageBarAfterShow` instead. */\n onHeAfterShow: new CustomEvent('he-after-show'),\n /** @deprecated Use `onHeMessageBarHide` instead. */\n onHeHide: new CustomEvent('he-hide'),\n /** @deprecated Use `onHeMessageBarAfterHide` instead. */\n onHeAfterHide: new CustomEvent('he-after-hide'),\n };\n\n private resizeObserver: ResizeObserver;\n private closeTimeout: null | number = null;\n @query('.message-bar') private base?: HTMLElement;\n @query('.message-bar__message-container') private messageContainer?: HTMLElement;\n @query('.message-bar__message-inner-container') private messageContent?: HTMLElement;\n private hasSlotController = new HasSlotController(this, '[default]', 'actions', 'icon');\n private originalTrigger: HTMLElement | null;\n protected scopedEventName = MessageBar.baseName;\n\n /**\n * The direction the message bar will open and close from.\n *\n * Note: \"right\" and \"left\" will be deprecated in a future version. Please use the logical properties \"end\" or\n * \"start\", which are based on language direction.\n */\n @property() direction: 'end' | 'start' | 'right' | 'left' = 'end';\n\n // direction converted to right or left based on direction\n @state()\n private get _direction() {\n switch (this.direction) {\n case 'start':\n return this.dir === 'rtl' ? 'right' : 'left';\n case 'end':\n return this.dir === 'rtl' ? 'left' : 'right';\n default:\n return this.direction;\n }\n }\n\n /** Indicates the transition speed for animations in ms. */\n @property({ type: Number, attribute: 'transition-speed' }) transitionSpeed = 400;\n\n /** Expands the message if it is a multi line message. */\n @property({ type: Boolean, reflect: true }) expanded: boolean = false;\n\n /** Hides the close button (message will still auto close). */\n @property({ type: Boolean, reflect: true, attribute: 'no-close-button' }) noCloseButton: boolean = false;\n\n /**\n * The time in milliseconds before the message automatically closes. By default, the message bar will remain open\n * indefinitely.\n */\n @property({ type: Number }) duration = Infinity;\n\n /** Indicates the type and appearance of the message bar. */\n @property() appearance: 'info' | 'notice' | 'success' | 'warning' | 'error' = 'info';\n\n /** Allows developers to manually control the multiline behavior */\n @property({ type: Boolean, reflect: true }) expandable?: boolean;\n\n /** @internal watcher */\n @watch('appearance')\n handleAppearanceChange(oldValue: string, newValue: string) {\n if (oldValue !== newValue) {\n this.iconName = this.getIconName(newValue);\n }\n }\n\n /** @internal watcher */\n @watch('expandable')\n handleExpandableChange() {\n this.setMultiline();\n }\n\n @state()\n private iconName: string = 'info';\n\n @state()\n private multiline: boolean = false;\n\n @state()\n private visible: boolean = false;\n\n /** @internal watcher */\n @watch('visible')\n handleVisibleChange() {\n this.classList.toggle('he-hidden', !this.visible);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.initResizeObserver();\n }\n\n firstUpdated() {\n super.firstUpdated();\n\n if (this.open) {\n this.visible = true;\n this.startDuration();\n this.updateComplete.then(() => this.setMultiline());\n } else {\n this.visible = false;\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver.unobserve(this);\n this.resizeObserver.disconnect();\n super.disconnectedCallback();\n }\n\n private get keyFrames() {\n switch (this._direction) {\n case 'left':\n return KEY_FRAMES.left;\n default:\n return KEY_FRAMES.right;\n }\n }\n\n private startDuration() {\n // Reset the timer\n if (this.closeTimeout) {\n clearTimeout(this.closeTimeout);\n }\n\n if (this.duration > 0 && this.duration < Infinity) {\n this.closeTimeout = window.setTimeout(() => {\n if (this.open) {\n this.hide();\n }\n }, this.duration);\n }\n }\n\n private handleSlotChange() {\n this.setMultiline();\n }\n\n private setMultiline() {\n if (!this.open) return;\n\n if (this.expandable !== undefined) {\n this.multiline = this.expandable;\n } else if (this.expanded) {\n this.multiline = true;\n } else {\n const containerWidth = this.messageContainer?.offsetWidth || 0;\n if (containerWidth === 0) return;\n\n const containerHeight = this.messageContainer?.clientHeight || 0;\n if (containerHeight === 0) return;\n\n const contentWidth = this.messageContent?.offsetWidth || 0;\n const contentHeight = this.messageContent?.clientHeight || 0;\n const isTooWide = contentWidth >= containerWidth;\n const isTooTall = contentHeight > containerHeight + 4;\n\n this.multiline = isTooWide || isTooTall;\n }\n }\n\n private initResizeObserver() {\n this.resizeObserver = new ResizeObserver(() => this.setMultiline());\n this.resizeObserver.observe(this);\n }\n\n /** Toggle the expanded attribute to expand or collapse multi line message. */\n public toggleExpand() {\n this.expanded = !this.expanded;\n\n if (this.expanded) {\n this.messageContent?.focus();\n }\n }\n\n private getIconName(type: string) {\n switch (type) {\n case 'success':\n return 'completed';\n case 'warning':\n return 'warning';\n case 'error':\n return 'errorbadge';\n case 'notice':\n default:\n return 'info';\n }\n }\n\n public override async show(): Promise<void> {\n this.originalTrigger = this.findRootNode(this)?.activeElement as HTMLElement | null;\n await super.show();\n this.messageContent?.focus();\n return Promise.resolve();\n }\n\n public override async hide() {\n if (!this.open) {\n return;\n }\n\n if (this.closeTimeout) {\n clearTimeout(this.closeTimeout);\n }\n\n this.expanded = false;\n\n // restore focus to the original trigger\n if (this.originalTrigger && typeof this.originalTrigger.focus === 'function') {\n this.originalTrigger.focus();\n }\n\n return super.hide();\n }\n\n /** @internal watcher */\n @watch('open', { waitUntilFirstUpdate: true })\n async openChange() {\n if (!this.base) {\n return;\n }\n\n if (this.open) {\n await stopAnimations(this.base);\n this.visible = true;\n await animateTo(this.base, this.keyFrames.open, { duration: this.transitionSpeed, easing: 'ease' });\n this.startDuration();\n this.emitAfterShow();\n } else {\n await animateTo(this.base, this.keyFrames.close, { duration: this.transitionSpeed, easing: 'ease' });\n this.visible = false;\n this.closeTimeout = null;\n this.emitAfterHide();\n }\n }\n\n render() {\n return html`\n <div class=\"message-bar__wrapper\">\n <div\n part=\"base\"\n class=\n ${classMap({\n 'message-bar': true,\n 'message-bar--open': this.open,\n 'message-bar--collapsed': !this.expanded,\n 'message-bar--expanded': this.expanded,\n [`message-bar--${this.appearance}`]: true,\n 'message-bar--has-actions': this.hasSlotController.test('actions'),\n })}\n ?hidden=${!this.visible}\n >\n <div part=\"content\" class=\"message-bar__content\">\n <div part=\"icon\" class=\"message-bar-icon\">\n <slot name=\"icon\">\n <${this.scope.tag('icon')} name=\"${this.iconName}\"></${this.scope.tag('icon')}>\n </slot>\n </div>\n <div part=\"message\" class='message-bar__message-container'>\n <div class=\"message-bar__message-inner-container\" tabindex=\"-1\" role=\"text\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n </div>\n <div part=\"actions\" class=\"message-bar__actions\">\n ${!this.expanded ? html`<slot name=\"actions\"></slot>` : ''}\n ${\n this.multiline\n ? html`\n <${this.scope.tag('button')}\n class=\"message-bar__button message-bar__multiline__button\"\n appearance=\"stealth\"\n ?expanded=${this.expanded}\n @click=${this.toggleExpand}\n >\n <${this.scope.tag('icon')}\n name=${this.expanded ? 'doublechevronup' : 'doublechevrondown'}\n label=\"${this.localize.term('more_info')}\"\n ></${this.scope.tag('icon')}>\n </${this.scope.tag('button')}>\n `\n : ''\n }\n ${\n !this.noCloseButton\n ? html`\n <${this.scope.tag('button')}\n class=\"message-bar__button\"\n appearance=\"stealth\"\n @click=${this.hide}\n >\n <${this.scope.tag('icon')} name=\"cancel\" label=${this.localize.term('close_message')}>\n </${this.scope.tag('icon')}>\n </${this.scope.tag('button')}>\n `\n : ''\n }\n </div>\n </div>\n ${\n this.expanded\n ? html`\n <div part=\"footer\" class=\"message-bar__footer\">\n <slot name=\"actions\"></slot>\n </div>\n `\n : ''\n }\n </div>\n </div>\n `;\n }\n}\n\nexport default MessageBar;\n","import { css } from 'lit';\nimport { visuallyHiddenStyles } from '../../internal/styles/visually-hidden.js';\n\nexport default css`\n :host(:not(:focus-within)) {\n ${visuallyHiddenStyles}\n }\n`;\n","import { html } from 'lit';\nimport HarmonyElement from '../../base-components/base.js';\nimport componentStyles from '../../internal/styles/component.styles.js';\nimport { Component } from '../../utilities/decorators.js';\nimport styles from './visually-hidden.styles.js';\n\n/**\n *\n * Visually hidden content is useful for accessibility and is used to hide content that is meant to be read by assistive technologies like screen readers.\n * If an element within the component is focusable, it will become visible when focused.\n *\n * @tag he-visually-hidden\n * @since 3.0\n * @status stable\n *\n * @slot - The content you'd like to be visually hidden.\n *\n * @event he-ready - Emitted when the component has completed its initial render.\n */\n@Component('visually-hidden')\nexport class VisuallyHidden extends HarmonyElement {\n static styles = [componentStyles, styles];\n static reactEvents = {\n onHeReady: new CustomEvent('he-ready'),\n };\n\n render() {\n return html`<slot></slot>`;\n }\n}\n\nexport default VisuallyHidden;\n","const scrollLocks = new Set();\n\n// Drop the lock style on document globally\nconst style = document.createElement('style');\nstyle.textContent = `\n.he-scroll-lock{\n overflow: hidden !important;\n}\n`;\ndocument.head.append(style);\n\n/**\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent\n * seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n return {\n top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),\n };\n}\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n scrollLocks.add(lockingEl);\n document.body.classList.add('he-scroll-lock');\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n scrollLocks.delete(lockingEl);\n\n if (scrollLocks.size === 0) {\n document.body.classList.remove('he-scroll-lock');\n }\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n element: HTMLElement,\n container: HTMLElement,\n direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n behavior: 'smooth' | 'auto' = 'smooth'\n) {\n const offset = getOffset(element, container);\n const offsetTop = offset.top + container.scrollTop;\n const offsetLeft = offset.left + container.scrollLeft;\n const minX = container.scrollLeft;\n const maxX = container.scrollLeft + container.offsetWidth;\n const minY = container.scrollTop;\n const maxY = container.scrollTop + container.offsetHeight;\n\n if (direction === 'horizontal' || direction === 'both') {\n if (offsetLeft < minX) {\n container.scrollTo({ left: offsetLeft, behavior });\n } else if (offsetLeft + element.clientWidth > maxX) {\n container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n }\n }\n\n if (direction === 'vertical' || direction === 'both') {\n if (offsetTop < minY) {\n container.scrollTo({ top: offsetTop, behavior });\n } else if (offsetTop + element.clientHeight > maxY) {\n container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n }\n }\n}\n","import { css } from 'lit';\nimport { litElevation } from '../../internal/styles/elevation.js';\nimport { SystemColors } from '../../utilities/system-colors.js';\n\nexport default css`\n :host {\n --he-elevation: 64;\n --size: var(--he-panel-size-small);\n --header-padding-x: var(--he-spacing-x-large);\n /* deprecated: --header-padding-y */\n --header-padding-top: var(--he-header-padding-y, var(--he-spacing-x-large));\n --header-padding-bottom: var(--header-padding-y, 0);\n --header-padding: var(--header-padding-top) var(--header-padding-x) var(--header-padding-bottom)\n var(--header-padding-x);\n\n --body-padding-y: var(--he-spacing-large);\n --body-padding-x: var(--he-spacing-x-large);\n --body-padding: var(--body-padding-y) var(--body-padding-x);\n\n --footer-padding-y: var(--he-spacing-large);\n --footer-padding-x: var(--he-spacing-large);\n --footer-padding: var(--footer-padding-y) var(--footer-padding-x);\n color: var(--he-type-primary);\n position: absolute;\n }\n\n :host([open][contained]) {\n inset: 0;\n }\n\n :host([size='small']) {\n --size: var(--he-panel-size-small);\n }\n\n :host([size='medium']) {\n --size: var(--he-panel-size-medium);\n }\n\n :host([size='large']) {\n --size: var(--he-panel-size-large);\n }\n\n :host([size='extra-large']) {\n --size: var(--he-panel-size-extra-large);\n }\n\n .fly-in {\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n }\n\n .fly-in--contained {\n position: absolute;\n z-index: initial;\n }\n\n .fly-in--fixed {\n position: fixed;\n z-index: 800;\n }\n\n .fly-in__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 1;\n max-width: 100%;\n max-height: 100%;\n background-color: var(--he-color-surface-background);\n ${litElevation};\n overflow: auto;\n pointer-events: all;\n }\n\n .fly-in__panel:focus {\n outline: none;\n }\n\n .fly-in--right .fly-in__panel {\n top: 0;\n right: 0;\n bottom: auto;\n left: auto;\n width: var(--size);\n height: 100%;\n }\n\n .fly-in--left .fly-in__panel {\n top: 0;\n right: auto;\n bottom: auto;\n left: 0;\n width: var(--size);\n height: 100%;\n }\n\n .fly-in__header {\n display: flex;\n align-items: start;\n justify-content: space-between;\n padding: var(--header-padding);\n position: sticky;\n top: 0;\n background-color: var(--he-color-surface-background);\n z-index: 2;\n }\n\n .fly-in__header__slots {\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n gap: var(--he-spacing-x-small);\n }\n\n .fly-in__actions {\n display: none;\n gap: var(--he-spacing-2x-small);\n }\n\n .fly-in--has-actions .fly-in__actions {\n display: flex;\n }\n\n .fly-in__title {\n font-size: var(--he-font-size-2x-large);\n line-height: var(--he-line-height-2x-large);\n font-weight: var(--he-font-weight-semibold);\n margin: 0;\n }\n\n .fly-in__close {\n flex: 0 0 auto;\n display: flex;\n font-size: var(--he-font-size-large);\n text-decoration: none;\n cursor: pointer;\n }\n\n .fly-in__hidden-close {\n position: relative;\n display: block;\n }\n\n .fly-in__hidden-close .fly-in__close {\n position: absolute;\n right: 0;\n z-index: 3;\n }\n\n .fly-in__body {\n flex: 1 1 auto;\n padding: var(--body-padding);\n -webkit-overflow-scrolling: touch;\n }\n\n .fly-in__footer {\n text-align: start;\n padding: var(--footer-padding);\n position: sticky;\n bottom: 0;\n z-index: 3;\n background-color: var(--he-color-surface-background);\n }\n\n .fly-in__footer ::slotted(.he-button:not(:last-of-type)) {\n margin-inline-end: var(--he-spacing-x-small);\n }\n\n .fly-in:not(.fly-in--has-footer) .fly-in__footer {\n display: none;\n }\n\n .fly-in__overlay {\n display: block;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n pointer-events: all;\n }\n\n .fly-in--contained .fly-in__overlay {\n position: absolute;\n }\n\n .fly-in--non-sticky-header .fly-in__header {\n position: relative;\n }\n\n /* High contrast */\n @media screen and (forced-colors: active) {\n :host {\n color: ${SystemColors.CanvasText};\n }\n\n .fly-in__panel {\n forced-color-adjust: none;\n background: ${SystemColors.Canvas};\n box-shadow: 0 0 0 1px ${SystemColors.CanvasText};\n }\n\n .fly-in__header,\n .fly-in__panel,\n .fly-in__footer {\n background-color: ${SystemColors.Canvas};\n }\n }\n`;\n","import { html } from 'lit/static-html.js';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport Modal from '../../internal/modal.js';\nimport { animateTo, stopAnimations } from '../../internal/animations.js';\nimport button from '../button/button.js';\nimport icon from '../icon/icon.js';\nimport visuallyHidden from '../visually-hidden/visually-hidden.js';\nimport { PanelSize } from '../../types.js';\nimport HarmonyDismissibleElement from '../../base-components/dismissible.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utilities/scroll.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../internal/styles/component.styles.js';\nimport { Component } from '../../utilities/decorators.js';\nimport styles from './fly-in-panel.styles.js';\n\nexport type FlyInPanelCloseSource = 'close-button' | 'keyboard' | 'overlay';\n\nexport interface FlyInPanelCloseEvent {\n source: FlyInPanelCloseSource;\n}\n\nconst KEY_FRAMES = {\n right: {\n open: [\n { opacity: 0, transform: 'translateX(100%)' },\n { opacity: 1, transform: 'translateX(0)' },\n ],\n close: [\n { opacity: 1, transform: 'translateX(0)' },\n { opacity: 0, transform: 'translateX(100%)' },\n ],\n },\n left: {\n open: [\n { opacity: 0, transform: 'translateX(-100%)' },\n { opacity: 1, transform: 'translateX(0)' },\n ],\n close: [\n { opacity: 1, transform: 'translateX(0)' },\n { opacity: 0, transform: 'translateX(-100%)' },\n ],\n },\n deny: [{ transform: 'scale(1)' }, { transform: 'scale(1.01)' }, { transform: 'scale(1)' }],\n};\n\n/**\n *\n * Fly-in panels, or task panels, are UI overlays that allow users to complete tasks while retaining their context within the app. They often enable a creation or management action from the user, such as adding a group item or editing a line item.\n *\n * @tag he-fly-in-panel\n * @since 1.5\n * @status stable\n * @figma https://www.figma.com/file/UvgzWQM5R18Lrs4VHs2UPd/Partner-Center-extended-toolkit?type=design&node-id=86%3A19299&mode=design&t=FrLbCdXM439ktBGm-1\n *\n * @dependency he-button\n * @dependency he-icon\n * @dependency he-visually-hidden\n *\n * @slot - The fly-in-panel's content.\n * @slot heading - The fly-in-panel's header label. Alternatively, you can use the heading prop.\n * @slot actions - The fly-in-panel's header actions, usually a back button.\n * @slot footer - The fly-in-panel's footer, usually one or more buttons representing various options.\n *\n * @event he-ready - Emitted when the component has completed its initial render.\n * @event he-fly-in-show - Emitted when the fly-in-panel opens.\n * @event he-fly-in-after-show - Emitted after the fly-in-panel opens and all transitions are complete.\n * @event he-fly-in-hide - Emitted when the fly-in-panel closes.\n * @event he-fly-in-after-hide - Emitted after the fly-in-panel closes and all transitions are complete.\n * @event he-fly-in-initial-focus - Emitted when the fly-in-panel opens and the panel gains focus. Calling\n * `event.preventDefault()` will prevent focus and allow you to set it on a different element in the fly-in-panel,\n * such as an input or button. You can also put `autofocus` attribute on the element instead to set initial focus.\n * @event {FlyInPanelCloseEvent} he-fly-in-request-close - Emitted when the user attempts to\n * close the fly-in panel by clicking the close button, clicking the overlay, or pressing the escape key. Calling\n * `event.preventDefault()` will prevent the panel from closing. You can check `event.detail.source` to determine how\n * the request was initiated. Avoid using this unless closing the fly-in panel will result in destructive behavior\n * such as data loss.\n * @event he-show - (@deprecated) Use `he-fly-in-show` instead.\n * @event he-after-show - (@deprecated) Use `he-fly-in-after-show `instead.\n * @event he-hide - (@deprecated) Use `he-fly-in-hide` instead.\n * @event he-after-hide - (@deprecated) Use `he-fly-in-after-hide` instead.\n * @event he-initial-focus - (@deprecated) Use `he-fly-in-initial-focus` instead.\n * @event {FlyInPanelCloseEvent} he-request-close - (@deprecated) Use `he-fly-in-request-close` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay.\n * @csspart panel - The fly-in-panel panel (where the fly-in-panel and its content is rendered).\n * @csspart header - The fly-in-panel header.\n * @csspart title - The fly-in-panel title.\n * @csspart close-button - The close button.\n * @csspart body - The fly-in-panel body.\n * @csspart footer - The fly-in-panel footer.\n *\n * @cssproperty --size - The preferred size of the fly-in-panel. This will be applied to the fly-in-panel's width or height.\n * depending on its `placement`. Note that the fly-in-panel will shrink to accommodate smaller screens.\n * @cssproperty --header-padding-x - The amount of horizontal padding to use for the header.\n * @cssproperty --header-padding-y - (@deprecated) Use `--header-padding-top` and `--header-padding-bottom` instead.\n * @cssproperty --header-padding-top - The amount of vertical padding to use at the top of the header.\n * @cssproperty --header-padding-bottom - The amount of vertical padding to use at the bottom of the header.\n * @cssproperty --body-padding-x - The amount of horizontal padding to use for the body.\n * @cssproperty --body-padding-y - The amount of vertical padding to use for the body.\n * @cssproperty --footer-padding-x - The amount of horizontal padding to use for the footer.\n * @cssproperty --footer-padding-y - The amount of vertical padding to use for the footer.\n * @cssproperty [--he-elevation=64] - Elevation of the card.\n */\n@Component('fly-in-panel', [button, icon, visuallyHidden])\nexport class FlyInPanel extends HarmonyDismissibleElement {\n static styles = [componentStyles, styles];\n static reactEvents = {\n onHeReady: new CustomEvent('he-ready'),\n onHeFlyInShow: new CustomEvent('he-fly-in-show'),\n onHeFlyInAfterShow: new CustomEvent('he-fly-in-after-show'),\n onHeFlyInHide: new CustomEvent('he-fly-in-hide'),\n onHeFlyInAfterHide: new CustomEvent('he-fly-in-after-hide'),\n onHeFlyInInitialFocus: new CustomEvent('he-fly-in-initial-focus'),\n onHeFlyInRequestClose: new CustomEvent<FlyInPanelCloseEvent>('he-fly-in-request-close'),\n /** @deprecated Use `onHeFlyInShow` instead. */\n onHeShow: new CustomEvent('he-show'),\n /** @deprecated Use `onHeFlyInAfterShow` instead. */\n onHeAfterShow: new CustomEvent('he-after-show'),\n /** @deprecated Use `onHeFlyInHide` instead. */\n onHeHide: new CustomEvent('he-hide'),\n /** @deprecated Use `onHeFlyInAfterHide` instead. */\n onHeAfterHide: new CustomEvent('he-after-hide'),\n /** @deprecated Use `onHeFlyInInitialFocus` instead. */\n onHeInitialFocus: new CustomEvent('he-initial-focus'),\n /** @deprecated Use `onHeFlyInRequestClose` instead. */\n onHeRequestClose: new CustomEvent<FlyInPanelCloseEvent>('he-request-close'),\n };\n\n private hasSlotController = new HasSlotController(this, '[default]', 'heading', 'footer', 'actions');\n protected scopedEventName = 'fly-in';\n\n /** Indicates whether or not the fly-in-panel is open. You can use this in lieu of the show/hide methods. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Indicates the transition speed for animations. */\n @property({ type: Number, attribute: 'transition-speed' }) transitionSpeed = 300;\n\n /** @deprecated use `--size` css property instead. */\n @property() size?: PanelSize;\n\n /**\n * The fly-in-panel's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n */\n @property() heading = '';\n\n /**\n * The direction the fly-in-panel will open from.\n *\n * Note: \"right\" and \"left\" will be deprecated in a future version. Please use the logical properties \"end\" or\n * \"start\", which are based on language direction.\n */\n @property() placement: 'end' | 'start' | 'right' | 'left' = 'end';\n\n // placement converted to right or left based on direction\n @state()\n private get _placement() {\n switch (this.placement) {\n case 'start':\n return this.dir === 'rtl' ? 'right' : 'left';\n case 'end':\n return this.dir === 'rtl' ? 'left' : 'right';\n default:\n return this.placement;\n }\n }\n\n /**\n * By default, the fly-in-panel slides out of its containing block (usually the viewport). To make the fly-in-panel slide out of\n * its parent element, set this prop and add `position: relative` to the parent.\n */\n @property({ type: Boolean, reflect: true }) contained = false;\n\n /**\n * Removes the header. This will also remove the default close button. If using prevent default on he-fly-in-request-close please provide a way for the user to close the fly-in-panel.\n */\n @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;\n\n @query('.fly-in__panel')\n private panel: HTMLElement;\n\n @query('.fly-in__header')\n private header: HTMLElement;\n\n @query('.fly-in__footer')\n private footer: HTMLElement;\n\n @query('.fly-in__overlay')\n private overlay: HTMLElement;\n\n @query('.fly-in')\n private wrapper: HTMLElement;\n\n @query('.fly-in__close')\n private closeButton: HTMLElement;\n\n @queryAssignedElements({ slot: 'actions', selector: '.he-button' })\n private actionButtons: HTMLElement[];\n\n private modal: Modal;\n private originalTrigger: HTMLElement | null;\n private hasPreventScroll: boolean = false;\n private resizeObserver = new ResizeObserver(() => this.handleResize());\n\n @state() private nonStickyHeader = false;\n\n @state()\n private get keyFrames() {\n switch (this._placement) {\n case 'left':\n return KEY_FRAMES.left;\n default:\n return KEY_FRAMES.right;\n }\n }\n\n constructor() {\n super();\n document.createElement('div').focus({\n get preventScroll() {\n this.hasPreventScroll = true;\n return false;\n },\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.modal = new Modal(this);\n this.setAttribute('tabindex', '-1'); // this is necessary for keydown event listeners\n }\n\n firstUpdated() {\n super.firstUpdated();\n this.wrapper.hidden = !this.open;\n this.resizeObserver.observe(this.panel);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.modal.deactivate();\n unlockBodyScrolling(this);\n this.resizeObserver.unobserve(this.panel);\n this.resizeObserver.disconnect();\n }\n\n /** @internal watcher */\n @watch('open')\n async openChange() {\n if (this.open) {\n // Show\n this.originalTrigger = this.findRootNode(this)?.activeElement as HTMLElement | null;\n this.modal.activate();\n\n if (!this.contained) {\n lockBodyScrolling(this);\n }\n\n this.addEventListener('keydown', this.handleKeyDown);\n\n await this.updateComplete;\n await stopAnimations(this.wrapper);\n this.wrapper.hidden = false;\n\n // Browsers that support el.focus({ preventScroll }) can set initial focus immediately\n if (this.hasPreventScroll) {\n this.initialFocus();\n }\n\n await animateTo(this.panel, this.keyFrames.open, { duration: this.transitionSpeed, easing: 'ease' });\n if (!this.hasPreventScroll) {\n this.initialFocus();\n }\n\n this.emitAfterShow();\n } else {\n if (!this.hasUpdated) return;\n\n // Hide\n this.modal.deactivate();\n\n await animateTo(this.panel, this.keyFrames.close, { duration: this.transitionSpeed, easing: 'ease' });\n this.wrapper.hidden = true;\n\n unlockBodyScrolling(this);\n this.removeEventListener('keydown', this.handleKeyDown);\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n\n this.emitAfterHide();\n }\n }\n\n private initialFocus() {\n const initialFocus = this.emitScopedEvent('initial-focus', { cancelable: true });\n /** @deprecated */\n const oldInitialFocus = this.emit('he-initial-focus', { cancelable: true });\n\n if (initialFocus.defaultPrevented || oldInitialFocus.defaultPrevented) return;\n\n this.getAutofocus()?.focus({ preventScroll: true });\n }\n\n private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n this.emitRequestClose(source, this.panel, KEY_FRAMES.deny, { duration: this.transitionSpeed, easing: 'ease' });\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n event.stopPropagation();\n this.requestClose('keyboard');\n }\n return true;\n };\n\n /**\n * Returns the first element with 'autofocus' attribute inside fly-in panel, if there is none it but there are buttons\n * in the actions slot it returns the first one, or if none, it returns the close button.\n */\n private getAutofocus(): HTMLElement {\n const autofocus: HTMLElement | null = this.querySelector('[autofocus]');\n return autofocus || this.actionButtons[0] || this.closeButton;\n }\n\n /**\n * The header will not be sticky only if the header and footer both present and the total height of them is\n * more than 60% of the fly-in panel's height.\n */\n private handleResize() {\n if (!this.footer || !this.header) return;\n const totalHeight = (this.footer.clientHeight || 0) + (this.header.clientHeight || 0);\n this.nonStickyHeader = totalHeight > this.panel.clientHeight * 0.6;\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n 'fly-in': true,\n 'fly-in--open': this.open,\n 'fly-in--non-sticky-header': this.nonStickyHeader,\n [`fly-in--${this._placement}`]: true,\n 'fly-in--contained': this.contained,\n 'fly-in--fixed': !this.contained,\n 'fly-in--has-footer': this.hasSlotController.test('footer'),\n 'fly-in--has-actions': this.hasSlotController.test('actions'),\n })}\n >\n <div part=\"overlay\" class=\"fly-in__overlay\" @click=${() => this.requestClose('overlay')} tabindex=\"-1\"></div>\n <div\n part=\"panel\"\n class=\"fly-in__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? 'false' : 'true'}\n aria-label=${this.noHeader ? this.heading : ''}\n aria-labelledby=${!this.noHeader ? `${this.id}-title` : ''}\n >\n ${!this.noHeader\n ? html`\n <header part=\"header\" class=\"fly-in__header\">\n <span class=\"fly-in__header__slots\">\n <span class=\"fly-in__actions\">\n <slot name=\"actions\"></slot>\n </span>\n <h2 part=\"title\" class=\"fly-in__title\" id=${`${this.id}-title`}>\n <slot name=\"heading\"> ${this.heading || String.fromCharCode(65279)} </slot>\n </h2>\n </span>\n <${this.scope.tag('button')} class=\"fly-in__close\" appearance=\"stealth\" @click=${() =>\n this.requestClose('close-button')}>\n <${this.scope.tag('icon')} name=\"cancel\" label=\"${this.localize.term(\n 'close'\n )}\"></${this.scope.tag('icon')}>\n </${this.scope.tag('button')}>\n </header>\n `\n : html`<${this.scope.tag('visually-hidden')} class=\"fly-in__hidden-close\">\n <${this.scope.tag('button')} class=\"fly-in__close\" appearance=\"secondary\" @click=${() =>\n this.requestClose('close-button')}>\n <${this.scope.tag('icon')} name=\"cancel\" label=\"${this.localize.term('close')}\"></${this.scope.tag(\n 'icon'\n )}>\n </${this.scope.tag('button')}>\n </${this.scope.tag('visually-hidden')}>`}\n\n <div part=\"body\" class=\"fly-in__body\">\n <slot></slot>\n </div>\n <footer part=\"footer\" class=\"fly-in__footer\">\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n </div>\n `;\n }\n}\n\nexport default FlyInPanel;\n","import { css } from 'lit';\n\nexport default css`\n :host {\n display: block;\n }\n\n .search-box {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n height: var(--he-form-control-height);\n font-family: var(--he-form-control-font-family);\n font-size: var(--he-form-control-font-size);\n line-height: var(--he-line-height-normal);\n vertical-align: middle;\n background-color: var(--he-color-neutral-0);\n border-radius: var(--he-form-control-border-radius);\n border: solid var(--he-form-control-border-width) var(--he-form-control-border-color);\n overflow: hidden;\n cursor: text;\n }\n\n .search-box--focused {\n border-color: var(--he-form-control-focus-ring-color);\n outline: solid var(--he-form-control-border-width) var(--he-form-control-focus-ring-color);\n outline-offset: -2px;\n }\n\n .search-box--disabled {\n opacity: var(--he-form-control-disabled-opacity);\n cursor: not-allowed;\n }\n\n .search-box--disabled .search-box__control::placeholder {\n color: var(--he-form-control-placeholder-color);\n }\n\n .search-box__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n color: var(--he-form-control-color);\n border: none;\n background: none;\n box-shadow: none;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n height: calc(var(--he-form-control-height) - var(--he-form-control-border-width) * 2);\n padding: 0 var(--he-spacing-x-small);\n }\n\n .search-box__control::-webkit-search-decoration,\n .search-box__control::-webkit-search-cancel-button,\n .search-box__control::-webkit-search-results-button,\n .search-box__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .search-box__control:-webkit-autofill,\n .search-box__control:-webkit-autofill:hover,\n .search-box__control:-webkit-autofill:focus,\n .search-box__control:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--he-form-control-height) var(--he-color-neutral-0) inset !important;\n -webkit-text-fill-color: var(--he-color-primary-500);\n caret-color: var(--he-input-color);\n }\n\n .search-box__control::placeholder {\n color: var(--he-form-control-placeholder-color);\n user-select: none;\n }\n\n .search-box__control:focus {\n outline: none;\n }\n\n .search-box__search-icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n color: var(--he-color-primary-600);\n padding-inline-start: var(--he-spacing-x-small);\n padding-inline-end: var(--he-spacing-2x-small);\n cursor: default;\n }\n\n /*\n * Clearable\n */\n .search-box__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: var(--he-form-control-color);\n border: none;\n background: none;\n padding: 0;\n padding-inline-end: var(--he-spacing-x-small);\n cursor: pointer;\n }\n\n .search-box__clear:hover {\n color: var(--he-form-control-color);\n }\n\n .search-box__clear:focus {\n outline: none;\n }\n\n .search-box--empty .search-box__clear {\n visibility: hidden;\n }\n\n .search-box__clear-icon {\n font-size: var(--he-font-size-medium);\n }\n\n .form-control--has-interaction.form-control--has-error .search-box {\n border-color: var(--he-form-control-error-color) !important;\n outline-color: var(--he-form-control-error-color) !important;\n }\n`;\n","import { html } from 'lit/static-html.js';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport HarmonyInputElement from '../../base-components/input.js';\nimport componentStyles from '../../internal/styles/component.styles.js';\nimport formControlStyles from '../../internal/styles/form-control.styles.js';\nimport { Component } from '../../utilities/decorators.js';\nimport Icon from '../icon/icon.js';\nimport styles from './search-box.styles.js';\n\n/**\n *\n * Search Box is a component that allows users to input text and submit a search query.\n *\n * @tag he-search-box\n * @since 3.0\n * @status stable\n * @figma https://www.figma.com/file/UvgzWQM5R18Lrs4VHs2UPd/Partner-Center-extended-toolkit?type=design&node-id=86%3A19303&mode=design&t=FrLbCdXM439ktBGm-1\n *\n * @dependency he-icon\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event he-ready - Emitted when the component has completed its initial render.\n * @event he-change - Emitted when an alteration to the control's value is committed. This event also fires when the control is cleared or the `Enter` key is pressed.\n * @event he-search - Emitted when the user presses the `Enter` key or when the the clear button is used.\n * @event he-clear - Emitted when the clear button is activated.\n * @event he-input - Emitted when the control receives input and its value changes.\n * @event he-focus - Emitted when the control gains focus.\n * @event he-blur - Emitted when the control loses focus.\n *\n * @csspart form-control - The form control that wraps the label, input, and help-text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart form-control-error-text - The control's error text's wrapper.\n * @csspart form-control-error-text-icon - The icon in the control's error text.\n * @csspart form-control-error-text-message - The message in the control's error text.\n * @csspart base - The component's internal wrapper.\n * @csspart input - The input control.\n * @csspart search-icon - The input prefix container.\n * @csspart clear-button - The clear button.\n */\n@Component('search-box', [Icon])\nexport class SearchBox extends HarmonyInputElement {\n static styles = [componentStyles, formControlStyles, styles];\n static reactEvents = {\n onHeReady: new CustomEvent('he-ready'),\n onHeBlur: new CustomEvent('he-blur'),\n onHeChange: new CustomEvent('he-change'),\n onHeClear: new CustomEvent('he-clear'),\n onHeFocus: new CustomEvent('he-focus'),\n onHeInput: new CustomEvent('he-input'),\n onHeSearch: new CustomEvent('he-search'),\n };\n\n @query('.search-box__control')\n protected input?: HTMLInputElement;\n\n private readonly formSubmitController = new FormSubmitController(this);\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n protected usesArrowKeys = true;\n\n /** The input's type. */\n @property({ reflect: true }) type:\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'number'\n | 'password'\n | 'search'\n | 'tel'\n | 'text'\n | 'time'\n | 'url' = 'text';\n\n /** The minimum length of input that will be considered valid. */\n @property({ type: Number }) minlength: number;\n\n /** The maximum length of input that will be considered valid. */\n @property({ type: Number }) maxlength: number;\n\n /** A pattern to validate input against. */\n @property() pattern: string;\n\n /** Controls whether and how text input is automatically capitalized as it is entered/edited by the user. */\n @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n /**\n * (Non-standard - Safari only). A string which indicates whether to activate automatic correction while the user\n * is editing this field.\n */\n @property() autocorrect: string;\n\n /**\n * Permission the user agent has to provide automated assistance in filling out form field values and the type of\n * information expected in the field.\n */\n @property() autocomplete: string;\n\n /**\n * Used to customize the label or icon of the Enter key on virtual keyboards.\n */\n @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /** Enables spell checking on the input. */\n @property({ type: Boolean, reflect: true }) spellcheck: boolean;\n\n /** Hints at the type of data that might be entered by the user while editing the element or its contents. */\n @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /** The input's value attribute. */\n @property({ reflect: true })\n get value(): string | number {\n return this._value;\n }\n\n set value(val: string | number) {\n super.value = val;\n if (!this.hasUpdated) return;\n this.invalid = !this.input?.checkValidity();\n this.requestUpdate();\n }\n\n constructor() {\n super();\n\n // Set a default, localized placeholder if one hasn't been provided\n if (!this.placeholder) {\n this.placeholder = this.localize.term('search');\n }\n }\n\n firstUpdated() {\n super.firstUpdated();\n this.invalid = !this.input?.checkValidity();\n }\n\n /** Selects all the text in the input. */\n select() {\n this.input?.select();\n }\n\n /** Sets the start and end positions of the text selection (0-based). */\n setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ) {\n this.input?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /** Replaces a range of text with a new string. */\n setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n ) {\n this.input?.setRangeText(replacement, start, end, selectMode);\n\n if (this.input && this.value !== this.input?.value) {\n this.value = this.input.value;\n this.emitInput();\n this.emitChange();\n }\n }\n\n private handleChange() {\n if (this.input && this.value !== this.input.value) {\n this.value = this.input.value;\n this.emitChange();\n }\n }\n\n private handleClearClick(event: MouseEvent) {\n this.value = '';\n this.emit('he-clear');\n this.emitInput();\n this.emitChange();\n this.emit('he-search');\n this.input?.focus();\n\n event.stopPropagation();\n }\n\n private handleInput() {\n this.value = this.input!.value;\n this.emitInput();\n }\n\n private handleInvalid() {\n this.invalid = true;\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n // submitting to allow users to cancel the keydown event if they need to\n if (event.key === 'Enter' && !hasModifier) {\n this.emitChange();\n this.emit('he-search');\n setTimeout(() => {\n if (!event.defaultPrevented) {\n this.formSubmitController.submit();\n }\n });\n }\n }\n\n render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n const hasClearIcon = !this.disabled && !this.readonly && (typeof this.value === 'number' || this.value!.length > 0);\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'form-control--has-error': this.invalid,\n 'form-control--has-interaction': this.hadFocus,\n })}\n >\n <label\n part=\"form-control-label\"\n class=${classMap({\n 'form-control__label': true,\n 'visually-hidden': this.hideLabel,\n })}\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n ${this.requiredTemplate()}\n </label>\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div\n part=\"base\"\n class=${classMap({\n 'search-box': true,\n 'search-box--disabled': this.disabled,\n 'search-box--focused': this.hasFocus,\n 'search-box--empty': !this.value,\n 'search-box--invalid': this.invalid,\n })}\n >\n <span part=\"search-icon\" class=\"search-box__search-icon\">\n <${this.scope.tag('icon')} name=\"search\">\n </${this.scope.tag('icon')}>\n </span>\n <input\n part=\"input\"\n id=\"input\"\n class=\"search-box__control\"\n type=\"search\"\n name=${ifDefined(this.name)}\n ?disabled=${this.disabled} \n ?readOnly=${this.readonly || this.disabled}\n ?required=${this.required}\n placeholder=${ifDefined(this.placeholder)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n .value=${live(this.value!.toString())}\n autocapitalize=${ifDefined(this.autocapitalize)}\n autocomplete=${ifDefined(this.autocomplete) as any}\n autocorrect=${ifDefined(this.autocorrect)}\n ?autofocus=${this.autofocus}\n spellcheck=${ifDefined(this.spellcheck)}\n pattern=${ifDefined(this.pattern)}\n enterkeyhint=${ifDefined(this.enterkeyhint)}\n inputmode=${ifDefined(this.inputmode)}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-describedby=\"help-text\"\n aria-invalid=${this.invalid && this.hadFocus ? 'true' : 'false'}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @keydown=${this.handleKeyDown}\n />\n ${\n hasClearIcon\n ? html`\n <button\n part=\"clear-button\"\n class=\"search-box__clear\"\n type=\"button\"\n aria-label=${this.localize.term('clear_entry')}\n @click=${this.handleClearClick}\n tabindex=\"-1\"\n >\n <${this.scope.tag('icon')} name=\"clear\" library=\"system\" class=\"search-box__clear-icon\">\n </${this.scope.tag('icon')}>\n </button>\n `\n : ''\n }\n </div>\n </div>\n <div\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=${classMap({\n 'form-control__help-text': true,\n 'visually-hidden': this.hideLabel,\n })}\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n ${this.errorTextTemplate()}\n </div>\n `;\n }\n}\n\nexport default SearchBox;\n","import { css } from 'lit';\n\nexport default css`\n :host {\n overflow: hidden;\n display: block;\n width: 100%;\n min-width: 34px; /* width of overflow button */\n }\n\n ::slotted([hidden]) {\n display: none !important;\n }\n\n .command-bar-dropdown {\n text-align: start;\n }\n\n .command-bar {\n position: relative;\n font-size: var(--he-font-size-medium);\n font-weight: var(--he-font-weight-normal);\n min-height: var(--he-form-control-height);\n max-width: 100%;\n overflow: hidden;\n }\n\n .command-bar-action-hidden {\n display: none;\n }\n\n .command-bar-content {\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n max-height: var(--he-form-control-height);\n }\n\n .command-bar-actions {\n flex-wrap: nowrap;\n padding: 0;\n border: 0;\n }\n\n .command-bar-content.align-end {\n justify-content: flex-end;\n }\n\n .action-end,\n .command-bar-content,\n .search-slot {\n flex: 1 1 auto;\n }\n\n .command-bar-end,\n .search-bar,\n .search-box__dialog {\n flex: 0 1 auto;\n }\n\n .command-bar,\n .command-bar-actions,\n .command-bar-content,\n .command-bar-end,\n .search-bar,\n .search-box__dialog,\n .search-slot {\n display: flex;\n align-items: center;\n }\n\n .search-box__dialog--hide ::slotted([slot='search']) {\n max-width: 200px;\n }\n\n .search-box__dialog--show ::slotted([slot='search']) {\n flex: 1;\n }\n\n .command-bar-end-expanded,\n .command-bar-end-expanded .search-bar,\n .search-box__dialog--show,\n .search-box__dialog--show ::slotted([slot='search']) {\n width: 100%;\n }\n`;\n","import { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { html } from 'lit/static-html.js';\nimport HarmonyElement from '../../base-components/base.js';\nimport componentStyles from '../../internal/styles/component.styles.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport button from '../button/button.js';\nimport dropdown from '../dropdown/dropdown.js';\nimport icon from '../icon/icon.js';\nimport menuItem from '../menu-item/menu-item.js';\nimport menu from '../menu/menu.js';\nimport { Component } from '../../utilities/decorators.js';\nimport styles from './command-bar.styles.js';\nimport type Button from '../button/button.js';\nimport type Dropdown from '../dropdown/dropdown.js';\nimport type Icon from '../icon/icon.js';\nimport type MenuItem from '../menu-item/menu-item.js';\n\nexport interface CommandBarOverFlowItem {\n hostElement: HTMLElement;\n tagName: string;\n text: string;\n icons: { name: string; slot: string | null }[];\n disabled: boolean;\n subMenuItems: CommandBarOverFlowItem[];\n id: string;\n}\n\nexport interface CommandBarOverflowEvent {\n overflowedElements: HTMLElement[];\n}\n\n/**\n *\n * Command bars provide options for working with content, and they can appear at the page level or at an element level. Their placement makes them visible and recognizable, and they are an intuitive way for users to interact with content. However, if they are overloaded or poorly organized, they can negatively affect the user experience.\n *\n * @tag he-command-bar\n * @since 3.0\n * @status stable\n * @figma https://www.figma.com/file/UvgzWQM5R18Lrs4VHs2UPd/Partner-Center-extended-toolkit?type=design&node-id=86%3A19257&mode=design&t=FrLbCdXM439ktBGm-1\n *\n * @slot - The command items (buttons or drop downs)\n * @slot action-end - The command items at the end of the bar.\n * @slot search - The search box at the end of the bar.\n *\n * @event he-ready - Emitted when the component has completed its initial render.\n * @event {CommandBarOverflowEvent} he-overflow - Emitted when the status of the overflow changes. Includes the current elements that are overflowed.\n * @event he-dropdown-show - Emitted when the overflow dropdown is shown.\n * @event he-dropdown-after-show - Emitted after the overflow dropdown is shown and all transitions are complete.\n * @event he-dropdown-hide - Emitted when the overflow dropdown closes.\n * @event he-dropdown-after-hide - Emitted after the overflow dropdown closes and all transitions are complete.\n * @event he-show - (@deprecated) Use `he-dropdown-show` instead.\n * @event he-after-show - (@deprecated) Use `he-dropdown-after-show` instead.\n * @event he-hide - (@deprecated) Use `he-dropdown-hide` instead.\n * @event he-after-hide - (@deprecated) Use `he-dropdown-after-hide` instead.\n *\n * @csspart actions - The action/command container portion of the bar\n * @csspart back-button-icon - The back button icon.\n * @csspart base - The component's base wrapper\n * @csspart end - The action/command container at the right side of the bar.\n * @csspart overflow - The overflow menu container\n * @csspart overflow-trigger__content - The \"content\" part from the overflow button.\n * @csspart overflow-trigger__control - The \"control\" part from the overflow button.\n * @csspart overflow-trigger__end - The \"end\" part from the overflow button.\n * @csspart overflow-trigger__icons - The \"icons\" part from the overflow button.\n * @csspart overflow-trigger__start - The \"start\" part from the overflow button.\n * @csspart overflow-wrapper - The wrapper around the overflow menu\n * @csspart overflow__menu-wrapper - The overflow menu's `menu-wrapper` part.\n * @csspart search-box-button-icon - The icon for the search-box button toggle.\n * @csspart search-box__dialog - The search box dialog that contains the back button and the search box.\n *\n * @dependency he-button\n * @dependency he-dropdown\n * @dependency he-icon\n * @dependency he-menu\n * @dependency he-menu-item\n */\n@Component('command-bar', [button, dropdown, icon, menuItem, menu])\nexport class CommandBar extends HarmonyElement {\n static styles = [componentStyles, styles];\n static reactEvents = {\n onHeReady: new CustomEvent('he-ready'),\n onHeOverflow: new CustomEvent<CommandBarOverflowEvent>('he-overflow'),\n onHeDropdownShow: new CustomEvent('he-dropdown-show'),\n onHeDropdownAfterShow: new CustomEvent('he-dropdown-after-show'),\n onHeDropdownHide: new CustomEvent('he-dropdown-hide'),\n onHeDropdownAfterHide: new CustomEvent('he-dropdown-after-hide'),\n /** @deprecated Use `onHeDropdownShow` instead. */\n onHeShow: new CustomEvent('he-show'),\n /** @deprecated Use `onHeDropdownAfterShow` instead. */\n onHeAfterShow: new CustomEvent('he-after-show'),\n /** @deprecated Use `onHeDropdownHide` instead. */\n onHeHide: new CustomEvent('he-hide'),\n /** @deprecated Use `onHeDropdownAfterHide` instead. */\n onHeAfterHide: new CustomEvent('he-after-hide'),\n };\n\n @state() private actionElements: HTMLElement[];\n @state() private hasOverflow = false;\n @state() private overflowItems: CommandBarOverFlowItem[] = [];\n @state() private searchDialogOpen: boolean = false;\n @state() private searchDialogFull: boolean = true;\n\n private overflowSet = new Map();\n private isOverflowing = (baseWidth: number) => this.actions.clientWidth > baseWidth;\n private maxEndWidth = 0;\n\n @query('.command-bar') private base: Element;\n @query('.command-bar-actions') private actions: HTMLElement;\n @query('.command-bar-end') private end: HTMLElement;\n\n private resizeObserver = new ResizeObserver(() => this.handleResize());\n\n private lastWidth = 0;\n\n /** Alignment of the command bar action buttons within the container. */\n @property({ attribute: 'actions-position' }) actionsPosition: 'start' | 'end' = 'start';\n\n /** The label surfaced to assistive technologies. Defaults to localized version of \"Commands\". */\n @property() label: string = this.localize.term('commands');\n\n /** Enable this option to prevent the overflow menu from being clipped when the component is placed inside a container with `overflow: auto|hidden|scroll`. */\n @property({ type: Boolean, attribute: 'fixed-placement', reflect: true }) fixedPlacement = false;\n\n protected readonly hasSlotController = new HasSlotController(this, '[default]', 'search');\n\n private parseSlottedIcons(element: HTMLElement, ignoreEndSlot?: boolean) {\n const iconElements = [...element.querySelectorAll('.he-icon')] as Icon[];\n const result = [];\n\n for (let i = 0; i < iconElements.length; i++) {\n const { name, slot } = iconElements[i];\n\n if (name && !(ignoreEndSlot && slot === 'end')) {\n result.push({ name, slot });\n }\n\n if (element.tagName.toLowerCase() === this.scope.tagName('dropdown')) {\n break;\n }\n }\n\n return result;\n }\n\n private parseOverFlowItem(element: HTMLElement, ignoreEndSlot?: boolean) {\n return {\n hostElement: element,\n tagName: element.tagName,\n text: element.textContent || element.innerText,\n icons: this.parseSlottedIcons(element, ignoreEndSlot),\n subMenuItems: [] as CommandBarOverFlowItem[],\n disabled: element.hasAttribute('disabled'),\n };\n }\n\n private parseDropdown(dropdown: Dropdown) {\n const result = this.parseOverFlowItem(dropdown, true);\n const children = [...dropdown.children];\n\n // Get the text from the trigger slot element\n children.map(child => {\n if (child.slot === 'trigger') {\n result.text = child.textContent || dropdown.innerText;\n }\n });\n\n const menuItems = dropdown?.items || [];\n menuItems.map((menuItem: MenuItem, index: number) => {\n result.subMenuItems.push({ ...this.parseOverFlowItem(menuItem), id: `subitem-${index}` });\n });\n\n return result;\n }\n\n private generateOverflowMenu() {\n const results: CommandBarOverFlowItem[] = [];\n let index = 0;\n\n this.overflowSet.forEach((element: HTMLElement) => {\n switch (true) {\n case element.hasAttribute('button'):\n results.push({ ...this.parseOverFlowItem(element as Button), id: `item-${index}` });\n break;\n case element.hasAttribute('dropdown'):\n results.push({ ...this.parseDropdown(element as Dropdown), id: `dropdown-${index}` });\n break;\n }\n index++;\n });\n\n this.overflowItems = [...results.reverse()];\n }\n\n private emitOverflowStatus() {\n const elements: HTMLElement[] = [];\n this.overflowSet.forEach(item => {\n if (item.hidden) {\n elements.push(item);\n }\n });\n\n this.emit('he-overflow', {\n detail: {\n overflowedElements: elements,\n },\n });\n }\n\n /** @internal used by nav-header */\n public handleResize() {\n if (!this.actionElements) return;\n\n const baseWidth = this.base.clientWidth - this.maxEndWidth;\n const overFlowing = this.isOverflowing(baseWidth);\n const previousOverflowSize = this.overflowSet.size;\n this.overflowItems = [];\n const containerWidth = this.base.clientWidth;\n const direction = containerWidth > this.lastWidth ? 'larger' : 'smaller';\n\n if (this.end.clientWidth > this.maxEndWidth) {\n this.maxEndWidth = this.end.clientWidth;\n }\n\n if (overFlowing) {\n // Hide items from right to left until we are no longer overflowing.\n [...this.actionElements].reverse().find(item => {\n if (!item.hidden) {\n item.hidden = true;\n this.overflowSet.set(item, item);\n }\n return !this.isOverflowing(baseWidth);\n });\n } else if (!overFlowing && direction === 'larger') {\n // Unhide hidden items from left to right until end or overflowing\n const result = [...this.actionElements].find(item => {\n if (item.hidden) {\n item.hidden = false;\n this.overflowSet.delete(item);\n }\n\n return this.isOverflowing(baseWidth);\n });\n\n // If we overflowed, re-hide the item\n if (result) {\n result.hidden = true;\n this.overflowSet.set(result, result);\n }\n }\n\n this.searchDialogFull = this.overflowSet.size < this.actionElements.length;\n this.searchDialogOpen = false;\n\n if (this.lastWidth !== containerWidth) {\n this.lastWidth = containerWidth;\n }\n\n if (this.hasOverflow !== this.overflowSet.size > 0) {\n this.hasOverflow = this.overflowSet.size > 0;\n }\n\n if (this.overflowSet.size !== previousOverflowSize) {\n this.emitOverflowStatus();\n }\n }\n\n firstUpdated() {\n super.firstUpdated();\n\n if (this.base) {\n this.lastWidth = this.base.clientWidth;\n }\n\n this.resizeObserver.observe(this.base);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // This is a recurrent problem in command-bar ive found when loaded in a shadowRoot\n // where it does not calculate resizes on initial load.\n setTimeout(() => {\n this.handleResize();\n });\n }\n\n disconnectedCallback() {\n this.lastWidth = 0;\n this.resizeObserver.unobserve(this.base);\n this.resizeObserver.disconnect();\n super.disconnectedCallback();\n }\n\n private handleSlotChange(event: Event) {\n const slot = event.target as HTMLSlotElement;\n const elements = slot.assignedElements({ flatten: true });\n this.actionElements = elements as HTMLElement[];\n }\n\n private overFlowTemplate() {\n return html`\n <${this.scope.tag('dropdown')}\n fixed-placement\n class=\"command-bar-overflow\"\n aria-atomic=\"true\"\n aria-live=\"polite\"\n part=\"overflow\"\n exportparts=\"\n overflow:overflow,\n menu-wrapper:overflow__menu-wrapper\n \"\n >\n <${this.scope.tag('button')}\n slot=\"trigger\"\n part=\"overflow-trigger\"\n exportparts=\"\n \t\t\toverflow-trigger:overflow-trigger,\n control:overflow-trigger__control,\n start:overflow-trigger__start,\n content:overflow-trigger__content,\n end:overflow-trigger__end,\n icons:overflow-trigger__icons,\n \"\n appearance=\"command\"\n id=\"click-overflow\"\n @click=${this.generateOverflowMenu}\n >\n \t<${this.scope.tag('icon')} name=\"more\" label=\"${this.localize.term('more_options')}\"></${this.scope.tag('icon')}>\n </${this.scope.tag('button')}>\n <${this.scope.tag('menu')} role=\"menu\" class=\"command-bar-dropdown\">\n ${repeat(\n this.overflowItems,\n overflowItem => overflowItem.id,\n overFlowItem => html`\n <${this.scope.tag('menu-item')}\n role=\"menuitem\"\n ?fixed-placement=${this.fixedPlacement}\n @click=${() => overFlowItem.hostElement.click()}\n ?disabled=${overFlowItem.disabled ? 'disabled' : ''}\n >\n ${repeat(\n overFlowItem.icons,\n icon =>\n html` <${this.scope.tag('icon')} slot=\"${icon.slot || 'start'}\" name=${icon.name}></${this.scope.tag(\n 'icon'\n )}> `\n )}\n ${overFlowItem.text}\n ${\n overFlowItem.subMenuItems.length > 0\n ? html`<${this.scope.tag('menu')}>\n ${repeat(\n overFlowItem.subMenuItems,\n subItem => subItem.id,\n subItem =>\n html`\n <${this.scope.tag('menu-item')}\n role=\"menuitem\"\n ?fixed-placement=${this.fixedPlacement}\n @click=${() => subItem.hostElement.click()}\n ?disabled=${subItem.disabled ? 'true' : ''}\n >\n ${repeat(\n subItem.icons,\n icon =>\n html` <${this.scope.tag('icon')} slot=\"${icon.slot || 'start'}\" name=${\n icon.name\n }></${this.scope.tag('icon')}> `\n )}\n ${subItem.text}\n </${this.scope.tag('menu-item')}>\n `\n )}\n </${this.scope.tag('menu')}>\n `\n : ''\n }\n </${this.scope.tag('menu-item')}>\n `\n )}\n </${this.scope.tag('menu')}>\n </${this.scope.tag('dropdown')}>\n `;\n }\n\n private showSearchOverlay() {\n this.searchDialogOpen = true;\n }\n\n private hideSearchOverlay() {\n this.searchDialogOpen = false;\n }\n\n private searchTemplate() {\n const searchShow = this.searchDialogOpen && !this.searchDialogFull;\n return html`\n <div\n class=${classMap({\n 'search-box__dialog': true,\n 'search-box__dialog--show': searchShow,\n 'search-box__dialog--hide': !searchShow,\n })}\n part=\"search-box__dialog\"\n ?hidden=${!(this.searchDialogFull || (!this.searchDialogFull && this.searchDialogOpen))}\n >\n <${this.scope.tag('button')}\n appearance=\"stealth\" part=\"back-button\" class=\"he-command-bar-action\"\n @click=${this.hideSearchOverlay}\n ?hidden=${!searchShow}\n >\n <${this.scope.tag('icon')}\n name=\"back\"\n part=\"back-button-icon\"\n label=${this.localize.term('back')}\n >\n </${this.scope.tag('icon')}>\n </${this.scope.tag('button')}> \n <div class=\"search-slot\">\n <slot name=\"search\"></slot>\n </div>\n </div>\n `;\n }\n\n protected render(): unknown {\n const hasSearchSlot = this.hasSlotController.test('search');\n const searchShow = this.searchDialogOpen && !this.searchDialogFull;\n return html`\n <div part=\"base\" class=\"command-bar\" aria-label=${this.label} aria-controls=\"commands\" role=\"toolbar\">\n <div\n part=\"content\"\n class=${classMap({\n 'command-bar-content': true,\n 'align-end': this.actionsPosition === 'end',\n })}\n ?hidden=${hasSearchSlot && searchShow}\n >\n <div id=\"commands\" part=\"actions\" role=\"group\" class=\"command-bar-actions\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n <div\n part=\"overflow-wrapper\"\n class=${this.hasOverflow ? 'command-bar-action-overflow' : 'command-bar-action-hidden'}\n >\n ${this.overFlowTemplate()}\n </div>\n </div>\n </div>\n\n <div \n class=${classMap({\n 'command-bar-end': true,\n 'command-bar-end-expanded': searchShow,\n })}\n name=\"end\" part=\"end\">\n <slot name=\"action-end\" class=\"action-end\" ?hidden=${hasSearchSlot && searchShow}></slot>\n <div class=\"search-bar\">\n <${this.scope.tag('button')}\n appearance=\"stealth\"\n id=\"mobile-search-box-button\"\n part=\"search-box-button\"\n class=\"he-command-bar-search-button\"\n @click=${() => this.showSearchOverlay()}\n ?hidden=${!hasSearchSlot || this.searchDialogFull || this.searchDialogOpen}\n >\n <${this.scope.tag('icon')}\n class=\"search-box-button-icon\"\n name=\"search\"\n part=\"search-box-button-icon\"\n label=${this.localize.term('search')}>\n </${this.scope.tag('icon')}>\n <span style=\"display: none;\">\n ${this.localize.term('search')}\n </span>\n </${this.scope.tag('button')}> \n ${this.searchTemplate()}\n </div>\n </div>\n </div>\n `;\n }\n}\n\nexport default CommandBar;\n"],"sourceRoot":""}