preline/dist/tabs.mjs

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

var t={189:(t,e,n)=>{n.d(e,{Fy:()=>o});const o=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End"]},615:(t,e,n)=>{n.d(e,{A:()=>o});class o{constructor(t,e,n){this.el=t,this.options=e,this.events=n,this.el=t,this.options=e,this.events={}}createCollection(t,e){var n;t.push({id:(null===(n=null==e?void 0:e.el)||void 0===n?void 0:n.id)||t.length+1,element:e})}fireEvent(t,e=null){if(this.events.hasOwnProperty(t))return this.events[t](e)}on(t,e){this.events[t]=e}}},926:(t,e,n)=>{n.d(e,{JD:()=>o});const o=(t,e,n=null)=>{const o=new CustomEvent(t,{detail:{payload:n},bubbles:!0,cancelable:!0,composed:!1});e.dispatchEvent(o)}}},e={};function n(o){var r=e[o];if(void 0!==r)return r.exports;var s=e[o]={exports:{}};return t[o](s,s.exports,n),s.exports}n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var o={};n.d(o,{A:()=>c});var r=n(926),s=n(615),i=n(189);
/*
 * HSTabs
 * @version: 2.5.0
 * @author: Preline Labs Ltd.
 * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
 * Copyright 2024 Preline Labs Ltd.
 */
class l extends s.A{constructor(t,e,n){super(t,e,n),this.toggles=this.el.querySelectorAll("[data-hs-tab]"),this.extraToggleId=this.el.getAttribute("data-hs-tab-select"),this.extraToggle=document.querySelector(this.extraToggleId),this.current=Array.from(this.toggles).find((t=>t.classList.contains("active"))),this.currentContentId=this.current.getAttribute("data-hs-tab"),this.currentContent=document.querySelector(this.currentContentId),this.prev=null,this.prevContentId=null,this.prevContent=null,this.init()}init(){this.createCollection(window.$hsTabsCollection,this),this.toggles.forEach((t=>{t.addEventListener("click",(()=>this.open(t)))})),this.extraToggle&&this.extraToggle.addEventListener("change",(t=>this.change(t)))}open(t){var e,n;this.prev=this.current,this.prevContentId=this.currentContentId,this.prevContent=this.currentContent,this.current=t,this.currentContentId=this.current.getAttribute("data-hs-tab"),this.currentContent=document.querySelector(this.currentContentId),(null===(e=null==this?void 0:this.prev)||void 0===e?void 0:e.ariaSelected)&&(this.prev.ariaSelected="false"),this.prev.classList.remove("active"),this.prevContent.classList.add("hidden"),(null===(n=null==this?void 0:this.current)||void 0===n?void 0:n.ariaSelected)&&(this.current.ariaSelected="true"),this.current.classList.add("active"),this.currentContent.classList.remove("hidden"),this.fireEvent("change",{el:t,prev:this.prevContentId,current:this.currentContentId}),(0,r.JD)("change.hs.tab",t,{el:t,prev:this.prevContentId,current:this.currentContentId})}change(t){const e=document.querySelector(`[data-hs-tab="${t.target.value}"]`);e&&e.click()}static getInstance(t,e){const n=window.$hsTabsCollection.find((e=>e.element.el===("string"==typeof t?document.querySelector(t):t)));return n?e?n:n.element:null}static autoInit(){window.$hsTabsCollection||(window.$hsTabsCollection=[]),document.querySelectorAll('[role="tablist"]:not(select):not(.--prevent-on-load-init)').forEach((t=>{window.$hsTabsCollection.find((e=>{var n;return(null===(n=null==e?void 0:e.element)||void 0===n?void 0:n.el)===t}))||new l(t)})),window.$hsTabsCollection&&document.addEventListener("keydown",(t=>l.accessibility(t)))}static open(t){const e=window.$hsTabsCollection.find((e=>Array.from(e.element.toggles).includes("string"==typeof t?document.querySelector(t):t))),n=Array.from(e.element.toggles).find((e=>e===("string"==typeof t?document.querySelector(t):t)));n&&!n.classList.contains("active")&&e.element.open(n)}static accessibility(t){const e=document.querySelector("[data-hs-tab]:focus");if(e&&i.Fy.includes(t.code)&&!t.metaKey){const n=e.closest('[role="tablist"]').getAttribute("data-hs-tabs-vertical");switch(t.preventDefault(),t.code){case"true"===n?"ArrowUp":"ArrowLeft":this.onArrow();break;case"true"===n?"ArrowDown":"ArrowRight":this.onArrow(!1);break;case"Home":this.onStartEnd();break;case"End":this.onStartEnd(!1)}}}static onArrow(t=!0){const e=document.querySelector("[data-hs-tab]:focus").closest('[role="tablist"]'),n=window.$hsTabsCollection.find((t=>t.element.el===e));if(n){const e=t?Array.from(n.element.toggles).reverse():Array.from(n.element.toggles),o=e.find((t=>document.activeElement===t));let r=e.findIndex((t=>t===o));r=r+1<e.length?r+1:0,e[r].focus(),e[r].click()}}static onStartEnd(t=!0){const e=document.querySelector("[data-hs-tab]:focus").closest('[role="tablist"]'),n=window.$hsTabsCollection.find((t=>t.element.el===e));if(n){const e=t?Array.from(n.element.toggles):Array.from(n.element.toggles).reverse();e.length&&(e[0].focus(),e[0].click())}}static on(t,e,n){const o=window.$hsTabsCollection.find((t=>Array.from(t.element.toggles).includes("string"==typeof e?document.querySelector(e):e)));o&&(o.element.events[t]=n)}}window.addEventListener("load",(()=>{l.autoInit()})),"undefined"!=typeof window&&(window.HSTabs=l);const c=l;var a=o.A;export{a as default};