@n8d/htwoo-core/dist/js/amd/htwoo.min.js

hTWOo is a Fluent Design Framework purely in HTML and CSS

define(["exports"],(function(e){"use strict";var t,o,i,l,n,r,s,a,c,d,u=function(e,t,o,i,l){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!l)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!l:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?l.call(e,o):l?l.value=o:t.set(e,o),o},f=function(e,t,o,i){if("a"===o&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?i:"a"===o?i.call(e):i?i.value:t.get(e)};e.DialogType=void 0,(d=e.DialogType||(e.DialogType={})).DIALOG="dialog",d.MODAL="modal";class h{constructor(d,p,b=e.DialogType.DIALOG,g=h.options){t.set(this,void 0),o.set(this,void 0),i.set(this,void 0),l.set(this,void 0),n.set(this,{closer:null,backdropCloser:!0,escCloser:!0}),r.set(this,(()=>{if(console.debug("-> Fired showDialog -- ",f(this,o,"f")),f(this,i,"f")===e.DialogType.DIALOG)f(this,o,"f").show();else{if(f(this,i,"f")!==e.DialogType.MODAL)throw new Error(`Invalid dialog type specified for ${f(this,o,"f")}`);f(this,o,"f").showModal(),f(this,o,"f").addEventListener("click",f(this,s,"f"))}f(this,l,"f")&&f(this,l,"f").addEventListener("click",f(this,c,"f"));f(this,o,"f").querySelector("[autofocus]")&&(console.debug("No Autofocus"),f(this,o,"f").focus()),f(this,o,"f").addEventListener("keydown",f(this,a,"f"))})),s.set(this,(e=>{const t=f(this,o,"f").getBoundingClientRect();t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||e.target!==f(this,o,"f")||f(this,o,"f").close()})),a.set(this,(e=>{27===e.keyCode&&f(this,o,"f").close()})),c.set(this,(e=>{console.debug("closing dialog"),f(this,o,"f").close()})),console.debug("Register dialog",b);const m=document.querySelector(d),v=document.querySelector(p);if(!m)throw new Error(`Launcher '${d}' Element cannot be found`);if(u(this,t,m,"f"),!v)throw new Error(`Dialog '${p}' Element not found`);if(u(this,o,v,"f"),f(this,t,"f").addEventListener("click",f(this,r,"f")),u(this,i,b,"f"),u(this,n,{closer:void 0===g.closer?null:g.closer,backdropCloser:void 0===g.backdropCloser||g.backdropCloser,escCloser:void 0===g.escCloser||g.escCloser},"f"),null!==g.closer){const e=v.querySelector(g.closer);f(this,n,"f").closer=g.closer,e&&u(this,l,e,"f")}console.debug("AFTER LAUNCH ::: ",f(this,i,"f"),f(this,t,"f"),f(this,o,"f"),f(this,l,"f"))}}t=new WeakMap,o=new WeakMap,i=new WeakMap,l=new WeakMap,n=new WeakMap,r=new WeakMap,s=new WeakMap,a=new WeakMap,c=new WeakMap,h.options={closer:null,backdropCloser:!0,escCloser:!0},h.dialogType=e.DialogType;const p=e=>{console.debug("ariaSelect",e);const t=e;console.log("csSelector",t);const o=t.querySelector("input");if(!o)return void console.error("Input element not found within select component");const i=t.querySelector("ul");if(!i)return void console.error("List element not found within select component");const l=i.querySelectorAll("li.hoo-option");l&&0!==l.length||console.warn("No options found within select component"),t.querySelectorAll("svg");const n=document.querySelector("#custom-select-status");n||console.warn("Status element #custom-select-status not found");const r=Array.from(l);let s="initial";function a(e){"Open"===e?(i.classList.remove("hidden-all"),t.setAttribute("aria-expanded","true")):(i.classList.add("hidden-all"),t.setAttribute("aria-expanded","false"))}function c(){return document.activeElement}function d(e,t){const i=r.filter((e=>""===e.style.display));if(0!==i.length)if("input"!==t)switch(e){case o:"forward"===t?i[0].focus():"back"===t&&i[i.length-1].focus();break;case l[0]:"forward"===t?i[1]?.focus():"back"===t&&o.focus();break;case l[l.length-1]:"forward"===t?i[0].focus():"back"===t&&i[i.length-2]?.focus();break;default:const e=c(),n=i.indexOf(e);if("forward"===t){const e=i[n+1];e&&e.focus()}else if("back"===t&&n>0){const e=i[n-1];e&&e.focus()}else o.focus()}else o.focus()}function u(){const e=o.value,t=r.filter((t=>t.innerText.toUpperCase().startsWith(e.toUpperCase())));var i;console.debug(t),l.forEach((e=>e.style.display="none")),t.forEach((e=>{e.style.display=""})),h("filtered"),i=t.length,n&&(n.textContent=i+" options available.")}function f(e){const t=e.dataset.value;t&&(o.value=t),d(document.activeElement,"input")}function h(e){s=e}t.setAttribute("role","combobox"),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("aria-owns","custom-select-list"),o.setAttribute("aria-autocomplete","both"),o.setAttribute("aria-controls","custom-select-list"),i.setAttribute("role","listbox"),l.forEach((e=>{e.setAttribute("role","option"),e.setAttribute("tabindex","-1")})),n&&(n.textContent=l.length+" options available. Arrow down to browse or start typing to filter."),a("Shut"),t.addEventListener("click",(function(e){const t=c();switch(s){case"initial":a("Open"),h("opened");break;case"opened":t===o?(a("Shut"),h("initial")):"LI"===t.tagName&&(f(t),a("Shut"),h("closed"));break;case"filtered":"LI"===t.tagName&&(f(t),a("Shut"),h("closed"));break;case"closed":a("Open"),h("filtered")}})),t.addEventListener("keyup",(function(e){!function(e){const t=c();switch(e){case"Enter":"initial"===s?(a("Open"),h("opened")):"opened"===s&&"LI"===t.tagName?(f(t),a("Shut"),h("closed")):"opened"===s&&t===o?(a("Shut"),h("closed")):"filtered"===s&&"LI"===t.tagName?(f(t),a("Shut"),h("closed")):"filtered"===s&&t===o?(a("Open"),h("opened")):(a("Open"),h("filtered"));break;case"Escape":"opened"!==s&&"filtered"!==s||(a("Shut"),h("initial"));break;case"ArrowDown":"initial"===s||"closed"===s?(a("Open"),d(o,"forward"),h("opened")):(a("Open"),d(t,"forward"));break;case"ArrowUp":"initial"===s||"closed"===s?(a("Open"),d(o,"back"),h("opened")):d(t,"back");break;default:"initial"===s?(a("Open"),u(),h("filtered")):"opened"===s||"closed"===s?(u(),h("filtered")):u()}}(e.key)})),document.addEventListener("click",(function(e){e.target.closest(".hoo-select")||(a("Shut"),h("initial"))}))};function b(){document.querySelectorAll(".hoo-optgroup").forEach((e=>{const t=e.querySelectorAll(".hoo-option"),o=Array.from(t).some((e=>"none"!==e.style.display));e.style.display=o?"":"none"}))}b();const g=document.querySelector(".hoo-select-dropdown");if(g){new MutationObserver((()=>{b()})).observe(g,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]})}var m;!function(e){e.LEFT="left",e.RIGHT="right",e.TOP="top",e.BOTTOM="bottom"}(m||(m={}));const v=e=>{const t=e.target,o=t.closest("tr");if(!o)return;const i=t.closest("table");if(!i)return;const l=o.dataset.sectionheader;if(!l)return;let n;n="all"===l?"tr[data-section]":`tr[data-section=${l}]`;const r=i.querySelectorAll(n);for(let e=0;e<r.length;e++){const t=r[e];t.classList.contains("is-hidden")?(t.classList.remove("is-hidden"),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false"),o.setAttribute("aria-expanded","true")):(t.classList.add("is-hidden"),t.classList.remove("is-visible"),t.setAttribute("aria-hidden","true"),o.setAttribute("aria-expanded","false"))}if("all"===l){const e=document.querySelectorAll("tbody tr.collapsable");if("true"===o.getAttribute("aria-expanded"))for(let t=0;t<e.length;t++){const o=e[t];o.setAttribute("aria-hidden","false"),o.setAttribute("aria-expanded","true")}else for(let t=0;t<e.length;t++){const o=e[t];o.setAttribute("aria-hidden","true"),o.setAttribute("aria-expanded","false")}}};m.LEFT,m.RIGHT,m.TOP,m.BOTTOM;const y=(e,t,o)=>{const i=e.querySelectorAll(t);for(let e=0;e<i.length;e++){const t=i[e];o===m.LEFT&&(t.style[o]=t.offsetLeft+"px"),o===m.RIGHT&&(t.style[o]=t.offsetRight+"px"),o===m.TOP&&(t.style[o]=t.offsetTop+"px"),o===m.BOTTOM&&(t.style[o]=t.offsetBottom+"px")}},w=()=>{document.querySelectorAll(".hoo-table.is-collapsable").forEach((e=>{e.querySelectorAll(".collapsable").forEach((e=>{e.addEventListener("click",v)}))})),(()=>{const e=document.querySelectorAll("table.sticky");for(let t=0;t<e.length;t++){const o=e[t];y(o,"tr td.is-sticky.left",m.LEFT),y(o,"tr th.is-sticky.left",m.LEFT)}})()},E=".hoo-pivotbar",L=".hoo-button-pivot",A=".hoo-navitem-text",S="is-active",k=e=>{e.preventDefault();const t=e.target;let o;if(console.log(t),o=t.classList.contains(L.substr(1))?t:t.closest(L),o||(o=t.classList.contains(A.substr(1))?t:t.closest(A)),!o)return;const i=t.closest(E);if(!i)return;i.querySelectorAll(L).forEach((e=>{e.classList.remove(S)})),o.classList.add(S)},C=()=>{document.querySelectorAll(`${E} ${L}`).forEach((e=>{const t=e;t.dataset.ref=t.textContent?.trim()||"",t.addEventListener("click",k)}))},T=e=>{let t=e.target;if(!t.classList.contains("hoo-buttonitem")&&!t.classList.contains("hoo-icon")){const e=t.closest(".hoo-navitem");if(e){const o=t.closest(".hoo-nav");if(!o)return;(e=>{e.forEach((e=>{e.removeAttribute("aria-current")}))})(o.querySelectorAll("* .hoo-navitem")),e.setAttribute("aria-current","true")}}},O=e=>{const t=e.target.closest(".hoo-navitem");t&&("true"===t.getAttribute("aria-expanded")?t.setAttribute("aria-expanded","false"):t.setAttribute("aria-expanded","true"))},q=()=>{document.querySelectorAll(".hoo-nav").forEach((e=>{e.querySelectorAll(".hoo-navitem").forEach((e=>{e.addEventListener("click",T)}));e.querySelectorAll(".hoo-buttonicon").forEach((e=>{e.addEventListener("click",O)}))}))};class x{constructor(e){if(this._files=[],this.dragOver=e=>{e.preventDefault(),this._fileLabel.classList.add("drag-over")},this.dragLeave=e=>{e.preventDefault(),this._fileLabel.classList.remove("drag-over")},this.dragDrop=e=>{e.preventDefault(),this._fileLabel.classList.remove("drag-over");const t=e.dataTransfer?.files;t&&t.length>0&&(console.log("Files dropped:",t),this.fileChangedEvent({target:{files:t}}))},this.fileChangedEvent=e=>{let t;console.debug("FileUploadHandler.fileChanged",e);const o=e.target;if(!o.files||0===o.files.length)return void(this._infileOutput.innerHTML="");t=Array.from(o.files);const i=document.createElement("ul");i.classList.add("hoo-infile-list"),console.debug("FileUploadHandler",t),t.forEach((e=>{const t=document.createElement("li");t.innerText=e.name,i.appendChild(t)})),this._infileOutput.innerHTML=`<div class='hoo-infile-selection'>${this._infileOutput.title||"Files Selected"}</div>${i.outerHTML}`},this._fileControl=e,console.debug("FileUploadHandler",this._fileControl),this._fileLabel=e.querySelector(".hoo-infile-label"),!this._fileLabel)throw new Error("File label element not found (.hoo-infile-label)");if(this._fileLabel.addEventListener("dragover",this.dragOver),this._fileLabel.addEventListener("dragleave",this.dragLeave),this._fileLabel.addEventListener("drop",this.dragDrop),this._originalFileControl=this._fileControl.querySelector(".hoo-infile-context"),!this._originalFileControl)throw new Error("File input element not found (.hoo-infile-context)");console.debug("FileUploadHandler",this._originalFileControl,this._originalFileControl.getAttribute("aria-describedby")),this._originalFileControl.addEventListener("change",this.fileChangedEvent);const t=this._originalFileControl.getAttribute("aria-describedby");if(!t)throw new Error("File input is missing aria-describedby attribute");if(console.debug("FileUploadHandler",t,this._infileOutput,`#${t.trim()}`),this._infileOutput=document.querySelector(`#${t.trim()}`),!this._infileOutput)throw new Error(`Element with id "${t.trim()}" not found`);console.debug("Infile Output:",this._infileOutput)}}const D=[],_=(e,t)=>{const o=e.target.parentElement;if(!o)return;const i=Array.from(o.querySelectorAll(".hoo-overflow > *"));i.length>0&&((e,t,o,i)=>{let l=D[i].filter((t=>t.overallWidth>e-40)),n=D[i].filter((t=>t.overallWidth<e-40));const r=o.querySelector(".hoo-buttonicon-overflow .hoo-buttonflyout");if(r){if(r&&r.children.length<l.length)for(let e=0;e<l.length;e++){const t=l[e].ref,i=o.querySelector(`[data-ref="${t}"]`);if(i){let e=document.createElement("li");e.appendChild(i),r.appendChild(e)}}if(0!==r.children.length){const e=r.closest(".hoo-buttonicon-overflow");e&&e.classList.add("is-active")}else{const e=r.closest(".hoo-buttonicon-overflow");e&&e.classList.remove("is-active")}if(r&&r.children.length>l.length)for(let e=0;e<n.length;e++){const t=n[e].ref,i=r.querySelector(`[data-ref="${t}"]`);i&&o.appendChild(i)}for(let e=0;e<r.children.length;e++)0===r.children[e].children.length&&r.children[e].remove()}})(o.clientWidth,0,e.target,t)},F=e=>{e.forEach(((e,t)=>{e.target.children&&(M(e.target.children,t),_(e,t))}))},M=(e,t)=>{let o=0;if(D.length<=t){D[t]=[];for(let i=0;i<e.length;i++){const l=e[i];if(o+=l.clientWidth,!l.classList.contains("hoo-buttonicon-overflow")){const e={chlld:l,ref:"ref-"+t+"-"+i,width:l.clientWidth,overallWidth:o};l.dataset.ref=e.ref,D[t].push(e)}}}},W=()=>{const e=document.querySelectorAll(".hoo-overflow");if(0!==e.length){const t=new ResizeObserver(F);e.forEach((e=>{t.observe(e)}))}};var H=Object.freeze({__proto__:null,init:W});const I=(e,t)=>{document.querySelectorAll(e).forEach((e=>{e.addEventListener("click",(e=>{t(e)}))}))},$=(e,t)=>{let o=e.getAttribute("aria-pressed");null===o?e.setAttribute("aria-pressed","true"):e.setAttribute("aria-pressed","true"===o?"false":"true"),t.classList.toggle("show-flyout")},N=e=>{const t=e.target,o=t.parentElement;$(t,o)},P=e=>{console.log("\nEVENT: splitButtonClick");const t=e.target,o=t.parentElement;$(t,o)},U=e=>{const t=e.target;if(!t.parentElement?.dataset.animation)return;const o=t.parentElement.dataset.animation;t.classList.add(o);const i=window.getComputedStyle(t),l=1e3*parseFloat(i.getPropertyValue("animation-duration"));console.log(i,i.getPropertyValue("animation-duration"),l),setTimeout((()=>{t.remove()}),l)},R=e=>{const t=e.target;if(!t.parentElement?.dataset.animation)return;const o=t.parentElement.dataset.animation;t.classList.add(o);const i=document.importNode(t,!0);i.classList.add(o);const l=window.getComputedStyle(i),n=1e3*parseFloat(l.getPropertyValue("animation-duration"));t.parentElement.appendChild(i),i.addEventListener("click",R),console.log(l,l.getPropertyValue("animation-duration"),n),setTimeout((()=>{i.classList.remove("anim-add-slide")}),n)},G=(e,t)=>{document.querySelectorAll(`${e} > .sg-anim-block`).forEach((e=>{e.addEventListener("click",t)}))};window.onload=()=>{var t;(()=>{try{new h("#btn-dialog","#myDialog",e.DialogType.DIALOG,{closer:"#closer-dlg",backdropCloser:!0,escCloser:!0}),new h("#btn-modal-dialog","#myDialog-1",e.DialogType.MODAL,{closer:"#closer-mdl",backdropCloser:!0,escCloser:!0})}catch(e){}})(),I(".hoo-buttonsplit > .hoo-buttonsplit-carret",P),I(".hoo-buttonsplit-primary > .hoo-buttonsplit-carret",P),I("button.hoo-buttonicon-overflow",N),I("button.hoo-buttoncmd",N),I("button.hoo-buttoncmdbar",N),I("button.hoo-buttonicon-flyout",N),I("button.hoo-buttoncontext",N),G(".anim-deleteNslide",U),G(".anim-addNslide",R),t=".hoo-input-file",document.querySelectorAll(t).forEach((e=>{new x(e)})),(()=>{const e=document.querySelectorAll(".hoo-select");console.debug("ALL SELECTED",e),e&&e.forEach((e=>{console.debug(e),p(e)}))})(),w(),C(),q(),W(),setTimeout((()=>{const e=document.querySelectorAll(".tmp-hidden");console.log(e),e.forEach((t=>{t.addEventListener("focus",(t=>{t.target.classList.remove(".tmp-hidden"),console.log(e)}))}))}),1e3)},e.FileUploadHandler=x,e.HOODialog=h,e.ariaSelect=p,e.initMenu=q,e.initPivot=C,e.initTables=w,e.overflow=H}));