@ulu/frontend 0.4.8 → 0.4.9

package/dist/es/ui/breakpoints.d.ts

@@ -8,7 +8,7 @@ export class BreakpointManager {
     static globalsInitialized: boolean;
     static _initializeGlobals(): void;
     static defaults: {
-        element: HTMLElement;
+        element: null;
         valueFromPseudo: boolean;
         customProperty: Object;
         pseudoSelector: string;
@@ -30,6 +30,7 @@ export class BreakpointManager {
         element: Node;
         pseudoSelector: string;
     });
+    element: HTMLElement | undefined;
     active: any;
     previous: any;
     activeIndex: any;

package/dist/es/ui/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/breakpoints.js"],"names":[],"mappings":"AAcA;;;;GAIG;AACH;IACE,wBAAsB;IACtB,mCAAkC;IAElC,kCAQC;IACD;;;;;;;MAQC;IACD;;;;;;;OAOG;IACH,oBANG;QAAsB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;KACvC,EAeA;IAXC,YAAkB;IAClB,cAAoB;IACpB,iBAAuB;IACvB,+BAA2B;IAC3B,mBAAyB;IACzB,gBAAqB;IACrB,yBAA2B;IAM7B;;;;;OAKG;IACH,mCAEC;IACD;;;OAGG;IACH,yCAEC;IACD;;OAEG;IACH,gCAEC;IACD;;OAEG;IACH,kCAEC;IACD;;OAEG;IACH,wBAMC;IACD;;OAEG;IACH,eAuCC;IACD;;;;OAIG;IACH,kBAFY,UAAU,CAQrB;CACF;AAsED;;;GAGG;AACH;IACE,qCAQC;IAPC;;;;MAIC;IACD,cAAuB;IACvB,UAAgB;IAElB;;;;;OAKG;IACH,wDAEC;IACD;;;;OAIG;IACH,6BAEC;IACD;;;;OAIG;IACH,6BAEC;IACD;;;OAGG;IACH,8BAEC;IACD;;;;OAIG;IACH,mDAOC;IAED,yBAGC;CACF;AArID;;;GAGG;AACH;IACE,6CAMC;IALC,eAA0B;IAC1B,gBAAmB;IACnB,UAAY;IACZ,WAAa;IACb,gBAA4B;IAE9B;;OAEG;IACH,sBAMC;IACD;;OAEG;IACH,4BAIC;IACD;;OAEG;IACH,+BAEC;IACD;;;;;OAKG;IACH,aAJW,WAAS,MAAM,QAiBzB;IACD;;OAEG;IACH,2BAQC;CACF"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/breakpoints.js"],"names":[],"mappings":"AAcA;;;;GAIG;AACH;IACE,wBAAsB;IACtB,mCAAkC;IAElC,kCAQC;IACD;;;;;;;MAQC;IACD;;;;;;;OAOG;IACH,oBANG;QAAsB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;KACvC,EAmBA;IAbG,iCAAuC;IAEzC,YAAkB;IAClB,cAAoB;IACpB,iBAAuB;IACvB,+BAA2B;IAC3B,mBAAyB;IACzB,gBAAqB;IACrB,yBAA2B;IAM7B;;;;;OAKG;IACH,mCAEC;IACD;;;OAGG;IACH,yCAEC;IACD;;OAEG;IACH,gCAEC;IACD;;OAEG;IACH,kCAEC;IACD;;OAEG;IACH,wBAMC;IACD;;OAEG;IACH,eAuCC;IACD;;;;OAIG;IACH,kBAFY,UAAU,CAQrB;CACF;AAsED;;;GAGG;AACH;IACE,qCAQC;IAPC;;;;MAIC;IACD,cAAuB;IACvB,UAAgB;IAElB;;;;;OAKG;IACH,wDAEC;IACD;;;;OAIG;IACH,6BAEC;IACD;;;;OAIG;IACH,6BAEC;IACD;;;OAGG;IACH,8BAEC;IACD;;;;OAIG;IACH,mDAOC;IAED,yBAGC;CACF;AArID;;;GAGG;AACH;IACE,6CAMC;IALC,eAA0B;IAC1B,gBAAmB;IACnB,UAAY;IACZ,WAAa;IACb,gBAA4B;IAE9B;;OAEG;IACH,sBAMC;IACD;;OAEG;IACH,4BAIC;IACD;;OAEG;IACH,+BAEC;IACD;;;;;OAKG;IACH,aAJW,WAAS,MAAM,QAiBzB;IACD;;OAEG;IACH,2BAQC;CACF"}

package/dist/es/ui/breakpoints.js

