const AUTOFORM_BLUEPRINT=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    <template $$if="item.if || \'true\'">\n    <div style="display:contents">\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          <template $if="[\'text\', \'password\', \'email\', \'number\', \'date\', \'datetime\', \'file\'].includes(item.type)"><input $name="item.name" $type="item.type" $.="item.setting || {}" $bind="this.state.data[item.name]" $class="form-control ${item.type === \'number\' ? \'text-end\' : \'\'}"></template>\n\n          <template $if="item.type === \'select\'"><select $name="item.name" $.="item.setting || {}" $bind="this.state.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></template>\n\n          <template $if="[\'checkbox\', \'radio\'].includes(item.type)"><div class="d-flex align-items-center flex-wrap gap-3 h-100" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px);">\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.value !== undefined ? opt.value : opt) : \'on\'" $bind="this.state.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></template>\n\n          <template $if="item.type === \'switch\'"><div class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px); display:flex !important;">\n              <input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.state.data[item.name]">\n          </div></template>\n\n          <template $if="item.type === \'textarea\'"><textarea $name="item.name" class="form-control" $.="item.setting || {}" $bind="this.state.data[item.name]"></textarea></template>\n        </div>\n    </div>\n    </template>\n  </template>\n\n  <div $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 $if="!this.nobutton" type="submit" class="btn btn-primary" $text="this.submitlabel || \'{#Submit#}\'"></button>\n  </div>\n  </form>\n</div>\n'),AUTOFORM_STYLE=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",t=>{t.state.schema||(t.state.schema=[]);const e=e=>{const i=(n=e||{})&&"object"==typeof n&&!n.__isProxy?globalThis.NewState(n):n;var n;t.data=i,t.state.data!==i&&(t.state.data=i)};t.state.__watch("data",e),e(t.state.data),t.vertical=t.hasAttribute("vertical"),t.horizontal=t.hasAttribute("horizontal"),t.inline=t.hasAttribute("inline"),t.nobutton=t.hasAttribute("nobutton"),t.submitlabel=t.getAttribute("submitlabel")||"",t.request={method:"POST"},t.response={},t.result=null,t.form=globalThis.$(t,"form"),t.submit=(e={})=>{if(!t.form.reportValidity())return globalThis.Toast?.show("{#verify failed#}",{type:"danger"});if(!t.dispatchEvent(new CustomEvent("submit",{detail:t.data,cancelable:!0,bubbles:!1})))return;const i={...t.request,data:t.data,noui:!0,...e};let n=null;if(t.api)n=t.api.do(i);else{if(!t.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");n=globalThis.HTTP.request(i)}n.then(e=>{if(t.response=e,t.result=e.result,"object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1}))}).catch(e=>{globalThis.Toast?.show(e.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:e,bubbles:!0}))})}},AUTOFORM_BLUEPRINT,AUTOFORM_STYLE);const findAnchorInBlueprint=t=>{let e=t.querySelector("[control-wrapper]");if(e)return e;for(const i of t.querySelectorAll("template"))if(e=findAnchorInBlueprint(i.content),e)return e;return null},AutoForm={customTypes:[],register:(t,e)=>{const i=e||t;AutoForm.customTypes.find(e=>e.name===t)||(AutoForm.customTypes.push({name:t,typeName:i}),AutoForm._addAutoFormComponent(t,i))},_addAutoFormComponent:(t,e)=>{const i=findAnchorInBlueprint(AUTOFORM_BLUEPRINT);if(i){const n=globalThis.Util.makeDom(`<template $if="item.type?.toLowerCase() === '${e.toLowerCase()}'"><${t} $name="item.name" $.="item.setting || {}" $bind="thisNode.closest('AutoForm').data[item.name]" class="w-100"></${t}></template>`);i.appendChild(n)}}};globalThis.AutoForm=AutoForm;