@govbr-ds/core
Version:
Padrão Digital de Governo
2 lines • 5.04 kB
JavaScript
!function t(e,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define("core",[],i):"object"==typeof exports?exports.core=i():e.core=i()}(self,()=>(()=>{var t=()=>{},e,i=()=>{};(()=>{class t{constructor(t,e){this.name=t,this.component=e,this._setBehavior()}_setBehavior(){for(const t of this.component.querySelectorAll(".tab-nav"))this.height=t.clientHeight,this.scollsizes=t.scrollHeight-t.clientHeight,this.scrollHeight=Math.max(this.component.scrollWidth,document.documentElement.scrollWidth,this.component.offsetWidth,document.documentElement.offsetWidth,this.component.clientWidth,document.documentElement.clientWidth),this.leftPosition=this.component.offsetWidth-1,t.style.setProperty("--height-nav",`${this.height}px`),t.style.setProperty("--right-gradient-nav",`${this.leftPosition}px`),this.positionScroll(t),this.navigationRight=this.navigationRight+4,this.navigationRight<=this.lastItempos-5&&t.classList.add("tab-nav-right"),t.onscroll=()=>{this.positionScroll(t),this.navigationLeft<=0?t.classList.add("tab-nav-left"):t.classList.remove("tab-nav-left"),this.navigationRight<=this.lastItempos-5?t.classList.add("tab-nav-right"):t.classList.remove("tab-nav-right")};for(const t of this.component.querySelectorAll('.tab-nav .tab-item:not([not-tab="true"]) button'))t.addEventListener("click",t=>{t.currentTarget.setAttribute("aria-selected","false"),this._switchTab(t.currentTarget.parentElement),this._switchContent(t.currentTarget.parentElement)},!1),t.addEventListener("keyup",t=>{t.preventDefault(),this.positionKeyboard(t)}),t.addEventListener("blur",()=>{this.hiddenTooltips()});this.tabitems=this.component.querySelectorAll("tab-item")}positionKeyboard(t){const e=35,i=36,s=37,o=39,n=32,a=9,r=t.keyCode;switch(this.tabitems=this.component.querySelectorAll(".tab-item"),this.buttons=this.component.querySelectorAll("button"),r){case e:t.preventDefault(),this.clean(),this._switchTab(this.tabitems[this.tabitems.length-1]),this._switchContent(this.tabitems[this.tabitems.length-1]),this.tabitems[this.tabitems.length-1].focus();break;case i:t.preventDefault(),this.clean(),this._switchTab(this.tabitems[0]),this._switchContent(this.tabitems[0]),this.tabitems[0].focus(),t.stopPropagation();break;case s:t.preventDefault(),this.position(t.target,-1),t.stopPropagation();break;case o:t.preventDefault(),this.position(t.target,1),t.stopPropagation();break;case a:t.preventDefault(),this.position(t.target,0),t.stopPropagation();break;case 32:t.preventDefault(),this.hiddenTooltips(),t.target.click(),t.stopPropagation()}}hiddenTooltips(){const t=undefined;document.querySelectorAll(".br-tooltip").forEach(t=>{t.hidden=!0,t.style.visbility="hidden",t.removeAttribute("data-show")})}positionActive(t,e){let i=0,s=0;const o=t.parentElement.parentElement.querySelectorAll(".tab-item");for(const t of o)(t.classList.contains("is-active")||t.classList.contains("active"))&&(s=i),i+=1;if(o.length>s+e&&s+e>=0){this._switchTab(o[s+e]),o[s+e].focus();let t="";o[s+e].querySelector("button")&&(t=o[s+e].querySelector("button"),t.focus())}}position(t,e){this.positionQuery(t,e,".tab-item")}positionQuery(t,e,i){let s=0,o=0;const n=t.parentElement.parentElement.querySelectorAll(i);for(const t of n)t.querySelector(".focus-visible")&&(o=s),s+=1;n[o+e].querySelector("button").focus(),n.length>o+e&&o+e>=0&&n[o+e].querySelector("button")&&n[o+e].querySelector("button").focus()}setPosition(t){let e=0,i=0;const s=t.parentElement.parentElement.querySelectorAll(".tab-item");for(const t of s)(t.classList.contains("is-active")||t.classList.contains("active"))&&(i=e),e+=1;s.length>i&&i>=0&&(this.clean(),this._switchContent(s[i]))}clean(){for(const t of event.currentTarget.parentElement.querySelectorAll("button"))t.classList.remove("focus-visible"),t.classList.remove("is-active"),t.classList.remove("active");for(const t of event.currentTarget.parentElement.querySelectorAll("tab-item"))t.classList.remove("is-active"),t.classList.remove("active")}positionScroll(t){this.navItems=t.querySelectorAll(".tab-item"),this.lastItempos=Math.ceil(this.navItems[this.navItems.length-1].getBoundingClientRect().right),this.navigationLeft=Math.floor(this.navItems[0].getBoundingClientRect().left),this.navigationRight=Math.floor(t.getBoundingClientRect().right)}_switchTab(t){for(const e of this.component.querySelectorAll('.tab-nav .tab-item:not([not-tab="true"])'))e===t?(e.classList.add("active"),this._selectTab(e,!0)):(e.classList.remove("is-active"),e.classList.remove("active"),this._selectTab(e,!1))}_selectTab(t,e){t.querySelector("button").setAttribute("aria-selected",e)}_switchContent(t){for(const e of t.querySelectorAll("button"))for(const t of this.component.querySelectorAll(".tab-content .tab-panel"))e.getAttribute("data-panel")===t.getAttribute("id")||e.getAttribute("data-target")===t.getAttribute("id")?t.classList.add("active"):(t.classList.remove("is-active"),t.classList.remove("active"))}}var e=null})(),t();var s={};return i(),s})());
//# sourceMappingURL=tab.min.js.map