preline/dist/tabs.mjs

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

var e={189:(e,t,n)=>{n.d(t,{LO:()=>o});const o={xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536}},615:(e,t,n)=>{n.d(t,{A:()=>o});class o{constructor(e,t,n){this.el=e,this.options=t,this.events=n,this.el=e,this.options=t,this.events={}}createCollection(e,t){var n;e.push({id:(null===(n=null==t?void 0:t.el)||void 0===n?void 0:n.id)||e.length+1,element:t})}fireEvent(e,t=null){if(this.events.hasOwnProperty(e))return this.events[e](t)}on(e,t){this.events[e]=t}}},862:(e,t,n)=>{n.d(t,{A:()=>o});const o=class{constructor(){this.components=[],this.currentlyOpenedComponents=[],this.activeComponent=null,this.allowedKeybindings=new Set(["Escape","Enter"," ","Space","ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Tab","Home","End"]),this.initGlobalListeners()}initGlobalListeners(){document.addEventListener("keydown",(e=>this.handleGlobalKeydown(e))),document.addEventListener("focusin",(e=>this.handleGlobalFocusin(e)))}isAllowedKeybinding(e){return!!this.allowedKeybindings.has(e.key)||!(1!==e.key.length||!/^[a-zA-Z]$/.test(e.key)||e.metaKey||e.ctrlKey||e.altKey||e.shiftKey)}getActiveComponent(e){if(!e)return null;const t=this.components.filter((t=>t.wrapper.contains(e)||t.context&&t.context.contains(e)));if(0===t.length)return null;if(1===t.length)return t[0];let n=null,o=Number.MAX_SAFE_INTEGER;for(const i of t){let t=0,s=e;for(;s&&s!==i.wrapper&&s!==i.context;)t++,s=s.parentElement;t<o&&(o=t,n=i)}return n}handleGlobalFocusin(e){const t=e.target;this.activeComponent=this.getActiveComponent(t)}handleGlobalKeydown(e){const t=e.target;if(this.activeComponent=this.getActiveComponent(t),this.activeComponent&&this.isAllowedKeybinding(e))switch(e.key){case"Escape":if(this.activeComponent.isOpened)this.activeComponent.handlers.onEsc&&(this.activeComponent.handlers.onEsc(),e.preventDefault(),e.stopPropagation());else{const n=this.findClosestOpenParent(t);(null==n?void 0:n.handlers.onEsc)&&(n.handlers.onEsc(),e.preventDefault(),e.stopPropagation())}break;case"Enter":this.activeComponent.handlers.onEnter&&(this.activeComponent.handlers.onEnter(),e.preventDefault(),e.stopPropagation());break;case" ":case"Space":if("INPUT"===t.tagName||"TEXTAREA"===t.tagName)return;this.activeComponent.handlers.onSpace&&(this.activeComponent.handlers.onSpace(),e.preventDefault(),e.stopPropagation());break;case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":if(this.activeComponent.handlers.onArrow){if(e.metaKey||e.ctrlKey||e.altKey||e.shiftKey)return;this.activeComponent.handlers.onArrow(e),e.preventDefault(),e.stopPropagation()}break;case"Tab":if(!this.activeComponent.handlers.onTab)break;const n=e.shiftKey?this.activeComponent.handlers.onShiftTab:this.activeComponent.handlers.onTab;n&&n();break;case"Home":this.activeComponent.handlers.onHome&&(this.activeComponent.handlers.onHome(),e.preventDefault(),e.stopPropagation());break;case"End":this.activeComponent.handlers.onEnd&&(this.activeComponent.handlers.onEnd(),e.preventDefault(),e.stopPropagation());break;default:this.activeComponent.handlers.onFirstLetter&&1===e.key.length&&/^[a-zA-Z]$/.test(e.key)&&(this.activeComponent.handlers.onFirstLetter(e.key),e.preventDefault(),e.stopPropagation())}}findClosestOpenParent(e){let t=e.parentElement;for(;t;){const e=this.currentlyOpenedComponents.find((e=>e.wrapper===t&&e!==this.activeComponent));if(e)return e;t=t.parentElement}return null}registerComponent(e,t,n=!0,o="",i="",s){const r={wrapper:e,handlers:t,isOpened:n,name:o,selector:i,context:s,isRegistered:!0};return this.components.push(r),r}updateComponentState(e,t){e.isOpened=t,t?this.currentlyOpenedComponents.includes(e)||this.currentlyOpenedComponents.push(e):this.currentlyOpenedComponents=this.currentlyOpenedComponents.filter((t=>t!==e))}unregisterComponent(e){this.components=this.components.filter((t=>t!==e)),this.currentlyOpenedComponents=this.currentlyOpenedComponents.filter((t=>t!==e))}addAllowedKeybinding(e){this.allowedKeybindings.add(e)}removeAllowedKeybinding(e){this.allowedKeybindings.delete(e)}getAllowedKeybindings(){return Array.from(this.allowedKeybindings)}}},926:(e,t,n)=>{n.d(t,{JD:()=>o});
/*
 * @version: 3.2.3
 * @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.
 */
const o=(e,t,n=null)=>{const o=new CustomEvent(e,{detail:{payload:n},bubbles:!0,cancelable:!0,composed:!1});t.dispatchEvent(o)}}},t={};function n(o){var i=t[o];if(void 0!==i)return i.exports;var s=t[o]={exports:{}};return e[o](s,s.exports,n),s.exports}n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var o={};n.d(o,{A:()=>c});var i=n(926),s=n(615),r=n(862),l=n(189);
/*
 * HSTabs
 * @version: 3.2.3
 * @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 a extends s.A{constructor(e,t,n){var o,i;super(e,t,n);const s=e.getAttribute("data-hs-tabs"),r=s?JSON.parse(s):{},a=Object.assign(Object.assign({},r),t);this.eventType=null!==(o=a.eventType)&&void 0!==o?o:"click",this.preventNavigationResolution="number"==typeof a.preventNavigationResolution?a.preventNavigationResolution:l.LO[a.preventNavigationResolution]||null,this.toggles=this.el.querySelectorAll("[data-hs-tab]"),this.extraToggleId=this.el.getAttribute("data-hs-tab-select"),this.extraToggle=this.extraToggleId?document.querySelector(this.extraToggleId):null,this.current=Array.from(this.toggles).find((e=>e.classList.contains("active"))),this.currentContentId=(null===(i=this.current)||void 0===i?void 0:i.getAttribute("data-hs-tab"))||null,this.currentContent=this.currentContentId?document.querySelector(this.currentContentId):null,this.prev=null,this.prevContentId=null,this.prevContent=null,this.onToggleHandler=[],this.init()}toggle(e){this.open(e)}extraToggleChange(e){this.change(e)}init(){this.createCollection(window.$hsTabsCollection,this),this.toggles.forEach((e=>{const t=t=>{"click"===this.eventType&&this.preventNavigationResolution&&document.body.clientWidth<=+this.preventNavigationResolution&&t.preventDefault(),this.toggle(e)},n=e=>{this.preventNavigationResolution&&document.body.clientWidth<=+this.preventNavigationResolution&&e.preventDefault()};this.onToggleHandler.push({el:e,fn:t,preventClickFn:n}),"click"===this.eventType?e.addEventListener("click",t):(e.addEventListener("mouseenter",t),e.addEventListener("click",n))})),this.extraToggle&&(this.onExtraToggleChangeListener=e=>this.extraToggleChange(e),this.extraToggle.addEventListener("change",this.onExtraToggleChangeListener)),"undefined"!=typeof window&&(window.HSAccessibilityObserver||(window.HSAccessibilityObserver=new r.A),this.setupAccessibility())}open(e){var t,n,o,s,r;this.prev=this.current,this.prevContentId=this.currentContentId,this.prevContent=this.currentContent,this.current=e,this.currentContentId=e.getAttribute("data-hs-tab"),this.currentContent=this.currentContentId?document.querySelector(this.currentContentId):null,(null===(t=null==this?void 0:this.prev)||void 0===t?void 0:t.ariaSelected)&&(this.prev.ariaSelected="false"),null===(n=this.prev)||void 0===n||n.classList.remove("active"),null===(o=this.prevContent)||void 0===o||o.classList.add("hidden"),(null===(s=null==this?void 0:this.current)||void 0===s?void 0:s.ariaSelected)&&(this.current.ariaSelected="true"),this.current.classList.add("active"),null===(r=this.currentContent)||void 0===r||r.classList.remove("hidden"),this.fireEvent("change",{el:e,prev:this.prevContentId,current:this.currentContentId,tabsId:this.el.id}),(0,i.JD)("change.hs.tab",e,{el:e,prev:this.prevContentId,current:this.currentContentId,tabsId:this.el.id})}change(e){const t=document.querySelector(`[data-hs-tab="${e.target.value}"]`);t&&("hover"===this.eventType?t.dispatchEvent(new Event("mouseenter")):t.click())}setupAccessibility(){this.accessibilityComponent=window.HSAccessibilityObserver.registerComponent(this.el,{onArrow:e=>{if(e.metaKey)return;const t="true"===this.el.getAttribute("data-hs-tabs-vertical")||"vertical"===this.el.getAttribute("aria-orientation");switch(e.key){case t?"ArrowUp":"ArrowLeft":this.onArrow(!0);break;case t?"ArrowDown":"ArrowRight":this.onArrow(!1);break;case"Home":this.onStartEnd(!0);break;case"End":this.onStartEnd(!1)}}},!0,"Tabs",'[role="tablist"]')}onArrow(e=!0){const t=e?Array.from(this.toggles).reverse():Array.from(this.toggles),n=t.find((e=>document.activeElement===e));let o=t.findIndex((e=>e===n));o=o+1<t.length?o+1:0,t[o].focus(),t[o].click()}onStartEnd(e=!0){const t=e?Array.from(this.toggles):Array.from(this.toggles).reverse();t.length&&(t[0].focus(),t[0].click())}destroy(){this.toggles.forEach((e=>{var t;const n=null===(t=this.onToggleHandler)||void 0===t?void 0:t.find((({el:t})=>t===e));n&&("click"===this.eventType?e.removeEventListener("click",n.fn):(e.removeEventListener("mouseenter",n.fn),e.removeEventListener("click",n.preventClickFn)))})),this.onToggleHandler=[],this.extraToggle&&this.extraToggle.removeEventListener("change",this.onExtraToggleChangeListener),"undefined"!=typeof window&&window.HSAccessibilityObserver&&window.HSAccessibilityObserver.unregisterComponent(this.accessibilityComponent),window.$hsTabsCollection=window.$hsTabsCollection.filter((({element:e})=>e.el!==this.el))}static getInstance(e,t){const n=window.$hsTabsCollection.find((t=>t.element.el===("string"==typeof e?document.querySelector(e):e)));return n?t?n:n.element:null}static autoInit(){window.$hsTabsCollection||(window.$hsTabsCollection=[]),window.$hsTabsCollection&&(window.$hsTabsCollection=window.$hsTabsCollection.filter((({element:e})=>document.contains(e.el)))),document.querySelectorAll('[role="tablist"]:not(select):not(.--prevent-on-load-init)').forEach((e=>{window.$hsTabsCollection.find((t=>{var n;return(null===(n=null==t?void 0:t.element)||void 0===n?void 0:n.el)===e}))||new a(e)}))}static open(e){const t=window.$hsTabsCollection.find((t=>Array.from(t.element.toggles).includes("string"==typeof e?document.querySelector(e):e))),n=t?Array.from(t.element.toggles).find((t=>t===("string"==typeof e?document.querySelector(e):e))):null;n&&!n.classList.contains("active")&&t.element.open(n)}static on(e,t,n){const o=window.$hsTabsCollection.find((e=>Array.from(e.element.toggles).includes("string"==typeof t?document.querySelector(t):t)));o&&(o.element.events[e]=n)}}window.addEventListener("load",(()=>{a.autoInit()})),"undefined"!=typeof window&&(window.HSTabs=a);const c=a;var d=o.A;export{d as default};