@ulu/frontend 0.1.0-beta.77 → 0.1.0-beta.78

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.1.0-beta.78
+
+- **js/ui/modal-builder.js**
+  - Fix unused documented config property `titleId`
+  - Document `labeledby`and `describedby``
+  - Code cleanup
+
 ## 0.1.0-beta.77
 
 - **js** 

package/dist/ulu-frontend.min.js

@@ -1,16 +1,16 @@
 var rs=Object.defineProperty;var is=(n,e,t)=>e in n?rs(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var G=(n,e,t)=>is(n,typeof e!="symbol"?e+"":e,t);const Ti={iconClassClose:"css-icon css-icon--close",iconClassDragX:"css-icon css-icon--drag-x",iconClassPrevious:"css-icon  css-icon--angle-left",iconClassNext:"css-icon  css-icon--angle-right",cssvarPrefix:""};let it={...Ti};function os(){return{...Ti}}function Ai(n){Object.assign(it,n)}function ss(){return{...it}}function Mi(n){if(!it.hasOwnProperty(n)){console.warn(`Attempted to access non-existent setting: ${n}`);return}return it[n]}function as(n,e){it[n]=e}function Se(n,e){return{toString(){const t=Mi(n);return e?e(t):t}}}const ls=Object.freeze(Object.defineProperty({__proto__:null,getDefaultSettings:os,getSetting:Mi,getSettings:ss,updateSetting:as,updateSettings:Ai,wrapSettingString:Se},Symbol.toStringTag,{value:"Module"}));function Pi(n,e,t,r){var o;return function(){var s=this,a=arguments,l=function(){o=null,n.apply(s,a)};clearTimeout(o),o=setTimeout(l,e)}}const us=/(\r\n|\n|\r)/gm,cs=/\s+/g,fs=/^[{\[][\s\S]*[}\]]$/;function ds(n,e={},t=null){try{return JSON.parse(n)}catch(r){return typeof t=="function"?t(r,n):console.warn("safeParse: Failed to parse JSON string:",n,"Error:",r),e}}function ps(){return typeof window<"u"&&typeof window.document<"u"}function Ii(n){return new DOMParser().parseFromString(n,"text/html").body.firstElementChild}function vs(n,e,t={}){const r=n.dataset[e];return ds(r,t,o=>{console.error(`Error getting JSON from dataset (${e}) -- "${r}"
 `,n,o)})}function hs(n,e){const t=n.dataset[e];return t&&fs.test(t.trim())?vs(n,e):t}function ms(n,e){const t=n.getBoundingClientRect();return e.clientY<t.top||e.clientY>t.top+t.height||e.clientX<t.left||e.clientX>t.left+t.width}function Xr(n,e=document){return typeof n=="string"?e.querySelector(n):n instanceof Element?n:(console.warn("getElement: Invalid target type (expected String/Node)",n),null)}function Li(n,e=document){return typeof n=="string"?[...e.querySelectorAll(n)]:n instanceof Element?[n]:Array.isArray(n)||n instanceof NodeList?[...n]:(console.warn("getElement: Invalid target type (expected String/Node/Array/Node List)",n),null)}function bs(n){const t={...{scrollableChild:document.body,container:window,propertyElement:document.documentElement,propertyName:"--ulu-scrollbar-width"},...n},{scrollableChild:r,container:o,propertyElement:i,propertyName:s}=t,a=Di(r,o);i.style.setProperty(s,`${a}px`)}function Di(n=document.body,e=window){return e.innerWidth-n.clientWidth}ps()&&(gs(),xs());const mi={pageModified(n){n.dispatchEvent(new CustomEvent(Q("pageModified"),{bubbles:!0}))},pageResized(n){n.dispatchEvent(new CustomEvent(Q("pageResized"),{bubbles:!0}))},beforePrint(n){n.dispatchEvent(new CustomEvent(Q("beforePrint"),{bubbles:!0}))},afterPrint(n){n.dispatchEvent(new CustomEvent(Q("afterPrint"),{bubbles:!0}))}};function bt(n,e){mi[n]?mi[n](e):console.warn(`Unable to dispatch site event: ${n} in context:`,e)}function Q(n){return"ulu:"+n}function gs(){window.addEventListener("resize",Pi(()=>bt("pageResized",document),250))}function xs(){window.addEventListener("beforeprint",()=>{bt("beforePrint",document)}),window.addEventListener("afterprint",()=>{bt("afterPrint",document)})}const ys=Object.freeze(Object.defineProperty({__proto__:null,dispatch:bt,getName:Q},Symbol.toStringTag,{value:"Module"}));function _s(){bs()}const Es=Object.freeze(Object.defineProperty({__proto__:null,init:_s},Symbol.toStringTag,{value:"Module"}));function Qt(n,e){var t=n.indexOf(e);t>-1&&n.splice(t,1)}function ws(n,e){return`--${n}-${e}`}const at={debug:!1,warningsAlways:!0,errorsAlways:!0,outputContext:!1},Ss="console"in window;function Yr(n){return Ss&&at.debug&&((n==null?void 0:n.debug)||n==null)}function Os(n){var e;return typeof n=="object"&&((e=n==null?void 0:n.constructor)==null?void 0:e.name)}function Jr(n,e,t){const r=Os(e)||"Logger";console[n](r,...t),at.outputContext&&console.log(`Context:
 `,e)}function Cs(n){Object.assign(at,n)}function me(n,...e){Yr(n)&&Jr("log",n,e)}function en(n,...e){(at.warningsAlways||Yr(n))&&Jr("warn",n,e)}function re(n,...e){(at.errorsAlways||Yr(n))&&Jr("error",n,e)}const Ts=Object.freeze(Object.defineProperty({__proto__:null,log:me,logError:re,logWarning:en,set:Cs},Symbol.toStringTag,{value:"Module"})),As=n=>ws(n,"breakpoint");window.addEventListener(Q("pageResized"),()=>{gt.instances.forEach(n=>n.update())});const We=class We{constructor(e){Object.assign(this,We.defaults,e),this.active=null,this.previous=null,this.activeIndex=null,this.resizeDirection=null,this.previousIndex=null,this.breakpoints={},this.onChangeCallbacks=[],this.order.forEach(t=>this.breakpoints[t]=new Ms(t,this)),me(this,this),this.update(),We.instances.push(this)}onChange(e){this.onChangeCallbacks.push(e)}removeOnChange(e){Qt(this.onChangeCallbacks,e)}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 e=this.getBreakpoint();if(!e){re(this,"Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!");return}if(e===this.active)return;this.previous=this.active,this.previousIndex=this.activeIndex;const t=this.order.indexOf(e);this.active=e,this.activeIndex=t;const r=this.at(this.active),o=m=>this.at(m),i=this.order.slice(t).map(o),s=this.order.slice(0,t).map(o),a=this.order.slice(0,t+1).map(o),l=this.order.slice(t+1).map(o),u=this.order.slice().map(o);u.splice(t,1),me(this,"max:",i.map(m=>m.name).join()),me(this,"min:",a.map(m=>m.name).join()),i.forEach(m=>m._setDirection("max",!0)),a.forEach(m=>m._setDirection("min",!0)),r._setDirection("only",!0),s.forEach(m=>m._setDirection("max",!1)),l.forEach(m=>m._setDirection("min",!1)),u.forEach(m=>m._setDirection("only",!1)),this.previousIndex!==null&&(this.resizeDirection=this.previousIndex<t?"up":"down"),this.onChangeCallbacks.forEach(m=>m(this))}at(e){const t=this.breakpoints[e];return e||re(this,"Unable to find breakpoint for:",t),t}};G(We,"instances",[]),G(We,"defaults",{element:document==null?void 0:document.documentElement,valueFromPseudo:!1,customProperty:"--breakpoint",customProperty:Se("cssvarPrefix",As),pseudoSelector:":before",order:["none","small","medium","large"],debug:!1});let gt=We;class Zt{constructor(e,t){this.direction=e,this.active=!1,this.on=[],this.off=[],this.breakpoint=t}change(e){this.active!==e&&(e?this._call(!0):this.active&&this._call(!1),this.active=e)}_call(e){(e?this.on:this.off).forEach(r=>r()),me(this.breakpoint._manager,`Handlers called (${e?"on":"off"}): ${this.direction}`)}getHandlers(e){return typeof e!="object"?{on:e}:e}add(e){const t=this.getHandlers(e);t.on&&this.on.push(t.on),t.off&&this.off.push(t.off),this.active&&t.on&&(t.on(),me(this.breakpoint._manager,`Handler called immediately: ${this.direction}`,t.on))}remove(e){const t=this.getHandlers(e);t.on&&Qt(this.on,t.on),t.off&&Qt(this.off,t.off)}}class Ms{constructor(e,t){this.directions={max:new Zt("max",this),min:new Zt("min",this),only:new Zt("only",this)},this._manager=t,this.name=e}_setDirection(e,t){this.directions[e].change(t)}max(e){this.directions.max.add(e)}min(e){this.directions.min.add(e)}only(e){this.directions.only.add(e)}remove(e,t){(t?[t]:["max","min","only"]).forEach(o=>o.remove(e))}log(...e){e.unshift(`Breakpoint (${this.name}):`),this._manager.log.apply(this._manager,e)}}const Ps=Object.freeze(Object.defineProperty({__proto__:null,BreakpointManager:gt},Symbol.toStringTag,{value:"Module"}));let Is=0;function Qr(){return`ulu-uid-${++Is}`}function xt(n){n.id||(n.id=Qr())}const Ls=Object.freeze(Object.defineProperty({__proto__:null,ensureId:xt,newId:Qr},Symbol.toStringTag,{value:"Module"})),Dt=class Dt{constructor(e,t){const{trigger:r,content:o}=e;if(!r||!o){re(this,"missing required elements (trigger or content)");return}const i=Object.assign({},Dt.defaults,t);this.elements=e,this.options=i,this.isOpen=!1,this.handlers={},xt(r),xt(o),this.debugLog(this,this),i.selfManaged||this.attachHandlers(),this.setup()}attachHandlers(){const{trigger:e,content:t}=this.elements,{focusoutCloses:r}=this.options;this.clickHandler=o=>{this.onClick(o)},this.focusoutHandler=o=>{r&&document.addEventListener("focusin",()=>{t.contains(document.activeElement)||this.close(o)},{once:!0})},e.addEventListener("click",this.clickHandler),t.addEventListener("focusout",this.focusoutHandler)}removeHandlers(){const{trigger:e,content:t}=this.elements;e.removeEventListener("click",this.clickHandler),t.removeEventListener("focusout",this.focusoutHandler)}onClick(e){this.toggle(e)}destroy(){this.removeHandlers(),this.destroyTemporaryHandlers()}debugLog(...e){this.options.debug&&me(this,...e)}setup(){const{trigger:e,content:t}=this.elements,{startOpen:r}=this.options;e.setAttribute("role","button"),e.setAttribute("aria-controls",t.id),t.setAttribute("aria-labelledby",e.id),this.setState(r)}createEvent(e,t){return new CustomEvent(Q("collapsible:"+e),{detail:t})}setState(e,t){const r={collapsible:this,isOpen:e,event:t};this.debugLog(this,"Set state",r);const{trigger:o,content:i}=this.elements,{openClass:s}=this.options,a=l=>l.classList[e?"add":"remove"](s);o.setAttribute("aria-expanded",e?"true":"false"),a(o),a(i),this.isOpen=e,this.options.onChange(r),o.dispatchEvent(this.createEvent("change",r)),e?this.setupTemporaryHandlers():this.destroyTemporaryHandlers()}setupTemporaryHandlers(){const{content:e,trigger:t}=this.elements,{clickOutsideCloses:r,escapeCloses:o}=this.options,i=a=>{const{target:l}=a,u=t.contains(l),m=e.contains(l);r&&!u&&!m&&this.close(a)},s=a=>{o&&a.key==="Escape"&&this.close(a)};document.addEventListener("click",i),document.addEventListener("keydown",s),this.handlers.onDocumentClick=i,this.handlers.onDocumentKeydown=s}destroyTemporaryHandlers(){const{onDocumentClick:e,onDocumentKeydown:t}=this.handlers;e&&document.removeEventListener("click",e),e&&document.removeEventListener("keydown",t)}open(e){this.setState(!0,e)}close(e){this.setState(!1,e)}toggle(e){this.setState(!this.isOpen,e)}};G(Dt,"defaults",{clickOutsideCloses:!1,focusoutCloses:!1,escapeCloses:!1,selfManaged:!1,startOpen:!1,openClass:"is-active",debug:!0,onChange(e){}});let yt=Dt;const Ds=Object.freeze(Object.defineProperty({__proto__:null,Collapsible:yt},Symbol.toStringTag,{value:"Module"}));function $t(n){return e=>n.every(t=>Object.prototype.hasOwnProperty.call(e,t))}function ht(n){return n.replace(us,"").replace(cs," ").trim()}function ks(n){return n.replace(/-([a-z])/g,(e,t)=>t.toUpperCase())}function ki(n){return ks(n.replace(/^data-/,""))}function Ri(n,e={columnFirst:"position-column-first",columnLast:"position-column-last",rowFirst:"position-row-first",rowLast:"position-row-last"}){const t=[...n.children],r=[];let o;t.forEach(i=>{const s=i.getBoundingClientRect().y;o!==s&&r.push([]),r[r.length-1].push(i),o=s,i.classList.remove(...Object.values(e))}),r.forEach((i,s)=>{s===0&&i.forEach(a=>a.classList.add(e.rowFirst)),s==r.length-1&&i.forEach(a=>a.classList.add(e.rowLast)),i.forEach((a,l)=>{l===0&&a.classList.add(e.columnFirst),l==i.length-1&&a.classList.add(e.columnLast)})})}function _t(n){return typeof n=="string"?n.split(" ").filter(e=>e!==""):Array.isArray(n)?n:n?(console.warn("resolveClassArray: Invalid class input type.",n),[]):[]}const Rs=Object.freeze(Object.defineProperty({__proto__:null,dataAttributeToDatasetKey:ki,resolveClasses:_t,setPositionClasses:Ri},Symbol.toStringTag,{value:"Module"})),he=class he{constructor(e){if(!he.hasRequiredOptions(e))throw new Error(`Missing a required options: ${he.requiredOptions.join(", ")}`);this.options=Object.assign({},he.defaults,e),this.logTitle=`ULU: ${this.options.type}:
-`}init(e){var t;this.setupElements(e),(t=e.events)!=null&&t.length&&e.events.forEach(r=>{document.addEventListener(Q(r),()=>this.setupElements(e))})}setupElements(e){const{setup:t,key:r,withData:o,context:i}=e;this.queryAllInitial(r,o,i).forEach(a=>t(a,this))}getAttribute(e){const{baseAttribute:t}=this.options;return e?`${t}-${e}`:`${t}`}attributeSelector(e){return`[${this.getAttribute(e)}]`}attributeSelectorInitial(e){return`${this.attributeSelector(e)}:not([${this.getAttribute("init")}])`}queryAllInitial(e,t,r=document){return[...r.querySelectorAll(this.attributeSelectorInitial(e))].map(i=>({element:i,data:t?this.getData(i,e):null,initialize:()=>this.initializeElement(i)}))}initializeElement(e){e.setAttribute(this.getAttribute("init"),"")}getData(e,t){const r=ki(this.getAttribute(t));return hs(e,r)}log(...e){console.log(this.logTitle,...e)}warn(...e){console.warn(this.logTitle,...e)}logError(...e){console.error(this.logTitle,...e)}};G(he,"defaults",{type:null,baseAttribute:null}),G(he,"requiredOptions",["type","baseAttribute"]),G(he,"hasRequiredOptions",$t(he.requiredOptions));let Y=he;const kt=class kt{constructor(e,t,r){(!t||!e)&&re(this,"Missing required elements 'control' or 'container'"),this.options=Object.assign({},kt.defaults,r),this.container=e,this.control=t,this.handlerMousedown=this.onMousedown.bind(this),this.control.addEventListener("mousedown",this.handlerMousedown)}destroy(){this.control.removeEventListener("mousedown",this.handlerMousedown)}onMousedown(e){const{overrideMaxWidth:t,fromLeft:r}=this.options,o=document.documentElement,i=document.defaultView,s=e.clientX,a=parseInt(i.getComputedStyle(this.container).width,10);t&&(this.container.style.maxWidth="none");const l=m=>{const f=r?-1:1;this.container.style.width=`${a+(m.clientX-s)*f}px`},u=()=>{o.removeEventListener("mousemove",l,!1)};o.addEventListener("mousemove",l,!1),o.addEventListener("mouseup",u,{capture:!0,once:!0})}};G(kt,"defaults",{debug:!1,overrideMaxWidth:!1,fromLeft:!1});let Et=kt;const Fs=Object.freeze(Object.defineProperty({__proto__:null,Resizer:Et},Symbol.toStringTag,{value:"Module"})),$s=[".youtube-embedded-video",'iframe[title*="YouTube video player"]','iframe[src*="youtube.com/embed"]'];function Fi(n=document){Ni(n).forEach(t=>{try{t.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}',"*")}catch(r){console.error(r)}})}function $i(n=document){Ni(n).forEach(t=>{const{src:r}=t;r&&(t.src=r.split("?")[0]+"?rel=0&enablejsapi=1")})}function Ni(n){return n.querySelectorAll($s.join(", "))}const Ns=Object.freeze(Object.defineProperty({__proto__:null,pauseVideos:Fi,prepVideos:$i},Symbol.toStringTag,{value:"Module"})),ei="data-ulu-dialog",Ge=new Y({type:"dialog",baseAttribute:ei}),qi=Ge.getAttribute("close"),ti={nonModal:!1,documentEnd:!1,clickOutsideCloses:!0,pauseVideos:!0,preventScroll:!0,preventScrollShift:!0};let wt={...ti};function qs(n){wt=Object.assign({},wt,n)}function Hs(){Ge.init({events:["pageModified"],withData:!0,setup({element:n,initialize:e,data:t}){Bi(n,t),e()}}),Ge.init({key:"trigger",events:["pageModified"],withData:!0,setup({element:n,initialize:e,data:t}){Hi(n,t),e()}})}function Hi(n,e){n.addEventListener("click",t);function t(r){var a;r.target.closest("a")&&r.preventDefault();const i=document.getElementById(e);if(!i){console.error("Could not locate dialog (id)",e);return}if(((a=i==null?void 0:i.tagName)==null?void 0:a.toLowerCase())!=="dialog"){console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");return}const s=Wi(i);i[s.nonModal?"show":"showModal"]()}}function Bi(n,e){const t=Object.assign({},wt,e),r=document.body;if(n.addEventListener("click",o),t.documentEnd&&r.appendChild(n),t.pauseVideos&&Bs(n),!t.nonModal&&t.preventScroll){let i=r.style.overflow,s=r.style.paddingRight;n.addEventListener("toggle",a=>{const l=a.newState==="open";l&&(i=r.style.overflow,s=r.style.paddingRight),t.preventScrollShift&&(r.style.paddingRight=l?`${Di()}px`:s),r.style.overflow=l?"hidden":i})}function o(i){const{target:s}=i,a=s.closest(Ge.attributeSelector("close"));(t.clickOutsideCloses&&s===n&&ms(n,i)||a)&&(t.pauseVideos&&Ws(n),n.close())}}function Wi(n){return Object.assign({},wt,Ge.getData(n))}function Bs(n){$i(n)}function Ws(n){Fi(n),n.querySelectorAll("video").forEach(t=>t.pause())}const js=Object.freeze(Object.defineProperty({__proto__:null,baseAttribute:ei,closeAttribute:qi,defaults:ti,getDialogOptions:Wi,init:Hs,initializer:Ge,setDefaults:qs,setupDialog:Bi,setupTrigger:Hi},Symbol.toStringTag,{value:"Module"})),Le=new Y({type:"modal-builder",baseAttribute:"data-ulu-modal-builder"}),ji={title:null,titleIcon:null,titleClass:"",labelledby:null,describedby:null,nonModal:!1,documentEnd:!0,allowResize:!1,position:"center",bodyFills:!1,noBackdrop:!1,size:"default",print:!1,noMinHeight:!1,class:"",baseClass:"modal",footerElement:null,footerHtml:null,classCloseIcon:Se("iconClassClose"),classResizerIcon:Se("iconClassDragX"),debug:!1,templateCloseIcon(n){const{baseClass:e,classCloseIcon:t}=n;return`<span class="${e}__close-icon ${t}" aria-hidden="true"></span>`},templateResizerIcon(n){const{baseClass:e,classResizerIcon:t}=n;return`<span class="${e}__resizer-icon ${t}" aria-hidden="true"></span>`},template(n,e){const{baseClass:t,describedby:r,footerElement:o,footerHtml:i}=e,s=[t,`${t}--${e.position}`,`${t}--${e.size}`,`${t}--${e.allowResize?"resize":"no-resize"}`,...e.title?[]:[`${t}--no-header`],...e.bodyFills?[`${t}--body-fills`]:[],...e.noBackdrop?[`${t}--no-backdrop`]:[],...e.noMinHeight?[`${t}--no-min-height`]:[],...e.class?[e.class]:[]],a=e.title?`${n}--title`:e.labelledby;return`
+`}init(e){var t;this.setupElements(e),(t=e.events)!=null&&t.length&&e.events.forEach(r=>{document.addEventListener(Q(r),()=>this.setupElements(e))})}setupElements(e){const{setup:t,key:r,withData:o,context:i}=e;this.queryAllInitial(r,o,i).forEach(a=>t(a,this))}getAttribute(e){const{baseAttribute:t}=this.options;return e?`${t}-${e}`:`${t}`}attributeSelector(e){return`[${this.getAttribute(e)}]`}attributeSelectorInitial(e){return`${this.attributeSelector(e)}:not([${this.getAttribute("init")}])`}queryAllInitial(e,t,r=document){return[...r.querySelectorAll(this.attributeSelectorInitial(e))].map(i=>({element:i,data:t?this.getData(i,e):null,initialize:()=>this.initializeElement(i)}))}initializeElement(e){e.setAttribute(this.getAttribute("init"),"")}getData(e,t){const r=ki(this.getAttribute(t));return hs(e,r)}log(...e){console.log(this.logTitle,...e)}warn(...e){console.warn(this.logTitle,...e)}logError(...e){console.error(this.logTitle,...e)}};G(he,"defaults",{type:null,baseAttribute:null}),G(he,"requiredOptions",["type","baseAttribute"]),G(he,"hasRequiredOptions",$t(he.requiredOptions));let Y=he;const kt=class kt{constructor(e,t,r){(!t||!e)&&re(this,"Missing required elements 'control' or 'container'"),this.options=Object.assign({},kt.defaults,r),this.container=e,this.control=t,this.handlerMousedown=this.onMousedown.bind(this),this.control.addEventListener("mousedown",this.handlerMousedown)}destroy(){this.control.removeEventListener("mousedown",this.handlerMousedown)}onMousedown(e){const{overrideMaxWidth:t,fromLeft:r}=this.options,o=document.documentElement,i=document.defaultView,s=e.clientX,a=parseInt(i.getComputedStyle(this.container).width,10);t&&(this.container.style.maxWidth="none");const l=m=>{const f=r?-1:1;this.container.style.width=`${a+(m.clientX-s)*f}px`},u=()=>{o.removeEventListener("mousemove",l,!1)};o.addEventListener("mousemove",l,!1),o.addEventListener("mouseup",u,{capture:!0,once:!0})}};G(kt,"defaults",{debug:!1,overrideMaxWidth:!1,fromLeft:!1});let Et=kt;const Fs=Object.freeze(Object.defineProperty({__proto__:null,Resizer:Et},Symbol.toStringTag,{value:"Module"})),$s=[".youtube-embedded-video",'iframe[title*="YouTube video player"]','iframe[src*="youtube.com/embed"]'];function Fi(n=document){Ni(n).forEach(t=>{try{t.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}',"*")}catch(r){console.error(r)}})}function $i(n=document){Ni(n).forEach(t=>{const{src:r}=t;r&&(t.src=r.split("?")[0]+"?rel=0&enablejsapi=1")})}function Ni(n){return n.querySelectorAll($s.join(", "))}const Ns=Object.freeze(Object.defineProperty({__proto__:null,pauseVideos:Fi,prepVideos:$i},Symbol.toStringTag,{value:"Module"})),ei="data-ulu-dialog",Ge=new Y({type:"dialog",baseAttribute:ei}),qi=Ge.getAttribute("close"),ti={nonModal:!1,documentEnd:!1,clickOutsideCloses:!0,pauseVideos:!0,preventScroll:!0,preventScrollShift:!0};let wt={...ti};function qs(n){wt=Object.assign({},wt,n)}function Hs(){Ge.init({events:["pageModified"],withData:!0,setup({element:n,initialize:e,data:t}){Bi(n,t),e()}}),Ge.init({key:"trigger",events:["pageModified"],withData:!0,setup({element:n,initialize:e,data:t}){Hi(n,t),e()}})}function Hi(n,e){n.addEventListener("click",t);function t(r){var a;r.target.closest("a")&&r.preventDefault();const i=document.getElementById(e);if(!i){console.error("Could not locate dialog (id)",e);return}if(((a=i==null?void 0:i.tagName)==null?void 0:a.toLowerCase())!=="dialog"){console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");return}const s=Wi(i);i[s.nonModal?"show":"showModal"]()}}function Bi(n,e){const t=Object.assign({},wt,e),r=document.body;if(n.addEventListener("click",o),t.documentEnd&&r.appendChild(n),t.pauseVideos&&Bs(n),!t.nonModal&&t.preventScroll){let i=r.style.overflow,s=r.style.paddingRight;n.addEventListener("toggle",a=>{const l=a.newState==="open";l&&(i=r.style.overflow,s=r.style.paddingRight),t.preventScrollShift&&(r.style.paddingRight=l?`${Di()}px`:s),r.style.overflow=l?"hidden":i})}function o(i){const{target:s}=i,a=s.closest(Ge.attributeSelector("close"));(t.clickOutsideCloses&&s===n&&ms(n,i)||a)&&(t.pauseVideos&&Ws(n),n.close())}}function Wi(n){return Object.assign({},wt,Ge.getData(n))}function Bs(n){$i(n)}function Ws(n){Fi(n),n.querySelectorAll("video").forEach(t=>t.pause())}const js=Object.freeze(Object.defineProperty({__proto__:null,baseAttribute:ei,closeAttribute:qi,defaults:ti,getDialogOptions:Wi,init:Hs,initializer:Ge,setDefaults:qs,setupDialog:Bi,setupTrigger:Hi},Symbol.toStringTag,{value:"Module"})),Le=new Y({type:"modal-builder",baseAttribute:"data-ulu-modal-builder"}),ji={title:null,titleIcon:null,titleClass:"",labelledby:null,describedby:null,nonModal:!1,documentEnd:!0,allowResize:!1,position:"center",bodyFills:!1,noBackdrop:!1,size:"default",print:!1,noMinHeight:!1,class:"",baseClass:"modal",footerElement:null,footerHtml:null,classCloseIcon:Se("iconClassClose"),classResizerIcon:Se("iconClassDragX"),debug:!1,templateCloseIcon(n){const{baseClass:e,classCloseIcon:t}=n;return`<span class="${e}__close-icon ${t}" aria-hidden="true"></span>`},templateResizerIcon(n){const{baseClass:e,classResizerIcon:t}=n;return`<span class="${e}__resizer-icon ${t}" aria-hidden="true"></span>`},template(n,e){const{baseClass:t,describedby:r,footerHtml:o}=e,i=[t,`${t}--${e.position}`,`${t}--${e.size}`,`${t}--${e.allowResize?"resize":"no-resize"}`,...e.title?[]:[`${t}--no-header`],...e.bodyFills?[`${t}--body-fills`]:[],...e.noBackdrop?[`${t}--no-backdrop`]:[],...e.noMinHeight?[`${t}--no-min-height`]:[],...e.class?[e.class]:[]],s=e.title?`${n}--title`:e.labelledby;return`
       <dialog 
         id="${n}" 
