https://xpfreelancer.com/public/js/components.js

1window.Components={},window.Components.listbox=function(e){return{init(){this.optionCount=this.$refs.listbox.children.length,this.$watch("activeIndex",e=>{this.open&&(null!==this.activeIndex?this.activeDescendant=this.$refs.listbox.children[this.activeIndex].id:this.activeDescendant="")})},activeDescendant:null,optionCount:null,open:!1,activeIndex:null,selectedIndex:0,get active(){return this.items[this.activeIndex]},get[e.modelName||"selected"](){return this.items[this.selectedIndex]},choose(e){this.selectedIndex=e,this.open=!1},onButtonClick(){this.open||(this.activeIndex=this.selectedIndex,this.open=!0,this.$nextTick(()=>{this.$refs.listbox.focus(),this.$refs.listbox.children[this.activeIndex].scrollIntoView({block:"nearest"})}))},onOptionSelect(){null!==this.activeIndex&&(this.selectedIndex=this.activeIndex),this.open=!1,this.$refs.button.focus()},onEscape(){this.open=!1,this.$refs.button.focus()},onArrowUp(){this.activeIndex=this.activeIndex-1<0?this.optionCount-1:this.activeIndex-1,this.$refs.listbox.children[this.activeIndex].scrollIntoView({block:"nearest"})},onArrowDown(){this.activeIndex=this.activeIndex+1>this.optionCount-1?0:this.activeIndex+1,this.$refs.listbox.children[this.activeIndex].scrollIntoView({block:"nearest"})},...e}},window.Components.menu=function(e={open:!1}){return{init(){this.items=Array.from(this.$el.querySelectorAll('[role="menuitem"]')),this.$watch("open",()=>{this.open&&(this.activeIndex=-1)})},activeDescendant:null,activeIndex:null,items:null,open:e.open,focusButton(){this.$refs.button.focus()},onButtonClick(){this.open=!this.open,this.open&&this.$nextTick(()=>{this.$refs["menu-items"].focus()})},onButtonEnter(){this.open=!this.open,this.open&&(this.activeIndex=0,this.activeDescendant=this.items[this.activeIndex].id,this.$nextTick(()=>{this.$refs["menu-items"].focus()}))},onArrowUp(){if(!this.open)return this.open=!0,this.activeIndex=this.items.length-1,void(this.activeDescendant=this.items[this.activeIndex].id);0!==this.activeIndex&&(this.activeIndex=-1===this.activeIndex?this.items.length-1:this.activeIndex-1,this.activeDescendant=this.items[this.activeIndex].id)},onArrowDown(){if(!this.open)return this.open=!0,this.activeIndex=0,void(this.activeDescendant=this.items[this.activeIndex].id);this.activeIndex!==this.items.length-1&&(this.activeIndex=this.activeIndex+1,this.activeDescendant=this.items[this.activeIndex].id)},onClickAway(e){if(this.open){let t=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");this.open=!1,e.target.closest(t)||this.focusButton()}}}},window.Components.popoverGroup=function(){return{__type:"popoverGroup",init(){let e=t=>{document.body.contains(this.$el)?t.target instanceof Element&&!this.$el.contains(t.target)&&window.dispatchEvent(new CustomEvent("close-popover-group",{detail:this.$el})):window.removeEventListener("focus",e,!0)};window.addEventListener("focus",e,!0)}}},window.Components.popover=function({open:e=!1,focus:t=!1}={}){let i=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(",");return{__type:"popover",open:e,init(){t&&this.$watch("open",e=>{e&&this.$nextTick(()=>{!function(e){let t=Array.from(e.querySelectorAll(i));!function e(i){void 0!==i&&(i.focus({preventScroll:!0}),document.activeElement!==i&&e(t[t.indexOf(i)+1]))}(t[0])}(this.$refs.panel)})});let e=i=>{if(!document.body.contains(this.$el))return void window.removeEventListener("focus",e,!0);let n=t?this.$refs.panel:this.$el;if(this.open&&i.target instanceof Element&&!n.contains(i.target)){let s=this.$el;for(;s.parentNode;)if((s=s.parentNode).__x instanceof this.constructor){if("popoverGroup"===s.__x.$data.__type)return;if("popover"===s.__x.$data.__type)break}this.open=!1}};window.addEventListener("focus",e,!0)}

1,onEscape(){this.open=!1,this.restoreEl&&this.restoreEl.focus()},onClosePopoverGroup(e){e.detail.contains(this.$el)&&(this.open=!1)},toggle(e){this.open=!this.open,this.open?this.restoreEl=e.currentTarget:this.restoreEl&&this.restoreEl.focus()}}},window.Components.radioGroup=function({initialCheckedIndex:e=0}={}){return{value:void 0,active:void 0,init(){let t=Array.from(this.$el.querySelectorAll("input"));for(let i of(this.value=t[e]?.value,t))i.addEventListener("change",()=>{this.active=i.value}),i.addEventListener("focus",()=>{this.active=i.value});window.addEventListener("focus",()=>{console.log("Focus change"),t.includes(document.activeElement)||(console.log("HIT"),this.active=void 0)},!0)}}},window.Components.tabs=function(){return{selectedIndex:0,onTabClick(e){if(!this.$el.contains(e.detail))return;let t=Array.from(this.$el.querySelectorAll('[x-data^="Components.tab("]')),i=Array.from(this.$el.querySelectorAll('[x-data^="Components.tabPanel("]')),n=t.indexOf(e.detail);this.selectedIndex=n,window.dispatchEvent(new CustomEvent("tab-select",{detail:{tab:e.detail,panel:i[n]}}))},onTabKeydown(e){if(!this.$el.contains(e.detail.tab))return;let t=Array.from(this.$el.querySelectorAll('[x-data^="Components.tab("]')),i=t.indexOf(e.detail.tab);

1"ArrowLeft"===e.detail.key?this.onTabClick({detail:t[(i-1+t.length)%t.length]}):"ArrowRight"===e.detail.key?this.onTabClick({detail:t[(i+1)%t.length]}):"Home"===e.detail.key||"PageUp"===e.detail.key?this.onTabClick({detail:t[0]}):"End"!==e.detail.key&&"PageDown"!==e.detail.key||this.onTabClick({detail:t[t.length-1]})}}},window.Components.tab=function(e=0){return{selected:!1,init(){let t=Array.from(this.$el.closest('[x-data^="Components.tabs("]').querySelectorAll('[x-data^="Components.tab("]'));this.selected=t.indexOf(this.$el)===e,this.$watch("selected",e=>{e&&this.$el.focus()})},onClick(){window.dispatchEvent(new CustomEvent("tab-click",{detail:this.$el}))},onKeydown(e){["ArrowLeft","ArrowRight","Home","PageUp","End","PageDown"].includes(e.key)&&e.preventDefault(),window.dispatchEvent(new CustomEvent("tab-keydown",{detail:{tab:this.$el,key:e.key}}))},onTabSelect(e){this.selected=e.detail.tab===this.$el}}},window.Components.tabPanel=function(e=0){return{selected:!1,init(){let t=Array.from(this.$el.closest('[x-data^="Components.tabs("]').querySelectorAll('[x-data^="Components.tabPanel("]'));this.selected=t.indexOf(this.$el)===e},onTabSelect(e){this.selected=e.detail.panel===this.$el}}};