!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@apigo.cc/state")):"function"==typeof define&&define.amd?define(["exports","@apigo.cc/state"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ApigoBase=e.ApigoBase||{},e.ApigoState)}(this,function(e,t){"use strict";const i={get:({url:e,...t})=>i.request({url:e,method:"GET",...t}),post:({url:e,data:t,...a})=>i.request({url:e,method:"POST",data:t,...a}),put:({url:e,data:t,...a})=>i.request({url:e,method:"PUT",data:t,...a}),delete:({url:e,...t})=>i.request({url:e,method:"DELETE",...t}),head:({url:e,...t})=>i.request({url:e,method:"HEAD",...t}),request:async({url:e,method:t="POST",data:i,headers:a={},responseType:s,timeout:l=1e4})=>{var n;const o={method:t=t.toUpperCase(),signal:null==(n=AbortSignal.timeout)?void 0:n.call(AbortSignal,l)};if(void 0!==i&&"GET"!==t&&"HEAD"!==t){if(i instanceof HTMLFormElement&&(i=new FormData(i)),i&&"object"==typeof i&&!(i instanceof FormData)&&!(i instanceof ArrayBuffer||ArrayBuffer.isView(i))&&Object.values(i).some(e=>e instanceof File||e instanceof Blob||e instanceof FileList||Array.isArray(e)&&e.some(e=>e instanceof File||e instanceof Blob))){const e=new FormData;for(const[t,a]of Object.entries(i))a instanceof FileList||Array.isArray(a)?Array.from(a).forEach(i=>e.append(t,i)):null!=a&&e.append(t,a);i=e}i instanceof FormData?delete a["Content-Type"]:"string"==typeof i||i instanceof ArrayBuffer||ArrayBuffer.isView(i)||(i=JSON.stringify(i),a["Content-Type"]||(a["Content-Type"]="application/json")),o.body=i}Object.keys(a).length&&(o.headers=a);const r={error:null,ok:null,status:0,headers:{},responseType:"",result:null};try{const t=await fetch(e,o);if(Object.assign(r,{ok:t.ok,status:t.status,headers:Object.fromEntries(t.headers.entries())}),!s){const e=t.headers.get("Content-Type")||"";s=e.includes("application/json")?"json":/image|video|audio|pdf|zip|octet-stream/.test(e)?"binary":"text",r.responseType=s}!1===r.ok&&(r.error=(r.statusText||"HTTP "+r.status+" error")+" for "+e),r.result="json"===s?await t.json():"binary"===s?await t.arrayBuffer():await t.text()}catch(e){Object.assign(r,{error:e.message||String(e),ok:!1})}return r}};globalThis.HTTP=i;const a={};globalThis.Component.register("Toast",e=>{e.toast=new bootstrap.Toast(e,{autohide:e.state.delay>0}),globalThis.Util.copyFunction(e,e.toast,"show","hide"),e.addEventListener("show.bs.toast",()=>{if(e.state.delay>0){let t;const i=()=>{e.state.left=e.state.delay/1e3,t=setInterval(()=>{(!e.isConnected||--e.state.left<=0)&&clearInterval(t)},1e3)};i(),e.addEventListener("mouseenter",()=>{clearInterval(t),e.state.left=void 0}),e.addEventListener("mouseleave",i)}})},globalThis.Util.makeDom('\n<div class="toast align-items-center border-0 m-1">\n  <div $class="toast-body rounded p-3 text-bg-${this.state?.type}">\n    <div class="d-flex align-items-center">\n      <div class="flex-grow-1">\n        <span style="white-space:pre-wrap" class="fs-6" $text="this.state?.message"></span>\n        <template $if="this.state?.left !== undefined">\n          <span class="small text-dim ms-2" $text="${this.state?.left}s"></span>\n        </template>\n      </div>\n      <button type="button" class="btn btn-link ms-3 bi bi-x-lg link-reset" style="color:inherit" data-bs-dismiss="toast"></button>\n    </div>\n    <div class="d-flex justify-content-end gap-3">\n      <template $each="this.state?.buttons || [\'{#Close#}\']">\n        <button type="button" $class="btn btn-sm btn-${this.state?.type} mt-2" data-bs-dismiss="toast" $onclick="this.result=index+1" $text="item"></button>\n      </template>\n    </div>\n  </div>\n</div>\n'),globalThis.Util.makeDom('<div toast-container="default" class="position-fixed bottom-0 end-0 overflow-auto" style="z-index:3000;max-height:80%"></div>')),a.toast=function(e,t={}){const i=t.delay??5e3,a=document.createElement("Toast");a.state={delay:i,left:i?i/1e3:void 0,type:t.type||"primary",message:e,buttons:t.buttons||[]},globalThis.$(`[toast-container="${t.container||"default"}"]`).appendChild(a),Promise.resolve().then(()=>a.show())},a.toastConfirm=function(e,t={}){return new Promise(i=>a.toast(e,{buttons:["{#Confirm#}"],...t}).then(e=>i(1===e)).catch(()=>i(!1)))},globalThis.UI=a;const s=globalThis.Util.makeDom('\n<div class="auto-form-root">\n  <form $class="${this.inline ? \'d-flex flex-wrap align-items-center gap-3\' : (this.vertical ? \'d-flex flex-column\' : (this.horizontal ? \'auto-grid-form forced-horizontal\' : \'auto-grid-form\'))}" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">\n  \n  <template $each="this.state.schema || []">\n    <div style="display:contents" $if="this.checkIf(item)">\n        <label $name="item.name" $class="${this.inline ? \'mb-0 text-muted text-nowrap\' : \'col-form-label text-muted\'}" $text="item.label"></label>\n        <div control-wrapper $class="${this.inline ? \'d-flex align-items-center\' : \'mb-3 d-flex align-items-center\'}">\n          <input $if="[\'text\', \'password\', \'email\', \'number\', \'date\', \'datetime\', \'file\'].includes(item.type)" $name="item.name" $type="item.type" $.="item.setting || {}" $bind="this.data[item.name]" $class="form-control ${item.type === \'number\' ? \'text-end\' : \'\'}">\n          \n          <select $if="item.type === \'select\'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="form-select">\n              <option value="" $if="item.placeholder" $text="item.placeholder" disabled selected></option>\n              <option $each="item.options" as="opt" $value="opt.value !== undefined ? opt.value : opt" $text="opt.label || opt"></option>\n          </select>\n          \n          <div $if="[\'checkbox\', \'radio\'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100">\n              <label $each="item.options || [item.text||item.label||item.name]" as="opt" class="form-check mb-0 d-flex align-items-center" style="padding-left:0; cursor:pointer;">\n                  <input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options?opt:\'on\'" $bind="this.data[item.name]">\n                  <span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span>\n              </label>\n          </div>\n          \n          <div $if="item.type === \'switch\'" class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding-left:0; min-height:0; display:flex !important;">\n              <input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.data[item.name]">\n          </div>\n          \n          <textarea $if="item.type === \'textarea\'" $name="item.name" class="form-control" $.="item.setting || {}" $bind="this.data[item.name]"></textarea>\n        </div>\n    </div>\n  </template>\n\n  <div $if="!this.nobutton" $class="${this.inline ? \'\' : \'d-flex justify-content-end align-items-baseline gap-3 mt-2\'}" $style="${this.inline ? \'\' : \'grid-column:1/-1\'}">\n      <div slot-id="actions"></div>\n      <button type="submit" class="btn btn-primary" $text="this.submitlabel || \'{#Submit#}\'"></button>\n  </div>\n  </form>\n</div>\n'),l=globalThis.Util.makeDom("<style>\n        .auto-grid-form { display: block; }\n        .auto-grid-form .col-form-label { text-align: left; margin-bottom: 0.25rem; padding-top: 0; }\n\n        @media (min-width: 576px) { \n                .auto-grid-form { display: grid; grid-template-columns: max-content 1fr; gap: 0 1.5rem; } \n                .auto-grid-form .col-form-label { text-align: right; margin-bottom: 1rem; padding-right: 0; max-width: 200px; padding-top: calc(0.375rem + 1px); } \n        .auto-grid-form [control-wrapper] { min-height: calc(2.25rem + 2px); }\n        }\n\n        .auto-grid-form.forced-horizontal { display: grid !important; grid-template-columns: max-content 1fr !important; gap: 0 1.5rem !important; }\n        .auto-grid-form.forced-horizontal .col-form-label { text-align: right !important; margin-bottom: 1rem !important; padding-right: 0 !important; max-width: 200px !important; padding-top: calc(0.375rem + 1px) !important; }\n    .auto-grid-form.forced-horizontal [control-wrapper] { min-height: calc(2.25rem + 2px) !important; }\n\n    .auto-form-root .form-check-input { width: 1.2em; height: 1.2em; }\n    .auto-form-root .form-switch .form-check-input { width: 2em; }\n</style>");globalThis.Component.register("AutoForm",e=>{e.state.schema||(e.state.schema=[]);const t=e=>e&&"object"==typeof e&&!e.__isProxy?globalThis.NewState(e):e;e.state.__watch("data",i=>e.data=t(i)),e.data=t(e.state.data||{}),e.vertical=e.hasAttribute("vertical"),e.horizontal=e.hasAttribute("horizontal"),e.inline=e.hasAttribute("inline"),e.nobutton=e.hasAttribute("nobutton"),e.request={method:"POST"},e.response={},e.result=null,e.form=globalThis.$(e,"form"),e.submit=(t={})=>{var i,a;if(!e.form.reportValidity())return null==(a=null==(i=globalThis.UI)?void 0:i.toast)?void 0:a.call(i,"{#verify failed#}",{type:"danger"});if(!e.dispatchEvent(new CustomEvent("submit",{detail:e.data,cancelable:!0,bubbles:!1})))return;const s={...e.request,data:e.data,noui:!0,...t};let l=null;if(e.api)l=e.api.do(s);else{if(!e.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");l=globalThis.HTTP.request(s)}l.then(t=>{if(e.response=t,e.result=t.result,"object"==typeof t.result&&t.result.error)throw new Error(t.result.error);e.dispatchEvent(new CustomEvent("response",{detail:t,bubbles:!1}))}).catch(t=>{var i;(null==(i=globalThis.UI)?void 0:i.toast)&&globalThis.UI.toast(t.message,{type:"danger"}),e.dispatchEvent(new CustomEvent("error",{detail:t,bubbles:!0}))})},e.checkIf=t=>{if(!t.if)return!0;try{return new Function("Hash","LocalStorage","State","item","data","return "+t.if).call(e,globalThis.Hash,globalThis.LocalStorage,globalThis.State,t,e.data)}catch(e){return!1}}},s,l);const n=e=>{let t=e.querySelector("[control-wrapper]");if(t)return t;for(const i of e.querySelectorAll("template"))if(t=n(i.content),t)return t;return null},o={customTypes:[],register:(e,t)=>{const i=t||e;o.customTypes.find(t=>t.name===e)||(o.customTypes.push({name:e,typeName:i}),o._addAutoFormComponent(e,i))},_addAutoFormComponent:(e,t)=>{const i=n(s);if(i){const a=globalThis.Util.makeDom(`<${e} $if="item.type?.toLowerCase() === '${t.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="w-100"></${e}>`);i.appendChild(a)}}};globalThis.AutoForm=o;const r=(e={})=>{const t=new Map,i=new Map;let a=1;const s=globalThis.Util.newAvg();let l=0,n=0,o=0,r=null,d=null,c=!1;const m=e.itemHeight||null;return{reset:(e,u)=>{if(c=!1,t.clear(),i.clear(),s.clear(),o=0,r=null,d=null,!(null==e?void 0:e.length))return[];const p=e.length;a=Math.ceil(Math.sqrt(p))||10;const h=window.getComputedStyle(u);l=parseFloat(h.paddingTop)||0,n=parseFloat(h.rowGap)||0;const b=Math.max(10,Math.ceil((u.clientHeight||100)/(m||32)));return e.slice(0,Math.min(3*b,p))},init:(e,l)=>{if(c)return;const n=e.length;let o=m||s.get()||32;n>0&&"object"==typeof e[0]&&null!==e[0]&&e[0]._itemHeight&&(o=e[0]._itemHeight),s.add(o),null===r&&(r=0,d=0);for(let i=0;i<n;i++)if(!t.has(i)){const a="object"==typeof e[i]&&null!==e[i]&&e[i]._itemHeight?e[i]._itemHeight:o;t.set(i,a)}for(let e=0;e<n;e+=a)i.set(e,Math.min(a,n-e)*o);c=!0,l()},update:(e,l)=>{if(0===l.offsetHeight)return;if(null===r){const e=window.getComputedStyle(l);r=parseFloat(e.marginTop)||0,d=parseFloat(e.marginBottom)||0}0!==e||o||(o=r);const c=l.offsetHeight+r+d+n,m=t.get(e);if(c!==m){t.set(e,c),s.add(c);const l=c-(m||0),n=e-e%a;i.has(n)&&i.set(n,i.get(n)+l)}},calc:(e,r)=>{if(!c||!r)return null;const d=r.length,m=Math.max(16,s.get()||32);let u=Math.max(10,Math.ceil((e.clientHeight||100)/m)),p=l+o+n,h=0,b=0,g=0,f=0,v=[];const y=e.scrollTop;let x=0;for(let e=0;e<d;e++){if(++x>2*d)throw new Error("VirtualScroll infinite loop");if(0===b){const s=i.get(e);if(s&&p+s<=y&&e+a<d)p+=s,e+=a-1;else{const i=t.get(e);if(p+i<=y&&e<d-1)p+=i;else{b=1;let i=Math.max(0,e);g=Math.max(0,i-u),f=Math.min(g+3*u,d),e=f-1,v=r.slice(g,f);for(let e=g;e<i;e++)p-=t.get(e)}}}else if(1===b){const s=i.get(e);s?(h+=s,e+=a-1):h+=t.get(e)}}return{prevHeight:Math.max(0,p-l-o-n-(g>0?n:0)),postHeight:h>0?Math.max(0,h-2*n):0,renderedList:v,listStartIndex:g}}}};globalThis.VirtualScroll=r;let d=!1,c={},m={};const u={start:(e,{onmousemove:t,onmouseup:i})=>{c={x:e.clientX,y:e.clientY,w:0,h:0},m={onmousemove:t,onmouseup:i},d=!0}};"undefined"!=typeof document&&(document.addEventListener("mouseup",e=>{var t;d&&(d=!1,null==(t=m.onmouseup)||t.call(m,{event:e,...c}))}),document.addEventListener("mousemove",e=>{var t;d&&(c.w=e.clientX-c.x,c.h=e.clientY-c.y,null==(t=m.onmousemove)||t.call(m,{event:e,...c}))})),globalThis.MouseMover=u;const p=globalThis.Component.register("API",e=>{e.request=globalThis.NewState({url:"",method:"GET",headers:{},data:null,timeout:1e4,responseType:""}),e.response=globalThis.NewState({loading:!1,ok:null,status:null,error:null,headers:{},responseType:"",result:null}),e.result=globalThis.NewState(),e.do=(t={})=>new Promise((i,a)=>{const s={...e.request,...t};if(!s.url)throw new Error(".url is required");s.headers={...e.request.headers,...t.headers},e.response.loading=!0,globalThis.HTTP.request(s).then(t=>{if(Object.keys(t).forEach(i=>{"result"!==i&&(e.response[i]=t[i])}),t.result&&"object"==typeof t.result&&e.result&&"object"==typeof e.result?Object.assign(e.result,t.result):e.result=t.result,e.response.loading=!1,!1===t.ok)throw new Error(t.error);if("object"==typeof t.result&&t.result.error)throw new Error(t.result.error);e.dispatchEvent(new CustomEvent("response",{detail:t,bubbles:!1})),i(t)}).catch(i=>{var s;!t.noui&&(null==(s=globalThis.UI)?void 0:s.toast)&&globalThis.UI.toast(i.message,{type:"danger"}),e.dispatchEvent(new CustomEvent("error",{detail:i,bubbles:!0})),a(i)})});let t=null;e.request.__watch(null,()=>{e.hasAttribute("auto")&&e.request.url&&(t||(t=Promise.resolve().then(()=>{e.do(),t=null})))})});globalThis.Component.register("Modal",e=>{e.modal=new bootstrap.Modal(e),e.addEventListener("bind",t=>{t.detail?e.modal.show():e.modal.hide()}),e.addEventListener("hide.bs.modal",()=>{var t;null==(t=document.activeElement)||t.blur(),e.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:!1}))}),globalThis.Util.copyFunction(e,e.modal,"show","hide")},globalThis.Util.makeDom('\n<div class="modal fade" data-bs-backdrop="static">\n  <div class="modal-dialog modal-dialog-centered">\n    <div $class="modal-content border-${this.state?.type || \'primary\'} border-2 shadow-lg">\n      <div slot-id="header" class="modal-header py-2 px-3 bg-light">\n        <h6 $class="modal-title fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></h6>\n        <button type="button" class="btn btn-link ms-2 bi bi-x-lg link-reset p-0" style="color:inherit; text-decoration:none" data-bs-dismiss="modal"></button>\n      </div>\n      <div slot-id="body" class="modal-body p-3"></div>\n      <div slot-id="footer" class="modal-footer py-2 px-3 bg-light"></div>\n    </div>\n  </div>\n</div>\n')),globalThis.Component.register("Dialog",globalThis.Component.getSetupFunction("Modal"),globalThis.Util.makeDom('\n<div class="modal fade" data-bs-backdrop="static">\n  <div class="modal-dialog modal-dialog-centered">\n    <div $class="modal-content border-${this.state?.type || \'primary\'} border-2 shadow-lg">\n      <template $if="this.state?.title">\n        <div $class="modal-header py-2 px-3 bg-light fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></div>\n      </template>\n      <div class="modal-body p-4 text-center">\n        <div $text="this.state?.message" class="fs-5 text-secondary"></div>\n      </div>\n      <div class="modal-footer py-2 px-3 bg-light border-0 d-flex justify-content-center gap-3">\n        <template $each="this.state?.buttons">\n          <button type="button" $class="btn btn-${this.state?.type} px-4" data-bs-dismiss="modal" $onclick="this.result=index+1" $text="item"></button>\n        </template>\n      </div>\n    </div>\n  </div>\n</div>\n'));let h=0;globalThis.UI.showDialog=function({title:e="",message:t="",buttons:i=["{#Close#}"],type:a="body"}){const s=document.body.appendChild(document.createElement("Dialog"));return s.style.zIndex=2e3+ ++h,Promise.resolve().then(()=>{Object.assign(s.state,{message:t,title:e,type:a,buttons:i}),s.show()}),new Promise(e=>{s.addEventListener("change",t=>{h--,e(s.result||0),s.remove()})})},globalThis.UI.alert=function(e,t={}){return globalThis.UI.showDialog({message:e,...t})},globalThis.UI.confirm=function(e,t={}){return new Promise(i=>globalThis.UI.showDialog({message:e,buttons:["{#Cancel#}","{#Confirm#}"],...t}).then(e=>i(e>=2)).catch(()=>i(!1)))},globalThis.Component.register("TagsInput",e=>{e._thisObj=e,e.addEventListener("bind",t=>{e.state.tags=Array.isArray(t.detail)?t.detail:[]})},globalThis.Util.makeDom(`\n<div class="form-control d-flex flex-wrap gap-1 align-items-center" style="min-height:38px;cursor:text">\n  <template $each="this.state.tags">\n    <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown='${globalThis.Util.getFunctionBody(function(e){["Backspace","Delete"].includes(e.key)&&(e.preventDefault(),this.state.tags.splice(index,1),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:this.state.tags})),Promise.resolve().then(()=>{const e=globalThis.$$(this,"button");(e.length>0?e[index>0?index-1:0]:globalThis.$(this,"input")).focus()}))})}' $text="item"></button>\n  </template>\n  <input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none" $onkeydown='${globalThis.Util.getFunctionBody(function(e){if(!e.isComposing&&["Enter",","," "].includes(e.key)){e.preventDefault();const t=thisNode.value.trim();t&&!this.state.tags.includes(t)&&(this.state.tags.push(t),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:this.state.tags}))),thisNode.value=""}})}'>\n</div>\n`),globalThis.Util.makeDom("<style>TagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}</style>")),globalThis.AutoForm&&globalThis.AutoForm.register("TagsInput"),globalThis.Component.register("DatePicker",e=>{e._thisObj=e,e.state=globalThis.NewState({start:"",end:""}),e.addEventListener("bind",t=>{var i,a,s;e.state.start=t.detail||"";const l=e.closest("AutoForm"),n=e.getAttribute("name"),o=null==(a=null==(i=null==l?void 0:l.state)?void 0:i.schema)?void 0:a.find(e=>e.name===n),r=(null==(s=null==o?void 0:o.setting)?void 0:s.rangeEnd)||e.rangeEnd;l&&r&&(e.state.end=l.data[r]||"")}),Object.defineProperty(e,"isRange",{get:()=>{var t,i,a;const s=e.closest("AutoForm"),l=e.getAttribute("name"),n=null==(i=null==(t=null==s?void 0:s.state)?void 0:t.schema)?void 0:i.find(e=>e.name===l);return!(!(null==(a=null==n?void 0:n.setting)?void 0:a.rangeEnd)&&!e.rangeEnd)}}),Object.defineProperty(e,"value",{get:()=>e.state.start,set:t=>{e.state.start=t||""}}),e.updateStart=t=>{e.state.start=t,e.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:t}))},e.updateEnd=t=>{var i,a,s;e.state.end=t;const l=e.closest("AutoForm"),n=e.getAttribute("name"),o=null==(a=null==(i=null==l?void 0:l.state)?void 0:i.schema)?void 0:a.find(e=>e.name===n),r=(null==(s=null==o?void 0:o.setting)?void 0:s.rangeEnd)||e.rangeEnd;l&&r&&(l.data[r]=t)}},globalThis.Util.makeDom('\n<div class="d-flex align-items-center gap-1 w-100">\n  <input type="date" class="form-control h-100" $bind="this.state.start" $onchange="this.updateStart(thisNode.value)">\n  <template $if="this.isRange">\n    <span class="text-muted mx-1">-</span>\n    <input type="date" class="form-control h-100" $bind="this.state.end" $onchange="this.updateEnd(thisNode.value)">\n  </template>\n</div>\n')),globalThis.AutoForm&&globalThis.AutoForm.register("DatePicker"),globalThis.Component.register("ColorPicker",e=>{e._thisObj=e,e.state=globalThis.NewState({value:"#000000"}),e.addEventListener("bind",t=>{e.state.value=t.detail||"#000000"}),Object.defineProperty(e,"value",{get:()=>e.state.value,set:t=>{e.state.value=t||"#000000"}}),e.updateValue=t=>{e.state.value=t,e.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:t}))}},globalThis.Util.makeDom('\n<div class="d-flex align-items-center gap-2 w-100 h-100">\n  <input type="color" class="form-control form-control-color flex-shrink-0" style="width: 3rem; padding: 0.25rem" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n  <input type="text" class="form-control" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n</div>\n')),globalThis.AutoForm&&globalThis.AutoForm.register("ColorPicker");const b=["alarm","archive","arrow-left","arrow-right","bag","bank","basket","bell","bookmark","box","briefcase","calendar","camera","cart","chat","check","chevron-down","chevron-left","chevron-right","chevron-up","clock","cloud","code","collection","command","cpu","credit-card","cup","dash","database","display","door-closed","download","droplet","earbuds","edit","egg","eject","envelope","eraser","eye","file","filter","flag","folder","gear","gem","gift","graph-up","grid","hammer","hand-thumbs-up","heart","house","image","inbox","info-circle","journal","key","laptop","layers","layout-text-sidebar-reverse","lightbulb","link","list","lock","map","mic","moon","mouse","music-note","newspaper","palette","paperclip","pause","pencil","person","phone","pie-chart","play","plus","printer","puzzle","question-circle","reception-4","record","reply","rss","save","search","send","server","share","shield","shop","shuffle","skip-end","skip-start","slash","sliders","smartphone","speaker","speedometer","spellcheck","square","star","stickies","stop","stopwatch","suit-heart","sun","table","tag","tags","telephone","terminal","text-paragraph","thermometer","three-dots","ticket","tools","trash","trophy","truck","tv","umbrella","unlock","upload","vector-pen","wallet","watch","wifi","window","wrench","x","zoom-in","zoom-out","activity","at","award","backspace","badge-3d","badge-4k","badge-8k","badge-ad","badge-ar","badge-cc","badge-hd","badge-tm","badge-vo","badge-vr","badge-wc","bar-chart","battery","bicycle","binoculars","blockquote-left","blockquote-right","book","bookshelf","bootstrap","border-all","border-bottom","border-center","border-inner","border-left","border-middle","border-outer","border-right","border-style","border-top","border-width","bounding-box","box-arrow-down","box-arrow-in-down","box-arrow-in-left","box-arrow-in-right","box-arrow-in-up","box-arrow-left","box-arrow-right","box-arrow-up","box-seam","brightness-alt-high","brightness-alt-low","brightness-high","brightness-low","broadcast","brush","bucket","bug","building","bullseye","calculator","calendar-check","calendar-date","calendar-day","calendar-event","calendar-minus","calendar-month","calendar-plus","calendar-range","calendar-week","calendar-x","calendar2","calendar3","calendar4","camera-reels","camera-video","capslock","card-checklist","card-heading","card-image","card-list","card-text","caret-down","caret-left","caret-right","caret-up","cart-check","cart-dash","cart-plus","cart-x","cash","cash-stack","cast","chat-dots","chat-left","chat-quote","chat-right","chat-square","chat-text","check-all","check-circle","check-square","circle","clipboard","cloud-arrow-down","cloud-arrow-up","cloud-check","cloud-download","cloud-fog","cloud-hail","cloud-lightning","cloud-minus","cloud-moon","cloud-plus","cloud-rain","cloud-slash","cloud-snow","cloud-sun","cloud-upload","clouds","cloudy","code-slash","code-square","collection-play","columns","columns-gap","compass","cone","cone-striped","controller","credit-card-2-back","credit-card-2-front","crop","cup-straw","cursor","dash-circle","dash-square","diagram-2","diagram-3","diamond","dice-1","dice-2","dice-3","dice-4","dice-5","dice-6","disc","discord","distribute-horizontal","distribute-vertical","door-open","dot","droplet-half","easel","egg-fried","emoji-angry","emoji-dizzy","emoji-expressionless","emoji-frown","emoji-heart-eyes","emoji-laughing","emoji-neutral","emoji-smile","emoji-sunglasses","emoji-wink","envelope-open","exclamation","exclamation-circle","exclamation-diamond","exclamation-octagon","exclamation-square","exclamation-triangle","eye-slash","eyedropper","facebook","file-arrow-down","file-arrow-up","file-binary","file-break","file-check","file-code","file-diff","file-earmark","file-excel","file-image","file-lock","file-medical","file-minus","file-music","file-pdf","file-person","file-play","file-plus","file-post","file-ppt","file-richtext","file-slides","file-spreadsheet","file-text","file-word","file-zip","files","film","filter-circle","filter-left","filter-right","filter-square","fingerprint","flower1","flower2","flower3","folder-check","folder-minus","folder-plus","folder-symlink","folder-x","folder2-open","fonts","forward","front","fullscreen","fullscreen-exit","funnel","gear-wide","gender-female","gender-male","gender-trans","geo","geo-alt","github","globe","google","graph-down","grid-1x2","grid-3x2","grid-3x3","grip-horizontal","grip-vertical","hand-index","hand-thumbs-down","handbag","hash","headphones","headset","heart-half","heptagon","hourglass","hourglass-bottom","hourglass-split","hourglass-top","house-door","hr","hurricane","image-alt","images","infinity","input-cursor","instagram","intersect","journal-album","journal-arrow-down","journal-arrow-up","journal-bookmark","journal-check","journal-code","journal-medical","journal-minus","journal-plus","journal-richtext","journal-text","journal-x","journals","justify","kanban","keyboard","ladder","lamp","layers-half","layout-sidebar","layout-split","layout-three-columns","life-preserver","lightbulb-off","lightning","lightning-charge","link-45deg","linkedin","list-check","list-nested","list-ol","list-stars","list-task","list-ul","mailbox","markdown","mask","mastodon","megaphone","menu-app","menu-button","messenger","mic-mute","minecart","minecart-loaded","moisture","mouse2","mouse3","music-note-beamed","music-note-list","music-player","node-minus","node-plus","nut","octagon","option","outlet","paint-bucket","patch-check","patch-exclamation","patch-minus","patch-plus","patch-question","pause-btn","pause-circle","peace","pen","pencil-square","pentagon","person-badge","person-bounding-box","person-circle","person-lines-fill","phone-landscape","phone-vibrate","pie-chart-fill","pin","pin-angle","pin-fill","pin-map","pip","play-btn","play-circle","plug","plus-circle","plus-square","power","question","question-diamond","question-square","rainbow","receipt","receipt-cutoff","reception-0","reception-1","reception-2","reception-3","record-btn","record-circle","record2","recycle","reddit","reply-all","router","rulers","safe","save2","sd-card","segmented-nav","shield-check","shield-exclamation","shield-lock","shield-shaded","shield-slash","shift","signpost","signpost-2","signpost-split","sim","skip-backward","skip-forward","slack","slash-circle","slash-square","smartwatch","snow","snow2","snow3","sort-alpha-down","sort-alpha-up","sort-numeric-down","sort-numeric-up","soundwave","speedometer2","square-half","stack","star-half","stars","stop-btn","stop-circle","suit-club","suit-diamond","suit-spade","sunglasses","sunrise","sunset","symmetry-horizontal","symmetry-vertical","tablet","tablet-landscape","telegram","telephone-forward","telephone-inbound","telephone-outbound","telephone-plus","telephone-x","text-center","text-indent-left","text-indent-right","text-left","text-right","thermometer-half","thermometer-high","thermometer-low","thermometer-snow","thermometer-sun","three-dots-vertical","toggle-off","toggle-on","toggle2-off","toggle2-on","tornado","translate","trash2","tree","truck-flatbed","tsunami","type","type-bold","type-h1","type-h2","type-h3","type-italic","type-strikethrough","type-underline","ui-checks","ui-checks-grid","ui-radios","ui-radios-grid","union","upc","upc-scan","view-list","view-stacked","vinyl","voicemail","volume-down","volume-mute","volume-off","volume-up","vr","wallet2","water","whatsapp","wifi-1","wifi-2","wifi-off","wind","window-dock","window-sidebar","x-circle","x-diamond","x-octagon","x-square","youtube"];globalThis.Component.register("IconPicker",e=>{e._thisObj=e,e.state=globalThis.NewState({value:"",search:"",open:!1}),e.addEventListener("bind",t=>{e.state.value=t.detail||""}),Object.defineProperty(e,"value",{get:()=>e.state.value,set:t=>{e.state.value=t||""}}),Object.defineProperty(e,"filteredIcons",{get:()=>{var t;const i=(null==(t=e.state.search)?void 0:t.toLowerCase())||"";return b.filter(e=>e.includes(i))}}),e.selectIcon=t=>{e.state.value=t,e.state.open=!1,e.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:t}))},e.toggle=()=>{e.state.open=!e.state.open,e.state.open&&setTimeout(()=>{var t;null==(t=globalThis.$(e,"input"))||t.focus()},10)};const t=t=>{e.contains(t.target)||(e.state.open=!1)};window.addEventListener("click",t),e.addEventListener("remove",()=>window.removeEventListener("click",t))},globalThis.Util.makeDom('\n<div class="dropdown w-100 h-100">\n  <button class="btn btn-outline-secondary dropdown-toggle w-100 h-100 d-flex align-items-center justify-content-between px-2" type="button" $onclick="this.toggle()">\n    <span class="d-flex align-items-center overflow-hidden">\n        <i $if="this.state.value" $class="bi bi-${this.state.value} me-2"></i>\n        <span class="text-truncate" $text="this.state.value || \'{#Select Icon#}\'"></span>\n    </span>\n  </button>\n  <div $class="dropdown-menu p-2 shadow ${this.state.open ? \'show\' : \'\'}" style="width: 300px; max-height: 350px; overflow-y: hidden; display: flex; flex-direction: column; z-index: 1050">\n    <input type="text" class="form-control form-control-sm mb-2" placeholder="Search icons..." $bind="this.state.search" $onclick="event.stopPropagation()">\n    <div class="d-flex flex-wrap gap-1 overflow-auto p-1" style="flex: 1" $onclick="event.stopPropagation()">\n        <template $each="this.filteredIcons" as="icon">\n            <button type="button" class="btn btn-sm btn-outline-light text-dark p-2 d-flex align-items-center justify-content-center" $onclick="this.selectIcon(icon)" $title="icon" style="width: 40px; height: 40px">\n                <i $class="bi bi-${icon}"></i>\n            </button>\n        </template>\n        <div $if="this.filteredIcons.length === 0" class="text-muted p-2 w-100 text-center">No icons found</div>\n    </div>\n  </div>\n</div>\n'),globalThis.Util.makeDom("<style>\n    IconPicker { display: block; height: 100%; }\n    IconPicker .dropdown-menu { left: 0; }\n    IconPicker .btn-outline-light:hover { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); }\n</style>")),globalThis.AutoForm&&globalThis.AutoForm.register("IconPicker"),globalThis.Component.register("List",e=>{e.mode=e.getAttribute("mode")||"normal",e.fast=e.hasAttribute("fast"),e.collapsible=e.hasAttribute("collapsible");const t=e.fast?e.querySelector(".vs-pad-top"):null,i=e.fast?e.querySelector(".vs-pad-bottom"):null,a={idfield:"id",labelfield:"label",summaryfield:"summary",groupidfield:"id",grouplabelfield:"label",groupsummaryfield:"summary",groupfield:"group",parentfield:"parent",groupicon:"folder",itemicon:"file"};e.collapsed=globalThis.NewState({}),e.state.renderedList=[];const s=()=>{globalThis.Util.updateDefaults(e,a);const t=e.state.list||[],i=[];if("group"===e.mode){const a={};t.forEach(t=>{var i;return(a[i=t[e.groupfield]]??(a[i]=[])).push(t)}),(e.state.groups||[]).forEach(t=>{i.push({type:"group",...t});const s=a[t[e.groupidfield]];s&&s.forEach(e=>i.push({type:"item",...e}))})}else if("tree"===e.mode){const a={};t.forEach(t=>{var i;return(a[i=t[e.parentfield]||""]??(a[i]=[])).push(t)});const s=(t,l,n)=>t.forEach(t=>{var o;const r=t[e.idfield],d=!!(null==(o=a[r])?void 0:o.length),c=e.collapsed[r];i.push({type:"item",...t,_level:l,_hasChildren:d,_parents:n}),d&&!c&&s(a[r],l+1,[...n,r])});s(a[""]||[],0,[])}else t.forEach(e=>i.push({type:"item",...e}));e.state.flatList=i};e.state.__watch("list",s);const l=e.fast?globalThis.VirtualScroll():null;let n=!1;e.refresh=()=>{if(e.fast&&!n){n=!0;try{const a=l.calc(e,e.state.flatList);a&&(t&&(t.style.height=`${a.prevHeight}px`),i&&(i.style.height=`${a.postHeight}px`),e.state.listStartIndex=a.listStartIndex,e.state.renderedList=a.renderedList)}finally{setTimeout(()=>{n=!1},0)}}},e.onItemUpdate=(t,i)=>{e.fast&&l.update(t+(e.state.listStartIndex||0),i)},e.state.__watch("flatList",a=>{e.fast?(t&&(t.style.height="0px"),i&&(i.style.height="0px"),e.state.listStartIndex=0,e.state.renderedList=l.reset(a,e)||[],setTimeout(()=>{e.state.flatList===a&&l.init(a,e.refresh)})):e.state.renderedList=a}),e.selectItem=(t,i)=>{e.hasAttribute("auto-select")&&(e.state.selectedItem=e.state.selectedItem===t[e.idfield]?null:t[e.idfield]),e.dispatchEvent(new CustomEvent("itemclick",{bubbles:!1,detail:{item:t,index:i+(e.fast&&e.state.listStartIndex||0)}}))},e.selectGroup=(t,i)=>{e.hasAttribute("auto-select-group")&&(e.state.selectedGroup=e.state.selectedGroup===t[e.groupidfield]?null:t[e.groupidfield]),e.dispatchEvent(new CustomEvent("groupclick",{bubbles:!1,detail:{item:t,index:i}}))},e.toggleCollapse=t=>{e.collapsible&&t._hasChildren&&(e.collapsed[t[e.idfield]]=!e.collapsed[t[e.idfield]],s())},s()},globalThis.Util.makeDom('\n<div class="list-group overflow-auto" onscroll="this.refresh()" style="overflow-anchor:none">\n        <div class="vs-pad-top flex-shrink-0" style="height:0px;"></div>\n        <template slot-id="item" $each="this.state.renderedList">\n                <div $onupdate="this.onItemUpdate(index, thisNode)" $class="list-group-item d-inline-flex align-items-center pe-2 ${item.type===\'group\'?\'bg-body-tertiary fw-bold ps-2\':\'list-group-item-action \' + (this.mode===\'group\'?\'ps-4\':\'ps-2\')} ${item.type===\'group\'?(this.state?.selectedGroup===item[this.groupidfield]?\'active\':\'\'):(this.state?.selectedItem===item[this.idfield]?\'active\':\'\')}" $onclick="item.type===\'group\'?this.selectGroup(item,index):this.selectItem(item,index)">\n                        <template $if="item.type === \'group\'">\n                                <template $if="this.groupicon">\n                                        <span $class="bi bi-${this.groupicon} text-body"></span>\n                                </template>\n                                <div class="flex-shrink-0 px-1" $text="${item[this.grouplabelfield]}"></div>\n                                <div class="text-muted small flex-fill text-end" $text="${item[this.groupsummaryfield]}"></div>\n                                <div slot-id="group-actions"></div>\n                        </template>\n                        <template $if="item.type === \'item\'">\n                                <template $if="this.mode === \'tree\'">\n                                        <div $style="width:${item._level * 16 + (this.collapsible ? 16 : 0)}px; cursor:${this.collapsible ? \'pointer\' : \'default\'}" class="text-end text-muted flex-shrink-0" $onclick="event.stopPropagation(); this.toggleCollapse(item)">\n                                                <template $if="this.collapsible && item._hasChildren">\n                                                        <i $class="bi ${this.collapsed[item[this.idfield]] ? \'bi-caret-right-fill\' : \'bi-caret-down-fill\'}"></i>\n                                                </template>\n                                        </div>\n                                </template>\n                                <template $if="this.mode === \'tree\'">\n                                        <span $class="text-muted bi bi-${item._hasChildren ? this.groupicon : this.itemicon}"></span>\n                                </template>\n                                <template $if="this.mode !== \'tree\' && this.itemicon">\n                                        <span $class="bi bi-${this.itemicon} text-body"></span>\n                                </template>\n                                <div class="flex-shrink-0 px-1" $text="${item[this.labelfield]}"></div>\n                                <div class="text-muted small flex-fill text-end" $text="${item[this.summaryfield]}"></div>\n                                <div slot-id="item-actions"></div>\n                        </template>\n                </div>\n        </template>\n        <div class="vs-pad-bottom flex-shrink-0" style="height:0px;"></div>\n</div>\n')),globalThis.Component.register("Nav",e=>{e.vertical=e.hasAttribute("vertical"),e.click=(t,i)=>{t.noselect||i||(globalThis.Hash.nav=t.name),e.dispatchEvent(new CustomEvent("nav",{detail:{item:t},bubbles:!1}))}},globalThis.Util.makeDom('\n<div $class="${this.vertical ? \'d-flex flex-column border-end h-100\' : \'navbar navbar-expand border-bottom\'} bg-body-secondary px-3 ${this.vertical ? \'py-3\' : \'pb-0\'} align-items-center ${this.vertical ? \'align-items-start\' : \'\'}">\n        <template $if="this.state?.brand?.image">\n                <img $src="this.state.brand.image" $class="${this.vertical ? \'mb-4\' : \'me-2\'}" style="height:30px;width:auto;max-width:300px">\n        </template>\n        <template $if="this.state?.brand?.icon">\n                <i $class="bi bi-${this.state.brand.icon} ${this.vertical ? \'mb-4\' : \'me-2\'}"></i>\n        </template>\n        <template $if="this.state?.brand?.label">\n                <span $class="${this.vertical ? \'mb-4 fw-bold\' : \'me-2\'}" $text="this.state.brand.label"></span>\n        </template>\n        <div $class="${this.vertical ? \'w-100\' : \'ms-2\'}"></div>\n        <template $each="this.state?.list || []">\n                <div $class="${this.vertical ? \'nav nav-pills flex-column w-100\' : \'navbar-nav\'} text-truncate ${item.type===\'fill\'?\'flex-fill\':\'\'}">\n                        <template $if="item.type===\'button\'">\n                                <button $class="nav-link ${Hash.nav===item.name?\'active\':\'\'} ${this.vertical ? \'text-start\' : \'\'}" $onclick="this.click(item)">\n                                        <i $class="bi bi-${item.icon} me-2"></i><span $class="${this.vertical ? \'\' : \'d-none d-\' + (this.state?.list?.length>5?\'lg\':\'md\') + \'-inline\'}" $text="item.label"></span>\n                                </button>\n                        </template>\n                        <template $if="item.type===\'dropdown\'">\n                                <div class="dropdown">\n                                        <button $class="nav-link ${Hash.nav===item.name?\'active\':\'\'} ${this.vertical ? \'text-start\' : \'\'}" data-bs-toggle="dropdown">\n                                                <i $class="bi bi-${item.icon} me-2"></i><span $class="${this.vertical ? \'\' : \'d-none d-\' + (this.state?.list?.length>5?\'lg\':\'md\') + \'-inline\'}" $text="item.label"></span>\n                                        </button>\n                                        <div $class="dropdown-menu ${this.vertical?\'position-static\':\'dropdown-menu-end\'} p-3 bg-body-secondary shadow" $style="width: ${item.width || 250}px;">\n                                                <template $each="item.list" as="subitem">\n                                                        <template $if="subitem.type===\'button\'">\n                                                                <button class="nav-link px-0 w-100 text-start" $onclick="this.click(subitem, true)">\n                                                                        <i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>\n                                                                </button>\n                                                        </template>\n                                                        <template $if="subitem.type===\'switch\'">\n                                                                <div class="d-flex align-items-center">\n                                                                        <i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>\n                                                                        <div class="form-switch"><input class="form-check-input mx-0" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n                                                                </div>\n                                                        </template>\n                                                </template>\n                                        </div>\n                                </div>\n                        </template>\n                </div>\n        </template>\n</div>\n')),globalThis.Component.register("Resizer",e=>{e.isVertical=e.hasAttribute("vertical");const t=parseInt(e.getAttribute("min"))||10,i=parseInt(e.getAttribute("max"))||1e3,a=e.target||e.previousElementSibling;e.addEventListener("bind",t=>{void 0!==t.detail&&null!==t.detail&&(a.style[e.isVertical?"height":"width"]=t.detail+"px")});const s=(a,s,l)=>{const n=a+(e.isVertical?l:s);return n<t?t:n>i?i:n};e.addEventListener("mousedown",t=>{const i=e.isVertical?a.offsetHeight:a.offsetWidth;globalThis.MouseMover.start(t,{onmousemove:({w:t,h:l})=>{const n=s(i,t,l);a.style[e.isVertical?"height":"width"]=n+"px",e.dispatchEvent(new CustomEvent("resizing",{detail:{oldSize:i,newSize:n},bubbles:!1}))},onmouseup:({w:t,h:a})=>{const l=s(i,t,a);e.dispatchEvent(new CustomEvent("resize",{detail:{oldSize:i,newSize:l},bubbles:!1})),e.dispatchEvent(new CustomEvent("change",{detail:l,bubbles:!1}))}})})},globalThis.Util.makeDom("\n<div $class=\"border-${this.isVertical?'top':'start'} flex-shrink-0\" $style=\"${this.isVertical?'height':'width'}:3px;${!this.isVertical?'height':'width'}:100%;cursor:${this.isVertical?'row-resize':'col-resize'}\"></div>\n")),Object.defineProperty(e,"State",{enumerable:!0,get:()=>t.State}),e.APIComponent=p,e.AutoForm=o,e.HTTP=i,e.MouseMover=u,e.UI=a,e.VirtualScroll=r,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});