@@ -22,7 +22,7 @@ const y = (s) => k(s, "breakpoint"), i = class i {
    * @param {String} config.pseudoSelector Change pseudo selector used to get the breakpoint from the pseudo's content property
    */
   constructor(t) {
-    i._initializeGlobals(), Object.assign(this, i.defaults, t), this.active = null, this.previous = null, this.activeIndex = null, this.resizeDirection = null, this.previousIndex = null, this.breakpoints = {}, this.onChangeCallbacks = [], this.order.forEach((e) => this.breakpoints[e] = new x(e, this)), d(this, this), this.update(), i.instances.push(this);
+    i._initializeGlobals(), Object.assign(this, i.defaults, t), !this.element && typeof document != "undefined" && (this.element = document.documentElement), this.active = null, this.previous = null, this.activeIndex = null, this.resizeDirection = null, this.previousIndex = null, this.breakpoints = {}, this.onChangeCallbacks = [], this.order.forEach((e) => this.breakpoints[e] = new x(e, this)), d(this, this), this.update(), i.instances.push(this);
   }
   /**
    * Add a callback for every time a breakpoint changes
@@ -70,10 +70,10 @@ const y = (s) => k(s, "breakpoint"), i = class i {
     if (t === this.active) return;
     this.previous = this.active, this.previousIndex = this.activeIndex;
     const e = this.order.indexOf(t);
-    this.active = t, this.activeIndex = e, this.order.forEach((o, n) => {
-      const a = this.breakpoints[o], h = this.activeIndex;
-      a._setDirection("min", n <= h), a._setDirection("max", n > h), a._setDirection("only", n === h);
-    }), this.previousIndex !== null && (this.resizeDirection = this.previousIndex < e ? "up" : "down"), this.onChangeCallbacks.forEach((o) => o(this));
+    this.active = t, this.activeIndex = e, this.order.forEach((n, o) => {
+      const a = this.breakpoints[n], h = this.activeIndex;
+      a._setDirection("min", o <= h), a._setDirection("max", o > h), a._setDirection("only", o === h);
+    }), this.previousIndex !== null && (this.resizeDirection = this.previousIndex < e ? "up" : "down"), this.onChangeCallbacks.forEach((n) => n(this));
   }
   /**
    * Get a breakpoint by key
@@ -86,7 +86,7 @@ const y = (s) => k(s, "breakpoint"), i = class i {
   }
 };
 r(i, "instances", []), r(i, "globalsInitialized", !1), r(i, "defaults", {
-  element: document == null ? void 0 : document.documentElement,
+  element: null,
   valueFromPseudo: !1,
   customProperty: "--breakpoint",
   customProperty: b("cssvarPrefix", y),
@@ -109,7 +109,7 @@ class l {
    * Calls all functions in handlers or
    */
   _call(t) {
-    (t ? this.on : this.off).forEach((o) => o()), d(this.breakpoint._manager, `Handlers called (${t ? "on" : "off"}): ${this.direction}`);
+    (t ? this.on : this.off).forEach((n) => n()), d(this.breakpoint._manager, `Handlers called (${t ? "on" : "off"}): ${this.direction}`);
   }
   /**
    * Returns handlers in normalized object format on/off
@@ -181,8 +181,8 @@ class x {
    * @param {String} direction Remove handler only from specified direction, else search all directions
    */
   remove(t, e) {
-    (e ? [e] : ["max", "min", "only"]).forEach((n) => {
-      this.directions[n] && this.directions[n].remove(t);
+    (e ? [e] : ["max", "min", "only"]).forEach((o) => {
+      this.directions[o] && this.directions[o].remove(t);
     });
   }
   log(...t) {

package/dist/umd/ulu-frontend.umd.js

@@ -1,7 +1,7 @@
 (function(l,d){typeof exports=="object"&&typeof module!="undefined"?d(exports,require("@floating-ui/dom"),require("swipe-listener")):typeof define=="function"&&define.amd?define(["exports","@floating-ui/dom","swipe-listener"],d):(l=typeof globalThis!="undefined"?globalThis:l||self,d(l.ULU={},l.FloatingUIDOM,l.SwipeListener))})(this,(function(l,d,g){"use strict";var Ti=Object.defineProperty,xi=Object.defineProperties;var Di=Object.getOwnPropertyDescriptors;var es=Object.getOwnPropertySymbols;var Pi=Object.prototype.hasOwnProperty,Hi=Object.prototype.propertyIsEnumerable;var ss=l=>{throw TypeError(l)};var re=(l,d,g)=>d in l?Ti(l,d,{enumerable:!0,configurable:!0,writable:!0,value:g}):l[d]=g,y=(l,d)=>{for(var g in d||(d={}))Pi.call(d,g)&&re(l,g,d[g]);if(es)for(var g of es(d))Hi.call(d,g)&&re(l,g,d[g]);return l},ae=(l,d)=>xi(l,Di(d));var C=(l,d,g)=>re(l,typeof d!="symbol"?d+"":d,g),le=(l,d,g)=>d.has(l)||ss("Cannot "+g);var v=(l,d,g)=>(le(l,d,"read from private field"),g?g.call(l):d.get(l)),x=(l,d,g)=>d.has(l)?ss("Cannot add the same private member more than once"):d instanceof WeakSet?d.add(l):d.set(l,g),E=(l,d,g,j)=>(le(l,d,"write to private field"),j?j.call(l,g):d.set(l,g),g),P=(l,d,g)=>(le(l,d,"access private method"),g);var ce=(l,d,g)=>new Promise((j,ct)=>{var Rt=D=>{try{V(g.next(D))}catch(st){ct(st)}},Mt=D=>{try{V(g.throw(D))}catch(st){ct(st)}},V=D=>D.done?j(D.value):Promise.resolve(D.value).then(Rt,Mt);V((g=g.apply(l,d)).next())});var G,Q,T,$,_,J,B,Z,tt,A,Ht,ue,de,he;function j(i,t,e,s){let n;const o=function(){const a=this,r=arguments,c=function(){n=null,i.apply(a,r)};clearTimeout(n),n=setTimeout(c,t)};return o.cancel=function(){clearTimeout(n),n=null},o}const ct=/\s+/g,Rt=/^[{\[][\s\S]*[}\]]$/;function Mt(i,t={},e=null){try{return JSON.parse(i)}catch(s){return typeof e=="function"?e(s,i):console.warn("safeParse: Failed to parse JSON string:",i,"Error:",s),t}}function V(){return typeof window!="undefined"&&typeof window.document!="undefined"}function D(i){return new DOMParser().parseFromString(i,"text/html").body.firstElementChild}function st(i,t,e={}){const s=i.dataset[t];return Mt(s,e,n=>{console.error(`Error getting JSON from dataset (${t}) -- "${s}"
 `,i,n)})}function is(i,t){const e=i.dataset[t];return e&&Rt.test(e.trim())?st(i,t):e}function ns(i,t){const e=i.getBoundingClientRect();return t.clientY<e.top||t.clientY>e.top+e.height||t.clientX<e.left||t.clientX>e.left+e.width}function ut(i,t=document){return typeof i=="string"?t.querySelector(i):i instanceof Element?i:(console.warn("getElement: Invalid target type (expected String/Node)",i),null)}function fe(i,t=document){return typeof i=="string"?[...t.querySelectorAll(i)]:i instanceof Element?[i]:Array.isArray(i)||i instanceof NodeList?[...i]:(console.warn("getElement: Invalid target type (expected String/Node/Array/Node List)",i),null)}function os(i){const t={scrollableChild:document.body,container:window,propertyElement:document.documentElement,propertyName:"--ulu-scrollbar-width"},e=y(y({},t),i),{scrollableChild:s,container:n,propertyElement:o,propertyName:a}=e,r=pe(s,n);o.style.setProperty(a,`${r}px`)}function pe(i=document.body,t=window){return t.innerWidth-i.clientWidth}function rs({preventShift:i=!1,container:t=document.body}){const e=t.style.overflow,s=t.style.paddingRight;if(t.style.overflow="hidden",i){const n=pe();if(n>0){const o=parseInt(s||"0px",10);t.style.paddingRight=`${o+n}px`}}return()=>{t.style.overflow=e,t.style.paddingRight=s}}V()&&(ls(),cs());const qt={pageModified(i){i.dispatchEvent(K("pageModified"))},pageResized(i){i.dispatchEvent(K("pageResized"))},beforePrint(i){i.dispatchEvent(K("beforePrint"))},afterPrint(i){i.dispatchEvent(K("afterPrint"))}},as=Object.keys(qt);function it(i,t){qt[i]?qt[i](t):console.warn(`Unable to dispatch non-core event: ${i}`)}function N(i){return"ulu:"+i}function z(i){return as.includes(i)?N(i):(console.warn(`'${i}' is not a valid core event type.`),null)}function K(i,t=null,e={bubbles:!0}){return new CustomEvent(N(i),y({detail:t},e))}function ls(){window.addEventListener("resize",j(()=>it("pageResized",document),250))}function cs(){window.addEventListener("beforeprint",()=>{it("beforePrint",document)}),window.addEventListener("afterprint",()=>{it("afterPrint",document)})}const ge={iconClassClose:"css-icon css-icon--close",iconClassDragX:"css-icon css-icon--drag-x",iconClassDragBoth:"css-icon css-icon--drag-both",iconClassPrevious:"css-icon  css-icon--angle-left",iconClassNext:"css-icon  css-icon--angle-right",cssvarPrefix:""};let nt=y({},ge);function us(){return y({},ge)}function me(i){Object.assign(nt,i)}function ds(){return y({},nt)}function be(i){if(!nt.hasOwnProperty(i)){console.warn(`Attempted to access non-existent setting: ${i}`);return}return nt[i]}function hs(i,t){nt[i]=t}function H(i,t){return{toString(){const e=be(i);return t?t(e):e}}}function dt(i){return t=>i.every(e=>Object.prototype.hasOwnProperty.call(t,e))}function fs(i){const t=/(px|vw|vh|%|em|rem)/i;return{original:i,value:parseFloat(i.replace(t,"")),unit:i.match(t)[0]}}function ps(i){return i.replace(/[\r\n]+/g,"")}function gs(i){return ps(i).replace(ct," ").trim()}function ht(i){return gs(i)}function ms(i){return i.replace(/-([a-z])/g,(t,e)=>e.toUpperCase())}function ve(i){return ms(i.replace(/^data-/,""))}function ye(i,t={columnFirst:"position-column-first",columnLast:"position-column-last",rowFirst:"position-row-first",rowLast:"position-row-last"}){const e=[...i.children],s=[];let n;e.forEach(o=>{const a=o.getBoundingClientRect().y;n!==a&&s.push([]),s[s.length-1].push(o),n=a,o.classList.remove(...Object.values(t))}),s.forEach((o,a)=>{a===0&&o.forEach(r=>r.classList.add(t.rowFirst)),a==s.length-1&&o.forEach(r=>r.classList.add(t.rowLast)),o.forEach((r,c)=>{c===0&&r.classList.add(t.columnFirst),c==o.length-1&&r.classList.add(t.columnLast)})})}function ft(i){return typeof i=="string"?i.split(" ").filter(t=>t!==""):Array.isArray(i)?i:i?(console.warn("resolveClassArray: Invalid class input type.",i),[]):[]}const q=class q{constructor(t){if(!q.hasRequiredOptions(t))throw new Error(`Missing a required options: ${q.requiredOptions.join(", ")}`);this.options=Object.assign({},q.defaults,t),this.logTitle=`ULU: ${this.options.type}:
 `}init(t){var e;this.setupElements(t),(e=t.coreEvents)!=null&&e.length&&t.coreEvents.forEach(s=>{const n=z(s);n&&document.addEventListener(n,()=>this.setupElements(t))})}setupElements(t){const{setup:e,key:s,withData:n,context:o}=t;this.queryAllInitial(s,n,o).forEach(r=>e(r,this))}getAttribute(t){const{baseAttribute:e}=this.options;return t?`${e}-${t}`:`${e}`}attributeSelector(t){return`[${this.getAttribute(t)}]`}attributeSelectorInitial(t){return`${this.attributeSelector(t)}:not([${this.getAttribute("init")}])`}queryAllInitial(t,e,s=document){return[...s.querySelectorAll(this.attributeSelectorInitial(t))].map(o=>({element:o,data:e?this.getData(o,t):null,initialize:()=>this.initializeElement(o)}))}initializeElement(t){t.setAttribute(this.getAttribute("init"),"")}getData(t,e){const s=ve(this.getAttribute(e));return is(t,s)}log(...t){console.log(this.logTitle,...t)}warn(...t){console.warn(this.logTitle,...t)}logError(...t){console.error(this.logTitle,...t)}};C(q,"defaults",{type:null,baseAttribute:null}),C(q,"requiredOptions",["type","baseAttribute"]),C(q,"hasRequiredOptions",dt(q.requiredOptions));let w=q;function Bt(i,t){var e=i.indexOf(t);e>-1&&i.splice(e,1)}function bs(i,t){return`--${i}-${t}`}const ot={debug:!1,warningsAlways:!0,errorsAlways:!0,outputContext:!1};function jt(i){var t;return ot.debug&&((i==null?void 0:i.debug)||((t=i==null?void 0:i.options)==null?void 0:t.debug)||i==null)}function vs(i){var t;return typeof i=="object"&&((t=i==null?void 0:i.constructor)==null?void 0:t.name)}function Nt(i,t,e){const s=vs(t)||"Logger";console[i](s,...e),ot.outputContext&&console.log(`Context:
-`,t)}function ys(i){Object.assign(ot,i)}function k(i,...t){jt(i)&&Nt("log",i,t)}function Ft(i,...t){(ot.warningsAlways||jt(i))&&Nt("warn",i,t)}function S(i,...t){(ot.errorsAlways||jt(i))&&Nt("error",i,t)}const Cs=i=>bs(i,"breakpoint"),O=class O{static _initializeGlobals(){O.globalsInitialized||!V()||(window.addEventListener(z("pageResized"),()=>{O.instances.forEach(t=>t.update())}),O.globalsInitialized=!0)}constructor(t){O._initializeGlobals(),Object.assign(this,O.defaults,t),this.active=null,this.previous=null,this.activeIndex=null,this.resizeDirection=null,this.previousIndex=null,this.breakpoints={},this.onChangeCallbacks=[],this.order.forEach(e=>this.breakpoints[e]=new ws(e,this)),k(this,this),this.update(),O.instances.push(this)}onChange(t){this.onChangeCallbacks.push(t)}removeOnChange(t){Bt(this.onChangeCallbacks,t)}getBreakpointInPseudo(){return window.getComputedStyle(this.element,this.pseudoSelector).content.replace(/^"|"$/g,"")}getBreakpointInProperty(){return getComputedStyle(this.element).getPropertyValue(this.customProperty).trim()}getBreakpoint(){return this.valueFromPseudo?this.getBreakpointInPseudo():this.getBreakpointInProperty()}update(){const t=this.getBreakpoint();if(!t){S(this,"Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!");return}if(t===this.active)return;this.previous=this.active,this.previousIndex=this.activeIndex;const e=this.order.indexOf(t);this.active=t,this.activeIndex=e,this.order.forEach((s,n)=>{const o=this.breakpoints[s],a=this.activeIndex;o._setDirection("min",n<=a),o._setDirection("max",n>a),o._setDirection("only",n===a)}),this.previousIndex!==null&&(this.resizeDirection=this.previousIndex<e?"up":"down"),this.onChangeCallbacks.forEach(s=>s(this))}at(t){const e=this.breakpoints[t];return t||S(this,"Unable to find breakpoint for:",e),e}};C(O,"instances",[]),C(O,"globalsInitialized",!1),C(O,"defaults",{element:document==null?void 0:document.documentElement,valueFromPseudo:!1,customProperty:"--breakpoint",customProperty:H("cssvarPrefix",Cs),pseudoSelector:":before",order:["none","small","medium","large"],debug:!1});let Ut=O;class Vt{constructor(t,e){this.direction=t,this.active=!1,this.on=[],this.off=[],this.breakpoint=e}change(t){this.active!==t&&(t?this._call(!0):this.active&&this._call(!1),this.active=t)}_call(t){(t?this.on:this.off).forEach(s=>s()),k(this.breakpoint._manager,`Handlers called (${t?"on":"off"}): ${this.direction}`)}getHandlers(t){return typeof t!="object"?{on:t}:t}add(t){const e=this.getHandlers(t);e.on&&this.on.push(e.on),e.off&&this.off.push(e.off),this.active&&e.on&&(e.on(),k(this.breakpoint._manager,`Handler called immediately: ${this.direction}`,e.on))}remove(t){const e=this.getHandlers(t);e.on&&Bt(this.on,e.on),e.off&&Bt(this.off,e.off)}}class ws{constructor(t,e){this.directions={max:new Vt("max",this),min:new Vt("min",this),only:new Vt("only",this)},this._manager=e,this.name=t}_setDirection(t,e){this.directions[t].change(e)}max(t){this.directions.max.add(t)}min(t){this.directions.min.add(t)}only(t){this.directions.only.add(t)}remove(t,e){(e?[e]:["max","min","only"]).forEach(n=>{this.directions[n]&&this.directions[n].remove(t)})}log(...t){t.unshift(`Breakpoint (${this.name}):`),this._manager.log.apply(this._manager,t)}}let Es=0;function pt(){return`ulu-uid-${++Es}`}function R(i){i.id||(i.id=pt())}const zt=class zt{constructor(t,e){const{trigger:s,content:n}=t;if(!s||!n){S(this,"missing required elements (trigger or content)");return}const o=Object.assign({},zt.defaults,e);this.elements=t,this.options=o,this.isOpen=!1,this.handlers={},R(s),R(n),this.debugLog(this,this),o.selfManaged||this.attachHandlers(),this.setup()}attachHandlers(){const{trigger:t,content:e}=this.elements,{focusoutCloses:s}=this.options;this.clickHandler=n=>{this.onClick(n)},this.focusoutHandler=n=>{s&&document.addEventListener("focusin",()=>{e.contains(document.activeElement)||this.close(n)},{once:!0})},t.addEventListener("click",this.clickHandler),e.addEventListener("focusout",this.focusoutHandler)}removeHandlers(){const{trigger:t,content:e}=this.elements;t.removeEventListener("click",this.clickHandler),e.removeEventListener("focusout",this.focusoutHandler)}onClick(t){this.toggle(t)}destroy(){this.removeHandlers(),this.destroyTemporaryHandlers()}debugLog(...t){this.options.debug&&k(this,...t)}setup(){const{trigger:t,content:e}=this.elements,{startOpen:s}=this.options;t.setAttribute("role","button"),t.setAttribute("aria-controls",e.id),e.setAttribute("aria-labelledby",t.id),this.setState(s)}createEvent(t,e){return new CustomEvent(N("collapsible:"+t),{detail:e})}setState(t,e){const s={collapsible:this,isOpen:t,event:e};this.debugLog(this,"Set state",s);const{trigger:n,content:o}=this.elements,{openClass:a}=this.options,r=c=>c.classList[t?"add":"remove"](a);n.setAttribute("aria-expanded",t?"true":"false"),r(n),r(o),this.isOpen=t,this.options.onChange(s),n.dispatchEvent(this.createEvent("change",s)),t?this.setupTemporaryHandlers():this.destroyTemporaryHandlers()}setupTemporaryHandlers(){const{content:t,trigger:e}=this.elements,{clickOutsideCloses:s,escapeCloses:n}=this.options,o=r=>{const{target:c}=r,u=e.contains(c),h=t.contains(c);s&&!u&&!h&&this.close(r)},a=r=>{n&&r.key==="Escape"&&this.close(r)};document.addEventListener("click",o),document.addEventListener("keydown",a),this.handlers.onDocumentClick=o,this.handlers.onDocumentKeydown=a}destroyTemporaryHandlers(){const{onDocumentClick:t,onDocumentKeydown:e}=this.handlers;t&&document.removeEventListener("click",t),t&&document.removeEventListener("keydown",e)}open(t){this.setState(!0,t)}close(t){this.setState(!1,t)}toggle(t){this.setState(!this.isOpen,t)}};C(zt,"defaults",{clickOutsideCloses:!1,focusoutCloses:!1,escapeCloses:!1,selfManaged:!1,startOpen:!1,openClass:"is-active",debug:!0,onChange(t){}});let gt=zt;const mt=new w({type:"details-group",baseAttribute:"data-ulu-details-group"}),Kt=mt.getAttribute("child-init"),Ss={onlyOneOpen:!0,childSelector:":scope > details"};function As(){mt.init({withData:!0,coreEvents:["pageModified"],setup({element:i,data:t,initialize:e}){Ce(i,t),e()}})}function Ce(i,t){const e=Object.assign({},Ss,t);try{n()}catch(r){console.error(r)}function s(){return i.querySelectorAll(e.childSelector)}function n(){s().forEach(r=>{r.hasAttribute(Kt)||(r.setAttribute(Kt,""),r.addEventListener("toggle",o))})}function o({target:r}){e.onlyOneOpen&&r.open&&s().forEach(c=>{c!==r&&c.open&&(c.open=!1)})}function a(){s().forEach(r=>{r.removeEventListener("toggle",o),r.removeAttribute(Kt)}),i.removeAttribute(mt.getAttribute("init"))}return{destroy:a,element:i,setupChildren:n}}const $s=[".youtube-embedded-video",'iframe[title*="YouTube video player"]','iframe[src*="youtube.com/embed"]'];function we(i=document){Se(i).forEach(e=>{try{e.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}',"*")}catch(s){console.error(s)}})}function Ee(i=document){Se(i).forEach(e=>{const{src:s}=e;s&&(e.src=s.split("?")[0]+"?rel=0&enablejsapi=1")})}function Se(i){return i.querySelectorAll($s.join(", "))}function Ae(i,t){const e=new MutationObserver(s=>{s.forEach(n=>{if(n.attributeName==="open"){const o=i.hasAttribute("open");t(o)}})});return e.observe(i,{attributes:!0,attributeFilter:["open"]}),{destroy:()=>e.disconnect()}}const Wt="data-ulu-dialog",W=new w({type:"dialog",baseAttribute:Wt}),$e=W.getAttribute("close"),Xt={nonModal:!1,documentEnd:!1,clickOutsideCloses:!0,pauseVideos:!0,preventScroll:!0,preventScrollShift:!0};let bt=y({},Xt);function Ls(i){bt=Object.assign({},bt,i)}function ks(){W.init({coreEvents:["pageModified"],withData:!0,setup({element:i,initialize:t,data:e}){ke(i,e),t()}}),W.init({key:"trigger",coreEvents:["pageModified"],withData:!0,setup({element:i,initialize:t,data:e}){Le(i,e),t()}})}function Le(i,t){i.addEventListener("click",e);function e(s){var r;s.target.closest("a")&&s.preventDefault();const o=document.getElementById(t);if(!o){console.error("Could not locate dialog (id)",t);return}if(((r=o==null?void 0:o.tagName)==null?void 0:r.toLowerCase())!=="dialog"){console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");return}const a=Ie(o);o[a.nonModal?"show":"showModal"]()}}function ke(i,t){const e=Object.assign({},bt,t),s=document.body,{preventScrollShift:n}=e;let o=null,a;if(i.addEventListener(N("resizer:start"),c),i.addEventListener(N("resizer:end"),u),i.addEventListener("click",r),e.documentEnd&&s.appendChild(i),e.pauseVideos&&Is(i),!e.nonModal&&e.preventScroll){let h;o=Ae(i,m=>{m?h=rs({preventShift:n}):h&&(h(),h=null)})}function r(h){const{target:m}=h,f=m===i,b=m.closest(W.attributeSelector("close"));(!a&&e.clickOutsideCloses&&f&&ns(i,h)||b)&&(e.pauseVideos&&zs(i),i.close())}function c(h){a=h.pointerId}function u(h){a===h.pointerId&&setTimeout(()=>{a=null},0)}return{destroy:()=>{o&&o.destroy()}}}function Ie(i){return Object.assign({},bt,W.getData(i))}function Is(i){Ee(i)}function zs(i){we(i),i.querySelectorAll("video").forEach(e=>e.pause())}const vt=new w({type:"flipcard",baseAttribute:"data-ulu-flipcard"});function Os(){vt.init({withData:!0,coreEvents:["pageModified"],setup({element:i,data:t,initialize:e}){const s=Object.assign({},t),n=i.querySelector(vt.attributeSelector("front")),o=i.querySelector(vt.attributeSelector("back"));new yt(i,n,o,s),e()}})}const U=class U{constructor(t,e,s,n){s||S(this,"Missing an element (container, front, back)"),this.options=Object.assign({},U.defaults,n);const{namespace:o}=this.options;U.instances.push(this),this.elements={container:t,front:e,back:s},this.isOpen=!1,this.uid=`${o}-id-${U.instances.length}`,this.stateAttr=`data-${o}-state`.toLowerCase(),this.setup(),this.setVisibility(!1),k(this,this)}toggle(){this.setVisibility(!this.isOpen)}setup(){const{uid:t}=this,{namespace:e,proxyClick:s}=this.options,{container:n,front:o,back:a}=this.elements,r=this.elements.control=document.createElement("button");r.classList.add(this.getClass("control-button")),r.setAttribute("type","button"),r.innerHTML=this.createControlContent(),r.style.gridArea=e,r.style.zIndex="-1",r.addEventListener("focusin",()=>{r.style.zIndex="20"}),r.addEventListener("focusout",()=>{r.style.zIndex="-1"}),r.addEventListener("click",this.toggle.bind(this)),a.parentNode.insertBefore(r,a),n.classList.add(this.options.namespace),n.setAttribute("style",ht(this.containerCss())),s&&n.addEventListener("click",this.onProxyClick.bind(this)),o.style.gridArea=e,a.style.gridArea=e,r.id=`${t}-control`,r.setAttribute("aria-controls",a.id),r.setAttribute("aria-expanded","false"),a.id=`${t}-back`,a.setAttribute("aria-labelledby",r.id),a.setAttribute("aria-hidden","true")}onProxyClick({target:t}){const{exclude:e,allowSelection:s,selectionMin:n}=this.options.proxyClick,o=window.getSelection();e&&!t.matches(e)&&(!s||o.toString().length<n)&&this.toggle()}getClass(t){const{namespace:e}=this.options;return t?`${e}__${t}`:e}createControlContent(){return`
+`,t)}function ys(i){Object.assign(ot,i)}function k(i,...t){jt(i)&&Nt("log",i,t)}function Ft(i,...t){(ot.warningsAlways||jt(i))&&Nt("warn",i,t)}function S(i,...t){(ot.errorsAlways||jt(i))&&Nt("error",i,t)}const Cs=i=>bs(i,"breakpoint"),O=class O{static _initializeGlobals(){O.globalsInitialized||!V()||(window.addEventListener(z("pageResized"),()=>{O.instances.forEach(t=>t.update())}),O.globalsInitialized=!0)}constructor(t){O._initializeGlobals(),Object.assign(this,O.defaults,t),!this.element&&typeof document!="undefined"&&(this.element=document.documentElement),this.active=null,this.previous=null,this.activeIndex=null,this.resizeDirection=null,this.previousIndex=null,this.breakpoints={},this.onChangeCallbacks=[],this.order.forEach(e=>this.breakpoints[e]=new ws(e,this)),k(this,this),this.update(),O.instances.push(this)}onChange(t){this.onChangeCallbacks.push(t)}removeOnChange(t){Bt(this.onChangeCallbacks,t)}getBreakpointInPseudo(){return window.getComputedStyle(this.element,this.pseudoSelector).content.replace(/^"|"$/g,"")}getBreakpointInProperty(){return getComputedStyle(this.element).getPropertyValue(this.customProperty).trim()}getBreakpoint(){return this.valueFromPseudo?this.getBreakpointInPseudo():this.getBreakpointInProperty()}update(){const t=this.getBreakpoint();if(!t){S(this,"Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!");return}if(t===this.active)return;this.previous=this.active,this.previousIndex=this.activeIndex;const e=this.order.indexOf(t);this.active=t,this.activeIndex=e,this.order.forEach((s,n)=>{const o=this.breakpoints[s],a=this.activeIndex;o._setDirection("min",n<=a),o._setDirection("max",n>a),o._setDirection("only",n===a)}),this.previousIndex!==null&&(this.resizeDirection=this.previousIndex<e?"up":"down"),this.onChangeCallbacks.forEach(s=>s(this))}at(t){const e=this.breakpoints[t];return t||S(this,"Unable to find breakpoint for:",e),e}};C(O,"instances",[]),C(O,"globalsInitialized",!1),C(O,"defaults",{element:null,valueFromPseudo:!1,customProperty:"--breakpoint",customProperty:H("cssvarPrefix",Cs),pseudoSelector:":before",order:["none","small","medium","large"],debug:!1});let Ut=O;class Vt{constructor(t,e){this.direction=t,this.active=!1,this.on=[],this.off=[],this.breakpoint=e}change(t){this.active!==t&&(t?this._call(!0):this.active&&this._call(!1),this.active=t)}_call(t){(t?this.on:this.off).forEach(s=>s()),k(this.breakpoint._manager,`Handlers called (${t?"on":"off"}): ${this.direction}`)}getHandlers(t){return typeof t!="object"?{on:t}:t}add(t){const e=this.getHandlers(t);e.on&&this.on.push(e.on),e.off&&this.off.push(e.off),this.active&&e.on&&(e.on(),k(this.breakpoint._manager,`Handler called immediately: ${this.direction}`,e.on))}remove(t){const e=this.getHandlers(t);e.on&&Bt(this.on,e.on),e.off&&Bt(this.off,e.off)}}class ws{constructor(t,e){this.directions={max:new Vt("max",this),min:new Vt("min",this),only:new Vt("only",this)},this._manager=e,this.name=t}_setDirection(t,e){this.directions[t].change(e)}max(t){this.directions.max.add(t)}min(t){this.directions.min.add(t)}only(t){this.directions.only.add(t)}remove(t,e){(e?[e]:["max","min","only"]).forEach(n=>{this.directions[n]&&this.directions[n].remove(t)})}log(...t){t.unshift(`Breakpoint (${this.name}):`),this._manager.log.apply(this._manager,t)}}let Es=0;function pt(){return`ulu-uid-${++Es}`}function R(i){i.id||(i.id=pt())}const zt=class zt{constructor(t,e){const{trigger:s,content:n}=t;if(!s||!n){S(this,"missing required elements (trigger or content)");return}const o=Object.assign({},zt.defaults,e);this.elements=t,this.options=o,this.isOpen=!1,this.handlers={},R(s),R(n),this.debugLog(this,this),o.selfManaged||this.attachHandlers(),this.setup()}attachHandlers(){const{trigger:t,content:e}=this.elements,{focusoutCloses:s}=this.options;this.clickHandler=n=>{this.onClick(n)},this.focusoutHandler=n=>{s&&document.addEventListener("focusin",()=>{e.contains(document.activeElement)||this.close(n)},{once:!0})},t.addEventListener("click",this.clickHandler),e.addEventListener("focusout",this.focusoutHandler)}removeHandlers(){const{trigger:t,content:e}=this.elements;t.removeEventListener("click",this.clickHandler),e.removeEventListener("focusout",this.focusoutHandler)}onClick(t){this.toggle(t)}destroy(){this.removeHandlers(),this.destroyTemporaryHandlers()}debugLog(...t){this.options.debug&&k(this,...t)}setup(){const{trigger:t,content:e}=this.elements,{startOpen:s}=this.options;t.setAttribute("role","button"),t.setAttribute("aria-controls",e.id),e.setAttribute("aria-labelledby",t.id),this.setState(s)}createEvent(t,e){return new CustomEvent(N("collapsible:"+t),{detail:e})}setState(t,e){const s={collapsible:this,isOpen:t,event:e};this.debugLog(this,"Set state",s);const{trigger:n,content:o}=this.elements,{openClass:a}=this.options,r=c=>c.classList[t?"add":"remove"](a);n.setAttribute("aria-expanded",t?"true":"false"),r(n),r(o),this.isOpen=t,this.options.onChange(s),n.dispatchEvent(this.createEvent("change",s)),t?this.setupTemporaryHandlers():this.destroyTemporaryHandlers()}setupTemporaryHandlers(){const{content:t,trigger:e}=this.elements,{clickOutsideCloses:s,escapeCloses:n}=this.options,o=r=>{const{target:c}=r,u=e.contains(c),h=t.contains(c);s&&!u&&!h&&this.close(r)},a=r=>{n&&r.key==="Escape"&&this.close(r)};document.addEventListener("click",o),document.addEventListener("keydown",a),this.handlers.onDocumentClick=o,this.handlers.onDocumentKeydown=a}destroyTemporaryHandlers(){const{onDocumentClick:t,onDocumentKeydown:e}=this.handlers;t&&document.removeEventListener("click",t),t&&document.removeEventListener("keydown",e)}open(t){this.setState(!0,t)}close(t){this.setState(!1,t)}toggle(t){this.setState(!this.isOpen,t)}};C(zt,"defaults",{clickOutsideCloses:!1,focusoutCloses:!1,escapeCloses:!1,selfManaged:!1,startOpen:!1,openClass:"is-active",debug:!0,onChange(t){}});let gt=zt;const mt=new w({type:"details-group",baseAttribute:"data-ulu-details-group"}),Kt=mt.getAttribute("child-init"),Ss={onlyOneOpen:!0,childSelector:":scope > details"};function As(){mt.init({withData:!0,coreEvents:["pageModified"],setup({element:i,data:t,initialize:e}){Ce(i,t),e()}})}function Ce(i,t){const e=Object.assign({},Ss,t);try{n()}catch(r){console.error(r)}function s(){return i.querySelectorAll(e.childSelector)}function n(){s().forEach(r=>{r.hasAttribute(Kt)||(r.setAttribute(Kt,""),r.addEventListener("toggle",o))})}function o({target:r}){e.onlyOneOpen&&r.open&&s().forEach(c=>{c!==r&&c.open&&(c.open=!1)})}function a(){s().forEach(r=>{r.removeEventListener("toggle",o),r.removeAttribute(Kt)}),i.removeAttribute(mt.getAttribute("init"))}return{destroy:a,element:i,setupChildren:n}}const $s=[".youtube-embedded-video",'iframe[title*="YouTube video player"]','iframe[src*="youtube.com/embed"]'];function we(i=document){Se(i).forEach(e=>{try{e.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}',"*")}catch(s){console.error(s)}})}function Ee(i=document){Se(i).forEach(e=>{const{src:s}=e;s&&(e.src=s.split("?")[0]+"?rel=0&enablejsapi=1")})}function Se(i){return i.querySelectorAll($s.join(", "))}function Ae(i,t){const e=new MutationObserver(s=>{s.forEach(n=>{if(n.attributeName==="open"){const o=i.hasAttribute("open");t(o)}})});return e.observe(i,{attributes:!0,attributeFilter:["open"]}),{destroy:()=>e.disconnect()}}const Wt="data-ulu-dialog",W=new w({type:"dialog",baseAttribute:Wt}),$e=W.getAttribute("close"),Xt={nonModal:!1,documentEnd:!1,clickOutsideCloses:!0,pauseVideos:!0,preventScroll:!0,preventScrollShift:!0};let bt=y({},Xt);function Ls(i){bt=Object.assign({},bt,i)}function ks(){W.init({coreEvents:["pageModified"],withData:!0,setup({element:i,initialize:t,data:e}){ke(i,e),t()}}),W.init({key:"trigger",coreEvents:["pageModified"],withData:!0,setup({element:i,initialize:t,data:e}){Le(i,e),t()}})}function Le(i,t){i.addEventListener("click",e);function e(s){var r;s.target.closest("a")&&s.preventDefault();const o=document.getElementById(t);if(!o){console.error("Could not locate dialog (id)",t);return}if(((r=o==null?void 0:o.tagName)==null?void 0:r.toLowerCase())!=="dialog"){console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");return}const a=Ie(o);o[a.nonModal?"show":"showModal"]()}}function ke(i,t){const e=Object.assign({},bt,t),s=document.body,{preventScrollShift:n}=e;let o=null,a;if(i.addEventListener(N("resizer:start"),c),i.addEventListener(N("resizer:end"),u),i.addEventListener("click",r),e.documentEnd&&s.appendChild(i),e.pauseVideos&&Is(i),!e.nonModal&&e.preventScroll){let h;o=Ae(i,m=>{m?h=rs({preventShift:n}):h&&(h(),h=null)})}function r(h){const{target:m}=h,f=m===i,b=m.closest(W.attributeSelector("close"));(!a&&e.clickOutsideCloses&&f&&ns(i,h)||b)&&(e.pauseVideos&&zs(i),i.close())}function c(h){a=h.pointerId}function u(h){a===h.pointerId&&setTimeout(()=>{a=null},0)}return{destroy:()=>{o&&o.destroy()}}}function Ie(i){return Object.assign({},bt,W.getData(i))}function Is(i){Ee(i)}function zs(i){we(i),i.querySelectorAll("video").forEach(e=>e.pause())}const vt=new w({type:"flipcard",baseAttribute:"data-ulu-flipcard"});function Os(){vt.init({withData:!0,coreEvents:["pageModified"],setup({element:i,data:t,initialize:e}){const s=Object.assign({},t),n=i.querySelector(vt.attributeSelector("front")),o=i.querySelector(vt.attributeSelector("back"));new yt(i,n,o,s),e()}})}const U=class U{constructor(t,e,s,n){s||S(this,"Missing an element (container, front, back)"),this.options=Object.assign({},U.defaults,n);const{namespace:o}=this.options;U.instances.push(this),this.elements={container:t,front:e,back:s},this.isOpen=!1,this.uid=`${o}-id-${U.instances.length}`,this.stateAttr=`data-${o}-state`.toLowerCase(),this.setup(),this.setVisibility(!1),k(this,this)}toggle(){this.setVisibility(!this.isOpen)}setup(){const{uid:t}=this,{namespace:e,proxyClick:s}=this.options,{container:n,front:o,back:a}=this.elements,r=this.elements.control=document.createElement("button");r.classList.add(this.getClass("control-button")),r.setAttribute("type","button"),r.innerHTML=this.createControlContent(),r.style.gridArea=e,r.style.zIndex="-1",r.addEventListener("focusin",()=>{r.style.zIndex="20"}),r.addEventListener("focusout",()=>{r.style.zIndex="-1"}),r.addEventListener("click",this.toggle.bind(this)),a.parentNode.insertBefore(r,a),n.classList.add(this.options.namespace),n.setAttribute("style",ht(this.containerCss())),s&&n.addEventListener("click",this.onProxyClick.bind(this)),o.style.gridArea=e,a.style.gridArea=e,r.id=`${t}-control`,r.setAttribute("aria-controls",a.id),r.setAttribute("aria-expanded","false"),a.id=`${t}-back`,a.setAttribute("aria-labelledby",r.id),a.setAttribute("aria-hidden","true")}onProxyClick({target:t}){const{exclude:e,allowSelection:s,selectionMin:n}=this.options.proxyClick,o=window.getSelection();e&&!t.matches(e)&&(!s||o.toString().length<n)&&this.toggle()}getClass(t){const{namespace:e}=this.options;return t?`${e}__${t}`:e}createControlContent(){return`
       <span class="hidden-visually">Show More Information</span>
     `}setVisibility(t){const{back:e,container:s,control:n}=this.elements,o=t?"open":"closed";e.style.zIndex=t?"10":"1",e.style.visibility=t?"visible":"hidden",s.setAttribute(this.stateAttr,o),e.setAttribute("aria-hidden",t?"false":"true"),n.setAttribute("aria-expanded",t?"true":"false"),this.isOpen=t}containerCss(){return`
       display: -ms-grid;

package/lib/js/ui/breakpoints.js

@@ -31,7 +31,7 @@ export class BreakpointManager {
     BreakpointManager.globalsInitialized = true;
   }
   static defaults = {
-    element: document?.documentElement,
+    element: null,
     valueFromPseudo: false,
     customProperty: "--breakpoint",
     customProperty: wrapSettingString("cssvarPrefix", getDefaultCustomProperty),
@@ -50,6 +50,10 @@ export class BreakpointManager {
   constructor(config) {
     BreakpointManager._initializeGlobals();
     Object.assign(this, BreakpointManager.defaults, config);
+    // Safely assign the default element if one wasn't passed in the config
+    if (!this.element && typeof document !== 'undefined') {
+      this.element = document.documentElement;
+    }
     this.active = null;
     this.previous = null;
     this.activeIndex = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [