gumball.min.js

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["gumball-ui"]={})}(this,function(e){"use strict";function n(e,t){var s=Element.prototype;const l=s.matches||s.webkitMatchesSelector||s.mozMatchesSelector||s.msMatchesSelector;return l.call(e,t)}function l(e,t){do{if(n(e,t))return e}while(null!==(e=e.parentElement||e.parentNode)&&1===e.nodeType);return null}const i=new Map,o=(t,s)=>{for(let e=0;e<t.length;e+=1)if("break"===s(t[e],e))break},r=e=>{let t=e.getAttribute("data-target");return t||(e=e.getAttribute("href"),t=e&&"#"!==e?e:null),document.querySelector(t)?t:null},t=e=>(e[0]||e).nodeType,s={EXPANDED:"aria-expanded"},a={COLLAPSE:"collapse",SHOW:"collapse--show",COLLAPSING:"collapsing"},c={COLLAPSE:"[data-toggle='collapse']"};class h{constructor(e){if(!t(e))throw new TypeError("Element expected");this._showCollapseEnd=this._showCollapseEnd.bind(this),this._hideCollapseEnd=this._hideCollapseEnd.bind(this),this._element=e,this._togglers=((s,e)=>{e=document.querySelectorAll(e);const l=[];return o(e,e=>{var t=r(e);t&&n(s,t)&&l.push(e)}),l.length?l:null})(e,c.COLLAPSE),this._collapsing=!1,i.set(e,this)}toggle(){var e=this._element.classList.contains(a.SHOW)?"hide":"show";this[e]()}show(){this._collapsing||this._element.classList.contains(a.SHOW)||(this._element.classList.remove(a.COLLAPSE),this._element.classList.add(a.COLLAPSING),this._setCollapsing(!0),o(this._togglers,e=>e.setAttribute(s.EXPANDED,!0)),this._element.addEventListener("transitionend",this._showCollapseEnd),this._element.style.height="".concat(this._element.scrollHeight,"px"))}hide(){!this._collapsing&&this._element.classList.contains(a.SHOW)&&(this._element.style.height="".concat(this._element.scrollHeight,"px"),this._element.offsetHeight,this._element.classList.remove(a.COLLAPSE),this._element.classList.remove(a.SHOW),this._element.classList.add(a.COLLAPSING),this._setCollapsing(!0),o(this._togglers,e=>{e.querySelectorAll(".".concat(a.SHOW)).length||e.setAttribute(s.EXPANDED,!1)}),this._element.style.height="",this._element.addEventListener("transitionend",this._hideCollapseEnd))}dispose(){i.delete(this._element),this._element=null,this._togglers=null,this._collapsing=null}_setCollapsing(e){this._collapsing=e}_showCollapseEnd(){this._element.classList.remove(a.COLLAPSING),this._element.classList.add(a.COLLAPSE),this._element.classList.add(a.SHOW),this._element.style.height="",this._element.removeEventListener("transitionend",this._showCollapseEnd),this._setCollapsing(!1)}_hideCollapseEnd(){this._element.classList.remove(a.COLLAPSING),this._element.classList.add(a.COLLAPSE),this._element.removeEventListener("transitionend",this._hideCollapseEnd),this._setCollapsing(!1)}static _toggle(e){let t=i.get(e);t=t||new h(e),t.toggle()}}document.addEventListener("click",e=>{var t=l(e.target,c.COLLAPSE);t&&("A"===t.tagName&&e.preventDefault(),t=r(t),t=document.querySelector(t),h._toggle(t))});const d="ArrowUp",g="ArrowDown",u="Down",_="Escape",m={EXPANDED:"aria-expanded",POPUP:"aria-haspopup"},p={DROPDOWN:"dropdown",TOGGLE:"dropdown__toggle",LIST:"dropdown__menu",SHOW:"dropdown__menu--show",ITEM:"dropdown__item"},L={DROPDOWN:'[data-toggle="dropdown"]'};class E{constructor(e){if(!t(e))throw new TypeError("Element expected");this._toggler=e,this._menu=E._getMenu(this._toggler),i.set(e,this)}toggle(){var e;this._menu&&(this._toggler.focus(),e=this._menu.classList.contains(p.SHOW)?"hide":"show",this[e]())}show(){this._menu.classList.contains(p.SHOW)||(E._clearActive(),this._menu.classList.add(p.SHOW),this._toggler.setAttribute(m.EXPANDED,!0))}hide(){this._menu.classList.contains(p.SHOW)&&(this._menu.classList.remove(p.SHOW),this._toggler.setAttribute(m.EXPANDED,!1))}static _getActiveToggler(){const t=document.querySelector(".".concat(p.SHOW));if(!t)return null;let s=null;var e=document.querySelectorAll(L.DROPDOWN);return o(e,e=>{return document.querySelector(r(e))===t?(s=e,"break"):null}),s}static _getToggler(e){if(e.classList.contains(p.TOGGLE))return e;const t=l(e,".".concat(p.DROPDOWN));return t?t.querySelector(L.DROPDOWN):null}static _getMenu(e){e=r(e);return document.querySelector(e)}static _clearActive(){const e=document.querySelector(".".concat(p.SHOW));if(e){const t=E._getToggler(e);e.classList.remove(p.SHOW),t.setAttribute(m.EXPANDED,!1)}}static _keyDownHandler(t){var{key:s,shiftKey:l,target:n}=t;const e=[d,g,_,"Up",u,"Esc","Tab"];if(-1!==e.indexOf(s)){const o=E._getToggler(n);if(o){if(s===_||"Esc"===s)return E._clearActive(),void o.focus();const r=E._getMenu(o);var i=r.querySelectorAll(".".concat(p.ITEM));const a=(i=i)?[].slice.call(i):[];if(a.length){if(!r.classList.contains(p.SHOW))return o.click(),void a[0].focus();let e=a.indexOf(n);"Tab"!==s?(t.preventDefault(),(s===d||"Up"===s)&&0<e&&--e,(s===g||s===u)&&e<a.length-1&&(e+=1),a[e].focus()):e+1>=a.length&&!l&&E._clearActive()}}}}static _toggle(t){var{target:e}=t;const s=l(e,L.DROPDOWN);if(s){"A"!==s.tagName||s.getAttribute("data-follow")||t.preventDefault();let e=i.get(s);e=e||new E(s),e.toggle()}else l(e,".".concat(p.LIST))||E._clearActive()}}document.addEventListener("keydown",E._keyDownHandler),document.addEventListener("click",E._toggle),e.Collapse=h,e.Dropdown=E,Object.defineProperty(e,"__esModule",{value:!0})});