-        class="${s.join(" ")}" 
-        ${a?`aria-labelledby="${a}"`:""}
+        class="${i.join(" ")}" 
+        ${s?`aria-labelledby="${s}"`:""}
         ${r?`aria-describedby="${r}"`:""}
       >
         ${e.title?`
           <header class="${t}__header">
-            <h2 id="${a}" class="${t}__title ${e.titleClass}">
+            <h2 id="${s}" class="${t}__title ${e.titleClass}">
               ${e.titleIcon?`<span class="${t}__title-icon ${e.titleIcon}" aria-hidden="true"></span>`:""}
               <span class="${t}__title-text">${e.title}</span>
             </h2>
@@ -20,7 +20,7 @@ var rs=Object.defineProperty;var is=(n,e,t)=>e in n?rs(n,e,{enumerable:!0,config
           </header>
         `:""}
         <div class="${t}__body" ${Le.getAttribute("body")}></div>
-        ${i?`<div class="${t}__footer">${i}</div>`:""}
+        ${o?`<div class="${t}__footer">${o}</div>`:""}
         ${e.hasResizer?`<div class="${t}__resizer" ${Le.getAttribute("resizer")}>
             ${e.templateResizerIcon(e)}
           </div>`:""}

package/js/ui/modal-builder.js

@@ -28,7 +28,8 @@ export const initializer = new ComponentInitializer({
  * @property {string|null} title - The title of the modal. Defaults to `null`.
  * @property {string|null} titleIcon - The class name for an icon to display in the title. Defaults to `null`.
  * @property {string} titleClass - Extra class/classes to add to title
- * @property {string} titleId - Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)
+ * @property {string} labelledby - Set the aria-labelledby attribute to a specific title within the modal, to connect to a custom title implementation, if using built in title this will be set automatically
+ * @property {string} describedby - Set the aria-describedby on the dialog, elements id, to tie a specific part of the content to be the accessible description
  * @property {boolean} nonModal - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
  * @property {boolean} documentEnd - If `true`, the modal will be appended to the end of the `document.body`. Defaults to `true`.
  * @property {boolean} allowResize - If `true`, the modal will be resizable. Defaults to `false`.
@@ -93,7 +94,7 @@ export const defaults = {
    * @returns {String} Markup for modal
    */
   template(id, config) {
-    const { baseClass, describedby, footerElement, footerHtml } = config;
+    const { baseClass, describedby, footerHtml } = config;
     const classes = [
       baseClass,
       `${ baseClass }--${ config.position }`,
@@ -180,8 +181,6 @@ export function buildModal(content, options) {
   if (!content.id) {
     throw new Error("Missing ID on modal");
   }
-
-  const { footerHtml, footerElement } = config;
   
   const markup = config.template(content.id, config);
   const modal = createElementFromHtml(markup.trim());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.77",
+  "version": "0.1.0-beta.78",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/types/ui/modal-builder.d.ts

@@ -72,9 +72,13 @@ export type DefaultModalOptions = {
      */
     titleClass: string;
     /**
-     * - Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)
+     * - Set the aria-labelledby attribute to a specific title within the modal, to connect to a custom title implementation, if using built in title this will be set automatically
      */
-    titleId: string;
+    labelledby: string;
+    /**
+     * - Set the aria-describedby on the dialog, elements id, to tie a specific part of the content to be the accessible description
+     */
+    describedby: string;
     /**
      * - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
      */

package/types/ui/modal-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AA+IA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EA+Dd;AAxND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;IA6DD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA2CC;;;;;;;;;;;;WA9GW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;aACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCA3CD,oBAAoB"}
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AAgJA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EA6Dd;AAvND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;IA8DD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA2CC;;;;;;;;;;;;WA/GW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;gBACN,MAAM;;;;iBACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCA5CD,oBAAoB"}