UNPKG

preline

Version:

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

24 lines 17 kB
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(self,()=>(()=>{"use strict";var e={8223(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.BREAKPOINTS=t.COMBO_BOX_ACCESSIBILITY_KEY_SET=t.SELECT_ACCESSIBILITY_KEY_SET=t.TABS_ACCESSIBILITY_KEY_SET=t.OVERLAY_ACCESSIBILITY_KEY_SET=t.DROPDOWN_ACCESSIBILITY_KEY_SET=t.POSITIONS=void 0,t.POSITIONS={auto:"auto","auto-start":"auto-start","auto-end":"auto-end",top:"top","top-left":"top-start","top-right":"top-end",bottom:"bottom","bottom-left":"bottom-start","bottom-right":"bottom-end",right:"right","right-start":"right-start","right-end":"right-end",left:"left","left-start":"left-start","left-end":"left-end"},t.DROPDOWN_ACCESSIBILITY_KEY_SET=["Escape","ArrowUp","ArrowDown","ArrowRight","ArrowLeft","Home","End","Enter"],t.OVERLAY_ACCESSIBILITY_KEY_SET=["Escape","Tab"],t.TABS_ACCESSIBILITY_KEY_SET=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End"],t.SELECT_ACCESSIBILITY_KEY_SET=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End","Escape","Enter","Space","Tab"],t.COMBO_BOX_ACCESSIBILITY_KEY_SET=["ArrowUp","ArrowLeft","ArrowDown","ArrowRight","Home","End","Escape","Enter"],t.BREAKPOINTS={xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536}},248(e,t,n){Object.defineProperty(t,"__esModule",{value:!0});const o=n(292);t.default=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 r of t){let t=0,i=e;for(;i&&i!==r.wrapper&&i!==r.context;)t++,i=i.parentElement;t<o&&(o=t,n=r)}return n}getActiveComponentForKey(e,t){if(!e)return null;const n=this.components.filter(t=>t.wrapper.contains(e)||t.context&&t.context.contains(e));if(0===n.length)return null;const o=n.filter(e=>{const n=e.handlers;switch(t){case"Escape":return!!n.onEsc;case"Enter":return!!n.onEnter;case" ":case"Space":return!!n.onSpace;case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":return!!n.onArrow;case"Tab":return!!n.onTab||!!n.onShiftTab;case"Home":return!!n.onHome;case"End":return!!n.onEnd;default:return!!n.onFirstLetter}});if(0===o.length)return this.getActiveComponent(e);if(1===o.length)return o[0];let r=null,i=Number.MAX_SAFE_INTEGER;for(const t of o){let n=0,o=e;for(;o&&o!==t.wrapper&&o!==t.context;)n++,o=o.parentElement;n<i&&(i=n,r=t)}return r}getDistanceToComponent(e,t){let n=0,o=e;for(;o&&o!==t.wrapper&&o!==t.context;)n++,o=o.parentElement;return n}getComponentsByNesting(e){if(!e)return[];const t=this.components.filter(t=>t.wrapper.contains(e)||t.context&&t.context.contains(e));return t.length<=1?t:[...t].sort((t,n)=>this.getDistanceToComponent(e,n)-this.getDistanceToComponent(e,t))}getSequentialHandlersForKey(e,t){const n=this.getComponentsByNesting(e);return 0===n.length?[]:n.map(e=>"Enter"===t?e.handlers.onEnter:e.handlers.onSpace).filter(e=>"function"==typeof e)}executeSequentialHandlers(e,t){let n=!1,o=!1;for(const r of e){n=!0;if(!1===r(t)){o=!0;break}}return{called:n,stopped:o}}handleGlobalFocusin(e){const t=e.target;this.activeComponent=this.getActiveComponent(t)}handleGlobalKeydown(e){var t;const n=e.target;this.activeComponent=this.getActiveComponentForKey(n,e.key);const r=this.activeComponent,i="Enter"===e.key||" "===e.key||"Space"===e.key;if((r||i)&&this.isAllowedKeybinding(e))switch(e.key){case"Escape":if(!r)break;if(r.isOpened){if(r.handlers.onEsc){const t=r.handlers.onEsc();if(e.preventDefault(),e.stopPropagation(),!1===t){const e=this.findClosestOpenParent(n);(null==e?void 0:e.handlers.onEsc)&&e.handlers.onEsc()}}}else{const t=this.findClosestOpenParent(n);(null==t?void 0:t.handlers.onEsc)&&(t.handlers.onEsc(),e.preventDefault(),e.stopPropagation())}break;case"Enter":{const t=this.getSequentialHandlersForKey(n,"Enter");if(0===t.length)break;const{called:r,stopped:i}=this.executeSequentialHandlers(t,e);if(r&&!(0,o.isFormElement)(n)&&(e.stopPropagation(),e.preventDefault()),i)break;break}case" ":case"Space":{if("INPUT"===n.tagName||"TEXTAREA"===n.tagName)return;const t=this.getActiveComponent(n),o=this.getSequentialHandlersForKey(n,"Space");if(0===o.length)break;const{stopped:r}=this.executeSequentialHandlers(o);(r||(null==t?void 0:t.handlers.onSpace))&&(e.preventDefault(),e.stopPropagation());break}case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":if(!r)break;if(r.handlers.onArrow){if(e.metaKey||e.ctrlKey||e.altKey||e.shiftKey)return;r.handlers.onArrow(e),e.preventDefault(),e.stopPropagation()}break;case"Tab":if(!r)break;if(!r.handlers.onTab)break;const i=e.shiftKey?r.handlers.onShiftTab:r.handlers.onTab;i&&i(e);break;case"Home":if(!r)break;r.handlers.onHome&&(r.handlers.onHome(),e.preventDefault(),e.stopPropagation());break;case"End":if(!r)break;r.handlers.onEnd&&(r.handlers.onEnd(),e.preventDefault(),e.stopPropagation());break;default:if(!r)break;if(r.handlers.onFirstLetter&&1===e.key.length&&/^[a-zA-Z]$/.test(e.key)){if(r.handlers.onFirstLetter(e.key),!(null===(t=r.stopPropagation)||void 0===t?void 0:t.onFirstLetter))return;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="",r="",i,s){const l={wrapper:e,handlers:t,isOpened:n,name:o,selector:r,context:i,isRegistered:!0,stopPropagation:s};return this.components.push(l),l}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)}}},2961(e,t){ /* * HSBasePlugin * @version: 4.2.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. */ Object.defineProperty(t,"__esModule",{value:!0});t.default=class{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,o;let r=e;if(!Array.isArray(r)&&"undefined"!=typeof window){const e=null===(n=this.constructor)||void 0===n?void 0:n.name,t="string"==typeof e&&e.startsWith("HS")?`$hs${e.slice(2)}Collection`:null;t&&(Array.isArray(window[t])||(window[t]=[]),r=window[t])}Array.isArray(r)&&r.push({id:(null===(o=null==t?void 0:t.el)||void 0===o?void 0:o.id)||r.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}}},5803(e,t,n){ /* * HSTabs * @version: 4.2.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. */ var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const r=n(292),i=o(n(2961)),s=o(n(248)),l=n(8223);class a extends i.default{constructor(e,t,n){var o,r;super(e,t,n);const i=e.getAttribute("data-hs-tabs"),s=i?JSON.parse(i):{},a=Object.assign(Object.assign({},s),t);this.eventType=null!==(o=a.eventType)&&void 0!==o?o:"click",this.preventNavigationResolution="number"==typeof a.preventNavigationResolution?a.preventNavigationResolution:l.BREAKPOINTS[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===(r=this.current)||void 0===r?void 0:r.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 s.default),this.setupAccessibility())}open(e){var t,n,o,i,s;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===(i=null==this?void 0:this.current)||void 0===i?void 0:i.ariaSelected)&&(this.current.ariaSelected="true"),this.current.classList.add("active"),null===(s=this.currentContent)||void 0===s||s.classList.remove("hidden"),this.fireEvent("change",{el:e,prev:this.prevContentId,current:this.currentContentId,tabsId:this.el.id}),(0,r.dispatch)("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)}}t.default=a},292(e,t){ /* * @version: 4.2.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. */ Object.defineProperty(t,"__esModule",{value:!0}),t.stringToBoolean=t.menuSearchHistory=t.isScrollable=t.isParentOrElementHidden=t.isJson=t.isIpadOS=t.isIOS=t.isFormElement=t.isFocused=t.isEnoughSpace=t.isDirectChild=t.htmlToElement=t.getZIndex=t.getHighestZIndex=t.getClassPropertyAlt=t.getClassProperty=t.dispatch=t.debounce=t.classToClassList=t.afterTransition=void 0;t.stringToBoolean=e=>"true"===e;t.getClassProperty=(e,t,n="")=>(window.getComputedStyle(e).getPropertyValue(t)||n).replace(" ","");t.getClassPropertyAlt=(e,t,n="")=>{let o="";return e.classList.forEach(e=>{e.includes(t)&&(o=e)}),o.match(/:(.*)]/)?o.match(/:(.*)]/)[1]:n};const n=e=>window.getComputedStyle(e).getPropertyValue("z-index");t.getZIndex=n;t.getHighestZIndex=e=>{let t=Number.NEGATIVE_INFINITY;return e.forEach(e=>{let o=n(e);"auto"!==o&&(o=parseInt(o,10),o>t&&(t=o))}),t};t.isDirectChild=(e,t)=>{const n=e.children;for(let e=0;e<n.length;e++)if(n[e]===t)return!0;return!1};t.isEnoughSpace=(e,t,n="auto",o=10,r=null)=>{const i=t.getBoundingClientRect(),s=r?r.getBoundingClientRect():null,l=window.innerHeight,a=s?i.top-s.top:i.top,c=(r?s.bottom:l)-i.bottom,d=e.clientHeight+o;return"bottom"===n?c>=d:"top"===n?a>=d:a>=d||c>=d};t.isFocused=e=>document.activeElement===e;t.isFormElement=e=>e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement;t.isIOS=()=>!!/iPad|iPhone|iPod/.test(navigator.platform)||navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform);t.isIpadOS=()=>navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform);t.isJson=e=>{if("string"!=typeof e)return!1;const t=e.trim()[0],n=e.trim().slice(-1);if("{"===t&&"}"===n||"["===t&&"]"===n)try{return JSON.parse(e),!0}catch(e){return!1}return!1};const o=e=>{if(!e)return!1;return"none"===window.getComputedStyle(e).display||o(e.parentElement)};t.isParentOrElementHidden=o;t.isScrollable=e=>{const t=window.getComputedStyle(e),n=t.overflowY,o=t.overflowX,r=("scroll"===n||"auto"===n)&&e.scrollHeight>e.clientHeight,i=("scroll"===o||"auto"===o)&&e.scrollWidth>e.clientWidth;return r||i};t.debounce=(e,t=200)=>{let n;return(...o)=>{clearTimeout(n),n=setTimeout(()=>{e.apply(this,o)},t)}};t.dispatch=(e,t,n=null)=>{const o=new CustomEvent(e,{detail:{payload:n},bubbles:!0,cancelable:!0,composed:!1});t.dispatchEvent(o)};t.afterTransition=(e,t)=>{const n=()=>{t(),e.removeEventListener("transitionend",n,!0)},o=window.getComputedStyle(e),r=o.getPropertyValue("transition-duration");"none"!==o.getPropertyValue("transition-property")&&parseFloat(r)>0?e.addEventListener("transitionend",n,!0):t()};t.htmlToElement=e=>{const t=document.createElement("template");return e=e.trim(),t.innerHTML=e,t.content.firstChild};t.classToClassList=(e,t,n=" ",o="add")=>{e.split(n).forEach(e=>{e.trim()&&("add"===o?t.classList.add(e):t.classList.remove(e))})};const r={historyIndex:-1,addHistory(e){this.historyIndex=e},existsInHistory(e){return e>this.historyIndex},clearHistory(){this.historyIndex=-1}};t.menuSearchHistory=r}},t={};var n=function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={exports:{}};return e[o].call(i.exports,i,i.exports,n),i.exports}(5803);return n})());