compelem 0.6.6-b1 → 0.6.7-b2

package/CompElem.d.ts

@@ -1,32 +1,19 @@
-import { Directive } from "./directive/Directive";
 import { IComponent } from "./IComponent";
-import { IView } from "./render/RenderContext";
 import { Template } from "./render/Template";
 import { DefaultProps, TmplFn } from "./types";
-declare const CompElem_base: {
-    new (...args: any[]): {
-        [x: string]: any;
-        __updatePoints: Array<import("./types").UpdatePoint>;
-        renderComponent: CompElem;
-        buildView(tmpl: Template): NodeListOf<ChildNode>;
-        updateView(tmpl: Template): void;
-    };
-} & {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-};
 /**
  * CompElem基类，意为组件元素。提供了基本内置属性及生命周期等必备接口
  * 每个组件都需要继承自该类
  *
  * @author holyhigh2
  */
-export declare class CompElem extends CompElem_base implements IComponent {
+export declare class CompElem extends HTMLElement implements IComponent {
     #private;
     static __l_globalRule: HTMLStyleElement;
     static defaults(options: DefaultProps): void;
     __events: Record<string, Array<Node | ((e: Event) => void)>[]>;
     get [Symbol.toStringTag](): string;
+    get cid(): number;
     get reactiveData(): Record<string, any>;
     get attrs(): Record<string, string>;
     get props(): Record<string, any>;
@@ -36,6 +23,7 @@ export declare class CompElem extends CompElem_base implements IComponent {
     get wrapperComponent(): CompElem | null;
     get slotHooks(): Record<string, (...args: any[]) => Template>;
     get css(): CSSStyleSheet[];
+    get globalStyleSheet(): CSSStyleSheet;
     get isMounted(): boolean;
     get slots(): Record<string, Array<Node>>;
     /**
@@ -87,13 +75,13 @@ export declare class CompElem extends CompElem_base implements IComponent {
     _bindSlot(slot: HTMLSlotElement, name: string, props: Record<string, any>): void;
     _bindSlotHook(name: string, hook: (...args: any[]) => Template): void;
     _updateSlot(name: string, propName?: string, value?: any): void;
-    _asyncDirectives: WeakMap<TmplFn, IView>;
+    _asyncDirectives: WeakMap<TmplFn, any>;
     renderAsync(cbk: TmplFn, ...args: any[]): void;
     /**
      * todo
      * 1. 取消上溯递归路径
      */
-    _regDeps(varPath: string, renderContext: CompElem | Directive): void;
+    _regDeps(varPath: string, renderContext: CompElem | Node): void;
     _regWrapper(wrapperComponent: CompElem): void;
     /**
      * 抛出自定义事件
@@ -115,10 +103,9 @@ export declare class CompElem extends CompElem_base implements IComponent {
      * 下一帧执行
      * @param cbk
      */
-    nextTick(cbk: () => void): void;
+    nextTick(cbk: () => void, key?: string): void;
     /**
      * 强制更新一次视图
      */
     forceUpdate(): void;
 }
-export {};

package/IComponent.d.ts

@@ -5,6 +5,7 @@ import { Template } from "./render/Template";
  * @author holyhigh2
  */
 export interface IComponent {
+    get cid(): number;
     get attrs(): Record<string, string>;
     get props(): Record<string, any>;
     get renderRoot(): HTMLElement;
@@ -14,6 +15,7 @@ export interface IComponent {
     get slots(): Record<string, Array<Node>>;
     get slotHooks(): Record<string, (...args: any[]) => Template>;
     get css(): CSSStyleSheet[];
+    get globalStyleSheet(): CSSStyleSheet;
     get isMounted(): boolean;
     get styles(): Array<() => string>;
     propsReady(props: Record<string, any>): void;

package/README.md

@@ -316,13 +316,13 @@ CompElem 组件既可以在 CompElem 环境内调用，也可以直接在原生
 ```
 
 #### 插入节点(动态)
-
-动态内容插入仅可在 CompElem 组件中编码，可以通过组件注入参数动态生成插槽内容
+1. 通过`slot`指令
+仅可在 CompElem 组件中编码，可使用所有CompElem指令并可通过`args`接收插槽参数
 
 ```ts
 //仅可用于CompElem组件中
 return html` <l-tooltip>
-  //动态内容通过slot指令定义 ${slot(
+  ${slot(
     (args: Record<string, any>) => html`
       <div>我是动态内容-${args.data.id}</div>
     `,
@@ -330,20 +330,29 @@ return html` <l-tooltip>
   )}
 </l-tooltip>`;
 ```
+2. 通过元素注入
+可在非CompElem环境中使用，比如将组件嵌入到React/Vue环境中使用
+```html
+<!-- 在 .vue 中 -->
+...
+<l-column>
+  <!-- CompElem 会赋值组件的data属性为 data -->
+  <VueComp slot="cell" data-slot-data/>
+</l-column>
+...
+<!-- 对于驼峰变量可通过短横线分隔，下例会向组件注入 dataList 变量 -->
+...
+<!-- CompElem 会赋值组件的dataList属性为 data -->
+<VueComp slot="cell" data-slot-data-list="data"/>
+...
+```
 
-在`slot`标签上注入参数
+动态插槽的参数可在组件内的 `slot` 标签上通过 *视图模板-参数表达式*  `.xx` 注入参数
 
 ```html
 <slot .data="${this.row}"></slot>
 ```
 
-**_注意_**，动态插槽必须关闭自动插槽，否则无效
-
-```ts
-static get autoSlot() {
-  return false;
-}
-```
 
 ## 指令 Directive
 

package/compelem.umd.js

@@ -1,7 +1,7 @@
 /**
-   * compelem v0.6.6-b1.1753346007
+   * compelem v0.6.7-b2.1756016341
    * A modern, reactive, fast, lightweight and flexible lib for building web components
    * @holyhigh2
    * https://github.com/holyhigh2/compelem
    */
-  !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("myfx")):"function"==typeof define&&define.amd?define(["exports","myfx"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).compelem={},e.myfx)}(this,(function(e,t){"use strict";const s=new WeakMap,r=/\s+\.?key\s*=/;var n,i,o,a;function l(e){console.error("[CompElem]",e)}function c(e,t){console.error(`[CompElem <${e}>]`,t)}function d(e){return t.toPath(e).join("-")}function p(e){return Object.getPrototypeOf(e)}function h(e){let s=e;return t.isString(e)&&/(?:^true$)|(?:^false$)/.test(s)?s="true"===s:(t.isUndefined(s)||t.isBlank(s))&&(s=!0),s}!function(e){e[e.CSS=1]="CSS",e[e.COMPUTED=2]="COMPUTED"}(n||(n={})),function(e){e.PROPS="__deco_props",e.STATES="__deco_states",e.COMPUTED="__deco_computed",e.WATCH="__deco_watch",e.EVENTS="__deco_events"}(i||(i={})),function(e){e.Prod="prod",e.Dev="dev"}(o||(o={})),e.DecoratorType=void 0,(a=e.DecoratorType||(e.DecoratorType={})).CLASS="class",a.FIELD="field",a.METHOD="method";class u{static get priority(){return 0}}const f="getKey",g="__decorators",m=new WeakMap;class E{args;metadata;decoratorClass;instanceMap;key;priority=0;constructor(e,s,r){this.args=e,this.metadata=s,this.decoratorClass=r,this.priority=t.get(r,"priority",0),this.instanceMap=new WeakMap}create(s){let r,n=new this.decoratorClass(...this.args),i=n.targets,o=this.metadata[2];t.isObject(o)&&t.isDefined(t.get(o,"configurable"))?r=e.DecoratorType.METHOD:t.isUndefined(this.metadata[2])&&(r=e.DecoratorType.FIELD),!t.isEmpty(i)&&r&&i.includes(r)?(n.created(s,...this.metadata),this.instanceMap.set(s,n)):l(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${i.join(",")}' bug got '${r}'`)}beforeMount(e,t){this.instanceMap.get(e).beforeMount(e,t,...this.metadata)}mounted(e,t){this.instanceMap.get(e).mounted(e,t,...this.metadata)}updated(e,t){this.instanceMap.get(e).updated(e,t)}}const y=new WeakMap;function b(e){let s=(...s)=>(...r)=>{let n=r[0].constructor,i=n[g];if(!t.has(n,g)){let e=Object.getPrototypeOf(n);i=e?t.concat(e[g]??[]):[],Reflect.defineProperty(n,g,{configurable:!1,enumerable:!1,value:i})}let o,a={},l=e[f];if(l){let t=y.get(e);if(t||(t=new WeakMap,y.set(e,t)),a=t.get(n),a||(a={},t.set(n,a)),o=l(...s),a[o])return a[o]}let c=new E(s,r,e);return a[o]=c,i?.push(c),c};return m.set(s,!0),s}const v=new WeakMap;function T(e,s,r,n){let o;if(t.isLowerCaseChar(s[0])||l(`Prop '${s}' must be in CamelCase`),!t.has(e.constructor,i.PROPS)){const s={};let r=e.constructor;for(;(r=p(r))!==V;)t.merge(s,r[i.PROPS]?t.cloneDeep(r[i.PROPS]):{});Reflect.defineProperty(e.constructor,i.PROPS,{configurable:!1,enumerable:!1,value:s}),o=new Set,t.each(s,((e,s)=>{if(e.attribute){let e=t.kebabCase(s);o?.add(e)}})),v.set(e.constructor,o)}if(n&&(n.get&&(r.getter=n.get),n.set&&(r.setter=n.set)),r.attribute){o||(o=v.get(e.constructor));let r=t.kebabCase(s);o?.add(r)}t.has(e.constructor,"observedAttributes")||(e.constructor.observedAttributes=[]),e.constructor.observedAttributes=t.toArray(o),r.shallow=r.shallow||!1,e.constructor[i.PROPS][s]=r}const _=new Set;function C(e){return v.get(e)??_}const S={collectWatch(e,t,s){let r=D.get(e);r||(r={},D.set(e,r));let n=r[s];n||(n=r[s]=[]),n.push(t)},startCollect(e,t){this.__collectType=t,this.__collecting=e},setUpdater(e){this.__updater=e},endCollect(){this.__collecting=null},__directiveQ:[],setDirectiveQ(e){let s=t.last(this.__directiveQ);const r=e?e.join(","):"",n=s?s.join(","):"";s&&r===n||(s&&s.length<e.length&&t.startsWith(r,n)?this.__directiveQ[this.__directiveQ.length-1]=e:this.__directiveQ.push(e))},popDirectiveQ(){let e=t.concat(this.__directiveQ);return this.__directiveQ=[],e},startRender(e){this.__renderCollecting=!0,this.__renderContext=e},endRender(e){this.__renderCollection.forEach((t=>{e._regDeps(t,this.__renderContext)})),this.__renderCollection.clear(),this.__renderCollecting=!1,this.__renderContext=null},collect(e){this.__renderCollection.add(e)},clear(){this.__directiveQ=[]},__updater:null,__collecting:null,__collectType:-1,__renderCollection:new Set,__renderContext:null,__renderCollecting:!1,__skipCheck:!1},P=new WeakMap,N=new WeakMap,w=new WeakMap,A=new WeakMap,D=new WeakMap,x=new WeakSet;function k(e,r){if(!t.isObject(e))return e;const o=x.has(e)?e:new Proxy(e,{get(e,s,r){if(!s)return;const i=Reflect.get(e,s,r);if("string"!=typeof s&&"number"!=typeof s)return i;let o=s in e;if((S.__renderCollecting||S.__collecting)&&(o&&e.hasOwnProperty(s)||!o)){let e=N.get(r)??[],i=t.concat(e,[s]),o=i.join("-");if(S.__renderCollecting)S.collect(d(i)),S.setDirectiveQ(i);else if(S.__collecting){let e;switch(S.__collectType){case n.COMPUTED:e=w.get(S.__collecting),e||(e={},w.set(S.__collecting,e));break;case n.CSS:e=A.get(S.__collecting),e||(e={},A.set(S.__collecting,e))}let t=e[o];t||(t=e[o]=[]),t.push(S.__updater)}}return i},set(e,r,n,o){if(!r)return!1;let a=e[r];if(!t.isObject(a)&&a===n)return!0;if(Number.isNaN(n)&&Number.isNaN(a))return!0;let l=N.get(o)??[],c=t.concat(l,[r]),d=P.get(o).from,p=t.get(d.constructor,i.PROPS),h=t.get(d.constructor,i.STATES),u=t.get(p,[c[0],"hasChanged"])||t.get(h,[c[0],"hasChanged"]);if(u){if(!u.call(d,n,a))return!0}else if(a===n&&!s.has(a))return!0;p&&p[r]&&e.__isData&&p[r].sync&&d.emit("update:"+r,{value:n});let f=P.get(o)?.contextSet,g=n;!t.isObject(n)||t.isFunction(n)||n instanceof Node||Object.isFrozen(n)||f.forEach((e=>{let s=P.get(o)?.pathMap,n=s?.get(e);n&&(c=t.concat(n,[r]),N.set(g,c),g=k(g,e),x.add(g),N.set(g,c))}));let m=Reflect.set(e,r,g),E=P.get(o).pathMap;return f.forEach((e=>{let s=E.get(e);if(!s)return;e===d&&l.length>1&&s.length>1&&l[0]===s[0]&&(s=l),c=t.concat(s,"length"==r&&t.isArray(o)?[]:[r]);let n=w.get(e),i=A.get(e),p=D.get(e);if(n||i||p){let e=c.length;for(;e;){let s=c.slice(0,e).join("-");if(p){const r=p[s];e===c.length?r?.forEach((e=>{let t=e();t.ov=a,O.pushWatch(t)})):r?.forEach((e=>{let s=e();t.get(s,"deep")&&(s.ov=a,O.pushWatch(s))}))}if(n){let e=n[s];if(!t.isEmpty(e))for(let t=0;t<e.length;t++){const s=e[t];O.pushComputed(s)}}if(i){let e=i[s];if(!t.isEmpty(e))for(let t=0;t<e.length;t++){const s=e[t];O.pushCss(s)}}e--}}let h=e._notify(a,c);O.pushNext(h)})),m}});x.has(o)||x.add(o);let a=N.get(e)??[];if(Object.isExtensible(e)&&!P.get(o)){let e=new Set;e.add(r);let t=new WeakMap;t.set(r,a),P.set(o,{from:r,contextSet:e,pathMap:t})}else{P.get(o).contextSet.add(r);let e=P.get(o).pathMap,s=e.get(r),n=t.concat(a);if(s&&s.join("")!==n.join("")){let e=t.get(r,t.initial(s));t.isArray(e)||function(...e){console.warn("[CompElem]",...e)}(`The object is referenced by more than one @state '${n.join(".")},${s.join(".")}'`),s=n}else e.set(r,n)}let l=t.get(r.constructor,i.PROPS),c=t.get(r.constructor,i.STATES);for(let s in e){const n=e[s];let i=t.get(l,[s,"shallow"])||t.get(c,[s,"shallow"]);!t.isObject(n)||x.has(n)||t.isFunction(n)||n instanceof Node||Object.isFrozen(n)||i||(N.set(n,t.concat(a,[s])),e[s]=k(n,r),x.add(e[s]),N.set(e[s],t.concat(a,[s])))}return o}class O{static watchSet=new Set;static computedSet=new Set;static cssSet=new Set;static nextSet=new Set;static nextPending=!1;static next;static flush(){O.nextPending=!1;let e=Array.from(O.watchSet);O.watchSet.clear();let s=Array.from(O.computedSet);O.computedSet.clear();let r=Array.from(O.cssSet);O.cssSet.clear();let n=Array.from(O.nextSet);O.nextSet.clear(),e.forEach((e=>e(t.get(e,"ov")))),s.forEach((e=>e())),r.forEach((e=>e())),n.forEach((e=>e()))}static pushWatch(e){O.watchSet.add(e)}static pushComputed(e){O.computedSet.add(e)}static pushCss(e){O.cssSet.add(e)}static pushNext(e){O.nextSet.add(e),O.nextPending||(O.nextPending=!0,O.next())}}function M(e){return class extends e{__updatePoints;renderComponent;buildView(e){let t=this instanceof V?this:this.renderComponent,[s,r]=Ne(t,e),n=[],i=Re(n,s,r,t,this);return this.__updatePoints=n,i}updateView(e){if(t.isBlank(t.join(e.strings)))return;if(!this.__updatePoints)return;let{vars:s}=e,r=this instanceof V?this:this.renderComponent;for(let e=0;e<this.__updatePoints.length;e++){const n=this.__updatePoints[e];let i=n.varIndex;if(i<0)continue;let o=n.value,a=s,l=n.node,c=t.split(i,"-");for(let s=0;s<c.length;s++){const r=c[s];a=t.get(a,r),a&&a.vars&&e<c.length-1&&(a=a.vars)}if(!t.isObject(o)&&o===a)continue;let d=l;if(n.isDirective){if(!o.di)continue;a.di=o.di,a.di.renderParams=a.varChain,a.di._renderArgs=a.args,a.point=o.point,a.varPath=o.varPath,o.update(o.point,a.args,o.args)}else if(n.isToggleProp){if(!!a===o)continue;d.toggleAttribute(n.attrName,!!a),t.set(d,n.attrName,!!a)}else if(n.isProp){if(!t.isObject(a)&&a===o)continue;l instanceof V?l._updateProps({[n.attrName]:a}):l instanceof HTMLSlotElement&&r._updateSlot(l.getAttribute("name")||"default",n.attrName,a)}else if(n.attrName&&!n.isEvent){if(!t.isEqual(o,a))switch(n.attrName){case"value":if(l instanceof HTMLInputElement){l.value=a;break}default:l.setAttribute(n.attrName,t.replace(n.attrTmpl,Me,a+""))}}else if(n.isTmpl&&a&&o)o.tmpl&&(a.strings.join()!==o.tmpl.strings.join()||a.vars.some((e=>t.isObject(e)&&!t.isPlainObject(e)))||o.tmpl.vars.some((e=>t.isObject(e)&&!t.isPlainObject(e)))||!t.isEqual(a.vars,o.tmpl.vars))&&n.value.updateView(a),o.tmpl=a,a=o;else if(n.isText){let e=n.textNode.nextSibling;e&&e===n.node.previousSibling?e.textContent=a:(Le.remove(n.textNode,n.node),Le.insertBefore(n.node,[a]))}n.value=a}}}}(()=>{const e=Promise.resolve(),t=O.flush;O.next=()=>{e.then(t)}})();class R extends(M(Object)){tmpl;constructor(e){super(),this._renderVars=t.get(e,"_renderVars"),this.tmpl=e}}const L={boolean:Boolean,string:String,number:Number,object:Object,array:Array,function:Function,undefined:Object},U=new WeakMap;let j=[];class V extends(M(HTMLElement)){static __l_globalRule=document.createElement("style");static defaults(e){j=t.flatMap(e.css,(e=>{if(t.isString(e)){let t=new CSSStyleSheet;return t.replaceSync(e),t}return e instanceof CSSStyleSheet?e:[]})),e.global,t.each(e,((e,s)=>{t.test(s[0],/[A-Z]/)}))}#e={};#t={"#slots":{}};#s={};#r={};#n;#i={};__events={};get[Symbol.toStringTag](){return this.constructor.name}get reactiveData(){return this.#s}get attrs(){return this.#o}get props(){return this.#a}get renderRoot(){return this.#l}get renderRoots(){return this.#c}get parentComponent(){return this.#d}get wrapperComponent(){return this.#p}get slotHooks(){return this.#h}get css(){return U.get(this.constructor)}get isMounted(){return this.#u}get slots(){return this.#t["#slots"]}#o;#a;#l;#c;#d;#p;#f={};#h={};#g={};#u=!1;static get styles(){return[]}static get globalStyles(){return[]}get styles(){return[]}#m=!1;#E=!1;constructor(...e){super(),1===t.size(e)&&(this.#a={},t.assign(this.#a,t.first(e)));let s=this.render.bind(this);this.render=function(){let e;return S.startRender(this),e=s(),S.endRender(this),e};let r=t.get(this.constructor,"globalStyles"),n=t.get(this.constructor,"_global_style_attached");if(!t.isEmpty(r)&&"1"!==n){let e="";r.forEach((s=>{t.isString(s)&&(e+=s+"\n")})),V.__l_globalRule.textContent+=e,t.set(this.constructor,"_global_style_attached","1")}let i=U.get(this.constructor),o=i??[];i||(t.each(t.get(this.constructor,"styles"),(e=>{if(t.isString(e)){let t=new CSSStyleSheet;t.replaceSync(e),o.push(t)}else o.push(e)})),U.set(this.constructor,o)),this.#n=this.attachShadow({mode:"open"}),this.#n.adoptedStyleSheets=[...j,...o],this._slotsPropMap={default:[]};let a=t.get(this.constructor,g);a&&a.sort(((e,t)=>t.priority-e.priority)).forEach((e=>e.create(this))),this.#y=this.#b.bind(this)}#y;connectedCallback(){let e=t.closest(this.parentNode,(e=>e instanceof V||e.host instanceof V),"parentNode");this.#d=e?e instanceof V?e:e.host:null,this.__init()}disconnectedCallback(){}__init(){if(this.#m)return;if(this.#E)return;this.#E=!0,this.#v();const e=this.#T();this.propsReady(e);for(const t in e){const s=e[t];this.#t[t]=s}this.#_(),t.each(this.#t,((e,t)=>{let s=Reflect.getOwnPropertyDescriptor(this.#t,t);Reflect.defineProperty(this,t,{get(){let e=Reflect.get(this.#s,t);return s?.get?s?.get():e},set(e){s?.set?s?.set(e):Reflect.set(this.#s,t,e)}})})),Reflect.defineProperty(this.#t,"__isData",{enumerable:!1,value:!0}),this.#s=k(this.#t,this);let s=t.get(this.constructor,i.COMPUTED);t.each(s,((e,t)=>{S.startCollect(this,n.COMPUTED),S.setUpdater((()=>{this.#s[t]=e.call(this)})),this.#t[t]=e.call(this),S.endCollect(),Reflect.defineProperty(this,t,{get(){return Reflect.get(this.#s,t)},set(e){c(this.tagName,"Cannot set a computed property '"+t+"'")}})}));let r=t.get(this.constructor,i.WATCH);t.each(r,((e,s)=>{e.forEach((e=>{let{source:r,options:n,handler:i}=e,o=i.bind(this);t.get(n,"once",!1)&&(o=t.once(o));const a=function(e){let s=t.get(this,r.replaceAll("-","."));o(s,e,r)}.bind(this);let l=t.get(n,"deep",!1);if(a.deep=l,S.collectWatch(this,(()=>a),s),!t.get(n,"immediate",!1))return;let c=t.get(this,r.replaceAll("-","."));o(c,c,r)}))}));let o=this.render(),a=this.buildView(o);if(a){let e=t.toArray(a);e.forEach((e=>{this.#n.appendChild(e)})),this.#c=t.filter(e,(e=>e.nodeType===Node.ELEMENT_NODE)),this.#l=this.#c[0]}t.each(this.#h,((e,t)=>{this.#C(t)}));const l=this;let d=t.get(this.constructor,g);d&&d.sort(((e,t)=>t.priority-e.priority)).forEach((e=>{e.beforeMount(this,((e,t)=>(l.#s[e]=t,l.#s[e])))})),this.beforeMount();let p=t.get(this.constructor,i.EVENTS);p&&p.forEach((async e=>{let s=e.name,r=t.assign({target:document,once:!1,passive:!1,capture:!1},e.options),n=t.bind(e.fn,this),i=r.target;t.isFunction(i)&&(i=await i.call(this,this)),i?i.addEventListener(s,n,r):c(this.tagName,"The target of @event('"+s+"',...) is invalid")})),S.startCollect(this,n.CSS);let h=[];this.styles.forEach((e=>{if(!t.isFunction(e))return;let s=new CSSStyleSheet;h.push(s),S.setUpdater((()=>{let t=e()??"";s.replaceSync(t)}));let r=e();t.isBlank(r)||s.replaceSync(r)})),S.endCollect(),h.length>0&&(this.#n.adoptedStyleSheets=[...this.#n.adoptedStyleSheets,...h]),setTimeout((()=>{this.#u=!0,this.mounted(),d&&d.forEach((e=>{e.mounted(this,((e,t)=>(l.#s[e]=t,l.#s[e])))}))}),0),this.#m=!0}propsReady(e){}render(){throw Error(`[CompElem <${this.tagName}>] Missing render()`)}beforeMount(){}mounted(){}#S(e,s){this.#v();let r=t.get(this.#e[s],"props");r&&t.each(this.slots,((e,s)=>{e.filter((e=>e.nodeType===Node.ELEMENT_NODE)).forEach((e=>{e instanceof V?e._updateProps(r):t.each(r,((s,r)=>{if(e instanceof HTMLSlotElement){let n=t.get(e,"__l_comp");if(n){let t=e.name||"default",i=n.#e[t];i||(i=n.#e[t]={props:{}}),i.props||(i.props={}),i.props[r]=s,n.#S(e,t)}}else e.setAttribute(r,s)}))}))})),this.slotChange(e,s)}slotChange(e,t){}attributeChangedCallback(e,t,s){this.#P(e,t,s)}shouldUpdate(e){return!0}updated(e){}#N={};_notify(e,r){let n=[];for(let i=0;i<r.length;i++){const o=r[i];n.push(o);let a=t.get(this,n),l=d(n);this.#r[l]={value:a,chain:"slots"===l?["slots"]:n,oldValue:e,end:n.length===r.length},t.isObject(a)&&"#"!=l[0]&&s.set(a,l)}return this.#y}#b(){if(t.size(this.#r)<1)return;const e=this.#r;this.#r={};let r=t.get(this.constructor,g);if(r&&r.sort(((e,t)=>t.priority-e.priority)).forEach((t=>{t.updated(this,e)})),!this.shouldUpdate(e))return;let n=new Set;t.each(e,(({value:e,chain:t,oldValue:s},r)=>{this.#i[r]&&this.#i[r].forEach((e=>{n.add(e)}))})),n.forEach((e=>{if(e===this)this.updateView(this.render());else{let t=e.render(...e._renderArgs?e._renderArgs:[]);t&&e.updateView(t)}})),this.#w.forEach((e=>{this.#C(e)})),this.updated(e),t.each(e,(({value:e,chain:r,oldValue:n},i)=>{t.isObject(e)&&s.has(e)&&s.delete(e)}))}#T(){let e=t.get(this.constructor,i.PROPS),s=this.attributes,r=this.tagName,n=this.#a,o={};t.each(s,(({name:s,value:r})=>{if(s[0]===ye||s[0]===be||s[0]===ve||s===Ce||"slot"===s)return;let n=t.camelCase(s);e&&!e[n]&&(o[s]=r)})),this.#o=this.#o?t.assign(this.#o,o):o;let a={};if(!e)return Object.seal(a);let l=Object.keys(e),d=l.length;for(let i=0;i<d;i++){const o=l[i];let d,u=e[o],f=t.has(n,o),g=t.get(this,o);if(!("_defaultValue"in u)&&(u._defaultValue=g,!u.type)){t.isUndefined(g)&&c(r,"Prop '"+o+"' has neither propType nor defaultValue be used for type inference");let e=typeof g;t.isArray(g)&&(e="array");let s=L[e];u.type=s}if(f)d=t.isNil(n[o])?g:n[o];else{d=g;let e=s.getNamedItem(t.kebabCase(o))||s.getNamedItem(be+t.kebabCase(o));e&&(f=!0,d=e.value)}if(u.required&&!f){c(r,"Prop '"+o+"' is required");break}d=this.#A(e,o,d);let m=t.get(e,[o,"getter"]);m&&(m=t.bind(m,this));let E=t.get(e,[o,"setter"]);if(E&&(E=t.bind(E,this)),(m||E)&&Reflect.defineProperty(this.#t,o,{set:E||function(e){},get:m}),u.attribute&&t.isDefined(d)&&!t.isObject(d)){let e=t.kebabCase(o),s=t.trim(d);(p=u.type)===Boolean||t.some(p,(e=>e===Boolean))?(s=h(d),t.isBoolean(s)?this.toggleAttribute(e,s):this.setAttribute(e,s)):this.setAttribute(e,s)}this.#t[o]=d,a[o]=d}var p;return Object.seal(a)}#D(e,s){let r=e;try{for(let n=0;n<s.length;n++){const i=s[n];r=i===Boolean?h(e):i===Number?Number(e):i===String?String(e):i===Object||i===Array?t.parseJSON(e):i===Date?new Date(e):new i(e)}}catch(t){c(this.tagName,"Convert attribute error with "+e)}return r}#A(e,s,r){let n=e[s];if(!n)return r;let i=n.isValid,o=n.type,a=t.isArray(o)?o:[o],l=n.converter,d=r;if(!t.some(a,(e=>e===String))&&t.isString(d)&&!t.isNull(d))try{d=l?l(d):this.#D(d,a)}catch(e){c(this.tagName,`Convert attribute '${s}' error with `+d)}for(let e=0;e<a.length;e++){"Boolean"===a[e].name&&(d=h(d))}let p=typeof d,u=!t.isDefined(d);for(let e=0;e<a.length;e++){const s=a[e];if(t.test(p,s.name,"i")||d instanceof s||Object.prototype.toString.call(d)===Object.prototype.toString.call(s.prototype)){u=!0;break}}return u||c(this.tagName,`Invalid prop '${s}'. expected '${a.map((e=>e.name||e))}' but got '${p}'`),i&&(i.call(this,d,this.#t)||c(this.tagName,`Invalid prop '${s}'. IsValid() check failed`)),d}#_(){let e=t.get(this.constructor,i.STATES);t.each(e,((s,r)=>{let n=e[r],i=t.get(this,r);if(n){let e=n.prop;i=e?t.cloneDeep(this.#t[e]):t.get(this,r)}this.#t[r]=i}))}#x=t.debounce(this.propsReady,100);_setParentProps(e,s){if(this.#m){let r=t.get(this.constructor,i.PROPS);t.each(e,((e,s)=>{let n=t.camelCase(s),i=r[n];if(!i)return;let o=this.#t[n];e=this.#A(r,n,e),i.hasChanged&&!i.hasChanged.call(this,e,o)||(this.#t[n]=e,this._notify(o,[n]))})),t.assign(this.#a,e),t.assign(this.#o,s),this.#x(this.#a)}}_updateProps(e){let s=t.get(this.constructor,i.PROPS);t.each(e,((e,r)=>{let n=t.camelCase(r);s[n]&&(e=this.#A(s,n,e),S.__skipCheck=!0,t.set(this,n,e),S.__skipCheck=!1)})),t.assign(this.#a,e),this.#x(this.#a)}_initProps(e,s){this.#a=t.merge(this.#a||{},e),this.#o=t.merge({},s)}_bindSlot(e,s,r){if(this.#f[s]||(this.#f[s]=e,Reflect.defineProperty(e,"__l_comp",{value:this})),e.addEventListener("slotchange",(t=>{this.#m&&this.#S(e,"default"===s?"":s)})),!t.isEmpty(r)){let e=this.#e[s];e||(e=this.#e[s]={}),e.props=r}}_bindSlotHook(e,t){this.#h[e]=t}#w=new Set;_updateSlot(e,t,s){let r=this.#f[e],n=this.#h[e];if(!n&&!r)return;let i=this.#e[e];if(t&&(i.props||(i.props={}),i.props[t]=s),n)this.#w.add(e);else{let e=r.assignedElements({flatten:!0});for(let r=0;r<e.length;r++){e[r].setAttribute(t,s+"")}}}#v(){const e=t.flatMap(this.childNodes,(e=>e.nodeType===Node.COMMENT_NODE?[]:e instanceof HTMLSlotElement?e.assignedNodes({flatten:!0}):e));let s=t.groupBy(e,(e=>e.nodeType===Node.TEXT_NODE?"default":e instanceof Element?e.getAttribute("slot")||"default":void 0));if(t.isEmpty(s))return void(t.isEmpty(this.#t["#slots"])||(this.#m?this.#s["#slots"]={}:this.#t["#slots"]={}));t.each(s,((e,s)=>{if(s){for(;e.length>0;){let s=e[0];if(!(s.nodeType===Node.TEXT_NODE&&t.isBlank(s.textContent)||s instanceof HTMLSlotElement&&t.isEmpty(s.assignedNodes({flatten:!0}))))break;e.shift()}for(;e.length>0;){let s=t.last(e);if(!(s.nodeType===Node.TEXT_NODE&&t.isBlank(s.textContent)||s instanceof HTMLSlotElement&&t.isEmpty(s.assignedNodes({flatten:!0}))))break;e.pop()}}}));let r={};t.each(s,((e,s)=>{t.isEmpty(e)||(r[s]=e)})),this.#m?this.#s["#slots"]=r:this.#t["#slots"]=r}#C(e){let s=this.#h[e];if(!s)return;let r=this.#e[e];if(!this.#t["#slots"][e])return;this.renderAsync(s,t.get(r,"props"));const n=this._asyncDirectives.get(s);let i=n?.buildView(s(t.get(r,"props"))),o=t.reject(t.toArray(i),(e=>e.nodeType===Node.COMMENT_NODE));if(o){let s=this.#g[e];if(!t.isEmpty(s))for(let e=0;e<s.length;e++){const t=s[e];t.parentNode?.removeChild(t)}this.#g[e]=o,this.append(...o),this.#w.clear()}}_asyncDirectives=new WeakMap;renderAsync(e,...t){}#P(e,s,r){if(!this.isMounted)return;if(C(this.constructor).has(e)){let s=t.camelCase(e);if(t.isNull(r)){r=t.get(this.constructor,i.PROPS)[s]._defaultValue}this._updateProps({[s]:r})}}_regDeps(e,t){let s=this.#i[e];s||(s=this.#i[e]=new Set),s.add(t);let r=e.split("-");if(r.pop(),r.length<1)return;let n=r.join("-");s=this.#i[n],s||(s=this.#i[n]=new Set),s.add(t)}_regWrapper(e){this.#p=e}emit(e,s={},r){r&&r.event&&(s.event=r.event),s.target=this,this.dispatchEvent(new CustomEvent(e,{bubbles:t.get(r,"bubbles",!1),composed:t.get(r,"composed",!1),cancelable:!0,detail:s}))}on(e,t){this.#N[e]||(this.#N[e]=[]);let s=t.bind(this);this.#N[e].push(s),this.addEventListener(e,s)}nextTick(e){O.pushNext(e)}forceUpdate(){t.each(this.#s,((e,t)=>{this.#r[t]={value:void 0,chain:void 0}})),this.#b()}}var H,I,W;document.head.appendChild(V.__l_globalRule),e.DirectiveUpdateTag=void 0,(H=e.DirectiveUpdateTag||(e.DirectiveUpdateTag={})).NONE="NONE",H.REMOVE="REMOVE",H.REPLACE="REPLACE",H.UPDATE="UPDATE",H.APPEND="APPEND";class ${key;varIndex;value;isText=!1;isTmpl=!1;isDirective=!1;node;textNode;isComponent=!1;attrName;attrTmpl;isProp=!1;isToggleProp=!1;isEvent;constructor(e,t,s,r){this.varIndex=e,this.node=t,s&&(this.attrName=s),r&&(this.attrTmpl=r)}}e.EnterPointType=void 0,(I=e.EnterPointType||(e.EnterPointType={})).ATTR="attr",I.PROP="prop",I.TEXT="text",I.CLASS="class",I.STYLE="style",I.SLOT="slot",I.TAG="tag";class B{startNode;endNode;type;attrName;varIndex;expressionChain;nodes;constructor(e,t,s){this.startNode=e,this.attrName=t,this.type=s}setVarIndex(e){this.varIndex=e}getNodes(){let e=this.startNode.nextSibling;if(!this.endNode)return[e];let t=[];for(;e&&e!==this.endNode;)t.push(e),e=e?.nextSibling;return t}}!function(e){e.AFTER_BEGIN="afterbegin"}(W||(W={}));class F{diClass;args;di;varPath;point;slotComponent;varChain;constructor(e,...t){this.diClass=e,this.args=t,this.varChain=S.popDirectiveQ(),this.di=new this.diClass,this.di.renderParams=this.varChain}checkScope(e){let s=t.get(this.diClass,"scopes");t.isEmpty(s)||t.test(s.join(","),e)||l(`Directive '${this.diClass.name}' is out of scopes, expect '${s.join(",")}' bug got '${e}'`)}render(e){let t=this.di;return t.renderComponent||(t.renderComponent=e),this.di=t,t._renderArgs=this.args,this.di.render(...this.args)}update(s,r,n){let i=this.di.update(s,r,n);if(i===e.DirectiveUpdateTag.NONE)return;let o=s.getNodes();if(i===e.DirectiveUpdateTag.REMOVE)for(let e=0;e<o.length;e++){const t=o[e];t.parentNode?.removeChild(t)}else if(i===e.DirectiveUpdateTag.REPLACE){let e=[];for(let e=0;e<o.length;e++){const t=o[e];t.parentNode?.removeChild(t)}let n=this.di.render(...r),i=this.di.buildView(n);e=t.toArray(i);let a=document.createDocumentFragment();a.append(...e),s.endNode.parentNode.insertBefore(a,s.endNode)}else if(i===e.DirectiveUpdateTag.UPDATE){let e,n={},i=[],a=[],c=this.di.render(...r);if(c||(c=new Ve([],[])),t.isEmpty(o)){let e=this.di.buildView(c);return void s.startNode.after(...e)}let d={};c instanceof Ve&&c.vars.forEach((e=>{if(e instanceof Ve){const t=e.getKey();d[t]=e,n[t]=!0,a.push(t)}})),o=t.filter(t.compact(o),(e=>e.nodeType===Node.ELEMENT_NODE)),e=t.filter(t.compact(t.toArray(e)),(e=>e.nodeType===Node.ELEMENT_NODE));let p={},h="",u={};for(let e=0;e<o.length;e++){let t=o[e],s=t.getAttribute("key");if(s){if(p[s]){h=s;break}p[s]=t,i.push(s),u[s]=!0}}if(h)return void l(`${t.camelCase(this.diClass.name)} - duplicate key '${h}'`);let f=n;const g=s.startNode.parentNode;let m=[],E=[];if(t.each(u,((e,s)=>{f[s]||(E.push(s),delete u[s],t.remove(i,(e=>e===s)))})),!t.isEmpty(a)){let e=-1,r=[],n=[],o=0,l=0;for(;l<a.length;l++){const c=a[l];let d=i.findIndex((e=>e===c));if(d<0){let e=a[l-1],t=e?p[e]||e:s.startNode;m.push({prevNode:t,newkey:c}),o++}else if(d>-1&&d!==l-o){if(e<0||1===Math.abs(e-d)){let e=t.last(r);r.push({nodeId:c,targetId:0===l?W.AFTER_BEGIN:e?e.nodeId:a[l-1]})}else n.push({moveGroup:r,moveIndex:l+r.length}),r=[],r.push({nodeId:c,targetId:a[l-1]});e=d}}if(r.length>0&&n.push({moveGroup:r,moveIndex:l+r.length}),n.length>0){let e=n.sort(((e,t)=>e.moveGroup.length-t.moveGroup.length));if(e.length<2){let{moveGroup:r}=e[0];if(r.length>1){let e=t.last(r).targetId;r[r.length-2].nodeId===e&&(r=t.initial(r))}r.forEach((({targetId:e,nodeId:t})=>{let r,n=p[t];e===W.AFTER_BEGIN?(r=s.startNode,r.after(n)):(r=p[e],r.after(n))}))}else{let r=t.last(e).moveIndex;1===Math.abs(e[e.length-2].moveIndex-r)&&(e=t.initial(e)),e.forEach((({moveGroup:e})=>{e.forEach((({targetId:e,nodeId:t})=>{let r,n=p[t];e===W.AFTER_BEGIN?(r=s.startNode,r.after(n)):(r=p[e],r.after(n))}))}))}}}m.length>0&&this.#k(m,d,a),m.forEach((e=>{let t=e.newkey,r=this.newNodeMap[t],n=e.prevNode;n===s.endNode?n.before(r):n===s.startNode?n.after(r):"string"==typeof n?this.newNodeMap[n].after(r):n.after(r)})),E.forEach((e=>{let t=p[e];t&&t.parentNode&&g.removeChild(t)})),this.di.__updatePoints.forEach((e=>{e.key||(e.key=e.value.tmpl.getKey());const t=a.findIndex((t=>t==e.key));e.varIndex=t})),this.di.updateView(c)}}getDirective(){return this.di}newNodeMap={};#k(e,t,s){const r=[],n=[];e.forEach((e=>{let s=e.newkey;r.push(""),n.push(t[s])})),r.push("");let i=new Ve(r,n),o=this.di.__updatePoints,a=this.di.buildView(i),l=new Map;this.di.__updatePoints.forEach(((e,t)=>{const s=e.value.tmpl.getKey();e.key=s,l.set(s,!0)})),o.forEach(((e,t)=>{const s=e.key??e.value.tmpl.getKey();l.get(s)||this.di.__updatePoints.push(e)})),a.forEach((e=>{e instanceof HTMLElement&&(this.newNodeMap[e.getAttribute("key")]=e)}))}}function z(e){return(...s)=>{let r=null;return s.forEach(((e,n)=>{if(t.isFunction(e)){let t=e;s[n]=function(...e){let s=r.di;S.startRender(s);let n=t.call(s.renderComponent,...e);return S.endRender(s.renderComponent),n}}})),r=new F(e,...s),r}}const G=["resize","outside","mutate"],K=new WeakMap,Q=[],q=[],X=[],Y=new ResizeObserver((e=>{for(const t of e){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize,s=Array.isArray(t.borderBoxSize)?t.borderBoxSize[0]:t.borderBoxSize;let r=K.get(t.target);if(r){r(new CustomEvent("resize",{bubbles:!1,cancelable:!1,detail:{borderBox:{w:s.inlineSize,h:s.blockSize},contentBox:{w:e.inlineSize,h:e.blockSize}}}),t.target)}}}));var J;!function(e){e.Child="child",e.Tree="tree",e.Attr="attr",e.Char="char"}(J||(J={}));const Z=new WeakMap,ee=new MutationObserver((e=>{for(let t=0;t<e.length;t++){const s=e[t];let r=Z.get(s.target);if(!r)return;let n={target:s.target},i=null;switch(s.type){case"subtree":n.type=J.Tree,i=r[J.Tree];break;case"childList":n.type=J.Child,n.addedNodes=s.addedNodes,n.removedNodes=s.removedNodes,i=r[J.Child];break;case"attributes":n.type=J.Attr,n.attributeName=s.attributeName,n.oldValue=s.oldValue,i=r[J.Attr];break;case"characterData":n.type=J.Char,n.oldValue=s.oldValue,i=r[J.Char]}if(i){i(new CustomEvent("mutate",{bubbles:!1,cancelable:!1,detail:n}))}}}));function te(e,s,r,n){if("resize"===e)!function(e,t){K.has(e)||(K.set(e,t),Y.observe(e))}(s,r);else if("outside"===e)switch(n[0]){case"mousedown":!function(e,t){Q.push([e,t])}(s,r);break;case"dblclick":!function(e,t){X.push([e,t])}(s,r);break;default:!function(e,t){q.push([e,t])}(s,r)}else"mutate"===e&&function(e,s,r){let n=t.includes(r,"child"),i=t.includes(r,"attr"),o=t.includes(r,"char"),a=t.includes(r,"tree"),l=Z.get(e);l||(l={},Z.set(e,l),n&&(l[J.Child]=s),i&&(l[J.Attr]=s),o&&(l[J.Char]=s),a&&(l[J.Tree]=s),ee.observe(e,{childList:n,attributes:i,characterData:o,subtree:a}))}(s,r,n)}document.addEventListener("mousedown",(e=>{let s=t.get(e.composedPath(),0,e.target);Q.forEach((([r,n])=>{if(!r.contains(s)&&!r.contains(t.closest(s,(e=>e instanceof ShadowRoot),"parentNode")?.host)){n(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:r,event:e}}),r)}}))}),!1),document.addEventListener("click",(e=>{let s=t.get(e.composedPath(),0,e.target);q.forEach((([r,n])=>{if(!r.contains(s)&&!r.contains(t.closest(s,(e=>e instanceof ShadowRoot),"parentNode")?.host)){n(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:r,event:e}}),r)}}))}),!1),document.addEventListener("dblclick",(e=>{let s=t.get(e.composedPath(),0,e.target);X.forEach((([r,n])=>{if(!r.contains(s)&&!r.contains(t.closest(s,(e=>e instanceof ShadowRoot),"parentNode")?.host)){n(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:r,event:e}}),r)}}))}),!1);const se=/,|^(debounce:.+)|(debounce$)/,re=/,|^(throttle:.+)|(throttle$)/,ne="self",ie="stop",oe="prevent",ae="once",le="left",ce="right",de="middle",pe="ctrl",he="alt",ue="shift",fe="meta",ge={esc:"escape"},me=":";function Ee(e,s,r,n){let i,o=e.split("."),a=o.shift(),l=o.includes(ae),c=s;if(i=t.find(o,(e=>se.test(e)))){let e=i.split(me);c=t.debounce(c,parseInt(e[1])||100)}if(i=t.find(o,(e=>re.test(e)))){let e=i.split(me);c=t.throttle(c,parseInt(e[1])||100)}if(l&&(c=t.once(c)),function(e){return G.includes(e)}(a))return te(a,r,c,o),c;let d=e=>{if(o.includes(oe)&&e.preventDefault(),o.includes(ie)&&e.stopPropagation(),!o.includes(ne)||e.target===e.currentTarget){if(e instanceof MouseEvent){if(o.includes(le)&&0!=e.button)return;if(o.includes(ce)&&2!=e.button)return;if(o.includes(de)&&1!=e.button)return}else if(e instanceof KeyboardEvent){if(t.remove(o,(e=>e==pe))[0]&&!e.ctrlKey)return;if(t.remove(o,(e=>e==he))[0]&&!e.altKey)return;if(t.remove(o,(e=>e==ue))[0]&&!e.shiftKey)return;if(t.remove(o,(e=>e==fe))[0]&&!e.metaKey)return;if(!t.map(o,(e=>ge[e]||e)).includes(e.key.toLowerCase()))return}c(e)}};r.addEventListener(a,d);let p=n.__events[a];return p||(p=n.__events[a]=[]),p.push([r,d]),d}const ye="@",be=".",ve="?",Te="*",_e=":",Ce="ref",Se=/<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/gims,Pe="slot-props";function Ne(e,s){let r="",n=t.concat(s.vars),i=s.strings.length-1,o=s.vars.length-1;for(let n=0;n<=i;n++){const i=s.strings[n];let a=t.get(s.vars,n,"");if(a&&a.di){let t=a.render(e);if(t instanceof Ve){let[s,r]=Ne(e,t);Reflect.defineProperty(a,"_renderVars",{value:r}),a=we+s+Ae}else a=t??ke}else if(a instanceof Ve){let[t,s]=Ne(e,a);Reflect.defineProperty(a,"_renderVars",{value:s}),a=De+t+xe}else a=n>o?"":ke;r+=i+a}let a=0;return r=r.replace(Se,((e,s)=>t.replaceAll(e,ke,(()=>ke.replace("--\x3e","")+a++)))),r=r.replace(je,"$1><").trim(),[r,n]}const we="\x3c!--c_ui-pl_di-start--\x3e",Ae="\x3c!--c_ui-pl_di-end--\x3e",De="\x3c!--c_ui-pl_tmpl-start--\x3e",xe="\x3c!--c_ui-pl_tmpl-end--\x3e",ke="\x3c!--c_ui-pl_df--\x3e",Oe="\x3c!--c_ui-pl_df",Me=/<!--c_ui-pl_df\d*(-->)?/;function Re(s,r,n,i,o){const a=document.createElement("div");a.innerHTML=r;const l=document.createNodeIterator(a,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let d,p,h=0,u=null,f=[],g=[],m=[],E=[s],y=[],b=[];for(;d=l.nextNode();)if(d instanceof HTMLElement||d instanceof SVGElement){d instanceof V?u=d:u?.contains(d)||(u=null);let r={},o=t.toArray(d.attributes);for(let a=0;a<o.length;a++){const l=o[a];let{name:p,value:f}=l;if(p===Pe){let e=d.getAttribute("name")||"default";if(u){let t=u._slotsPropMap[e];t||(t=u._slotsPropMap[e]=[]),t.push(d)}}if(t.startsWith(p,Oe)){let t=n[h];if(t instanceof F){t.checkScope(e.EnterPointType.TAG);let r=new B(d,p.substring(1),e.EnterPointType.TAG);t.point=r,t.di.slotComponent=u,t.di.renderComponent=i;let n=new $(h,d);n.isDirective=!0,n.value=t,n.isComponent=!!u,s.push(n),h++,t.di.created(r,...t.args)}d.removeAttribute(p)}else if(p[0]!==ye)if(p!==Ce)if(p[0]!==be||Me.test(f)){if(Me.test(f)){let o=n[h],a=new $(h,d,p.replace(/\.|\?|@/,""),f);if(a.isComponent=!!u,p[0]===be||p[0]===ve||p[0]===Te){if(o instanceof F){o.checkScope(e.EnterPointType.PROP);let t=new B(d,p.substring(1),e.EnterPointType.PROP);o.point=t,o.slotComponent=u,a.value=o,a.isDirective=!0,o&&o.di.created(o.point,...o.args)}else if(p[0]===ve)a.isToggleProp=!0,a.value=!!o,a.value&&d.setAttribute(p.substring(1),"");else if(p[0]===Te){a.value=o;let e=p.substring(1);const[s,r]=e.split(_e);let n=s;switch(r){case"camel":n=t.camelCase(n);break;case"kebab":n=t.kebabCase(n);break;case"snake":n=t.snakeCase(n)}a.attrName=n,d.setAttribute(n,o)}else if(d instanceof V||"SLOT"===d.tagName){let e=t.camelCase(p.substring(1));e in d||"SLOT"===d.tagName||c(d.tagName,`Prop '${p}' is not defined in ${d.tagName}`),a.value=o,a.isProp=!0,r[e]=o}else c(d.tagName,`Prop '${p}' can only be set on a CompElem or a slot`);d.removeAttribute(p),o=""}else{let s;if(a.value=o,o instanceof F){let t=e.EnterPointType.ATTR;"class"===p?t=e.EnterPointType.CLASS:"style"===p&&(t=e.EnterPointType.STYLE),o.checkScope(t),a.isDirective=!0;let r=new B(d,p,t);o.point=r,o.di.slotComponent=u,o.di.renderComponent=i,s=o,o=""}f=t.replace(f,Me,o),l.value=f,s&&s.di.created(s.point,...s.args)}s.push(a),h++}}else c(d.tagName,`Prop '${p}' must be an interpolation`);else{if(Me.test(f)){let e=n[h];if(!t.has(e,"current")){c(d.tagName,"Ref must be a RefObject");continue}h++,e.current=d}d.removeAttribute(p)}else{let e=e=>{};if(Me.test(f)){let r=n[h];if(!t.isFunction(r)){c(d.tagName,`Event '${p}' must be a function`);continue}e=r.bind(i);let o=new $(h,d,p.replace(/\.|\?|@/,""),f);o.isComponent=!!u,o.isEvent=!0,s.push(o),h++}Ee(p.substring(1),e,d,i),d.removeAttribute(p)}}d instanceof V?(d._initProps(r),d._regWrapper(i)):d instanceof HTMLSlotElement&&i._bindSlot(d,d.name||"default",r)}else{let r=d,a=`\x3c!--${r.nodeValue}--\x3e`;if(a===we){p&&f.push(p),p=r;let t=n[h],o=new $(h,d);o.isComponent=!!u,o.isDirective=!0,o.value=t;let a=u?e.EnterPointType.SLOT:e.EnterPointType.TEXT,l=new B(p,"",a);t.point=l,t.di.slotComponent=u,t.di.renderComponent=i,g.push(t),s.push(o),m.push(o),s=[],E.push(s),h++,b.push(h),y.push(n),n=t._renderVars,h=0;continue}if(a===Ae){m.pop().textNode=r;let e=g.pop();e.point.endNode=r,e.di.created(e.point,...e.args),p=f.pop(),e.di.__updatePoints=s,E.pop(),s=t.last(E),n=y.pop(),h=b.pop()}else{if(a===De){p&&f.push(p),p=r;let a=n[h],l=new $(h,d);l.isComponent=!!u,l.isTmpl=!0;let c=t.last(g);(c&&"ForEach"===t.get(c,"diClass.name")||"ForEach"==o.constructor.name)&&(l.key=a.getKey()),a=l.value=new R(a);let v=u?e.EnterPointType.SLOT:e.EnterPointType.TEXT,T=new B(p,"",v);a.point=T,a.slotComponent=u,a.renderComponent=i,g.push(a),s.push(l),m.push(l),s=[],E.push(s),h++,b.push(h),y.push(n),n=a._renderVars,h=0;continue}if(a===xe){m.pop().textNode=r;let e=g.pop();e.point.endNode=r,p=f.pop(),e.__updatePoints=s,E.pop(),s=t.last(E),n=y.pop(),h=b.pop()}}if(a!==ke)continue;let l=new $(h,d);s.push(l),l.isComponent=!!u,l.isText=!0;let c,v=n[h];if(c=document.createComment(`compelem-ui-${h}-child-start`),r.parentNode.insertBefore(c,r),r.nodeValue=`compelem-ui-${h}-child-end`,l.textNode=c,v instanceof F){l.isDirective=!0,l.value=v;let t=u?e.EnterPointType.SLOT:e.EnterPointType.TEXT,s=new B(c,"",t);s.endNode=r,v.point=s,v.di.slotComponent=u,v.di.renderComponent=i,v.di.created(s,...v.args),v=""}else if(v instanceof Ve){l.isTmpl=!0,l.value=v;let[e,t]=Ne(i,v);v=Re(s,e,t,i,o)}else l.value=v;if(h++,t.isUndefined(v))continue;if(v instanceof NodeList){let e=document.createDocumentFragment();e.append(...v),r.parentNode.insertBefore(e,r)}else if(v instanceof Element)r.parentNode.insertBefore(v,r);else if(t.trim(v)){let e=document.createTextNode(v);r.parentNode.insertBefore(e,r)}}return a.childNodes}const Le={insertBefore:function(e,t){if(!e.parentNode)return;let s=document.createDocumentFragment();s.append(...t),e.parentNode.insertBefore(s,e)},remove:function(e,t){if(e===t)return void e?.parentNode?.removeChild(e);let s=e.nextSibling;for(;s&&s!==t;)s?.parentNode?.removeChild(s),s=e.nextSibling}};function Ue(e,...s){return new Ve(t.isString(e)?[e]:e,s)}const je=/([a-z0-9"'])\s*>\s*</gim;class Ve{strings;vars;constructor(e,s){this.strings=t.concat(e),this.vars=s}getKey(){let e=this.vars,s="";return t.each(this.strings,((n,i)=>{if(r.test(n))return s=t.toString(e[i]),!1})),s}getKeys(){let e=this.vars,s=[];for(let n=0;n<this.strings.length;n++){const i=this.strings[n];if(r.test(i)){let r=t.toString(e[n]);s.push(r)}}return t.isEmpty(s)&&e.forEach((e=>{if(e instanceof Ve){let t=e.getKey();s.push(t)}})),s}append(e){let s=t.last(this.strings);return e.strings.forEach(((e,t)=>{0!=t?this.strings.push(e):this.strings[this.strings.length-1]=s+e})),this.vars=t.concat(this.vars,e.vars),this}insert(e,t){let s=t.strings.shift();return this.strings[e]+=s,this.strings.splice(e+1,0,...t.strings),this.vars.splice(e,0,...t.vars),this}getHTML(e){let[s,r]=Ne(e,this),n=Re([],s,r,e,e);return t.reduce(n,((e,t)=>e+t.outerHTML),"")}}const He=b(class extends u{static get priority(){return Number.MAX_VALUE}created(e,s,r,...n){let i=e[r];e[r]=t.debounce(i,this.wait,this.immediate);let o=Reflect.getPrototypeOf(e);o&&!t.get(o,r+"_$__")&&t.set(o,r+"_$__",i)}beforeMount(e,t,...s){}mounted(e,t,...s){}updated(e,t){}get targets(){return[e.DecoratorType.METHOD]}wait;immediate;result;constructor(e,t=!1){super(),this.wait=e,this.immediate=t}});var Ie;e.QueryCache=void 0,(Ie=e.QueryCache||(e.QueryCache={})).ONCE="once",Ie.UPDATABLE="updatable";class We extends u{static get priority(){return Number.MAX_VALUE}created(e,t,s,...r){}mounted(e,t,...s){}get targets(){return[e.DecoratorType.FIELD]}selector;cache;result;constructor(e,t){super(),this.selector=e,this.cache=t}static getKey(e){return e}getter(e){this.result=e.shadowRoot?.querySelector(this.selector)}beforeMount(e,t,s,r,...n){const i=this;Reflect.defineProperty(e,r,{get:()=>(i.result&&i.cache||i.getter(e),i.result)})}updated(t,s){this.cache===e.QueryCache.UPDATABLE&&this.getter(t)}}const $e=b(We),Be=b(class extends We{getter(e){this.result=e.shadowRoot?.querySelectorAll(this.selector)}});function Fe(e,s,r){if(!t.has(e.constructor,i.STATES)){const s={};let r=e.constructor;for(;(r=p(r))!==V;)t.merge(s,r[i.STATES]?t.cloneDeep(r[i.STATES]):{});Reflect.defineProperty(e.constructor,i.STATES,{configurable:!1,enumerable:!1,value:s})}r.shallow=r.shallow||!1,e.constructor[i.STATES][s]=r}class ze extends(M(Object)){_renderArgs;static get scopes(){return[]}renderParams}const Ge=["key"];const Ke=z(class extends ze{created(e,s){let r=e.startNode;if(r instanceof V){let e={},n={};t.each(s,((t,s)=>{Ge.includes(s)||(s in r?e[s]=t:n[s]=t+"")})),r._initProps(e,n)}else t.each(s,((e,t)=>{r.setAttribute(t,e)}))}update(t,s,r){return e.DirectiveUpdateTag.NONE}static get scopes(){return[e.EnterPointType.TAG]}render(e){}});const Qe=z(class extends ze{created(e,s){let r=[];t.isArray(s)?r=t.compact(s):t.isObject(s)?r=t.flatMap(s,((e,t)=>e?t:[])):t.isString(s)&&(r=s.split(" "));let n=e.startNode;t.each(this.lastCls,(e=>{n.classList.remove(e)})),t.each(r,(e=>{n.classList.add(e)})),this.lastCls=t.concat(r)}update(t,s,r){return this.created(t,s[0]),e.DirectiveUpdateTag.NONE}static get scopes(){return[e.EnterPointType.CLASS]}lastCls;render(e){}});const qe=z(class extends ze{created(e,...t){}update(s,r,n){if(t.isEmpty(s.getNodes())&&(!r||t.isEmpty(r[0])))return e.DirectiveUpdateTag.NONE;if(t.isMatch(this.lastAry,r[0])&&this.lastAry.length===r[0].length)return e.DirectiveUpdateTag.NONE;if(!t.isEmpty(this.renderParams)){let e=t.last(this.renderParams);t.isArray(e)||(e=[e]),this.renderParams=e}return this.lastAry=t.clone(r[0]),e.DirectiveUpdateTag.UPDATE}constructor(e){super(),t.isEmpty(this.renderParams)||(this.renderParams=t.toArray(t.last(this.renderParams)))}static get scopes(){return[e.EnterPointType.TEXT,e.EnterPointType.SLOT]}lastAry;lastRenderTmpl;render(e,s){let n=t.map(e,((e,t)=>s(e,t)));if(n.length<1)return this.lastRenderTmpl=new Ve([],[]),this.lastRenderTmpl;let i=[],o=[];const a=[],c=[];for(let e=0;e<n.length;e++){const s=n[e];let d=t.last(o),p=s.vars,h=!0,u=s.strings;for(let e=0;e<u.length;e++){const t=u[e];if(r.test(t)){let t=p[e]+"";if(i.includes(t))return void l(`forEach - duplicate key '${t}'`);i.push(t),h=!1}0==e&&d?o[o.length-1]=d+t:o.push(t)}if(h)return void l("forEach - missing 'key' prop");let f=t.last(a);f&&u.length>0&&(a[a.length-1]=t.trim(f)+u.shift()),a.push(""),c.push(s)}return this.lastAry=t.clone(e),a.push(""),this.lastRenderTmpl=new Ve(a,c),this.lastRenderTmpl}});const Xe=z(class extends ze{created(e,...t){}ifNodes;elseNodes;static get scopes(){return[e.EnterPointType.TEXT,e.EnterPointType.SLOT]}update(t,s,r){return!!s[0]==!!r[0]?e.DirectiveUpdateTag.NONE:(s[0],e.DirectiveUpdateTag.REPLACE)}render(e,t,s){return e?t(e):s(e)}});const Ye=z(class extends ze{created(e,...t){}static get scopes(){return[e.EnterPointType.TEXT,e.EnterPointType.SLOT]}update(t,s,r){return s[0]===r[0]?e.DirectiveUpdateTag.NONE:s[0]?e.DirectiveUpdateTag.REPLACE:e.DirectiveUpdateTag.REMOVE}render(e,t){return e?t():Ue``}});var Je;e.ModelTriggerType=void 0,(Je=e.ModelTriggerType||(e.ModelTriggerType={})).CHANGE="change",Je.INPUT="input";const Ze=z(class extends ze{created(e,s,r="value"){const n=e.startNode;if("binded"===t.get(n,"_model"))return;let i=t.last(this.renderParams);if(this.updateProp=r,this.modelPath=i,t.isObject(s)||t.trim(s)||(s=""),n instanceof V)n._initProps({[this.updateProp]:s}),n.addEventListener("update:"+r,(e=>{t.set(this.renderComponent,this.modelPath,e.detail.value)})),t.set(n,"_model","binded");else if(n instanceof HTMLTextAreaElement)n.setAttribute(this.updateProp,s+""),n.addEventListener("input",(e=>{let s=e.target;t.set(this.renderComponent,this.modelPath,s.value)})),t.set(n,"_model","binded");else if(n instanceof HTMLInputElement){let e="",i="";switch(n.type){case"checkbox":case"radio":e="checked",i="change";break;default:e="value",i="input"}n.setAttribute(r??e,s+""),n.addEventListener(i,(e=>{let s=e.target;t.set(this.renderComponent,this.modelPath,s.value)})),t.set(n,"_model","binded")}else n instanceof HTMLSelectElement&&(n.setAttribute(this.updateProp,s+""),n.addEventListener("change",(e=>{let s=e.target;t.set(this.renderComponent,this.modelPath,s.value)})),t.set(n,"_model","binded"))}update(s,r,n){if(this.modelPath||(this.modelPath=t.last(this.renderParams)),!t.isEqual(r,n)){const e=s.startNode;if(e instanceof V)e._updateProps({[this.updateProp]:r[0]});else if(e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement)e.setAttribute(this.updateProp,r[0]+"");else if(e instanceof HTMLInputElement)switch(e.type){case"checkbox":case"radio":r[0]?e.setAttribute("checked",""):e.removeAttribute("checked");break;default:e.setAttribute(this.updateProp,r[0]+"")}}return e.DirectiveUpdateTag.NONE}static get scopes(){return[e.EnterPointType.TAG]}modelPath;render(e,t="value"){}});const et=z(class extends ze{created(e,s,r){let n=e.startNode;t.isUndefined(this.display)&&(this.display=n.style.display);let i=r;this.renderComponent.nextTick((()=>{n.style.display=s?this.display:"none",i&&i(n,s)}))}update(t,s,r){return this.created(t,s[0],s[1]),e.DirectiveUpdateTag.NONE}display=void 0;static get scopes(){return[e.EnterPointType.TAG]}constructor(e){super(),this.point=e}render(e,t){}});const tt=z(class extends ze{created(e,t,s){t=t.bind(this.renderComponent),this.slotComponent._bindSlotHook(s||"default",t)}update(t,s,r){return e.DirectiveUpdateTag.NONE}static get scopes(){return[e.EnterPointType.SLOT]}render(e,t){}});class st{static getCssText(e,s=!1){return t.isString(e)?e:t.join(t.map(e,((e,r)=>r.startsWith("--")?r+":"+e+(s?" !important":""):t.kebabCase(r)+":"+e+(s?" !important":""))),";")}static setStyle(e,s){if(t.isString(e)&&!t.trim(e))return{};let r=st.getCssText(e),n={};return t.each(r.split(";"),(e=>{let r=e.split(":"),i=t.trim(r[0]),o=t.trim(r[1]);n[i]=s.style.getPropertyValue(i),s.style.setProperty(i,o)})),n}}const rt=z(class extends ze{created(e,t){st.setStyle(t,e.startNode)}update(t,s,r){return this.created(t,s[0]),e.DirectiveUpdateTag.NONE}constructor(e){super(),this.point=e}static get scopes(){return[e.EnterPointType.STYLE]}render(e){}});const nt=z(class extends ze{created(e,s){this.modelPath||(this.modelPath=t.last(this.renderParams));const r=e.startNode;let n=e.attrName;r._initProps({[n]:s}),r.addEventListener("update:"+n,(e=>{t.set(this.renderComponent,this.modelPath,e.detail.value)}))}update(s,r,n){if(!t.isEqual(r,n)){const e=s.startNode;let t=s.attrName;e._updateProps({[t]:r[0]})}return e.DirectiveUpdateTag.NONE}static get scopes(){return[e.EnterPointType.PROP]}modelPath;constructor(e){super()}render(e){}});const it=z(class extends ze{created(e,...t){}static get scopes(){return[e.EnterPointType.TEXT,e.EnterPointType.SLOT]}update(s,r,n){return t.isEqual(r,n)?e.DirectiveUpdateTag.NONE:e.DirectiveUpdateTag.REPLACE}render(e,s){let r=()=>Ue``,n=[],i=[];t.each(s,((e,s)=>{if(t.isFunction(e))n.push(s),i.push(e);else{let t=e[0],s=e[1];n.push(t),i.push(s)}"default"===s&&(r=e)}));let o=t.findIndex(n,(s=>t.isFunction(s)?s(e):s==e));return t.call(i[o]??r)}});e.CompElem=V,e.CssHelper=st,e.Decorator=u,e.DecoratorWrapper=E,e.Directive=ze,e.DirectiveWrapper=F,e.EnterPoint=B,e.GetKeyFnName=f,e.Template=Ve,e.UpdatePoint=$,e._DecoratorMap=m,e._DecoratorsKey=g,e._getObservedAttrs=C,e.bind=Ke,e.buildHTML=Ne,e.classes=Qe,e.computed=function(e,s,r){r.get||l(`Computed '${s}' must be a getter`),t.has(e.constructor,i.COMPUTED)||(e.constructor[i.COMPUTED]=t.isEmpty(e.constructor[i.COMPUTED])?{}:t.cloneDeep(e.constructor[i.COMPUTED])),e.constructor[i.COMPUTED][s]=r.get},e.createRef=function(e){return{current:e}},e.debounced=He,e.decorator=b,e.directive=z,e.event=function(e,s){return(r,n,o)=>{t.has(r.constructor,i.EVENTS)||(r.constructor[i.EVENTS]=t.isEmpty(r.constructor[i.EVENTS])?[]:t.cloneDeep(r.constructor[i.EVENTS])),r.constructor[i.EVENTS].push({name:e,options:s,fn:r[n]})}},e.forEach=qe,e.html=Ue,e.ifElse=Xe,e.ifTrue=Ye,e.makeState=function(e,t,s){Fe(e.prototype,t,s||{prop:""})},e.model=Ze,e.prop=function(e){if(1===arguments.length)return(t,s,r)=>{e.required=e.required||!1,e.attribute=!1!==e.attribute,T(t,s,e,r)};let s=arguments[0],r=arguments[1],n=arguments[2];e={type:void 0,required:!1,attribute:!0},n&&"function"==typeof n.type&&(e=t.defaults(n,e),n=void 0),T(s,r,e,n)},e.query=$e,e.queryAll=Be,e.show=et,e.slot=tt,e.state=function(e){if(1===arguments.length)return(t,s)=>{Fe(t,s,e)};Fe(arguments[0],arguments[1],{prop:""})},e.styles=rt,e.sync=nt,e.tag=function(e){return t=>{if(t){if(t.prototype.hasOwnProperty("attributeChangedCallback")){let e=t.prototype.attributeChangedCallback;t.prototype.attributeChangedCallback=function(t,s,r){V.prototype.attributeChangedCallback.call(this,t,s,r),e.call(this,t,s,r)}}if(t.prototype.hasOwnProperty("connectedCallback")){let e=t.prototype.connectedCallback;t.prototype.connectedCallback=function(){V.prototype.connectedCallback.call(this),e.call(this)}}if(t.prototype.hasOwnProperty("disconnectedCallback")){let e=t.prototype.disconnectedCallback;t.prototype.disconnectedCallback=function(){V.prototype.disconnectedCallback.call(this),e.call(this)}}customElements.define(e,t)}}},e.watch=function(e,s){return(r,n)=>{t.has(r.constructor,i.WATCH)||(r.constructor[i.WATCH]=t.isEmpty(r.constructor[i.WATCH])?{}:t.cloneDeep(r.constructor[i.WATCH]));(t.isArray(e)?e:[e]).forEach((e=>{let o=e.replaceAll(".","-"),a=r.constructor[i.WATCH][o];t.isArray(a)||(a=r.constructor[i.WATCH][o]=[]),a.push({source:e,options:s,handler:r[n]})}))}},e.when=it,Object.defineProperty(e,"__esModule",{value:!0})}));
+  !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("myfx")):"function"==typeof define&&define.amd?define(["exports","myfx"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).compelem={},e.myfx)}(this,(function(e,t){"use strict";const r=new WeakMap,n=/\s+\.?key\s*=/;var s,o,i,a;function l(e){console.error("[CompElem]",e)}function c(e,t){console.error(`[CompElem <${e}>]`,t)}function u(e){return t.toPath(e).join("-")}function d(e){return Object.getPrototypeOf(e)}function p(e){let r=e;return t.isString(e)&&/(?:^true$)|(?:^false$)/.test(r)?r="true"===r:(t.isUndefined(r)||t.isBlank(r))&&(r=!0),r}!function(e){e[e.CSS=1]="CSS",e[e.COMPUTED=2]="COMPUTED"}(s||(s={})),function(e){e.PROPS="__deco_props",e.STATES="__deco_states",e.COMPUTED="__deco_computed",e.WATCH="__deco_watch",e.EVENTS="__deco_events"}(o||(o={})),function(e){e.Prod="prod",e.Dev="dev"}(i||(i={})),e.DecoratorType=void 0,(a=e.DecoratorType||(e.DecoratorType={})).CLASS="class",a.FIELD="field",a.METHOD="method";class h{static get priority(){return 0}}const f="getKey",g="__decorators",m=new WeakMap;class y{args;metadata;decoratorClass;instanceMap;key;priority=0;constructor(e,r,n){this.args=e,this.metadata=r,this.decoratorClass=n,this.priority=t.get(n,"priority",0),this.instanceMap=new WeakMap}create(r){let n,s=new this.decoratorClass(...this.args),o=s.targets,i=this.metadata[2];t.isObject(i)&&t.isDefined(t.get(i,"configurable"))?n=e.DecoratorType.METHOD:t.isUndefined(this.metadata[2])&&(n=e.DecoratorType.FIELD),!t.isEmpty(o)&&n&&o.includes(n)?(s.created(r,...this.metadata),this.instanceMap.set(r,s)):l(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${o.join(",")}' bug got '${n}'`)}beforeMount(e,t){this.instanceMap.get(e).beforeMount(e,t,...this.metadata)}mounted(e,t){this.instanceMap.get(e).mounted(e,t,...this.metadata)}updated(e,t){this.instanceMap.get(e).updated(e,t)}}const v=new WeakMap;function E(e){let r=(...r)=>(...n)=>{let s=n[0].constructor,o=s[g];if(!t.has(s,g)){let e=Object.getPrototypeOf(s);o=e?t.concat(e[g]??[]):[],Reflect.defineProperty(s,g,{configurable:!1,enumerable:!1,value:o})}let i,a={},l=e[f];if(l){let t=v.get(e);if(t||(t=new WeakMap,v.set(e,t)),a=t.get(s),a||(a={},t.set(s,a)),i=l(...r),a[i])return a[i]}let c=new y(r,n,e);return a[i]=c,o?.push(c),c};return m.set(r,!0),r}const b=new WeakMap;function T(e,r,n,s){let i;if(t.isLowerCaseChar(r[0])||l(`Prop '${r}' must be in CamelCase`),!t.has(e.constructor,o.PROPS)){const r={};let n=e.constructor;for(;(n=d(n))!==j;)t.merge(r,n[o.PROPS]?t.cloneDeep(n[o.PROPS]):{});Reflect.defineProperty(e.constructor,o.PROPS,{configurable:!1,enumerable:!1,value:r}),i=new Set,t.each(r,((e,r)=>{if(e.attribute){let e=t.kebabCase(r);i?.add(e)}})),b.set(e.constructor,i)}if(s&&(s.get&&(n.getter=s.get),s.set&&(n.setter=s.set)),n.attribute){i||(i=b.get(e.constructor));let n=t.kebabCase(r);i?.add(n)}t.has(e.constructor,"observedAttributes")||(e.constructor.observedAttributes=[]),e.constructor.observedAttributes=t.toArray(i),n.shallow=n.shallow||!1,e.constructor[o.PROPS][r]=n}const S=new Set;function N(e){return b.get(e)??S}const C={collectWatch(e,t,r){let n=k.get(e);n||(n={},k.set(e,n));let s=n[r];s||(s=n[r]=[]),s.push(t)},startCollect(e,t){this.__collectType=t,this.__collecting=e},setUpdater(e){this.__updater=e},endCollect(){this.__collecting=null},__directiveQ:[],setDirectiveQ(e){let r=t.last(this.__directiveQ);const n=e?e.join(","):"",s=r?r.join(","):"";r&&n===s||(r&&r.length<e.length&&t.startsWith(n,s)?this.__directiveQ[this.__directiveQ.length-1]=e:this.__directiveQ.push(e))},popDirectiveQ(){let e=t.concat(this.__directiveQ);return this.__directiveQ=[],e},startRender(e){this.__renderCollecting=!0,this.__renderContext=e},endRender(e){this.__renderCollection.forEach((t=>{e._regDeps(t,this.__renderContext)})),this.__renderCollection.clear(),this.__renderCollecting=!1,this.__renderContext=null},collect(e){this.__renderCollection.add(e)},clear(){this.__directiveQ=[]},__updater:null,__collecting:null,__collectType:-1,__renderCollection:new Set,__renderContext:null,__renderCollecting:!1,__skipCheck:!1},_=new WeakMap,P=new WeakMap,A=new WeakMap,D=new WeakMap,k=new WeakMap,w=new WeakSet;function M(e,n){if(!t.isObject(e))return e;const i=w.has(e)?e:new Proxy(e,{get(e,r,n){if(!r)return;const o=Reflect.get(e,r,n);if("string"!=typeof r&&"number"!=typeof r)return o;let i=r in e;if((C.__renderCollecting||C.__collecting)&&(i&&e.hasOwnProperty(r)||!i)){let e=P.get(n)??[],o=t.concat(e,[r]),i=o.join("-");if(C.__renderCollecting)C.collect(u(o)),C.setDirectiveQ(o);else if(C.__collecting){let e;switch(C.__collectType){case s.COMPUTED:e=A.get(C.__collecting),e||(e={},A.set(C.__collecting,e));break;case s.CSS:e=D.get(C.__collecting),e||(e={},D.set(C.__collecting,e))}let t=e[i];t||(t=e[i]=[]),t.push(C.__updater)}}return o},set(e,n,s,i){if(!n)return!1;let a=e[n];if(!t.isObject(a)&&a===s)return!0;if(Number.isNaN(s)&&Number.isNaN(a))return!0;let l=P.get(i)??[],c=t.concat(l,[n]),u=_.get(i).from,d=t.get(u.constructor,o.PROPS),p=t.get(u.constructor,o.STATES),h=t.get(d,[c[0],"hasChanged"])||t.get(p,[c[0],"hasChanged"]);if(h){if(!h.call(u,s,a))return!0}else if(a===s&&!r.has(a))return!0;d&&d[n]&&e.__isData&&d[n].sync&&u.emit("update:"+n,{value:s});let f=_.get(i)?.contextSet,g=s;!t.isObject(s)||t.isFunction(s)||s instanceof Node||Object.isFrozen(s)||f.forEach((e=>{let r=_.get(i)?.pathMap,s=r?.get(e);s&&(c=t.concat(s,[n]),P.set(g,c),g=M(g,e),w.add(g),P.set(g,c))}));let m=Reflect.set(e,n,g),y=_.get(i).pathMap;return f.forEach((e=>{let r=y.get(e);if(!r)return;e===u&&l.length>1&&r.length>1&&l[0]===r[0]&&(r=l),c=t.concat(r,"length"==n&&t.isArray(i)?[]:[n]);let s=A.get(e),o=D.get(e),d=k.get(e);if(s||o||d){let e=c.length;for(;e;){let r=c.slice(0,e).join("-");if(d){const n=d[r];e===c.length?n?.forEach((e=>{let t=e();t.ov=a,O.pushWatch(t)})):n?.forEach((e=>{let r=e();t.get(r,"deep")&&(r.ov=a,O.pushWatch(r))}))}if(s){let e=s[r];if(!t.isEmpty(e))for(let t=0;t<e.length;t++){const r=e[t];O.pushComputed(r)}}if(o){let e=o[r];if(!t.isEmpty(e))for(let t=0;t<e.length;t++){const r=e[t];O.pushCss(r)}}e--}}let p=e._notify(a,c);O.pushNext(p,e.cid)})),m}});w.has(i)||w.add(i);let a=P.get(e)??[];if(Object.isExtensible(e)&&!_.get(i)){let e=new Set;e.add(n);let t=new WeakMap;t.set(n,a),_.set(i,{from:n,contextSet:e,pathMap:t})}else{_.get(i).contextSet.add(n);let e=_.get(i).pathMap,r=e.get(n),s=t.concat(a);if(r&&r.join("")!==s.join("")){let e=t.get(n,t.initial(r));t.isArray(e)||function(...e){console.warn("[CompElem]",...e)}(`The object is referenced by more than one @state '${s.join(".")},${r.join(".")}'`),r=s}else e.set(n,s)}let l=t.get(n.constructor,o.PROPS),c=t.get(n.constructor,o.STATES);for(let r in e){const s=e[r];let o=t.get(l,[r,"shallow"])||t.get(c,[r,"shallow"]);!t.isObject(s)||w.has(s)||t.isFunction(s)||s instanceof Node||Object.isFrozen(s)||o||(P.set(s,t.concat(a,[r])),e[r]=M(s,n),w.add(e[r]),P.set(e[r],t.concat(a,[r])))}return i}const x=new Map;class O{static watchSet=new Set;static computedSet=new Set;static cssSet=new Set;static nextSet=new Set;static nextPending=!1;static next;static flush(){O.nextPending=!1;let e=Array.from(O.watchSet);O.watchSet.clear();let r=Array.from(O.computedSet);O.computedSet.clear();let n=Array.from(O.cssSet);O.cssSet.clear();let s=Array.from(O.nextSet);O.nextSet.clear(),e.forEach((e=>e(t.get(e,"ov")))),r.forEach((e=>e())),n.forEach((e=>e())),s.forEach((e=>e())),x.clear()}static pushWatch(e){O.watchSet.add(e)}static pushComputed(e){O.computedSet.add(e)}static pushCss(e){O.cssSet.add(e)}static pushNext(e,t){if(t){if(x.has(t))return;x.set(t,e)}O.nextSet.add(e),O.nextPending||(O.nextPending=!0,O.next())}}(()=>{const e=Promise.resolve(),t=O.flush;O.next=()=>{e.then(t)}})();const R={boolean:Boolean,string:String,number:Number,object:Object,array:Array,function:Function,undefined:Object},L=new WeakMap;let U=[],W=0;const H=new Map;class j extends HTMLElement{static __l_globalRule=document.createElement("style");static defaults(e){U=t.flatMap(e.css,(e=>{if(t.isString(e)){let t=new CSSStyleSheet;return t.replaceSync(e),t}return e instanceof CSSStyleSheet?e:[]})),e.global,t.each(e,((e,r)=>{t.test(r[0],/[A-Z]/)}))}#e;#t={};#r={"#slots":{}};#n={};#s={};#o;#i={};__events={};get[Symbol.toStringTag](){return this.constructor.name}get cid(){return this.#e}get reactiveData(){return this.#n}get attrs(){return this.#a}get props(){return this.#l}get renderRoot(){return this.#c}get renderRoots(){return this.#u}get parentComponent(){return this.#d}get wrapperComponent(){return this.#p}get slotHooks(){return this.#h}get css(){return L.get(this.constructor)}get globalStyleSheet(){return H.get(this.constructor)?.sheet}get isMounted(){return this.#f}get slots(){return this.#r["#slots"]}#a;#l;#c;#u;#d;#p;#g={};#h={};#m={};#f=!1;static get styles(){return[]}static get globalStyles(){return[]}get styles(){return[]}#y=!1;#v=!1;constructor(...e){super(),this.#e=W++,1===t.size(e)&&(this.#l={},t.assign(this.#l,t.first(e)));let r=this.render.bind(this);this.render=function(){let e;return C.startRender(this),e=r(),C.endRender(this),e};let n=t.get(this.constructor,"globalStyles"),s=H.has(this.constructor);if(!t.isEmpty(n)&&!s){let e="";n.forEach((r=>{t.isString(r)&&(e+=r+"\n")}));let r=document.createElement("style");r.textContent+=e,H.set(this.constructor,r),document.head.appendChild(r)}let o=L.get(this.constructor),i=o??[];o||(t.each(t.get(this.constructor,"styles"),(e=>{if(t.isString(e)){let t=new CSSStyleSheet;t.replaceSync(e),i.push(t)}else i.push(e)})),L.set(this.constructor,i)),this.#o=this.attachShadow({mode:"open"}),this.#o.adoptedStyleSheets=[...U,...i],this.#E();let a=t.get(this.constructor,g);a&&a.sort(((e,t)=>t.priority-e.priority)).forEach((e=>e.create(this))),this.#b=this.#T.bind(this)}#b;connectedCallback(){let e=t.closest(this.parentNode,(e=>e instanceof j||e.host instanceof j),"parentNode");this.#d=e?e instanceof j?e:e.host:null,this.__init()}disconnectedCallback(){}__init(){if(this.#y)return;if(this.#v)return;this.#v=!0;const e=this.#S();this.propsReady(e);for(const t in e){const r=e[t];this.#r[t]=r}this.#N(),t.each(this.#r,((e,t)=>{let r=Reflect.getOwnPropertyDescriptor(this.#r,t);Reflect.defineProperty(this,t,{get(){let e=Reflect.get(this.#n,t);return r?.get?r?.get():e},set(e){r?.set?r?.set(e):Reflect.set(this.#n,t,e)}})})),Reflect.defineProperty(this.#r,"__isData",{enumerable:!1,value:!0}),this.#n=M(this.#r,this);let r=t.get(this.constructor,o.COMPUTED);t.each(r,((e,t)=>{C.startCollect(this,s.COMPUTED),C.setUpdater((()=>{this.#n[t]=e.call(this)})),this.#r[t]=e.call(this),C.endCollect(),Reflect.defineProperty(this,t,{get(){return Reflect.get(this.#n,t)},set(e){c(this.tagName,"Cannot set a computed property '"+t+"'")}})}));let n=t.get(this.constructor,o.WATCH);t.each(n,((e,r)=>{e.forEach((e=>{let{source:n,options:s,handler:o}=e,i=o.bind(this);t.get(s,"once",!1)&&(i=t.once(i));const a=function(e){let r=t.get(this,n.replaceAll("-","."));i(r,e,n)}.bind(this);let l=t.get(s,"deep",!1);if(a.deep=l,C.collectWatch(this,(()=>a),r),!t.get(s,"immediate",!1))return;let c=t.get(this,n.replaceAll("-","."));i(c,c,n)}))}));let i=function(e,r){let n,s=[];if(Me.has(r.constructor)){let o=Me.get(r.constructor),i=function(e,r){let n=t.concat(r.vars),s=r.strings.length-1;for(let o=0;o<=s;o++){let s=t.get(r.vars,o,"");if(s instanceof Je){let[t,r]=Ve(e,s);n.splice(o,1,...r)}}return n}(r,e);n=xe.has(r.constructor)?function(e,r,n){let s=xe.get(n.constructor)?.cloneNode(!0),o=Oe.get(n.constructor);const i=document.createNodeIterator(s,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let a,l,c=0,u=0;for(;a=i.nextNode();){let s;if(u++,l&&!l.contains(a)&&(l=void 0),a instanceof HTMLElement||a instanceof SVGElement){a instanceof j&&(l=a);let i={};o[u].forEach((o=>{let u=r[c++];switch(o.type){case Re.Event:s=t.clone(o.up),o.value||c--,be(o.name,u.bind(n),a,n),a.removeAttribute(o.attrName);break;case Re.AttrSlot:l&&o.name,a.removeAttribute(o.attrName);break;case Re.Ref:s=t.clone(o.up),u.current=a,a.removeAttribute(o.attrName);break;case Re.AttrKey:s=t.clone(o.up),a.setAttribute(Ae,u);break;case Re.AttrBool:s=t.clone(o.up),s.value=!!u,s.node=a,s.value&&a.setAttribute(o.name,""),a.removeAttribute(o.attrName);break;case Re.AttrProp:s=t.clone(o.up),s.value=u,s.node=a,i[o.name]=u;break;case Re.AttrRef:case Re.Attr:s=t.clone(o.up),s.value=u,s.node=a,a.setAttribute(o.attrName,u),Re.AttrRef===o.type&&a.removeAttribute(o.name);break;case Re.DirectiveAttr:case Re.DirectiveTag:case Re.DirectiveProp:s=t.clone(o.up),s.value=u,s.node=a;let e=t.clone(o.point);e.startNode=a;let[r,d,p,h,f]=u,g=Ie.get(a);if(g||(g={},Ie.set(a,g)),g[o.attrName??Symbol.keyFor(r)]=[e,n,l],p(e,d,void 0,{renderComponent:n,slotComponent:l,varChain:f}),Re.DirectiveAttr===o.type){let e=a.getAttribute(o.attrName);e=t.replace(e,Fe,""),a.setAttribute(o.attrName,e)}o.name&&a.removeAttribute(o.name)}s&&e.push(s)})),a instanceof j?(a._initProps(i),a._regWrapper(n)):a instanceof HTMLSlotElement&&n._bindSlot(a,a.name||"default",i)}else{o[u].forEach((o=>{let i=r[c++];switch(o.type){case Re.DirectiveSlot:case Re.DirectiveText:s=t.clone(o.up),s.value=i,s.node=a;let[e,r,c,u,d]=i,p=Symbol.keyFor(e),h=document.createComment(`compelem-${n.tagName}-${p}-start`);s.textNode=h,a.parentNode.insertBefore(h,a),a.nodeValue=`compelem-${n.tagName}-${p}-end`;let f=t.clone(o.point);f.startNode=h,f.endNode=a,He.set(a,[f,n,l,r,d]),We.set(a,c),je.set(a,s),C.startRender(a);let g=c(f,r,void 0,{renderComponent:n,slotComponent:l,varChain:d});C.endRender(n);let m=Ge(a,g[1],n);m&&m.length>0&&qe.insertBefore(a,Array.from(m));break;case Re.Text:s=t.clone(o.up),s.node=a;let y=t.toString(i??""),v=document.createTextNode(y);a.replaceWith(v),s.textNode=v}s&&e.push(s)}))}}return s.childNodes}(s,i,r):ze(s,o,i,r)}else{let[t,o]=Ve(r,e);Me.set(r.constructor,t),n=ze(s,t,o,r)}return Le.set(r,s),n}(this.render(),this);i&&(this.#o.append(...i),this.#u=t.filter(this.#o.childNodes,(e=>e.nodeType===Node.ELEMENT_NODE)),this.#c=this.#u[0]),t.each(this.#h,((e,t)=>{this.#C(t)}));const a=this;let l=t.get(this.constructor,g);l&&l.sort(((e,t)=>t.priority-e.priority)).forEach((e=>{e.beforeMount(this,((e,t)=>(a.#n[e]=t,a.#n[e])))})),this.beforeMount();let u=t.get(this.constructor,o.EVENTS);u&&u.forEach((async e=>{let r=e.name,n=t.assign({target:document,once:!1,passive:!1,capture:!1},e.options),s=t.bind(e.fn,this),o=n.target;t.isFunction(o)&&(o=await o.call(this,this)),o?o.addEventListener(r,s,n):c(this.tagName,"The target of @event('"+r+"',...) is invalid")})),C.startCollect(this,s.CSS);let d=[];this.styles.forEach((e=>{if(!t.isFunction(e))return;let r=new CSSStyleSheet;d.push(r),C.setUpdater((()=>{let t=e()??"";r.replaceSync(t)}));let n=e();t.isBlank(n)||r.replaceSync(n)})),C.endCollect(),d.length>0&&(this.#o.adoptedStyleSheets=[...this.#o.adoptedStyleSheets,...d]),setTimeout((()=>{this.#f=!0,this.mounted(),l&&l.forEach((e=>{e.mounted(this,((e,t)=>(a.#n[e]=t,a.#n[e])))}))}),0),this.#y=!0}propsReady(e){}render(){throw Error(`[CompElem <${this.tagName}>] Missing render()`)}beforeMount(){}mounted(){}#_(e,r){this.#E();let n=t.get(this.#t[r],"props");n&&t.each(this.slots,((e,r)=>{e.filter((e=>e.nodeType===Node.ELEMENT_NODE)).forEach((e=>{e instanceof j?e._updateProps(n):t.each(n,((r,n)=>{if(e instanceof HTMLSlotElement){let s=t.get(e,"__l_comp");if(s){let t=e.name||"default",o=s.#t[t];o||(o=s.#t[t]={props:{}}),o.props||(o.props={}),o.props[n]=r,s.#_(e,t)}}else e.setAttribute(n,r)}))}))})),this.slotChange(e,r)}slotChange(e,t){}attributeChangedCallback(e,t,r){this.#P(e,t,r)}shouldUpdate(e){return!0}updated(e){}#A={};_notify(e,n){let s=[];for(let o=0;o<n.length;o++){const i=n[o];s.push(i);let a=t.get(this,s),l=u(s);this.#s[l]={value:a,chain:"slots"===l?["slots"]:s,oldValue:e,end:s.length===n.length},t.isObject(a)&&"#"!=l[0]&&r.set(a,l)}return this.#b}#T(){if(t.size(this.#s)<1)return;const e=this.#s;this.#s={};let n=t.get(this.constructor,g);if(n&&n.sort(((e,t)=>t.priority-e.priority)).forEach((t=>{t.updated(this,e)})),!this.shouldUpdate(e))return;let s=new Set;t.each(e,(({value:e,chain:t,oldValue:r},n)=>{this.#i[n]&&this.#i[n].forEach((e=>{s.add(e)}))})),s.forEach((e=>{e===this?Ke(this.render(),this):Qe(e,this)})),this.#D.forEach((e=>{this.#C(e)})),this.updated(e),t.each(e,(({value:e,chain:n,oldValue:s},o)=>{t.isObject(e)&&r.has(e)&&r.delete(e)}))}#S(){let e=t.get(this.constructor,o.PROPS),r=this.attributes,n=this.tagName,s=this.#l,i={};t.each(r,(({name:r,value:n})=>{if(r[0]===Te||r[0]===Se||r[0]===Ne||r===Pe||"slot"===r)return;let s=t.camelCase(r);e&&!e[s]&&(i[r]=n)})),this.#a=this.#a?t.assign(this.#a,i):i;let a={};if(!e)return Object.seal(a);let l=Object.keys(e),u=l.length;for(let o=0;o<u;o++){const i=l[o];let u,h=e[i],f=t.has(s,i),g=t.get(this,i);if(!("_defaultValue"in h)&&(h._defaultValue=g,!h.type)){t.isUndefined(g)&&c(n,"Prop '"+i+"' has neither propType nor defaultValue be used for type inference");let e=typeof g;t.isArray(g)&&(e="array");let r=R[e];h.type=r}if(f)u=t.isNil(s[i])?g:s[i];else{u=g;let e=r.getNamedItem(t.kebabCase(i))||r.getNamedItem(Se+t.kebabCase(i));e&&(f=!0,u=e.value)}if(h.required&&!f){c(n,"Prop '"+i+"' is required");break}u=this.#k(e,i,u);let m=t.get(e,[i,"getter"]);m&&(m=t.bind(m,this));let y=t.get(e,[i,"setter"]);if(y&&(y=t.bind(y,this)),(m||y)&&Reflect.defineProperty(this.#r,i,{set:y||function(e){},get:m}),h.attribute&&t.isDefined(u)&&!t.isObject(u)){let e=t.kebabCase(i),r=t.trim(u);(d=h.type)===Boolean||t.some(d,(e=>e===Boolean))?(r=p(u),t.isBoolean(r)?this.toggleAttribute(e,r):this.setAttribute(e,r)):this.setAttribute(e,r)}this.#r[i]=u,a[i]=u}var d;return Object.seal(a)}#w(e,r){let n=e;try{for(let s=0;s<r.length;s++){const o=r[s];n=o===Boolean?p(e):o===Number?Number(e):o===String?String(e):o===Object||o===Array?t.parseJSON(e):o===Date?new Date(e):new o(e)}}catch(t){c(this.tagName,"Convert attribute error with "+e)}return n}#k(e,r,n){let s=e[r];if(!s)return n;let o=s.isValid,i=s.type,a=t.isArray(i)?i:[i],l=s.converter,u=n;if(!t.some(a,(e=>e===String))&&t.isString(u)&&!t.isNull(u))try{u=l?l(u):this.#w(u,a)}catch(e){c(this.tagName,`Convert attribute '${r}' error with `+u)}for(let e=0;e<a.length;e++){"Boolean"===a[e].name&&(u=p(u))}let d=typeof u,h=!t.isDefined(u);for(let e=0;e<a.length;e++){const r=a[e];if(t.test(d,r.name,"i")||u instanceof r||Object.prototype.toString.call(u)===Object.prototype.toString.call(r.prototype)){h=!0;break}}return h||c(this.tagName,`Invalid prop '${r}'. expected '${a.map((e=>e.name||e))}' but got '${d}'`),o&&(o.call(this,u,this.#r)||c(this.tagName,`Invalid prop '${r}'. IsValid() check failed`)),u}#N(){let e=t.get(this.constructor,o.STATES);t.each(e,((r,n)=>{let s=e[n],o=t.get(this,n);if(s){let e=s.prop;o=e?t.cloneDeep(this.#r[e]):t.get(this,n)}this.#r[n]=o}))}#M=t.debounce(this.propsReady,100);_setParentProps(e,r){if(this.#y){let n=t.get(this.constructor,o.PROPS);t.each(e,((e,r)=>{let s=t.camelCase(r),o=n[s];if(!o)return;let i=this.#r[s];e=this.#k(n,s,e),o.hasChanged&&!o.hasChanged.call(this,e,i)||(this.#r[s]=e,this._notify(i,[s]))})),t.assign(this.#l,e),t.assign(this.#a,r),this.#M(this.#l)}}_updateProps(e){let r=t.get(this.constructor,o.PROPS);t.each(e,((e,n)=>{let s=t.camelCase(n);r[s]&&(e=this.#k(r,s,e),C.__skipCheck=!0,t.set(this,s,e),C.__skipCheck=!1)})),t.assign(this.#l,e),this.#M(this.#l)}_initProps(e,r){this.#l=t.merge(this.#l||{},e),this.#a=t.merge({},r)}_bindSlot(e,r,n){if(this.#g[r]||(this.#g[r]=e,Reflect.defineProperty(e,"__l_comp",{value:this})),e.addEventListener("slotchange",(t=>{this.#y&&this.#_(e,"default"===r?"":r)})),!t.isEmpty(n)){let e=this.#t[r];e||(e=this.#t[r]={}),e.props=n}}_bindSlotHook(e,t){this.#h[e]=t}#D=new Set;_updateSlot(e,t,r){let n=this.#g[e],s=this.#h[e];if(!s&&!n)return;let o=this.#t[e];if(t&&(o.props||(o.props={}),o.props[t]=r),s)this.#D.add(e);else{let e=n.assignedElements({flatten:!0});for(let n=0;n<e.length;n++){e[n].setAttribute(t,r+"")}}}#E(){const e=t.flatMap(this.childNodes,(e=>e.nodeType===Node.COMMENT_NODE?[]:e instanceof HTMLSlotElement?e.assignedNodes({flatten:!0}):e));let r=t.groupBy(e,(e=>e.nodeType===Node.TEXT_NODE?"default":e instanceof Element?e.getAttribute("slot")||"default":void 0));if(t.isEmpty(r))return void(t.isEmpty(this.#r["#slots"])||(this.#y?this.#n["#slots"]={}:this.#r["#slots"]={}));t.each(r,((e,r)=>{if(r){for(;e.length>0;){let r=e[0];if(!(r.nodeType===Node.TEXT_NODE&&t.isBlank(r.textContent)||r instanceof HTMLSlotElement&&t.isEmpty(r.assignedNodes({flatten:!0}))))break;e.shift()}for(;e.length>0;){let r=t.last(e);if(!(r.nodeType===Node.TEXT_NODE&&t.isBlank(r.textContent)||r instanceof HTMLSlotElement&&t.isEmpty(r.assignedNodes({flatten:!0}))))break;e.pop()}}}));let n={};t.each(r,((e,r)=>{t.isEmpty(e)||(n[r]=e)})),this.#y?this.#n["#slots"]=n:this.#r["#slots"]=n}#C(e){let r=this.#h[e];if(!r)return;let n=this.#t[e];if(!this.#r["#slots"][e])return;this.renderAsync(r,t.get(n,"props"));const s=this._asyncDirectives.get(r);let o=s?.buildView(r(t.get(n,"props"))),i=t.reject(t.toArray(o),(e=>e.nodeType===Node.COMMENT_NODE));if(i){let r=this.#m[e];if(!t.isEmpty(r))for(let e=0;e<r.length;e++){const t=r[e];t.parentNode?.removeChild(t)}this.#m[e]=i,this.append(...i),this.#D.clear()}}_asyncDirectives=new WeakMap;renderAsync(e,...t){}#P(e,r,n){if(!this.isMounted)return;if(N(this.constructor).has(e)){let r=t.camelCase(e);if(t.isNull(n)){n=t.get(this.constructor,o.PROPS)[r]._defaultValue}this._updateProps({[r]:n})}}_regDeps(e,t){let r=this.#i[e];r||(r=this.#i[e]=new Set),r.add(t);let n=e.split("-");if(n.pop(),n.length<1)return;let s=n.join("-");r=this.#i[s],r||(r=this.#i[s]=new Set),r.add(t)}_regWrapper(e){this.#p=e}emit(e,r={},n){n&&n.event&&(r.event=n.event),r.target=this,this.dispatchEvent(new CustomEvent(e,{bubbles:t.get(n,"bubbles",!1),composed:t.get(n,"composed",!1),cancelable:!0,detail:r}))}on(e,t){this.#A[e]||(this.#A[e]=[]);let r=t.bind(this);this.#A[e].push(r),this.addEventListener(e,r)}nextTick(e,t){O.pushNext(e,t)}forceUpdate(){t.each(this.#n,((e,t)=>{this.#s[t]={value:void 0,chain:void 0}})),this.#T()}}var I,V,$;e.EnterPointType=void 0,(I=e.EnterPointType||(e.EnterPointType={})).ATTR="attr",I.PROP="prop",I.TEXT="text",I.CLASS="class",I.STYLE="style",I.SLOT="slot",I.TAG="tag",e.DirectiveUpdateTag=void 0,(V=e.DirectiveUpdateTag||(e.DirectiveUpdateTag={})).NONE="NONE",V.REMOVE="REMOVE",V.REPLACE="REPLACE",V.UPDATE="UPDATE",V.APPEND="APPEND";class B{key;varIndex;value;isText=!1;isDirective=!1;node;textNode;isComponent=!1;attrName;attrTmpl;isProp=!1;isToggleProp=!1;notUpdated;constructor(e,t,r,n){this.varIndex=e,this.node=t,r&&(this.attrName=r),n&&(this.attrTmpl=n)}}class F{startNode;endNode;type;attrName;varIndex;expressionChain;nodes;constructor(e,t,r){this.startNode=e,this.attrName=t,this.type=r}setVarIndex(e){this.varIndex=e}getNodes(){let e=this.startNode.nextSibling;if(!this.endNode)return[e];let t=[];for(;e&&e!==this.endNode;)t.push(e),e=e?.nextSibling;return t}}!function(e){e.AFTER_BEGIN="afterbegin"}($||($={}));const z={};function G(r,n,s,o,i,a,c,u=!1){let d;if(u?(C.startRender(r.endNode),d=o(r,n,s,{renderComponent:i,slotComponent:a,varChain:c}),C.endRender(i)):d=o(r,n,s,{renderComponent:i,slotComponent:a,varChain:c}),!d)return;let[p,h]=d;if(p===e.DirectiveUpdateTag.NONE)return;let f=r.getNodes();if(p===e.DirectiveUpdateTag.REMOVE)for(let e=0;e<f.length;e++){const t=f[e];t.parentNode?.removeChild(t)}else if(p===e.DirectiveUpdateTag.REPLACE){let e=[];for(let e=0;e<f.length;e++){const t=f[e];t.parentNode?.removeChild(t)}let n=Ge(r.endNode,h,i);e=t.toArray(n);let s=document.createDocumentFragment();s.append(...e),r.endNode.parentNode.insertBefore(s,r.endNode)}else if(p===e.DirectiveUpdateTag.UPDATE){let e,n={},s=[],o=[],a=Ue.get(r.endNode);if(h||(h=new Je([],[])),t.isEmpty(f)){let e=Ge(r.endNode,h,i);return void r.startNode.after(...e)}let c={};h instanceof Je&&h.vars.forEach((e=>{if(e instanceof Je){const t=e.getKey();c[t]=e,n[t]=!0,o.push(t)}})),f=t.filter(t.compact(f),(e=>e.nodeType===Node.ELEMENT_NODE)),e=t.filter(t.compact(t.toArray(e)),(e=>e.nodeType===Node.ELEMENT_NODE));let u={},d="",p={};for(let e=0;e<f.length;e++){let t=f[e],r=t.getAttribute("key");if(r){if(u[r]){d=r;break}u[r]=t,s.push(r),p[r]=!0}}if(d)return void l(`${t.camelCase(r.endNode._diName)} - duplicate key '${d}'`);let g=n;const m=r.startNode.parentNode;let y=[],v=[];t.each(p,((e,r)=>{g[r]||(v.push(r),delete p[r],t.remove(s,(e=>e===r)))}));let E,b=!1;if(!t.isEmpty(o)){let e=-1,n=[],i=[],a=0,l=0;for(;l<o.length;l++){const c=o[l];let d=s.findIndex((e=>e===c));if(d<0){let e=o[l-1],t=e?u[e]||e:r.startNode;y.push({prevNode:t,newkey:c}),a++}else if(d>-1&&d!==l-a){if(e<0||1===Math.abs(e-d)){let e=t.last(n);n.push({nodeId:c,targetId:0===l?$.AFTER_BEGIN:e?e.nodeId:o[l-1]})}else i.push({moveGroup:n,moveIndex:l+n.length}),n=[],n.push({nodeId:c,targetId:o[l-1]});e=d}}if(n.length>0&&i.push({moveGroup:n,moveIndex:l+n.length}),i.length>0){b=!0;let e=i.sort(((e,t)=>e.moveGroup.length-t.moveGroup.length));if(e.length<2){let{moveGroup:n}=e[0];if(n.length>1){let e=t.last(n).targetId;n[n.length-2].nodeId===e&&(n=t.initial(n))}n.forEach((({targetId:e,nodeId:t})=>{let n,s=u[t];e===$.AFTER_BEGIN?(n=r.startNode,n.after(s)):(n=u[e],n.after(s))}))}else{let n=t.last(e).moveIndex;1===Math.abs(e[e.length-2].moveIndex-n)&&(e=t.initial(e)),e.forEach((({moveGroup:e})=>{e.forEach((({targetId:e,nodeId:t})=>{let n,s=u[t];e===$.AFTER_BEGIN?(n=r.startNode,n.after(s)):(n=u[e],n.after(s))}))}))}}}if(y.length>0&&(E=function(e,r,n,s,o,i){const a=[],l=[],c=[];let u,d=[];e.forEach((e=>{let n=t.last(d);n&&u===e.prevNode?(n.group||(n.group=[u]),n.group.push(e.newkey)):d.push(e),u=e.newkey;let s=e.newkey;c.push(s),a.push(""),l.push(r[s])})),a.push("");let p=new Je(a,l),h=[...o],f=Ge(i,p,s),g=Ue.get(i);o.length=0,o.push(...g);let m=new Map;return f.forEach((e=>{const t=e.getAttribute("key");c.includes(t)&&(m.set(t,!0),z[t]=e)})),h.forEach(((e,t)=>{const r=e.key+"";!m.get(r)&&n.includes(r)&&o.push(e)})),d}(y,c,o,i,a,r.endNode),E.forEach(((e,n)=>{let s=e.newkey,o=z[s],i=e.prevNode;if(e.group){let r=document.createDocumentFragment();r.append(...t.map(e.group,(e=>z[e]))),o=r}i===r.endNode?i.before(o):i===r.startNode?i.after(o):"string"==typeof i?z[i].after(o):i.after(o)}))),v.forEach((e=>{let t=u[e];t&&t.parentNode&&m.removeChild(t)})),h.vars[0]instanceof Je){let e=[],r=[];t.each(h.vars,(n=>{r.push(...n.vars),e.push(...t.map(n.vars,(e=>"1")))})),e.push("1"),h=new Je(e,r)}if(b||v.length>0||E){const e=t.groupBy(a,(e=>e.key));let r=[],n=0;o.forEach((t=>{e[t].forEach((e=>{e.varIndex=n++,r.push(e)}))})),a=r}Qe(r.endNode,i,h,a)}}let K=0;function Q(e,r){let n=e.name||"Di-"+K++,s=Symbol.for(n);return(...n)=>{let o=e(...n);return[s,n,o,e=>{process.env.DEV&&(t.isEmpty(r)||t.test(r.join(","),e)||l(`Directive '${Symbol.keyFor(s)}' is out of scopes, expect '${r.join(",")}' bug got '${e}'`))},C.popDirectiveQ()]}}const q=["resize","outside","mutate"],X=new WeakMap,Y=[],J=[],Z=[],ee=new ResizeObserver((e=>{for(const t of e){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize,r=Array.isArray(t.borderBoxSize)?t.borderBoxSize[0]:t.borderBoxSize;let n=X.get(t.target);if(n){n(new CustomEvent("resize",{bubbles:!1,cancelable:!1,detail:{borderBox:{w:r.inlineSize,h:r.blockSize},contentBox:{w:e.inlineSize,h:e.blockSize}}}),t.target)}}}));var te;!function(e){e.Child="child",e.Tree="tree",e.Attr="attr",e.Char="char"}(te||(te={}));const re=new WeakMap,ne=new MutationObserver((e=>{for(let t=0;t<e.length;t++){const r=e[t];let n=re.get(r.target);if(!n)return;let s={target:r.target},o=null;switch(r.type){case"subtree":s.type=te.Tree,o=n[te.Tree];break;case"childList":s.type=te.Child,s.addedNodes=r.addedNodes,s.removedNodes=r.removedNodes,o=n[te.Child];break;case"attributes":s.type=te.Attr,s.attributeName=r.attributeName,s.oldValue=r.oldValue,o=n[te.Attr];break;case"characterData":s.type=te.Char,s.oldValue=r.oldValue,o=n[te.Char]}if(o){o(new CustomEvent("mutate",{bubbles:!1,cancelable:!1,detail:s}))}}}));function se(e,r,n,s){if("resize"===e)!function(e,t){X.has(e)||(X.set(e,t),ee.observe(e))}(r,n);else if("outside"===e)switch(s[0]){case"mousedown":!function(e,t){Y.push([e,t])}(r,n);break;case"dblclick":!function(e,t){Z.push([e,t])}(r,n);break;default:!function(e,t){J.push([e,t])}(r,n)}else"mutate"===e&&function(e,r,n){let s=t.includes(n,"child"),o=t.includes(n,"attr"),i=t.includes(n,"char"),a=t.includes(n,"tree"),l=re.get(e);l||(l={},re.set(e,l),s&&(l[te.Child]=r),o&&(l[te.Attr]=r),i&&(l[te.Char]=r),a&&(l[te.Tree]=r),ne.observe(e,{childList:s,attributes:o,characterData:i,subtree:a}))}(r,n,s)}document.addEventListener("mousedown",(e=>{let r=t.get(e.composedPath(),0,e.target);Y.forEach((([n,s])=>{if(!n.contains(r)&&!n.contains(t.closest(r,(e=>e instanceof ShadowRoot),"parentNode")?.host)){s(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:n,event:e}}),n)}}))}),!1),document.addEventListener("click",(e=>{let r=t.get(e.composedPath(),0,e.target);J.forEach((([n,s])=>{if(!n.contains(r)&&!n.contains(t.closest(r,(e=>e instanceof ShadowRoot),"parentNode")?.host)){s(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:n,event:e}}),n)}}))}),!1),document.addEventListener("dblclick",(e=>{let r=t.get(e.composedPath(),0,e.target);Z.forEach((([n,s])=>{if(!n.contains(r)&&!n.contains(t.closest(r,(e=>e instanceof ShadowRoot),"parentNode")?.host)){s(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:n,event:e}}),n)}}))}),!1);const oe=/,|^(debounce:.+)|(debounce$)/,ie=/,|^(throttle:.+)|(throttle$)/,ae="self",le="stop",ce="prevent",ue="once",de="left",pe="right",he="middle",fe="ctrl",ge="alt",me="shift",ye="meta",ve={esc:"escape"},Ee=":";function be(e,r,n,s){let o,i=e.split("."),a=i.shift(),l=i.includes(ue),c=r;if(o=t.find(i,(e=>oe.test(e)))){let e=o.split(Ee);c=t.debounce(c,parseInt(e[1])||100)}if(o=t.find(i,(e=>ie.test(e)))){let e=o.split(Ee);c=t.throttle(c,parseInt(e[1])||100)}if(l&&(c=t.once(c)),function(e){return q.includes(e)}(a))return se(a,n,c,i),c;let u=e=>{if(i.includes(ce)&&e.preventDefault(),i.includes(le)&&e.stopPropagation(),!i.includes(ae)||e.target===e.currentTarget){if(e instanceof MouseEvent){if(i.includes(de)&&0!=e.button)return;if(i.includes(pe)&&2!=e.button)return;if(i.includes(he)&&1!=e.button)return}else if(e instanceof KeyboardEvent){if(t.remove(i,(e=>e==fe))[0]&&!e.ctrlKey)return;if(t.remove(i,(e=>e==ge))[0]&&!e.altKey)return;if(t.remove(i,(e=>e==me))[0]&&!e.shiftKey)return;if(t.remove(i,(e=>e==ye))[0]&&!e.metaKey)return;if(!t.map(i,(e=>ve[e]||e)).includes(e.key.toLowerCase()))return}c(e)}};n.addEventListener(a,u);let d=s.__events[a];return d||(d=s.__events[a]=[]),d.push([n,u]),u}const Te="@",Se=".",Ne="?",Ce="*",_e=":",Pe="ref",Ae="key",De=/[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--c_ui-pl_df-->){2,}.*?\1/ims,ke=/<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/gims,we="slot-props",Me=new Map,xe=new Map,Oe=new Map;var Re;!function(e){e.Event="event",e.Directive="directive",e.DirectiveTag="directiveTag",e.DirectiveAttr="directiveAttr",e.DirectiveProp="directiveProp",e.DirectiveText="directiveText",e.DirectiveSlot="directiveSlot",e.Attr="attr",e.AttrProp="attrProp",e.AttrBool="attrBool",e.AttrRef="attrRef",e.AttrSlot="attrSlot",e.AttrKey="key",e.Ref="ref",e.Text="text"}(Re||(Re={}));const Le=new WeakMap,Ue=new WeakMap,We=new WeakMap,He=new WeakMap,je=new WeakMap,Ie=new WeakMap;function Ve(e,r){let n="",s=t.concat(r.vars),o=r.strings.length-1,i=r.vars.length-1,a=0;for(let l=0;l<=o;l++){const o=r.strings[l];let c=t.get(s,a,"");if(c instanceof Je){let[t,r]=Ve(e,c);c=t,s.splice(a,1,...r),a+=r.length-1}else c=l>i?"":$e;a++,n=n+o+c}if(process.env.DEV){let e=n.match(De);if(e){return l(`Parse error: attribute value can be set only one interpolation —— \n ${t.replaceAll(e[0],$e,"${...}")}`),["",s]}}let c=0;return n=n.replace(ke,((e,r)=>t.replaceAll(e,$e,(()=>$e.replace("--\x3e","")+c++)))),n=n.replace(Ye,"$1><").trim(),[n,s]}const $e="\x3c!--c_ui-pl_df--\x3e",Be="\x3c!--c_ui-pl_df",Fe=/<!--c_ui-pl_df\d*(-->)?/;function ze(r,n,s,o,i=!1){const a=document.createElement("div");a.innerHTML=n;const l=Oe.has(o.constructor);i||!l||xe.has(o.constructor)||xe.set(o.constructor,a.cloneNode(!0));let u=0;const d=document.createNodeIterator(a,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let p,h,f=0,g=l?void 0:{},m=null,y="";for(;p=d.nextNode();){u++;let n=l?void 0:[];if(h&&!h.contains(p)&&(h=void 0),p instanceof HTMLElement||p instanceof SVGElement){p instanceof j&&(h=p);let i={},a=t.toArray(p.attributes);for(let l=0;l<a.length;l++){const u=a[l];let{name:d,value:g}=u;if(d!==we)if(t.startsWith(d,Be)){let i=s[f];if(t.isArray(i)&&t.isSymbol(i[0])){let[,t,s,a,l]=i;a(e.EnterPointType.TAG);let c=new F(p,d.substring(1),e.EnterPointType.TAG),u=Ie.get(p);u||(u={},Ie.set(p,u)),u[Symbol.keyFor(i[0])]=[c,o,h];let g=new B(f,p);g.isDirective=!0,g.value=i,g.isComponent=!!h,r.push(g),m&&m?.contains(p)&&(g.key=y),f++,s(c,t,void 0,{renderComponent:o,slotComponent:h,varChain:l}),n&&n.push({type:Re.DirectiveTag,point:c,up:g,name:d})}p.removeAttribute(d)}else if(d[0]!==Te)if(d!==Pe)if(d!==Ae)if(!process.env.DEV||d[0]!==Se||Fe.test(g)){if(Fe.test(g)){let a=s[f],l=new B(f,p,d.replace(/\.|\?|@/,""),g);if(l.isComponent=!!h,m&&m?.contains(p)&&(l.key=y),d[0]===Se||d[0]===Ne||d[0]===Ce){if(t.isArray(a)&&t.isSymbol(a[0])){let[,t,r,s,i]=a;s(e.EnterPointType.PROP);let c=d.substring(1),u=new F(p,c,e.EnterPointType.PROP),f=Ie.get(p);f||(f={},Ie.set(p,f)),f[c]=[u,o,h],r(u,t,void 0,{renderComponent:o,slotComponent:h}),l.value=a,l.isDirective=!0,n&&n.push({type:Re.DirectiveProp,up:l,point:u,name:d,attrName:c})}else if(d[0]===Ne){l.isToggleProp=!0,l.value=!!a;let e=d.substring(1);l.value&&p.setAttribute(e,""),n&&n.push({type:Re.AttrBool,name:e,up:l,attrName:d})}else if(d[0]===Ce){l.value=a;let e=d.substring(1);const[r,s]=e.split(_e);let o=r;switch(s){case"camel":o=t.camelCase(o);break;case"kebab":o=t.kebabCase(o);break;case"snake":o=t.snakeCase(o)}l.attrName=o,p.setAttribute(o,a),n&&n.push({type:Re.AttrRef,up:l,name:d,attrName:o})}else if(!process.env.DEV||p instanceof j||"SLOT"===p.tagName){let e=t.camelCase(d.substring(1));process.env.DEV&&!(e in p)&&"SLOT"!==p.tagName&&c(p.tagName,`Prop '${d}' is not defined in ${p.tagName}`),l.value=a,l.isProp=!0,i[e]=a,n&&n.push({type:Re.AttrProp,up:l,name:e,attrName:d})}else c(p.tagName,`Prop '${d}' can only be set on a CompElem or a slot`);p.removeAttribute(d),a=""}else{let r,s;l.value=a;let i={type:Re.Attr,up:l,attrName:d};if(t.isArray(a)&&t.isSymbol(a[0])){let t=e.EnterPointType.ATTR;"class"===d?t=e.EnterPointType.CLASS:"style"===d&&(t=e.EnterPointType.STYLE);let[,n,c,u,f]=a;u(t),l.isDirective=!0,l.attrName=d;let g=new F(p,d,t),m=Ie.get(p);m||(m={},Ie.set(p,m)),m[d]=[g,o,h],s=n,r=c,a="",i.type=Re.DirectiveAttr,i.point=g}g=t.replace(g,Fe,a),u.value=g,r&&r(i.point,s,void 0,{renderComponent:o,slotComponent:h}),n&&n.push(i)}r.push(l),f++}}else c(p.tagName,`Prop '${d}' must be an interpolation`);else{let e=s[f];p.setAttribute(d,e);let t=new B(f,p);t.notUpdated=!0,m&&m?.contains(p)&&(t.key=y),r.push(t),f++,m=p,y=e,n&&n.push({up:t,type:Re.AttrKey}),r.length>0&&r.forEach((t=>{t.key=t.key??e}))}else{if(Fe.test(g)){let e=s[f];if(process.env.DEV&&!t.has(e,"current")){c(p.tagName,"Ref must be a RefObject");continue}let o=new B(f,p);o.notUpdated=!0,m&&m?.contains(p)&&(o.key=y),r.push(o),f++,e.current=p,n&&n.push({type:Re.Ref,up:o,attrName:d})}p.removeAttribute(d)}else{let e=e=>{},i=new B(f,p);i.notUpdated=!0,m&&m?.contains(p)&&(i.key=y),r.push(i);let a=!1;if(Fe.test(g)){let r=s[f];if(process.env.DEV&&!t.isFunction(r)){c(p.tagName,`Event '${d}' must be a function`);continue}e=r.bind(o),f++,a=!0}let l=d.substring(1);be(l,e,p,o),p.removeAttribute(d),n&&n.push({type:Re.Event,up:i,name:l,attrName:d,value:a})}else{let e=p.getAttribute("name")||"default";n&&n.push({type:Re.AttrSlot,name:e,attrName:d})}}p instanceof j?(p._initProps(i),p._regWrapper(o)):p instanceof HTMLSlotElement&&o._bindSlot(p,p.name||"default",i)}else{let i=p;if(`\x3c!--${i.nodeValue}--\x3e`!==$e)continue;let a=new B(f,p);m&&m?.contains(p)&&(a.key=y),r.push(a),a.isComponent=!!h,a.isText=!0;let l=s[f];if(t.isArray(l)&&t.isSymbol(l[0])){const t=Symbol.keyFor(l[0]);let r;r=document.createComment(`compelem-${o.tagName}-${t}-start`),a.textNode=r,i.parentNode.insertBefore(r,i),i.nodeValue=`compelem-${o.tagName}-${t}-end`,i._diName=t,a.isDirective=!0,a.value=l;let s=h?e.EnterPointType.SLOT:e.EnterPointType.TEXT,[,c,u,d,p]=l;d(s);let f=new F(r,"",s);f.endNode=i,He.set(i,[f,o,h,c,p]),We.set(i,u),je.set(i,a),C.startRender(i);let g=u(f,c,void 0,{renderComponent:o,slotComponent:h,varChain:p});if(C.endRender(o),g){let e=Ge(i,g[1],o);e&&e.length>0&&qe.insertBefore(i,Array.from(e))}l=void 0,n&&n.push({type:s===e.EnterPointType.SLOT?Re.DirectiveSlot:Re.DirectiveText,up:a,point:f})}else a.value=l,n&&n.push({type:Re.Text,up:a});f++;let c=t.toString(l??""),u=document.createTextNode(c);i.parentNode.insertBefore(u,i),a.textNode=u}g&&n&&(g[u]=n),m&&!m.contains(p)&&m!==p&&(m=null,y="")}return!i&&g&&Oe.set(o.constructor,g),a.childNodes}function Ge(e,t,r){let[n,s]=Ve(r,t),o=[],i=ze(o,n,s,r,!0);return Ue.set(e,o),i}function Ke(r,n,s){if(t.isBlank(t.join(r.strings)))return;if(!Le.has(n))return;let{vars:o}=r;s=s??Le.get(n);for(let r=0;r<s.length;r++){const i=s[r];let a=i.varIndex;if(a<0)continue;if(i.notUpdated)continue;let l=i.value,c=o,u=i.node,d=t.split(a,"-");for(let e=0;e<d.length;e++){const n=d[e];c=t.get(c,n),c&&c.vars&&r<d.length-1&&(c=c.vars)}if(!t.isObject(l)&&l===c)continue;let p=u;if(i.isDirective){let[t,r,n,,s]=i.value,o=He.get(u);if(!o){const e=Ie.get(u);o=e[i.attrName]||e[Symbol.keyFor(t)]}let[a,l,d]=o,[,p]=c;const h=je.get(u);if(h){h.value=c;He.get(u)[3]=p}G(a,p,r,n,l,d,s,a.type==e.EnterPointType.TEXT||a.type==e.EnterPointType.SLOT)}else if(i.isToggleProp){if(!!c===l)continue;p.toggleAttribute(i.attrName,!!c),t.set(p,i.attrName,!!c)}else if(i.isProp){if(!t.isObject(c)&&c===l)continue;u instanceof j?u._updateProps({[i.attrName]:c}):u instanceof HTMLSlotElement&&n._updateSlot(u.getAttribute("name")||"default",i.attrName,c)}else if(i.attrName){if(!t.isEqual(l,c))switch(i.attrName){case"value":if(u instanceof HTMLInputElement){u.value=c;break}default:u.setAttribute(i.attrName,t.replace(i.attrTmpl,Fe,c+""))}}else if(i.isText){i.textNode.textContent=t.toString(c??"")}i.value=c}}function Qe(e,r,n,s){const o=We.get(e),[i,a,l,c,u]=He.get(e),d=je.get(e);if(!n){let e=o(i,d.value[1],c,{renderComponent:a,slotComponent:l,varChain:u});if(!e)return;n=e[1]}if(n&&n.vars[0]instanceof Je){let e=[],r=[];t.each(n.vars,(n=>{r.push(...n.vars),e.push(...t.map(n.vars,(e=>"1")))})),e.push("1"),n=new Je(e,r)}s&&Ue.set(e,s),Ke(n,r,s=s??Ue.get(e))}const qe={insertBefore:function(e,t){if(!e.parentNode)return;let r=document.createDocumentFragment();r.append(...t),e.parentNode.insertBefore(r,e)},remove:function(e,t){if(e===t)return void e?.parentNode?.removeChild(e);let r=e.nextSibling;for(;r&&r!==t;)r?.parentNode?.removeChild(r),r=e.nextSibling}};function Xe(e,...r){return new Je(t.isString(e)?[e]:e,r)}const Ye=/([a-z0-9"'])\s*>\s*</gim;class Je{strings;vars;constructor(e,r){this.strings=t.concat(e),this.vars=r}getKey(){let e=this.vars,r="";return t.each(this.strings,((s,o)=>{if(n.test(s))return r=t.toString(e[o]),!1})),r}getKeys(){let e=this.vars,r=[];for(let s=0;s<this.strings.length;s++){const o=this.strings[s];if(n.test(o)){let n=t.toString(e[s]);r.push(n)}}return t.isEmpty(r)&&e.forEach((e=>{if(e instanceof Je){let t=e.getKey();r.push(t)}})),r}append(e){let r=t.last(this.strings);return e.strings.forEach(((e,t)=>{0!=t?this.strings.push(e):this.strings[this.strings.length-1]=r+e})),this.vars=t.concat(this.vars,e.vars),this}insert(e,t){let r=t.strings.shift();return this.strings[e]+=r,this.strings.splice(e+1,0,...t.strings),this.vars.splice(e,0,...t.vars),this}getHTML(e){let[r,n]=Ve(e,this),s=ze([],r,n,e);return t.reduce(s,((e,t)=>e+t.outerHTML),"")}}const Ze=E(class extends h{static get priority(){return Number.MAX_VALUE}created(e,r,n,...s){let o=t.get(e,n);t.set(e,n,t.debounce(o,this.wait,this.immediate));let i=Reflect.getPrototypeOf(e);i&&!t.get(i,n+"_$__")&&t.set(i,n+"_$__",o)}beforeMount(e,t,...r){}mounted(e,t,...r){}updated(e,t){}get targets(){return[e.DecoratorType.METHOD]}wait;immediate;result;constructor(e,t=!1){super(),this.wait=e,this.immediate=t}});var et;e.QueryCache=void 0,(et=e.QueryCache||(e.QueryCache={})).ONCE="once",et.UPDATABLE="updatable";class tt extends h{static get priority(){return Number.MAX_VALUE}created(e,t,r,...n){}mounted(e,t,...r){}get targets(){return[e.DecoratorType.FIELD]}selector;cache;result;constructor(e,t){super(),this.selector=e,this.cache=t}static getKey(e){return e}getter(e){this.result=e.shadowRoot?.querySelector(this.selector)}beforeMount(e,t,r,n,...s){const o=this;Reflect.defineProperty(e,n,{get:()=>(o.result&&o.cache||o.getter(e),o.result)})}updated(t,r){this.cache===e.QueryCache.UPDATABLE&&this.getter(t)}}const rt=E(tt),nt=E(class extends tt{getter(e){this.result=e.shadowRoot?.querySelectorAll(this.selector)}});function st(e,r,n){if(!t.has(e.constructor,o.STATES)){const r={};let n=e.constructor;for(;(n=d(n))!==j;)t.merge(r,n[o.STATES]?t.cloneDeep(n[o.STATES]):{});Reflect.defineProperty(e.constructor,o.STATES,{configurable:!1,enumerable:!1,value:r})}n.shallow=n.shallow||!1,e.constructor[o.STATES][r]=n}const ot=["key"],it=Q((function(e){return(e,[r],n)=>{if(n)return;let s=e.startNode;if(s instanceof j){let e={},n={};t.each(r,((t,r)=>{ot.includes(r)||(r in s?e[r]=t:n[r]=t+"")})),s._initProps(e,n)}else t.each(r,((e,t)=>{s.setAttribute(t,e)}))}}),[e.EnterPointType.TAG]);let at=0;const lt=new Map,ct=new Map,ut=Q((function(e){return(e,[r],n,{renderComponent:s})=>{let o=[];if(t.isArray(r)?o=t.compact(r):t.isObject(r)?o=t.flatMap(r,((e,t)=>e?t:[])):t.isString(r)&&(o=r.split(" ")),o.length<1&&!n)return;let i=e.startNode;if(ct.get(i)&&ct.get(i).length===o.length&&t.isMatch(ct.get(i),o))return;let a=lt.get(i);a||(a="class_d"+at++,lt.set(i,a)),s.nextTick((()=>{let e=ct.get(i);t.each(e,(e=>{i.classList.remove(e)})),t.each(o,(e=>{i.classList.add(e)})),e=t.concat(o),ct.set(i,e)}),a)}}),[e.EnterPointType.CLASS]),dt=new Map,pt=new Map,ht=Q((function(r,s){return(r,o,i,{varChain:a})=>{let c=r.startNode,u=function(e,r,s){let o=t.map(e,((e,t)=>r(e,t)));if(o.length<1){let e=new Je([],[]);return pt.set(s,e),e}let i=[],a=[];const c=[],u=[];for(let e=0;e<o.length;e++){const r=o[e];let s=t.last(a),d=r.vars,p=!0,h=r.strings;for(let e=0;e<h.length;e++){const t=h[e];if(n.test(t)){let t=d[e]+"";if(i.includes(t))return void l(`forEach - duplicate key '${t}'`);i.push(t),p=!1}0==e&&s?a[a.length-1]=s+t:a.push(t)}if(p)return void l("forEach - missing 'key' prop");let f=t.last(c);f&&h.length>0&&(c[c.length-1]=t.trim(f)+h.shift()),c.push(""),u.push(r)}c.push("");let d=new Je(c,u);return pt.set(s,d),d}(o[0],s,c);if(i){const n=dt.get(c);if(t.isEmpty(r.getNodes())&&(!o||t.isEmpty(o[0])))return[e.DirectiveUpdateTag.NONE,u];if(t.isMatch(n,o[0])&&n.length===o[0].length)return[e.DirectiveUpdateTag.NONE,u]}return dt.set(c,t.clone(o[0])),i?[e.DirectiveUpdateTag.UPDATE,u]:[e.DirectiveUpdateTag.APPEND,u]}}),[e.EnterPointType.TEXT,e.EnterPointType.SLOT]);const ft=new WeakMap,gt=Q((function(t,r,n){return(s,[o,i],a,{renderComponent:l})=>{let c=s.endNode;if(a){if(!!o==!!a[0]){let t=ft.get(c);return[e.DirectiveUpdateTag.NONE,t.call(l,o)]}let t=o?r:n;return ft.set(c,t),[e.DirectiveUpdateTag.REPLACE,t.call(l,o)]}{let s=o?r:n;return ft.set(c,s),[e.DirectiveUpdateTag.APPEND,s.call(l,t)]}}}),[e.EnterPointType.TEXT,e.EnterPointType.SLOT]),mt=Q((function(t,r){return(t,[r,n],s)=>s?r===s[0]?[e.DirectiveUpdateTag.NONE,r?n():Xe``]:r?[e.DirectiveUpdateTag.REPLACE,r?n():Xe``]:[e.DirectiveUpdateTag.REMOVE]:[e.DirectiveUpdateTag.APPEND,r?n():Xe``]}),[e.EnterPointType.TEXT,e.EnterPointType.SLOT]);var yt;e.ModelTriggerType=void 0,(yt=e.ModelTriggerType||(e.ModelTriggerType={})).CHANGE="change",yt.INPUT="input";const vt=new WeakMap,Et=Q((function(e,r="value"){return(n,s,o,{varChain:i,renderComponent:a})=>{const l=n.startNode;if(o){if(t.isEqual(s,o))return;if(!t.isEqual(s,o)){let e=s[0];if(l instanceof j)l._updateProps({[r]:e});else if(l instanceof HTMLTextAreaElement||l instanceof HTMLSelectElement)l.setAttribute(r,e+"");else if(l instanceof HTMLInputElement){if(l.value==e)return;switch(l.type){case"checkbox":case"radio":e?l.setAttribute("checked",""):l.removeAttribute("checked");break;case"text":case"email":case"number":case"password":case"search":case"tel":case"url":l.setAttribute(r,e+""),t.set(l,r,e);break;default:l.setAttribute(r,e+"")}}}return}if("binded"===t.get(l,"_model"))return;let c=t.last(i);if(vt.set(l,c),t.isObject(e)||t.trim(e)||(e=""),l instanceof j)l._initProps({[r]:e}),l.addEventListener("update:"+r,(e=>{t.set(a,c,e.detail.value)})),t.set(l,"_model","binded");else if(l instanceof HTMLTextAreaElement)l.setAttribute(r,e+""),l.addEventListener("input",(e=>{let r=e.target;t.set(a,c,r.value)})),t.set(l,"_model","binded");else if(l instanceof HTMLInputElement){let n="",s="";switch(l.type){case"checkbox":case"radio":n="checked",s="change";break;default:n="value",s="input"}l.setAttribute(r??n,e+""),l.addEventListener(s,(e=>{let r=e.target;t.set(a,c,r.value)})),t.set(l,"_model","binded")}else l instanceof HTMLSelectElement&&(l.setAttribute(r,e+""),l.addEventListener("change",(e=>{let r=e.target;t.set(a,c,r.value)})),t.set(l,"_model","binded"))}}),[e.EnterPointType.TAG]),bt=new Map,Tt=Q((function(e,t){return(e,[r],n)=>{if(n&&r===n[0])return;let s=e.startNode;if(!bt.has(s)){let e=s.style.display;bt.set(s,"none"==e?"unset":e)}s.style.display=r?bt.get(s):"none",t&&t(s,r)}}),[e.EnterPointType.TAG]),St=Q((function(e,t){return(r,n,s,{renderComponent:o,slotComponent:i})=>{s||(e=e.bind(o),i._bindSlotHook(t||"default",e))}}),[e.EnterPointType.SLOT]);class Nt{static getCssText(e,r=!1){return t.isString(e)?e:t.join(t.map(e,((e,n)=>n.startsWith("--")?n+":"+e+(r?" !important":""):t.kebabCase(n)+":"+e+(r?" !important":""))),";")}static setStyle(e,r){if(t.isString(e)&&!t.trim(e))return{};let n=Nt.getCssText(e),s={};return t.each(n.split(";"),(e=>{let n=e.split(":"),o=t.trim(n[0]),i=t.trim(n[1]);s[o]=r.style.getPropertyValue(o),r.style.setProperty(o,i)})),s}}const Ct=new Map;let _t=0;const Pt=Q((function(e){return(e,t,r,{renderComponent:n})=>{let s=e.startNode,o=Ct.get(s);o||(o="style_d"+_t++,Ct.set(s,o)),n.nextTick((()=>{Nt.setStyle(t[0],s)}),o)}}),[e.EnterPointType.STYLE]),At=Q((function(e){return(r,n,s,{renderComponent:o,varChain:i})=>{const a=r.startNode;if(s){if(!t.isEqual(n,s)){let e=r.attrName;a._updateProps({[e]:n[0]})}return}let l=t.last(i),c=r.attrName;a._initProps({[c]:e}),a.addEventListener("update:"+c,(e=>{t.set(o,l,e.detail.value)}))}}),[e.EnterPointType.PROP]),Dt=Q((function(r,n){return(r,[n,s],o)=>{let i=()=>Xe``,a=[],l=[];t.each(s,((e,r)=>{if(t.isFunction(e))a.push(r),l.push(e);else{let t=e[0],r=e[1];a.push(t),l.push(r)}"default"===r&&(i=e)}));let c=t.findIndex(a,(e=>t.isFunction(e)?e(n):e==n));return o?[e.DirectiveUpdateTag.REPLACE,t.call(l[c]??i)]:[e.DirectiveUpdateTag.APPEND,t.call(l[c]??i)]}}),[e.EnterPointType.TEXT,e.EnterPointType.SLOT]);e.CompElem=j,e.CssHelper=Nt,e.Decorator=h,e.DecoratorWrapper=y,e.EnterPoint=F,e.GetKeyFnName=f,e.Template=Je,e.UpdatePoint=B,e._DecoratorMap=m,e._DecoratorsKey=g,e._getObservedAttrs=N,e.bind=it,e.buildHTML=Ve,e.classes=ut,e.computed=function(e,r,n){n.get||l(`Computed '${r}' must be a getter`),t.has(e.constructor,o.COMPUTED)||(e.constructor[o.COMPUTED]=t.isEmpty(e.constructor[o.COMPUTED])?{}:t.cloneDeep(e.constructor[o.COMPUTED])),e.constructor[o.COMPUTED][r]=n.get},e.createRef=function(e){return{current:e}},e.debounced=Ze,e.decorator=E,e.directive=Q,e.event=function(e,r){return(n,s,i)=>{t.has(n.constructor,o.EVENTS)||(n.constructor[o.EVENTS]=t.isEmpty(n.constructor[o.EVENTS])?[]:t.cloneDeep(n.constructor[o.EVENTS])),n.constructor[o.EVENTS].push({name:e,options:r,fn:n[s]})}},e.forEach=ht,e.html=Xe,e.ifElse=gt,e.ifTrue=mt,e.makeState=function(e,t,r){st(e.prototype,t,r||{prop:""})},e.model=Et,e.prop=function(e){if(1===arguments.length)return(t,r,n)=>{e.required=e.required||!1,e.attribute=!1!==e.attribute,T(t,r,e,n)};let r=arguments[0],n=arguments[1],s=arguments[2];e={type:void 0,required:!1,attribute:!0},s&&"function"==typeof s.type&&(e=t.defaults(s,e),s=void 0),T(r,n,e,s)},e.query=rt,e.queryAll=nt,e.show=Tt,e.slot=St,e.state=function(e){if(1===arguments.length)return(t,r)=>{st(t,r,e)};st(arguments[0],arguments[1],{prop:""})},e.styles=Pt,e.sync=At,e.tag=function(e){return t=>{if(t){if(t.prototype.hasOwnProperty("attributeChangedCallback")){let e=t.prototype.attributeChangedCallback;t.prototype.attributeChangedCallback=function(t,r,n){j.prototype.attributeChangedCallback.call(this,t,r,n),e.call(this,t,r,n)}}if(t.prototype.hasOwnProperty("connectedCallback")){let e=t.prototype.connectedCallback;t.prototype.connectedCallback=function(){j.prototype.connectedCallback.call(this),e.call(this)}}if(t.prototype.hasOwnProperty("disconnectedCallback")){let e=t.prototype.disconnectedCallback;t.prototype.disconnectedCallback=function(){j.prototype.disconnectedCallback.call(this),e.call(this)}}customElements.define(e,t)}}},e.updateDirective=G,e.watch=function(e,r){return(n,s)=>{t.has(n.constructor,o.WATCH)||(n.constructor[o.WATCH]=t.isEmpty(n.constructor[o.WATCH])?{}:t.cloneDeep(n.constructor[o.WATCH]));(t.isArray(e)?e:[e]).forEach((e=>{let i=e.replaceAll(".","-"),a=n.constructor[o.WATCH][i];t.isArray(a)||(a=n.constructor[o.WATCH][i]=[]),a.push({source:e,options:r,handler:n[s]})}))}},e.when=Dt,Object.defineProperty(e,"__esModule",{value:!0})}));

package/directive/index.d.ts

@@ -1,18 +1,5 @@
 import { CompElem } from "../CompElem";
-import { Template } from "../render/Template";
-import { Directive } from "./Directive";
-/**
- * 属性定义
- */
-export declare enum EnterPointType {
-    ATTR = "attr",//属性，文本内容，可以内嵌多插值
-    PROP = "prop",//参数，智能内嵌一个插值
-    TEXT = "text",
-    CLASS = "class",
-    STYLE = "style",
-    SLOT = "slot",
-    TAG = "tag"
-}
+import { DirectiveExecutor, DirectiveInstance, EnterPointType } from "../types";
 /**
  * 交互点信息
  */
@@ -28,28 +15,10 @@ export declare class EnterPoint {
     setVarIndex(varIndex: number): void;
     getNodes(): Node[];
 }
-/**
- * Delay the actual time of execution of directive
- */
-export declare class DirectiveWrapper {
-    #private;
-    diClass: any;
-    args: any[];
-    di: Directive;
-    varPath: string;
-    point: EnterPoint;
-    slotComponent: CompElem;
-    varChain: any[];
-    constructor(diClass: typeof Directive, ...args: any[]);
-    checkScope(scopeType: string): void;
-    render(component: CompElem): void | Template;
-    update(point: EnterPoint, newArgs: any[], oldArgs: any[]): void;
-    getDirective(): Directive;
-    newNodeMap: Record<string, HTMLElement>;
-}
+export declare function updateDirective(point: EnterPoint, newArgs: any[], oldArgs: any[], updater: DirectiveExecutor, renderComponent: CompElem, slotComponent: CompElem, varChain: any[][], isTextOrSlot?: boolean): void;
 /**
  * 返回指令调用函数
  * @param di
  * @returns
  */
-export declare function directive<T extends Array<any>>(diClass: typeof Directive): (...args: T) => DirectiveWrapper;
+export declare function directive<T extends Array<any>>(fn: (...args: T) => DirectiveExecutor, scopes: EnterPointType[]): (...args: T) => DirectiveInstance;

package/directives/Bind.d.ts

@@ -1 +1,5 @@
-export declare const bind: (obj: Record<string, any>) => import("../directive/index").DirectiveWrapper;
+/**
+ * 绑定属性到节点上，如果节点是组件会使用in操作符判断是否props
+ * @param styles 对象/数组/字符串
+ */
+export declare const bind: (obj: Record<string, any>) => import("../types").DirectiveInstance;

package/directives/Classes.d.ts

@@ -1 +1,5 @@
-export declare const classes: (clazz: string | Record<string, string | boolean> | string[]) => import("../directive/index").DirectiveWrapper;
+/**
+ * 根据变量内容自动插入class，仅能用于class属性
+ * @param styles 对象/数组/字符串
+ */
+export declare const classes: (clazz: string | Record<string, string | boolean> | string[]) => import("../types").DirectiveInstance;

package/directives/ForEach.d.ts

@@ -1,2 +1,7 @@
 import { TmplFn } from "../types";
-export declare const forEach: (value: any[] | Record<string, any>, cbk: TmplFn) => import("../directive/index").DirectiveWrapper;
+/**
+ * 循环列表并自动优化列表更新
+ * foreach循环的只能是节点，且必须有key属性。非节点元素会被过滤掉
+ * 使用序号作为key时可能会导致异常问题
+ */
+export declare const forEach: (value: any[] | Record<string, any>, cbk: TmplFn) => import("../types").DirectiveInstance;

package/directives/IfElse.d.ts

@@ -1,2 +1,7 @@
 import { TmplFn } from "../types";
-export declare const ifElse: (condition: boolean, tmplFn1: TmplFn, tmplFn2: TmplFn) => import("../directive/index").DirectiveWrapper;
+/**
+ * 条件为真时返回参数1，否则返回参数2，仅能用于文本节点
+ * @param condition 条件
+ * @param tmpl 模板
+ */
+export declare const ifElse: (condition: boolean, ifTmpl: TmplFn, elseTmpl: TmplFn) => import("../types").DirectiveInstance;

package/directives/IfTrue.d.ts

@@ -1,2 +1,7 @@
 import { TmplFn } from "../types";
-export declare const ifTrue: (condition: boolean, tmplFn: TmplFn) => import("../directive/index").DirectiveWrapper;
+/**
+ * 条件为真时返回内容，仅能用于文本节点
+ * @param condition 条件
+ * @param tmpl 模板
+ */
+export declare const ifTrue: (condition: boolean, tmplFn: TmplFn) => import("../types").DirectiveInstance;

package/directives/Model.d.ts

@@ -2,4 +2,14 @@ export declare const enum ModelTriggerType {
     CHANGE = "change",
     INPUT = "input"
 }
-export declare const model: (modelValue: any, updateProp?: string | undefined) => import("../directive/index").DirectiveWrapper;
+/**
+ * 实现双向绑定（仅支持静态路径，动态增加的属性路径无法识别）
+ * 当用于组件时，监控 @update:value 事件
+ * 当用于元素时，
+ * - 对于 input/textarea 监控 @input，并设置 value 属性
+ * - 对于 checkbox/radio 监控 @change，并设置 checked 属性
+ * - 对于 select  监控 @change，并设置 value 属性
+ * @param modelValue 双向绑定的组件变量
+ * @param updateProp 绑定模型变更时的监控属性，默认 value
+ */
+export declare const model: (modelValue: any, updateProp?: string | undefined) => import("../types").DirectiveInstance;

package/directives/Show.d.ts

@@ -1,3 +1,9 @@
 type Cbk = (node: Element, isVisible: boolean) => void;
-export declare const show: (isVisible: boolean, cbk?: Cbk | undefined) => import("../directive/index").DirectiveWrapper;
+/**
+ * display的快捷指令
+ * 如果
+ * @param isvisible 是否显示
+ * @param cbk 显示状态变更后调用的回调函数
+ */
+export declare const show: (isVisible: boolean, cbk?: Cbk | undefined) => import("../types").DirectiveInstance;
 export {};

package/directives/Slot.d.ts

@@ -1,2 +1,7 @@
 import { TmplFn } from "../types";
-export declare const slot: (cbk: TmplFn, slotName?: string | undefined) => import("../directive/index").DirectiveWrapper;
+/**
+ * 创建一个动态插槽内容
+ * @param cbk 回调函数，函数接收插槽上定义得变量
+ * @param slotName 插槽名词，默认default
+ */
+export declare const slot: (cbk: TmplFn, slotName?: string | undefined) => import("../types").DirectiveInstance;

package/directives/Styles.d.ts

@@ -1 +1,5 @@
-export declare const styles: (styles: string | Record<string, string>) => import("../directive/index").DirectiveWrapper;
+/**
+ * 根据变量内容自动插入class，仅能用于style属性
+ * @param styles 对象/字符串
+ */
+export declare const styles: (styles: string | Record<string, string>) => import("../types").DirectiveInstance;

package/directives/Sync.d.ts

@@ -1 +1,6 @@
-export declare const sync: (syncValue: any) => import("../directive/index").DirectiveWrapper;
+/**
+ * 类似Model，实现属性的同步跟踪
+ * 设置组件prop，并监控 @update:prop 事件
+ * @param syncValue 双向绑定的组件变量
+ */
+export declare const sync: (syncValue: any) => import("../types").DirectiveInstance;

package/directives/When.d.ts

@@ -1,2 +1,22 @@
 import { TmplFn } from "../types";
-export declare const when: (value: any, cases: TmplFn[][] | Record<string | number, TmplFn>) => import("../directive/index").DirectiveWrapper;
+/**
+ * 分支指令，具有switch / else if 两种模式
+ * @example
+ *  switch 模式
+ * ${when(var, {
+    closed: () => html``, //case 1
+    connecting: () => html``, //case 2
+    default: () => html``// default是switch模式下的关键字key
+   })}
+
+   else if 模式
+ * ${when(this.editingTitle, [
+    [(v: any) => v.substring(2) > 0, () => html`<div style="${PageHome.tunnelLight}"></div>`],
+    [(v: any) => v == 'closed', () => html`<div style="${PageHome.tunnelLight}"></div>`],
+    [() => true, () => html`默认`]
+    ])}
+ *
+ * @param condition 条件
+ * @param tmpl 模板
+ */
+export declare const when: (value: string | number, cases: [(v: any) => boolean, TmplFn][] | Record<string | number, TmplFn>) => import("../types").DirectiveInstance;

package/index.d.ts

@@ -10,7 +10,6 @@ export * from "./decorators/query";
 export * from "./decorators/state";
 export * from "./decorators/tag";
 export * from "./decorators/watch";
-export * from "./directive/Directive";
 export * from "./directive/index";
 export * from "./directives/Bind";
 export * from "./directives/Classes";

package/index.js

@@ -1,7 +1,7 @@
 /**
-   * compelem v0.6.6-b1.1753346007
+   * compelem v0.6.7-b2.1756016341
    * A modern, reactive, fast, lightweight and flexible lib for building web components
    * @holyhigh2
    * https://github.com/holyhigh2/compelem
    */
-  import{toPath as t,some as e,isString as s,isUndefined as r,isBlank as n,get as i,isObject as o,isDefined as a,isEmpty as l,has as c,concat as d,defaults as u,isLowerCaseChar as h,merge as p,cloneDeep as f,each as g,kebabCase as m,toArray as E,last as _,startsWith as b,isFunction as v,isArray as C,initial as N,join as y,split as S,set as T,isEqual as P,replace as w,isPlainObject as A,flatMap as x,test as k,size as M,assign as O,first as R,closest as D,once as L,filter as V,bind as I,camelCase as H,isNil as W,trim as $,isBoolean as j,parseJSON as B,isNull as U,debounce as z,groupBy as G,reject as F,compact as K,remove as X,includes as Q,find as q,throttle as Y,map as Z,replaceAll as J,snakeCase as tt,toString as et,reduce as st,isMatch as rt,clone as nt,findIndex as it,call as ot}from"myfx";const at=new WeakMap,lt=/\s+\.?key\s*=/;var ct,dt,ut,ht;function pt(t){console.error("[CompElem]",t)}function ft(t,e){console.error(`[CompElem <${t}>]`,e)}function gt(e){return t(e).join("-")}function mt(t){return Object.getPrototypeOf(t)}function Et(t){let e=t;return s(t)&&/(?:^true$)|(?:^false$)/.test(e)?e="true"===e:(r(e)||n(e))&&(e=!0),e}!function(t){t[t.CSS=1]="CSS",t[t.COMPUTED=2]="COMPUTED"}(ct||(ct={})),function(t){t.PROPS="__deco_props",t.STATES="__deco_states",t.COMPUTED="__deco_computed",t.WATCH="__deco_watch",t.EVENTS="__deco_events"}(dt||(dt={})),function(t){t.Prod="prod",t.Dev="dev"}(ut||(ut={})),function(t){t.CLASS="class",t.FIELD="field",t.METHOD="method"}(ht||(ht={}));class _t{static get priority(){return 0}}const bt="getKey",vt="__decorators",Ct=new WeakMap;class Nt{args;metadata;decoratorClass;instanceMap;key;priority=0;constructor(t,e,s){this.args=t,this.metadata=e,this.decoratorClass=s,this.priority=i(s,"priority",0),this.instanceMap=new WeakMap}create(t){let e,s=new this.decoratorClass(...this.args),n=s.targets,c=this.metadata[2];o(c)&&a(i(c,"configurable"))?e=ht.METHOD:r(this.metadata[2])&&(e=ht.FIELD),!l(n)&&e&&n.includes(e)?(s.created(t,...this.metadata),this.instanceMap.set(t,s)):pt(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${n.join(",")}' bug got '${e}'`)}beforeMount(t,e){this.instanceMap.get(t).beforeMount(t,e,...this.metadata)}mounted(t,e){this.instanceMap.get(t).mounted(t,e,...this.metadata)}updated(t,e){this.instanceMap.get(t).updated(t,e)}}const yt=new WeakMap;function St(t){let e=(...e)=>(...s)=>{let r=s[0].constructor,n=r[vt];if(!c(r,vt)){let t=Object.getPrototypeOf(r);n=t?d(t[vt]??[]):[],Reflect.defineProperty(r,vt,{configurable:!1,enumerable:!1,value:n})}let i,o={},a=t[bt];if(a){let s=yt.get(t);if(s||(s=new WeakMap,yt.set(t,s)),o=s.get(r),o||(o={},s.set(r,o)),i=a(...e),o[i])return o[i]}let l=new Nt(e,s,t);return o[i]=l,n?.push(l),l};return Ct.set(e,!0),e}const Tt=new WeakMap;function Pt(t){if(1===arguments.length)return(e,s,r)=>{t.required=t.required||!1,t.attribute=!1!==t.attribute,wt(e,s,t,r)};let e=arguments[0],s=arguments[1],r=arguments[2];t={type:void 0,required:!1,attribute:!0},r&&"function"==typeof r.type&&(t=u(r,t),r=void 0),wt(e,s,t,r)}function wt(t,e,s,r){let n;if(h(e[0])||pt(`Prop '${e}' must be in CamelCase`),!c(t.constructor,dt.PROPS)){const e={};let s=t.constructor;for(;(s=mt(s))!==zt;)p(e,s[dt.PROPS]?f(s[dt.PROPS]):{});Reflect.defineProperty(t.constructor,dt.PROPS,{configurable:!1,enumerable:!1,value:e}),n=new Set,g(e,((t,e)=>{if(t.attribute){let t=m(e);n?.add(t)}})),Tt.set(t.constructor,n)}if(r&&(r.get&&(s.getter=r.get),r.set&&(s.setter=r.set)),s.attribute){n||(n=Tt.get(t.constructor));let s=m(e);n?.add(s)}c(t.constructor,"observedAttributes")||(t.constructor.observedAttributes=[]),t.constructor.observedAttributes=E(n),s.shallow=s.shallow||!1,t.constructor[dt.PROPS][e]=s}const At=new Set;function xt(t){return Tt.get(t)??At}const kt={collectWatch(t,e,s){let r=Lt.get(t);r||(r={},Lt.set(t,r));let n=r[s];n||(n=r[s]=[]),n.push(e)},startCollect(t,e){this.__collectType=e,this.__collecting=t},setUpdater(t){this.__updater=t},endCollect(){this.__collecting=null},__directiveQ:[],setDirectiveQ(t){let e=_(this.__directiveQ);const s=t?t.join(","):"",r=e?e.join(","):"";e&&s===r||(e&&e.length<t.length&&b(s,r)?this.__directiveQ[this.__directiveQ.length-1]=t:this.__directiveQ.push(t))},popDirectiveQ(){let t=d(this.__directiveQ);return this.__directiveQ=[],t},startRender(t){this.__renderCollecting=!0,this.__renderContext=t},endRender(t){this.__renderCollection.forEach((e=>{t._regDeps(e,this.__renderContext)})),this.__renderCollection.clear(),this.__renderCollecting=!1,this.__renderContext=null},collect(t){this.__renderCollection.add(t)},clear(){this.__directiveQ=[]},__updater:null,__collecting:null,__collectType:-1,__renderCollection:new Set,__renderContext:null,__renderCollecting:!1,__skipCheck:!1},Mt=new WeakMap,Ot=new WeakMap,Rt=new WeakMap,Dt=new WeakMap,Lt=new WeakMap,Vt=new WeakSet;function It(t,e){if(!o(t))return t;const s=Vt.has(t)?t:new Proxy(t,{get(t,e,s){if(!e)return;const r=Reflect.get(t,e,s);if("string"!=typeof e&&"number"!=typeof e)return r;let n=e in t;if((kt.__renderCollecting||kt.__collecting)&&(n&&t.hasOwnProperty(e)||!n)){let t=Ot.get(s)??[],r=d(t,[e]),n=r.join("-");if(kt.__renderCollecting)kt.collect(gt(r)),kt.setDirectiveQ(r);else if(kt.__collecting){let t;switch(kt.__collectType){case ct.COMPUTED:t=Rt.get(kt.__collecting),t||(t={},Rt.set(kt.__collecting,t));break;case ct.CSS:t=Dt.get(kt.__collecting),t||(t={},Dt.set(kt.__collecting,t))}let e=t[n];e||(e=t[n]=[]),e.push(kt.__updater)}}return r},set(t,e,s,r){if(!e)return!1;let n=t[e];if(!o(n)&&n===s)return!0;if(Number.isNaN(s)&&Number.isNaN(n))return!0;let a=Ot.get(r)??[],c=d(a,[e]),u=Mt.get(r).from,h=i(u.constructor,dt.PROPS),p=i(u.constructor,dt.STATES),f=i(h,[c[0],"hasChanged"])||i(p,[c[0],"hasChanged"]);if(f){if(!f.call(u,s,n))return!0}else if(n===s&&!at.has(n))return!0;h&&h[e]&&t.__isData&&h[e].sync&&u.emit("update:"+e,{value:s});let g=Mt.get(r)?.contextSet,m=s;!o(s)||v(s)||s instanceof Node||Object.isFrozen(s)||g.forEach((t=>{let s=Mt.get(r)?.pathMap,n=s?.get(t);n&&(c=d(n,[e]),Ot.set(m,c),m=It(m,t),Vt.add(m),Ot.set(m,c))}));let E=Reflect.set(t,e,m),_=Mt.get(r).pathMap;return g.forEach((t=>{let s=_.get(t);if(!s)return;t===u&&a.length>1&&s.length>1&&a[0]===s[0]&&(s=a),c=d(s,"length"==e&&C(r)?[]:[e]);let o=Rt.get(t),h=Dt.get(t),p=Lt.get(t);if(o||h||p){let t=c.length;for(;t;){let e=c.slice(0,t).join("-");if(p){const s=p[e];t===c.length?s?.forEach((t=>{let e=t();e.ov=n,Ht.pushWatch(e)})):s?.forEach((t=>{let e=t();i(e,"deep")&&(e.ov=n,Ht.pushWatch(e))}))}if(o){let t=o[e];if(!l(t))for(let e=0;e<t.length;e++){const s=t[e];Ht.pushComputed(s)}}if(h){let t=h[e];if(!l(t))for(let e=0;e<t.length;e++){const s=t[e];Ht.pushCss(s)}}t--}}let f=t._notify(n,c);Ht.pushNext(f)})),E}});Vt.has(s)||Vt.add(s);let r=Ot.get(t)??[];if(Object.isExtensible(t)&&!Mt.get(s)){let t=new Set;t.add(e);let n=new WeakMap;n.set(e,r),Mt.set(s,{from:e,contextSet:t,pathMap:n})}else{Mt.get(s).contextSet.add(e);let t=Mt.get(s).pathMap,n=t.get(e),o=d(r);if(n&&n.join("")!==o.join("")){let t=i(e,N(n));C(t)||function(...t){console.warn("[CompElem]",...t)}(`The object is referenced by more than one @state '${o.join(".")},${n.join(".")}'`),n=o}else t.set(e,o)}let n=i(e.constructor,dt.PROPS),a=i(e.constructor,dt.STATES);for(let s in t){const l=t[s];let c=i(n,[s,"shallow"])||i(a,[s,"shallow"]);!o(l)||Vt.has(l)||v(l)||l instanceof Node||Object.isFrozen(l)||c||(Ot.set(l,d(r,[s])),t[s]=It(l,e),Vt.add(t[s]),Ot.set(t[s],d(r,[s])))}return s}class Ht{static watchSet=new Set;static computedSet=new Set;static cssSet=new Set;static nextSet=new Set;static nextPending=!1;static next;static flush(){Ht.nextPending=!1;let t=Array.from(Ht.watchSet);Ht.watchSet.clear();let e=Array.from(Ht.computedSet);Ht.computedSet.clear();let s=Array.from(Ht.cssSet);Ht.cssSet.clear();let r=Array.from(Ht.nextSet);Ht.nextSet.clear(),t.forEach((t=>t(i(t,"ov")))),e.forEach((t=>t())),s.forEach((t=>t())),r.forEach((t=>t()))}static pushWatch(t){Ht.watchSet.add(t)}static pushComputed(t){Ht.computedSet.add(t)}static pushCss(t){Ht.cssSet.add(t)}static pushNext(t){Ht.nextSet.add(t),Ht.nextPending||(Ht.nextPending=!0,Ht.next())}}function Wt(t){return class extends t{__updatePoints;renderComponent;buildView(t){let e=this instanceof zt?this:this.renderComponent,[s,r]=Oe(e,t),n=[],i=$e(n,s,r,e,this);return this.__updatePoints=n,i}updateView(t){if(n(y(t.strings)))return;if(!this.__updatePoints)return;let{vars:e}=t,s=this instanceof zt?this:this.renderComponent;for(let t=0;t<this.__updatePoints.length;t++){const r=this.__updatePoints[t];let n=r.varIndex;if(n<0)continue;let a=r.value,l=e,c=r.node,d=S(n,"-");for(let e=0;e<d.length;e++){const s=d[e];l=i(l,s),l&&l.vars&&t<d.length-1&&(l=l.vars)}if(!o(a)&&a===l)continue;let u=c;if(r.isDirective){if(!a.di)continue;l.di=a.di,l.di.renderParams=l.varChain,l.di._renderArgs=l.args,l.point=a.point,l.varPath=a.varPath,a.update(a.point,l.args,a.args)}else if(r.isToggleProp){if(!!l===a)continue;u.toggleAttribute(r.attrName,!!l),T(u,r.attrName,!!l)}else if(r.isProp){if(!o(l)&&l===a)continue;c instanceof zt?c._updateProps({[r.attrName]:l}):c instanceof HTMLSlotElement&&s._updateSlot(c.getAttribute("name")||"default",r.attrName,l)}else if(r.attrName&&!r.isEvent){if(!P(a,l))switch(r.attrName){case"value":if(c instanceof HTMLInputElement){c.value=l;break}default:c.setAttribute(r.attrName,w(r.attrTmpl,We,l+""))}}else if(r.isTmpl&&l&&a)a.tmpl&&(l.strings.join()!==a.tmpl.strings.join()||l.vars.some((t=>o(t)&&!A(t)))||a.tmpl.vars.some((t=>o(t)&&!A(t)))||!P(l.vars,a.tmpl.vars))&&r.value.updateView(l),a.tmpl=l,l=a;else if(r.isText){let t=r.textNode.nextSibling;t&&t===r.node.previousSibling?t.textContent=l:(je.remove(r.textNode,r.node),je.insertBefore(r.node,[l]))}r.value=l}}}}(()=>{const t=Promise.resolve(),e=Ht.flush;Ht.next=()=>{t.then(e)}})();class $t extends(Wt(Object)){tmpl;constructor(t){super(),this._renderVars=i(t,"_renderVars"),this.tmpl=t}}const jt={boolean:Boolean,string:String,number:Number,object:Object,array:Array,function:Function,undefined:Object},Bt=new WeakMap;let Ut=[];class zt extends(Wt(HTMLElement)){static __l_globalRule=document.createElement("style");static defaults(t){Ut=x(t.css,(t=>{if(s(t)){let e=new CSSStyleSheet;return e.replaceSync(t),e}return t instanceof CSSStyleSheet?t:[]})),t.global,g(t,((t,e)=>{k(e[0],/[A-Z]/)}))}#t={};#e={"#slots":{}};#s={};#r={};#n;#i={};__events={};get[Symbol.toStringTag](){return this.constructor.name}get reactiveData(){return this.#s}get attrs(){return this.#o}get props(){return this.#a}get renderRoot(){return this.#l}get renderRoots(){return this.#c}get parentComponent(){return this.#d}get wrapperComponent(){return this.#u}get slotHooks(){return this.#h}get css(){return Bt.get(this.constructor)}get isMounted(){return this.#p}get slots(){return this.#e["#slots"]}#o;#a;#l;#c;#d;#u;#f={};#h={};#g={};#p=!1;static get styles(){return[]}static get globalStyles(){return[]}get styles(){return[]}#m=!1;#E=!1;constructor(...t){super(),1===M(t)&&(this.#a={},O(this.#a,R(t)));let e=this.render.bind(this);this.render=function(){let t;return kt.startRender(this),t=e(),kt.endRender(this),t};let r=i(this.constructor,"globalStyles"),n=i(this.constructor,"_global_style_attached");if(!l(r)&&"1"!==n){let t="";r.forEach((e=>{s(e)&&(t+=e+"\n")})),zt.__l_globalRule.textContent+=t,T(this.constructor,"_global_style_attached","1")}let o=Bt.get(this.constructor),a=o??[];o||(g(i(this.constructor,"styles"),(t=>{if(s(t)){let e=new CSSStyleSheet;e.replaceSync(t),a.push(e)}else a.push(t)})),Bt.set(this.constructor,a)),this.#n=this.attachShadow({mode:"open"}),this.#n.adoptedStyleSheets=[...Ut,...a],this._slotsPropMap={default:[]};let c=i(this.constructor,vt);c&&c.sort(((t,e)=>e.priority-t.priority)).forEach((t=>t.create(this))),this.#_=this.#b.bind(this)}#_;connectedCallback(){let t=D(this.parentNode,(t=>t instanceof zt||t.host instanceof zt),"parentNode");this.#d=t?t instanceof zt?t:t.host:null,this.__init()}disconnectedCallback(){}__init(){if(this.#m)return;if(this.#E)return;this.#E=!0,this.#v();const t=this.#C();this.propsReady(t);for(const e in t){const s=t[e];this.#e[e]=s}this.#N(),g(this.#e,((t,e)=>{let s=Reflect.getOwnPropertyDescriptor(this.#e,e);Reflect.defineProperty(this,e,{get(){let t=Reflect.get(this.#s,e);return s?.get?s?.get():t},set(t){s?.set?s?.set(t):Reflect.set(this.#s,e,t)}})})),Reflect.defineProperty(this.#e,"__isData",{enumerable:!1,value:!0}),this.#s=It(this.#e,this);let e=i(this.constructor,dt.COMPUTED);g(e,((t,e)=>{kt.startCollect(this,ct.COMPUTED),kt.setUpdater((()=>{this.#s[e]=t.call(this)})),this.#e[e]=t.call(this),kt.endCollect(),Reflect.defineProperty(this,e,{get(){return Reflect.get(this.#s,e)},set(t){ft(this.tagName,"Cannot set a computed property '"+e+"'")}})}));let s=i(this.constructor,dt.WATCH);g(s,((t,e)=>{t.forEach((t=>{let{source:s,options:r,handler:n}=t,o=n.bind(this);i(r,"once",!1)&&(o=L(o));const a=function(t){let e=i(this,s.replaceAll("-","."));o(e,t,s)}.bind(this);let l=i(r,"deep",!1);if(a.deep=l,kt.collectWatch(this,(()=>a),e),!i(r,"immediate",!1))return;let c=i(this,s.replaceAll("-","."));o(c,c,s)}))}));let r=this.render(),o=this.buildView(r);if(o){let t=E(o);t.forEach((t=>{this.#n.appendChild(t)})),this.#c=V(t,(t=>t.nodeType===Node.ELEMENT_NODE)),this.#l=this.#c[0]}g(this.#h,((t,e)=>{this.#y(e)}));const a=this;let l=i(this.constructor,vt);l&&l.sort(((t,e)=>e.priority-t.priority)).forEach((t=>{t.beforeMount(this,((t,e)=>(a.#s[t]=e,a.#s[t])))})),this.beforeMount();let c=i(this.constructor,dt.EVENTS);c&&c.forEach((async t=>{let e=t.name,s=O({target:document,once:!1,passive:!1,capture:!1},t.options),r=I(t.fn,this),n=s.target;v(n)&&(n=await n.call(this,this)),n?n.addEventListener(e,r,s):ft(this.tagName,"The target of @event('"+e+"',...) is invalid")})),kt.startCollect(this,ct.CSS);let d=[];this.styles.forEach((t=>{if(!v(t))return;let e=new CSSStyleSheet;d.push(e),kt.setUpdater((()=>{let s=t()??"";e.replaceSync(s)}));let s=t();n(s)||e.replaceSync(s)})),kt.endCollect(),d.length>0&&(this.#n.adoptedStyleSheets=[...this.#n.adoptedStyleSheets,...d]),setTimeout((()=>{this.#p=!0,this.mounted(),l&&l.forEach((t=>{t.mounted(this,((t,e)=>(a.#s[t]=e,a.#s[t])))}))}),0),this.#m=!0}propsReady(t){}render(){throw Error(`[CompElem <${this.tagName}>] Missing render()`)}beforeMount(){}mounted(){}#S(t,e){this.#v();let s=i(this.#t[e],"props");s&&g(this.slots,((t,e)=>{t.filter((t=>t.nodeType===Node.ELEMENT_NODE)).forEach((t=>{t instanceof zt?t._updateProps(s):g(s,((e,s)=>{if(t instanceof HTMLSlotElement){let r=i(t,"__l_comp");if(r){let n=t.name||"default",i=r.#t[n];i||(i=r.#t[n]={props:{}}),i.props||(i.props={}),i.props[s]=e,r.#S(t,n)}}else t.setAttribute(s,e)}))}))})),this.slotChange(t,e)}slotChange(t,e){}attributeChangedCallback(t,e,s){this.#T(t,e,s)}shouldUpdate(t){return!0}updated(t){}#P={};_notify(t,e){let s=[];for(let r=0;r<e.length;r++){const n=e[r];s.push(n);let a=i(this,s),l=gt(s);this.#r[l]={value:a,chain:"slots"===l?["slots"]:s,oldValue:t,end:s.length===e.length},o(a)&&"#"!=l[0]&&at.set(a,l)}return this.#_}#b(){if(M(this.#r)<1)return;const t=this.#r;this.#r={};let e=i(this.constructor,vt);if(e&&e.sort(((t,e)=>e.priority-t.priority)).forEach((e=>{e.updated(this,t)})),!this.shouldUpdate(t))return;let s=new Set;g(t,(({value:t,chain:e,oldValue:r},n)=>{this.#i[n]&&this.#i[n].forEach((t=>{s.add(t)}))})),s.forEach((t=>{if(t===this)this.updateView(this.render());else{let e=t.render(...t._renderArgs?t._renderArgs:[]);e&&t.updateView(e)}})),this.#w.forEach((t=>{this.#y(t)})),this.updated(t),g(t,(({value:t,chain:e,oldValue:s},r)=>{o(t)&&at.has(t)&&at.delete(t)}))}#C(){let t=i(this.constructor,dt.PROPS),s=this.attributes,n=this.tagName,l=this.#a,d={};g(s,(({name:e,value:s})=>{if(e[0]===Se||e[0]===Te||e[0]===Pe||e===xe||"slot"===e)return;let r=H(e);t&&!t[r]&&(d[e]=s)})),this.#o=this.#o?O(this.#o,d):d;let u={};if(!t)return Object.seal(u);let h=Object.keys(t),p=h.length;for(let d=0;d<p;d++){const p=h[d];let g,E=t[p],_=c(l,p),b=i(this,p);if(!("_defaultValue"in E)&&(E._defaultValue=b,!E.type)){r(b)&&ft(n,"Prop '"+p+"' has neither propType nor defaultValue be used for type inference");let t=typeof b;C(b)&&(t="array");let e=jt[t];E.type=e}if(_)g=W(l[p])?b:l[p];else{g=b;let t=s.getNamedItem(m(p))||s.getNamedItem(Te+m(p));t&&(_=!0,g=t.value)}if(E.required&&!_){ft(n,"Prop '"+p+"' is required");break}g=this.#A(t,p,g);let v=i(t,[p,"getter"]);v&&(v=I(v,this));let N=i(t,[p,"setter"]);if(N&&(N=I(N,this)),(v||N)&&Reflect.defineProperty(this.#e,p,{set:N||function(t){},get:v}),E.attribute&&a(g)&&!o(g)){let t=m(p),s=$(g);(f=E.type)===Boolean||e(f,(t=>t===Boolean))?(s=Et(g),j(s)?this.toggleAttribute(t,s):this.setAttribute(t,s)):this.setAttribute(t,s)}this.#e[p]=g,u[p]=g}var f;return Object.seal(u)}#x(t,e){let s=t;try{for(let r=0;r<e.length;r++){const n=e[r];s=n===Boolean?Et(t):n===Number?Number(t):n===String?String(t):n===Object||n===Array?B(t):n===Date?new Date(t):new n(t)}}catch(e){ft(this.tagName,"Convert attribute error with "+t)}return s}#A(t,r,n){let i=t[r];if(!i)return n;let o=i.isValid,l=i.type,c=C(l)?l:[l],d=i.converter,u=n;if(!e(c,(t=>t===String))&&s(u)&&!U(u))try{u=d?d(u):this.#x(u,c)}catch(t){ft(this.tagName,`Convert attribute '${r}' error with `+u)}for(let t=0;t<c.length;t++){"Boolean"===c[t].name&&(u=Et(u))}let h=typeof u,p=!a(u);for(let t=0;t<c.length;t++){const e=c[t];if(k(h,e.name,"i")||u instanceof e||Object.prototype.toString.call(u)===Object.prototype.toString.call(e.prototype)){p=!0;break}}return p||ft(this.tagName,`Invalid prop '${r}'. expected '${c.map((t=>t.name||t))}' but got '${h}'`),o&&(o.call(this,u,this.#e)||ft(this.tagName,`Invalid prop '${r}'. IsValid() check failed`)),u}#N(){let t=i(this.constructor,dt.STATES);g(t,((e,s)=>{let r=t[s],n=i(this,s);if(r){let t=r.prop;n=t?f(this.#e[t]):i(this,s)}this.#e[s]=n}))}#k=z(this.propsReady,100);_setParentProps(t,e){if(this.#m){let s=i(this.constructor,dt.PROPS);g(t,((t,e)=>{let r=H(e),n=s[r];if(!n)return;let i=this.#e[r];t=this.#A(s,r,t),n.hasChanged&&!n.hasChanged.call(this,t,i)||(this.#e[r]=t,this._notify(i,[r]))})),O(this.#a,t),O(this.#o,e),this.#k(this.#a)}}_updateProps(t){let e=i(this.constructor,dt.PROPS);g(t,((t,s)=>{let r=H(s);e[r]&&(t=this.#A(e,r,t),kt.__skipCheck=!0,T(this,r,t),kt.__skipCheck=!1)})),O(this.#a,t),this.#k(this.#a)}_initProps(t,e){this.#a=p(this.#a||{},t),this.#o=p({},e)}_bindSlot(t,e,s){if(this.#f[e]||(this.#f[e]=t,Reflect.defineProperty(t,"__l_comp",{value:this})),t.addEventListener("slotchange",(s=>{this.#m&&this.#S(t,"default"===e?"":e)})),!l(s)){let t=this.#t[e];t||(t=this.#t[e]={}),t.props=s}}_bindSlotHook(t,e){this.#h[t]=e}#w=new Set;_updateSlot(t,e,s){let r=this.#f[t],n=this.#h[t];if(!n&&!r)return;let i=this.#t[t];if(e&&(i.props||(i.props={}),i.props[e]=s),n)this.#w.add(t);else{let t=r.assignedElements({flatten:!0});for(let r=0;r<t.length;r++){t[r].setAttribute(e,s+"")}}}#v(){const t=x(this.childNodes,(t=>t.nodeType===Node.COMMENT_NODE?[]:t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}):t));let e=G(t,(t=>t.nodeType===Node.TEXT_NODE?"default":t instanceof Element?t.getAttribute("slot")||"default":void 0));if(l(e))return void(l(this.#e["#slots"])||(this.#m?this.#s["#slots"]={}:this.#e["#slots"]={}));g(e,((t,e)=>{if(e){for(;t.length>0;){let e=t[0];if(!(e.nodeType===Node.TEXT_NODE&&n(e.textContent)||e instanceof HTMLSlotElement&&l(e.assignedNodes({flatten:!0}))))break;t.shift()}for(;t.length>0;){let e=_(t);if(!(e.nodeType===Node.TEXT_NODE&&n(e.textContent)||e instanceof HTMLSlotElement&&l(e.assignedNodes({flatten:!0}))))break;t.pop()}}}));let s={};g(e,((t,e)=>{l(t)||(s[e]=t)})),this.#m?this.#s["#slots"]=s:this.#e["#slots"]=s}#y(t){let e=this.#h[t];if(!e)return;let s=this.#t[t];if(!this.#e["#slots"][t])return;this.renderAsync(e,i(s,"props"));const r=this._asyncDirectives.get(e);let n=r?.buildView(e(i(s,"props"))),o=F(E(n),(t=>t.nodeType===Node.COMMENT_NODE));if(o){let e=this.#g[t];if(!l(e))for(let t=0;t<e.length;t++){const s=e[t];s.parentNode?.removeChild(s)}this.#g[t]=o,this.append(...o),this.#w.clear()}}_asyncDirectives=new WeakMap;renderAsync(t,...e){}#T(t,e,s){if(!this.isMounted)return;if(xt(this.constructor).has(t)){let e=H(t);if(U(s)){s=i(this.constructor,dt.PROPS)[e]._defaultValue}this._updateProps({[e]:s})}}_regDeps(t,e){let s=this.#i[t];s||(s=this.#i[t]=new Set),s.add(e);let r=t.split("-");if(r.pop(),r.length<1)return;let n=r.join("-");s=this.#i[n],s||(s=this.#i[n]=new Set),s.add(e)}_regWrapper(t){this.#u=t}emit(t,e={},s){s&&s.event&&(e.event=s.event),e.target=this,this.dispatchEvent(new CustomEvent(t,{bubbles:i(s,"bubbles",!1),composed:i(s,"composed",!1),cancelable:!0,detail:e}))}on(t,e){this.#P[t]||(this.#P[t]=[]);let s=e.bind(this);this.#P[t].push(s),this.addEventListener(t,s)}nextTick(t){Ht.pushNext(t)}forceUpdate(){g(this.#s,((t,e)=>{this.#r[e]={value:void 0,chain:void 0}})),this.#b()}}var Gt,Ft,Kt;document.head.appendChild(zt.__l_globalRule),function(t){t.NONE="NONE",t.REMOVE="REMOVE",t.REPLACE="REPLACE",t.UPDATE="UPDATE",t.APPEND="APPEND"}(Gt||(Gt={}));class Xt{key;varIndex;value;isText=!1;isTmpl=!1;isDirective=!1;node;textNode;isComponent=!1;attrName;attrTmpl;isProp=!1;isToggleProp=!1;isEvent;constructor(t,e,s,r){this.varIndex=t,this.node=e,s&&(this.attrName=s),r&&(this.attrTmpl=r)}}!function(t){t.ATTR="attr",t.PROP="prop",t.TEXT="text",t.CLASS="class",t.STYLE="style",t.SLOT="slot",t.TAG="tag"}(Ft||(Ft={}));class Qt{startNode;endNode;type;attrName;varIndex;expressionChain;nodes;constructor(t,e,s){this.startNode=t,this.attrName=e,this.type=s}setVarIndex(t){this.varIndex=t}getNodes(){let t=this.startNode.nextSibling;if(!this.endNode)return[t];let e=[];for(;t&&t!==this.endNode;)e.push(t),t=t?.nextSibling;return e}}!function(t){t.AFTER_BEGIN="afterbegin"}(Kt||(Kt={}));class qt{diClass;args;di;varPath;point;slotComponent;varChain;constructor(t,...e){this.diClass=t,this.args=e,this.varChain=kt.popDirectiveQ(),this.di=new this.diClass,this.di.renderParams=this.varChain}checkScope(t){let e=i(this.diClass,"scopes");l(e)||k(e.join(","),t)||pt(`Directive '${this.diClass.name}' is out of scopes, expect '${e.join(",")}' bug got '${t}'`)}render(t){let e=this.di;return e.renderComponent||(e.renderComponent=t),this.di=e,e._renderArgs=this.args,this.di.render(...this.args)}update(t,e,s){let r=this.di.update(t,e,s);if(r===Gt.NONE)return;let n=t.getNodes();if(r===Gt.REMOVE)for(let t=0;t<n.length;t++){const e=n[t];e.parentNode?.removeChild(e)}else if(r===Gt.REPLACE){let s=[];for(let t=0;t<n.length;t++){const e=n[t];e.parentNode?.removeChild(e)}let r=this.di.render(...e),i=this.di.buildView(r);s=E(i);let o=document.createDocumentFragment();o.append(...s),t.endNode.parentNode.insertBefore(o,t.endNode)}else if(r===Gt.UPDATE){let s,r={},i=[],o=[],a=this.di.render(...e);if(a||(a=new Ge([],[])),l(n)){let e=this.di.buildView(a);return void t.startNode.after(...e)}let c={};a instanceof Ge&&a.vars.forEach((t=>{if(t instanceof Ge){const e=t.getKey();c[e]=t,r[e]=!0,o.push(e)}})),n=V(K(n),(t=>t.nodeType===Node.ELEMENT_NODE)),s=V(K(E(s)),(t=>t.nodeType===Node.ELEMENT_NODE));let d={},u="",h={};for(let t=0;t<n.length;t++){let e=n[t],s=e.getAttribute("key");if(s){if(d[s]){u=s;break}d[s]=e,i.push(s),h[s]=!0}}if(u)return void pt(`${H(this.diClass.name)} - duplicate key '${u}'`);let p=r;const f=t.startNode.parentNode;let m=[],b=[];if(g(h,((t,e)=>{p[e]||(b.push(e),delete h[e],X(i,(t=>t===e)))})),!l(o)){let e=-1,s=[],r=[],n=0,a=0;for(;a<o.length;a++){const l=o[a];let c=i.findIndex((t=>t===l));if(c<0){let e=o[a-1],s=e?d[e]||e:t.startNode;m.push({prevNode:s,newkey:l}),n++}else if(c>-1&&c!==a-n){if(e<0||1===Math.abs(e-c)){let t=_(s);s.push({nodeId:l,targetId:0===a?Kt.AFTER_BEGIN:t?t.nodeId:o[a-1]})}else r.push({moveGroup:s,moveIndex:a+s.length}),s=[],s.push({nodeId:l,targetId:o[a-1]});e=c}}if(s.length>0&&r.push({moveGroup:s,moveIndex:a+s.length}),r.length>0){let e=r.sort(((t,e)=>t.moveGroup.length-e.moveGroup.length));if(e.length<2){let{moveGroup:s}=e[0];if(s.length>1){let t=_(s).targetId;s[s.length-2].nodeId===t&&(s=N(s))}s.forEach((({targetId:e,nodeId:s})=>{let r,n=d[s];e===Kt.AFTER_BEGIN?(r=t.startNode,r.after(n)):(r=d[e],r.after(n))}))}else{let s=_(e).moveIndex;1===Math.abs(e[e.length-2].moveIndex-s)&&(e=N(e)),e.forEach((({moveGroup:e})=>{e.forEach((({targetId:e,nodeId:s})=>{let r,n=d[s];e===Kt.AFTER_BEGIN?(r=t.startNode,r.after(n)):(r=d[e],r.after(n))}))}))}}}m.length>0&&this.#M(m,c,o),m.forEach((e=>{let s=e.newkey,r=this.newNodeMap[s],n=e.prevNode;n===t.endNode?n.before(r):n===t.startNode?n.after(r):"string"==typeof n?this.newNodeMap[n].after(r):n.after(r)})),b.forEach((t=>{let e=d[t];e&&e.parentNode&&f.removeChild(e)})),this.di.__updatePoints.forEach((t=>{t.key||(t.key=t.value.tmpl.getKey());const e=o.findIndex((e=>e==t.key));t.varIndex=e})),this.di.updateView(a)}}getDirective(){return this.di}newNodeMap={};#M(t,e,s){const r=[],n=[];t.forEach((t=>{let s=t.newkey;r.push(""),n.push(e[s])})),r.push("");let i=new Ge(r,n),o=this.di.__updatePoints,a=this.di.buildView(i),l=new Map;this.di.__updatePoints.forEach(((t,e)=>{const s=t.value.tmpl.getKey();t.key=s,l.set(s,!0)})),o.forEach(((t,e)=>{const s=t.key??t.value.tmpl.getKey();l.get(s)||this.di.__updatePoints.push(t)})),a.forEach((t=>{t instanceof HTMLElement&&(this.newNodeMap[t.getAttribute("key")]=t)}))}}function Yt(t){return(...e)=>{let s=null;return e.forEach(((t,r)=>{if(v(t)){let n=t;e[r]=function(...t){let e=s.di;kt.startRender(e);let r=n.call(e.renderComponent,...t);return kt.endRender(e.renderComponent),r}}})),s=new qt(t,...e),s}}const Zt=["resize","outside","mutate"],Jt=new WeakMap,te=[],ee=[],se=[],re=new ResizeObserver((t=>{for(const e of t){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize,s=Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize;let r=Jt.get(e.target);if(r){r(new CustomEvent("resize",{bubbles:!1,cancelable:!1,detail:{borderBox:{w:s.inlineSize,h:s.blockSize},contentBox:{w:t.inlineSize,h:t.blockSize}}}),e.target)}}}));var ne;!function(t){t.Child="child",t.Tree="tree",t.Attr="attr",t.Char="char"}(ne||(ne={}));const ie=new WeakMap,oe=new MutationObserver((t=>{for(let e=0;e<t.length;e++){const s=t[e];let r=ie.get(s.target);if(!r)return;let n={target:s.target},i=null;switch(s.type){case"subtree":n.type=ne.Tree,i=r[ne.Tree];break;case"childList":n.type=ne.Child,n.addedNodes=s.addedNodes,n.removedNodes=s.removedNodes,i=r[ne.Child];break;case"attributes":n.type=ne.Attr,n.attributeName=s.attributeName,n.oldValue=s.oldValue,i=r[ne.Attr];break;case"characterData":n.type=ne.Char,n.oldValue=s.oldValue,i=r[ne.Char]}if(i){i(new CustomEvent("mutate",{bubbles:!1,cancelable:!1,detail:n}))}}}));function ae(t,e,s,r){if("resize"===t)!function(t,e){Jt.has(t)||(Jt.set(t,e),re.observe(t))}(e,s);else if("outside"===t)switch(r[0]){case"mousedown":!function(t,e){te.push([t,e])}(e,s);break;case"dblclick":!function(t,e){se.push([t,e])}(e,s);break;default:!function(t,e){ee.push([t,e])}(e,s)}else"mutate"===t&&function(t,e,s){let r=Q(s,"child"),n=Q(s,"attr"),i=Q(s,"char"),o=Q(s,"tree"),a=ie.get(t);a||(a={},ie.set(t,a),r&&(a[ne.Child]=e),n&&(a[ne.Attr]=e),i&&(a[ne.Char]=e),o&&(a[ne.Tree]=e),oe.observe(t,{childList:r,attributes:n,characterData:i,subtree:o}))}(e,s,r)}document.addEventListener("mousedown",(t=>{let e=i(t.composedPath(),0,t.target);te.forEach((([s,r])=>{if(!s.contains(e)&&!s.contains(D(e,(t=>t instanceof ShadowRoot),"parentNode")?.host)){r(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:s,event:t}}),s)}}))}),!1),document.addEventListener("click",(t=>{let e=i(t.composedPath(),0,t.target);ee.forEach((([s,r])=>{if(!s.contains(e)&&!s.contains(D(e,(t=>t instanceof ShadowRoot),"parentNode")?.host)){r(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:s,event:t}}),s)}}))}),!1),document.addEventListener("dblclick",(t=>{let e=i(t.composedPath(),0,t.target);se.forEach((([s,r])=>{if(!s.contains(e)&&!s.contains(D(e,(t=>t instanceof ShadowRoot),"parentNode")?.host)){r(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:s,event:t}}),s)}}))}),!1);const le=/,|^(debounce:.+)|(debounce$)/,ce=/,|^(throttle:.+)|(throttle$)/,de="self",ue="stop",he="prevent",pe="once",fe="left",ge="right",me="middle",Ee="ctrl",_e="alt",be="shift",ve="meta",Ce={esc:"escape"},Ne=":";function ye(t,e,s,r){let n,i=t.split("."),o=i.shift(),a=i.includes(pe),l=e;if(n=q(i,(t=>le.test(t)))){let t=n.split(Ne);l=z(l,parseInt(t[1])||100)}if(n=q(i,(t=>ce.test(t)))){let t=n.split(Ne);l=Y(l,parseInt(t[1])||100)}if(a&&(l=L(l)),function(t){return Zt.includes(t)}(o))return ae(o,s,l,i),l;let c=t=>{if(i.includes(he)&&t.preventDefault(),i.includes(ue)&&t.stopPropagation(),!i.includes(de)||t.target===t.currentTarget){if(t instanceof MouseEvent){if(i.includes(fe)&&0!=t.button)return;if(i.includes(ge)&&2!=t.button)return;if(i.includes(me)&&1!=t.button)return}else if(t instanceof KeyboardEvent){if(X(i,(t=>t==Ee))[0]&&!t.ctrlKey)return;if(X(i,(t=>t==_e))[0]&&!t.altKey)return;if(X(i,(t=>t==be))[0]&&!t.shiftKey)return;if(X(i,(t=>t==ve))[0]&&!t.metaKey)return;if(!Z(i,(t=>Ce[t]||t)).includes(t.key.toLowerCase()))return}l(t)}};s.addEventListener(o,c);let d=r.__events[o];return d||(d=r.__events[o]=[]),d.push([s,c]),c}const Se="@",Te=".",Pe="?",we="*",Ae=":",xe="ref",ke=/<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/gims,Me="slot-props";function Oe(t,e){let s="",r=d(e.vars),n=e.strings.length-1,o=e.vars.length-1;for(let r=0;r<=n;r++){const n=e.strings[r];let a=i(e.vars,r,"");if(a&&a.di){let e=a.render(t);if(e instanceof Ge){let[s,r]=Oe(t,e);Reflect.defineProperty(a,"_renderVars",{value:r}),a=Re+s+De}else a=e??Ie}else if(a instanceof Ge){let[e,s]=Oe(t,a);Reflect.defineProperty(a,"_renderVars",{value:s}),a=Le+e+Ve}else a=r>o?"":Ie;s+=n+a}let a=0;return s=s.replace(ke,((t,e)=>J(t,Ie,(()=>Ie.replace("--\x3e","")+a++)))),s=s.replace(Ue,"$1><").trim(),[s,r]}const Re="\x3c!--c_ui-pl_di-start--\x3e",De="\x3c!--c_ui-pl_di-end--\x3e",Le="\x3c!--c_ui-pl_tmpl-start--\x3e",Ve="\x3c!--c_ui-pl_tmpl-end--\x3e",Ie="\x3c!--c_ui-pl_df--\x3e",He="\x3c!--c_ui-pl_df",We=/<!--c_ui-pl_df\d*(-->)?/;function $e(t,e,s,n,o){const a=document.createElement("div");a.innerHTML=e;const l=document.createNodeIterator(a,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let d,u,h=0,p=null,f=[],g=[],C=[],N=[t],y=[],S=[];for(;d=l.nextNode();)if(d instanceof HTMLElement||d instanceof SVGElement){d instanceof zt?p=d:p?.contains(d)||(p=null);let e={},r=E(d.attributes);for(let i=0;i<r.length;i++){const o=r[i];let{name:a,value:l}=o;if(a===Me){let t=d.getAttribute("name")||"default";if(p){let e=p._slotsPropMap[t];e||(e=p._slotsPropMap[t]=[]),e.push(d)}}if(b(a,He)){let e=s[h];if(e instanceof qt){e.checkScope(Ft.TAG);let s=new Qt(d,a.substring(1),Ft.TAG);e.point=s,e.di.slotComponent=p,e.di.renderComponent=n;let r=new Xt(h,d);r.isDirective=!0,r.value=e,r.isComponent=!!p,t.push(r),h++,e.di.created(s,...e.args)}d.removeAttribute(a)}else if(a[0]!==Se)if(a!==xe)if(a[0]!==Te||We.test(l)){if(We.test(l)){let r=s[h],i=new Xt(h,d,a.replace(/\.|\?|@/,""),l);if(i.isComponent=!!p,a[0]===Te||a[0]===Pe||a[0]===we){if(r instanceof qt){r.checkScope(Ft.PROP);let t=new Qt(d,a.substring(1),Ft.PROP);r.point=t,r.slotComponent=p,i.value=r,i.isDirective=!0,r&&r.di.created(r.point,...r.args)}else if(a[0]===Pe)i.isToggleProp=!0,i.value=!!r,i.value&&d.setAttribute(a.substring(1),"");else if(a[0]===we){i.value=r;let t=a.substring(1);const[e,s]=t.split(Ae);let n=e;switch(s){case"camel":n=H(n);break;case"kebab":n=m(n);break;case"snake":n=tt(n)}i.attrName=n,d.setAttribute(n,r)}else if(d instanceof zt||"SLOT"===d.tagName){let t=H(a.substring(1));t in d||"SLOT"===d.tagName||ft(d.tagName,`Prop '${a}' is not defined in ${d.tagName}`),i.value=r,i.isProp=!0,e[t]=r}else ft(d.tagName,`Prop '${a}' can only be set on a CompElem or a slot`);d.removeAttribute(a),r=""}else{let t;if(i.value=r,r instanceof qt){let e=Ft.ATTR;"class"===a?e=Ft.CLASS:"style"===a&&(e=Ft.STYLE),r.checkScope(e),i.isDirective=!0;let s=new Qt(d,a,e);r.point=s,r.di.slotComponent=p,r.di.renderComponent=n,t=r,r=""}l=w(l,We,r),o.value=l,t&&t.di.created(t.point,...t.args)}t.push(i),h++}}else ft(d.tagName,`Prop '${a}' must be an interpolation`);else{if(We.test(l)){let t=s[h];if(!c(t,"current")){ft(d.tagName,"Ref must be a RefObject");continue}h++,t.current=d}d.removeAttribute(a)}else{let e=t=>{};if(We.test(l)){let r=s[h];if(!v(r)){ft(d.tagName,`Event '${a}' must be a function`);continue}e=r.bind(n);let i=new Xt(h,d,a.replace(/\.|\?|@/,""),l);i.isComponent=!!p,i.isEvent=!0,t.push(i),h++}ye(a.substring(1),e,d,n),d.removeAttribute(a)}}d instanceof zt?(d._initProps(e),d._regWrapper(n)):d instanceof HTMLSlotElement&&n._bindSlot(d,d.name||"default",e)}else{let e=d,a=`\x3c!--${e.nodeValue}--\x3e`;if(a===Re){u&&f.push(u),u=e;let r=s[h],i=new Xt(h,d);i.isComponent=!!p,i.isDirective=!0,i.value=r;let o=p?Ft.SLOT:Ft.TEXT,a=new Qt(u,"",o);r.point=a,r.di.slotComponent=p,r.di.renderComponent=n,g.push(r),t.push(i),C.push(i),t=[],N.push(t),h++,S.push(h),y.push(s),s=r._renderVars,h=0;continue}if(a===De){C.pop().textNode=e;let r=g.pop();r.point.endNode=e,r.di.created(r.point,...r.args),u=f.pop(),r.di.__updatePoints=t,N.pop(),t=_(N),s=y.pop(),h=S.pop()}else{if(a===Le){u&&f.push(u),u=e;let r=s[h],a=new Xt(h,d);a.isComponent=!!p,a.isTmpl=!0;let l=_(g);(l&&"ForEach"===i(l,"diClass.name")||"ForEach"==o.constructor.name)&&(a.key=r.getKey()),r=a.value=new $t(r);let c=p?Ft.SLOT:Ft.TEXT,m=new Qt(u,"",c);r.point=m,r.slotComponent=p,r.renderComponent=n,g.push(r),t.push(a),C.push(a),t=[],N.push(t),h++,S.push(h),y.push(s),s=r._renderVars,h=0;continue}if(a===Ve){C.pop().textNode=e;let r=g.pop();r.point.endNode=e,u=f.pop(),r.__updatePoints=t,N.pop(),t=_(N),s=y.pop(),h=S.pop()}}if(a!==Ie)continue;let l=new Xt(h,d);t.push(l),l.isComponent=!!p,l.isText=!0;let c,m=s[h];if(c=document.createComment(`compelem-ui-${h}-child-start`),e.parentNode.insertBefore(c,e),e.nodeValue=`compelem-ui-${h}-child-end`,l.textNode=c,m instanceof qt){l.isDirective=!0,l.value=m;let t=p?Ft.SLOT:Ft.TEXT,s=new Qt(c,"",t);s.endNode=e,m.point=s,m.di.slotComponent=p,m.di.renderComponent=n,m.di.created(s,...m.args),m=""}else if(m instanceof Ge){l.isTmpl=!0,l.value=m;let[e,s]=Oe(n,m);m=$e(t,e,s,n,o)}else l.value=m;if(h++,r(m))continue;if(m instanceof NodeList){let t=document.createDocumentFragment();t.append(...m),e.parentNode.insertBefore(t,e)}else if(m instanceof Element)e.parentNode.insertBefore(m,e);else if($(m)){let t=document.createTextNode(m);e.parentNode.insertBefore(t,e)}}return a.childNodes}const je={insertBefore:function(t,e){if(!t.parentNode)return;let s=document.createDocumentFragment();s.append(...e),t.parentNode.insertBefore(s,t)},remove:function(t,e){if(t===e)return void t?.parentNode?.removeChild(t);let s=t.nextSibling;for(;s&&s!==e;)s?.parentNode?.removeChild(s),s=t.nextSibling}};function Be(t,...e){return new Ge(s(t)?[t]:t,e)}const Ue=/([a-z0-9"'])\s*>\s*</gim;function ze(t){return{current:t}}class Ge{strings;vars;constructor(t,e){this.strings=d(t),this.vars=e}getKey(){let t=this.vars,e="";return g(this.strings,((s,r)=>{if(lt.test(s))return e=et(t[r]),!1})),e}getKeys(){let t=this.vars,e=[];for(let s=0;s<this.strings.length;s++){const r=this.strings[s];if(lt.test(r)){let r=et(t[s]);e.push(r)}}return l(e)&&t.forEach((t=>{if(t instanceof Ge){let s=t.getKey();e.push(s)}})),e}append(t){let e=_(this.strings);return t.strings.forEach(((t,s)=>{0!=s?this.strings.push(t):this.strings[this.strings.length-1]=e+t})),this.vars=d(this.vars,t.vars),this}insert(t,e){let s=e.strings.shift();return this.strings[t]+=s,this.strings.splice(t+1,0,...e.strings),this.vars.splice(t,0,...e.vars),this}getHTML(t){let[e,s]=Oe(t,this),r=$e([],e,s,t,t);return st(r,((t,e)=>t+e.outerHTML),"")}}function Fe(t,e,s){s.get||pt(`Computed '${e}' must be a getter`),c(t.constructor,dt.COMPUTED)||(t.constructor[dt.COMPUTED]=l(t.constructor[dt.COMPUTED])?{}:f(t.constructor[dt.COMPUTED])),t.constructor[dt.COMPUTED][e]=s.get}const Ke=St(class extends _t{static get priority(){return Number.MAX_VALUE}created(t,e,s,...r){let n=t[s];t[s]=z(n,this.wait,this.immediate);let o=Reflect.getPrototypeOf(t);o&&!i(o,s+"_$__")&&T(o,s+"_$__",n)}beforeMount(t,e,...s){}mounted(t,e,...s){}updated(t,e){}get targets(){return[ht.METHOD]}wait;immediate;result;constructor(t,e=!1){super(),this.wait=t,this.immediate=e}});function Xe(t,e){return(s,r,n)=>{c(s.constructor,dt.EVENTS)||(s.constructor[dt.EVENTS]=l(s.constructor[dt.EVENTS])?[]:f(s.constructor[dt.EVENTS])),s.constructor[dt.EVENTS].push({name:t,options:e,fn:s[r]})}}var Qe;!function(t){t.ONCE="once",t.UPDATABLE="updatable"}(Qe||(Qe={}));class qe extends _t{static get priority(){return Number.MAX_VALUE}created(t,e,s,...r){}mounted(t,e,...s){}get targets(){return[ht.FIELD]}selector;cache;result;constructor(t,e){super(),this.selector=t,this.cache=e}static getKey(t){return t}getter(t){this.result=t.shadowRoot?.querySelector(this.selector)}beforeMount(t,e,s,r,...n){const i=this;Reflect.defineProperty(t,r,{get:()=>(i.result&&i.cache||i.getter(t),i.result)})}updated(t,e){this.cache===Qe.UPDATABLE&&this.getter(t)}}const Ye=St(qe),Ze=St(class extends qe{getter(t){this.result=t.shadowRoot?.querySelectorAll(this.selector)}});function Je(t){if(1===arguments.length)return(e,s)=>{ts(e,s,t)};ts(arguments[0],arguments[1],{prop:""})}function ts(t,e,s){if(!c(t.constructor,dt.STATES)){const e={};let s=t.constructor;for(;(s=mt(s))!==zt;)p(e,s[dt.STATES]?f(s[dt.STATES]):{});Reflect.defineProperty(t.constructor,dt.STATES,{configurable:!1,enumerable:!1,value:e})}s.shallow=s.shallow||!1,t.constructor[dt.STATES][e]=s}function es(t,e,s){ts(t.prototype,e,s||{prop:""})}function ss(t){return e=>{if(e){if(e.prototype.hasOwnProperty("attributeChangedCallback")){let t=e.prototype.attributeChangedCallback;e.prototype.attributeChangedCallback=function(e,s,r){zt.prototype.attributeChangedCallback.call(this,e,s,r),t.call(this,e,s,r)}}if(e.prototype.hasOwnProperty("connectedCallback")){let t=e.prototype.connectedCallback;e.prototype.connectedCallback=function(){zt.prototype.connectedCallback.call(this),t.call(this)}}if(e.prototype.hasOwnProperty("disconnectedCallback")){let t=e.prototype.disconnectedCallback;e.prototype.disconnectedCallback=function(){zt.prototype.disconnectedCallback.call(this),t.call(this)}}customElements.define(t,e)}}}function rs(t,e){return(s,r)=>{c(s.constructor,dt.WATCH)||(s.constructor[dt.WATCH]=l(s.constructor[dt.WATCH])?{}:f(s.constructor[dt.WATCH]));(C(t)?t:[t]).forEach((t=>{let n=t.replaceAll(".","-"),i=s.constructor[dt.WATCH][n];C(i)||(i=s.constructor[dt.WATCH][n]=[]),i.push({source:t,options:e,handler:s[r]})}))}}class ns extends(Wt(Object)){_renderArgs;static get scopes(){return[]}renderParams}const is=["key"];const os=Yt(class extends ns{created(t,e){let s=t.startNode;if(s instanceof zt){let t={},r={};g(e,((e,n)=>{is.includes(n)||(n in s?t[n]=e:r[n]=e+"")})),s._initProps(t,r)}else g(e,((t,e)=>{s.setAttribute(e,t)}))}update(t,e,s){return Gt.NONE}static get scopes(){return[Ft.TAG]}render(t){}});const as=Yt(class extends ns{created(t,e){let r=[];C(e)?r=K(e):o(e)?r=x(e,((t,e)=>t?e:[])):s(e)&&(r=e.split(" "));let n=t.startNode;g(this.lastCls,(t=>{n.classList.remove(t)})),g(r,(t=>{n.classList.add(t)})),this.lastCls=d(r)}update(t,e,s){return this.created(t,e[0]),Gt.NONE}static get scopes(){return[Ft.CLASS]}lastCls;render(t){}});const ls=Yt(class extends ns{created(t,...e){}update(t,e,s){if(l(t.getNodes())&&(!e||l(e[0])))return Gt.NONE;if(rt(this.lastAry,e[0])&&this.lastAry.length===e[0].length)return Gt.NONE;if(!l(this.renderParams)){let t=_(this.renderParams);C(t)||(t=[t]),this.renderParams=t}return this.lastAry=nt(e[0]),Gt.UPDATE}constructor(t){super(),l(this.renderParams)||(this.renderParams=E(_(this.renderParams)))}static get scopes(){return[Ft.TEXT,Ft.SLOT]}lastAry;lastRenderTmpl;render(t,e){let s=Z(t,((t,s)=>e(t,s)));if(s.length<1)return this.lastRenderTmpl=new Ge([],[]),this.lastRenderTmpl;let r=[],n=[];const i=[],o=[];for(let t=0;t<s.length;t++){const e=s[t];let a=_(n),l=e.vars,c=!0,d=e.strings;for(let t=0;t<d.length;t++){const e=d[t];if(lt.test(e)){let e=l[t]+"";if(r.includes(e))return void pt(`forEach - duplicate key '${e}'`);r.push(e),c=!1}0==t&&a?n[n.length-1]=a+e:n.push(e)}if(c)return void pt("forEach - missing 'key' prop");let u=_(i);u&&d.length>0&&(i[i.length-1]=$(u)+d.shift()),i.push(""),o.push(e)}return this.lastAry=nt(t),i.push(""),this.lastRenderTmpl=new Ge(i,o),this.lastRenderTmpl}});const cs=Yt(class extends ns{created(t,...e){}ifNodes;elseNodes;static get scopes(){return[Ft.TEXT,Ft.SLOT]}update(t,e,s){return!!e[0]==!!s[0]?Gt.NONE:(e[0],Gt.REPLACE)}render(t,e,s){return t?e(t):s(t)}});const ds=Yt(class extends ns{created(t,...e){}static get scopes(){return[Ft.TEXT,Ft.SLOT]}update(t,e,s){return e[0]===s[0]?Gt.NONE:e[0]?Gt.REPLACE:Gt.REMOVE}render(t,e){return t?e():Be``}});var us;!function(t){t.CHANGE="change",t.INPUT="input"}(us||(us={}));const hs=Yt(class extends ns{created(t,e,s="value"){const r=t.startNode;if("binded"===i(r,"_model"))return;let n=_(this.renderParams);if(this.updateProp=s,this.modelPath=n,o(e)||$(e)||(e=""),r instanceof zt)r._initProps({[this.updateProp]:e}),r.addEventListener("update:"+s,(t=>{T(this.renderComponent,this.modelPath,t.detail.value)})),T(r,"_model","binded");else if(r instanceof HTMLTextAreaElement)r.setAttribute(this.updateProp,e+""),r.addEventListener("input",(t=>{let e=t.target;T(this.renderComponent,this.modelPath,e.value)})),T(r,"_model","binded");else if(r instanceof HTMLInputElement){let t="",n="";switch(r.type){case"checkbox":case"radio":t="checked",n="change";break;default:t="value",n="input"}r.setAttribute(s??t,e+""),r.addEventListener(n,(t=>{let e=t.target;T(this.renderComponent,this.modelPath,e.value)})),T(r,"_model","binded")}else r instanceof HTMLSelectElement&&(r.setAttribute(this.updateProp,e+""),r.addEventListener("change",(t=>{let e=t.target;T(this.renderComponent,this.modelPath,e.value)})),T(r,"_model","binded"))}update(t,e,s){if(this.modelPath||(this.modelPath=_(this.renderParams)),!P(e,s)){const s=t.startNode;if(s instanceof zt)s._updateProps({[this.updateProp]:e[0]});else if(s instanceof HTMLTextAreaElement||s instanceof HTMLSelectElement)s.setAttribute(this.updateProp,e[0]+"");else if(s instanceof HTMLInputElement)switch(s.type){case"checkbox":case"radio":e[0]?s.setAttribute("checked",""):s.removeAttribute("checked");break;default:s.setAttribute(this.updateProp,e[0]+"")}}return Gt.NONE}static get scopes(){return[Ft.TAG]}modelPath;render(t,e="value"){}});const ps=Yt(class extends ns{created(t,e,s){let n=t.startNode;r(this.display)&&(this.display=n.style.display);let i=s;this.renderComponent.nextTick((()=>{n.style.display=e?this.display:"none",i&&i(n,e)}))}update(t,e,s){return this.created(t,e[0],e[1]),Gt.NONE}display=void 0;static get scopes(){return[Ft.TAG]}constructor(t){super(),this.point=t}render(t,e){}});const fs=Yt(class extends ns{created(t,e,s){e=e.bind(this.renderComponent),this.slotComponent._bindSlotHook(s||"default",e)}update(t,e,s){return Gt.NONE}static get scopes(){return[Ft.SLOT]}render(t,e){}});class gs{static getCssText(t,e=!1){return s(t)?t:y(Z(t,((t,s)=>s.startsWith("--")?s+":"+t+(e?" !important":""):m(s)+":"+t+(e?" !important":""))),";")}static setStyle(t,e){if(s(t)&&!$(t))return{};let r=gs.getCssText(t),n={};return g(r.split(";"),(t=>{let s=t.split(":"),r=$(s[0]),i=$(s[1]);n[r]=e.style.getPropertyValue(r),e.style.setProperty(r,i)})),n}}const ms=Yt(class extends ns{created(t,e){gs.setStyle(e,t.startNode)}update(t,e,s){return this.created(t,e[0]),Gt.NONE}constructor(t){super(),this.point=t}static get scopes(){return[Ft.STYLE]}render(t){}});const Es=Yt(class extends ns{created(t,e){this.modelPath||(this.modelPath=_(this.renderParams));const s=t.startNode;let r=t.attrName;s._initProps({[r]:e}),s.addEventListener("update:"+r,(t=>{T(this.renderComponent,this.modelPath,t.detail.value)}))}update(t,e,s){if(!P(e,s)){const s=t.startNode;let r=t.attrName;s._updateProps({[r]:e[0]})}return Gt.NONE}static get scopes(){return[Ft.PROP]}modelPath;constructor(t){super()}render(t){}});const _s=Yt(class extends ns{created(t,...e){}static get scopes(){return[Ft.TEXT,Ft.SLOT]}update(t,e,s){return P(e,s)?Gt.NONE:Gt.REPLACE}render(t,e){let s=()=>Be``,r=[],n=[];g(e,((t,e)=>{if(v(t))r.push(e),n.push(t);else{let e=t[0],s=t[1];r.push(e),n.push(s)}"default"===e&&(s=t)}));let i=it(r,(e=>v(e)?e(t):e==t));return ot(n[i]??s)}});export{zt as CompElem,gs as CssHelper,_t as Decorator,ht as DecoratorType,Nt as DecoratorWrapper,ns as Directive,Gt as DirectiveUpdateTag,qt as DirectiveWrapper,Qt as EnterPoint,Ft as EnterPointType,bt as GetKeyFnName,us as ModelTriggerType,Qe as QueryCache,Ge as Template,Xt as UpdatePoint,Ct as _DecoratorMap,vt as _DecoratorsKey,xt as _getObservedAttrs,os as bind,Oe as buildHTML,as as classes,Fe as computed,ze as createRef,Ke as debounced,St as decorator,Yt as directive,Xe as event,ls as forEach,Be as html,cs as ifElse,ds as ifTrue,es as makeState,hs as model,Pt as prop,Ye as query,Ze as queryAll,ps as show,fs as slot,Je as state,ms as styles,Es as sync,ss as tag,rs as watch,_s as when};
+  import{toPath as t,some as e,isString as r,isUndefined as n,isBlank as s,get as o,isObject as i,isDefined as a,isEmpty as l,has as c,concat as u,defaults as d,isLowerCaseChar as p,merge as h,cloneDeep as f,each as g,kebabCase as m,toArray as v,last as b,startsWith as E,isFunction as y,isArray as N,initial as S,flatMap as C,test as _,size as T,assign as A,first as w,closest as P,once as k,bind as M,camelCase as D,isNil as x,trim as O,isBoolean as R,parseJSON as L,isNull as W,debounce as H,set as I,groupBy as V,reject as $,filter as B,compact as U,remove as j,map as F,includes as z,find as G,throttle as K,join as Q,split as X,isEqual as q,replace as Y,toString as Z,replaceAll as J,isSymbol as tt,snakeCase as et,clone as rt,reduce as nt,isMatch as st,findIndex as ot,call as it}from"myfx";const at=new WeakMap,lt=/\s+\.?key\s*=/;var ct,ut,dt,pt;function ht(t){console.error("[CompElem]",t)}function ft(t,e){console.error(`[CompElem <${t}>]`,e)}function gt(e){return t(e).join("-")}function mt(t){return Object.getPrototypeOf(t)}function vt(t){let e=t;return r(t)&&/(?:^true$)|(?:^false$)/.test(e)?e="true"===e:(n(e)||s(e))&&(e=!0),e}!function(t){t[t.CSS=1]="CSS",t[t.COMPUTED=2]="COMPUTED"}(ct||(ct={})),function(t){t.PROPS="__deco_props",t.STATES="__deco_states",t.COMPUTED="__deco_computed",t.WATCH="__deco_watch",t.EVENTS="__deco_events"}(ut||(ut={})),function(t){t.Prod="prod",t.Dev="dev"}(dt||(dt={})),function(t){t.CLASS="class",t.FIELD="field",t.METHOD="method"}(pt||(pt={}));class bt{static get priority(){return 0}}const Et="getKey",yt="__decorators",Nt=new WeakMap;class St{args;metadata;decoratorClass;instanceMap;key;priority=0;constructor(t,e,r){this.args=t,this.metadata=e,this.decoratorClass=r,this.priority=o(r,"priority",0),this.instanceMap=new WeakMap}create(t){let e,r=new this.decoratorClass(...this.args),s=r.targets,c=this.metadata[2];i(c)&&a(o(c,"configurable"))?e=pt.METHOD:n(this.metadata[2])&&(e=pt.FIELD),!l(s)&&e&&s.includes(e)?(r.created(t,...this.metadata),this.instanceMap.set(t,r)):ht(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${s.join(",")}' bug got '${e}'`)}beforeMount(t,e){this.instanceMap.get(t).beforeMount(t,e,...this.metadata)}mounted(t,e){this.instanceMap.get(t).mounted(t,e,...this.metadata)}updated(t,e){this.instanceMap.get(t).updated(t,e)}}const Ct=new WeakMap;function _t(t){let e=(...e)=>(...r)=>{let n=r[0].constructor,s=n[yt];if(!c(n,yt)){let t=Object.getPrototypeOf(n);s=t?u(t[yt]??[]):[],Reflect.defineProperty(n,yt,{configurable:!1,enumerable:!1,value:s})}let o,i={},a=t[Et];if(a){let r=Ct.get(t);if(r||(r=new WeakMap,Ct.set(t,r)),i=r.get(n),i||(i={},r.set(n,i)),o=a(...e),i[o])return i[o]}let l=new St(e,r,t);return i[o]=l,s?.push(l),l};return Nt.set(e,!0),e}const Tt=new WeakMap;function At(t){if(1===arguments.length)return(e,r,n)=>{t.required=t.required||!1,t.attribute=!1!==t.attribute,wt(e,r,t,n)};let e=arguments[0],r=arguments[1],n=arguments[2];t={type:void 0,required:!1,attribute:!0},n&&"function"==typeof n.type&&(t=d(n,t),n=void 0),wt(e,r,t,n)}function wt(t,e,r,n){let s;if(p(e[0])||ht(`Prop '${e}' must be in CamelCase`),!c(t.constructor,ut.PROPS)){const e={};let r=t.constructor;for(;(r=mt(r))!==zt;)h(e,r[ut.PROPS]?f(r[ut.PROPS]):{});Reflect.defineProperty(t.constructor,ut.PROPS,{configurable:!1,enumerable:!1,value:e}),s=new Set,g(e,((t,e)=>{if(t.attribute){let t=m(e);s?.add(t)}})),Tt.set(t.constructor,s)}if(n&&(n.get&&(r.getter=n.get),n.set&&(r.setter=n.set)),r.attribute){s||(s=Tt.get(t.constructor));let r=m(e);s?.add(r)}c(t.constructor,"observedAttributes")||(t.constructor.observedAttributes=[]),t.constructor.observedAttributes=v(s),r.shallow=r.shallow||!1,t.constructor[ut.PROPS][e]=r}const Pt=new Set;function kt(t){return Tt.get(t)??Pt}const Mt={collectWatch(t,e,r){let n=Lt.get(t);n||(n={},Lt.set(t,n));let s=n[r];s||(s=n[r]=[]),s.push(e)},startCollect(t,e){this.__collectType=e,this.__collecting=t},setUpdater(t){this.__updater=t},endCollect(){this.__collecting=null},__directiveQ:[],setDirectiveQ(t){let e=b(this.__directiveQ);const r=t?t.join(","):"",n=e?e.join(","):"";e&&r===n||(e&&e.length<t.length&&E(r,n)?this.__directiveQ[this.__directiveQ.length-1]=t:this.__directiveQ.push(t))},popDirectiveQ(){let t=u(this.__directiveQ);return this.__directiveQ=[],t},startRender(t){this.__renderCollecting=!0,this.__renderContext=t},endRender(t){this.__renderCollection.forEach((e=>{t._regDeps(e,this.__renderContext)})),this.__renderCollection.clear(),this.__renderCollecting=!1,this.__renderContext=null},collect(t){this.__renderCollection.add(t)},clear(){this.__directiveQ=[]},__updater:null,__collecting:null,__collectType:-1,__renderCollection:new Set,__renderContext:null,__renderCollecting:!1,__skipCheck:!1},Dt=new WeakMap,xt=new WeakMap,Ot=new WeakMap,Rt=new WeakMap,Lt=new WeakMap,Wt=new WeakSet;function Ht(t,e){if(!i(t))return t;const r=Wt.has(t)?t:new Proxy(t,{get(t,e,r){if(!e)return;const n=Reflect.get(t,e,r);if("string"!=typeof e&&"number"!=typeof e)return n;let s=e in t;if((Mt.__renderCollecting||Mt.__collecting)&&(s&&t.hasOwnProperty(e)||!s)){let t=xt.get(r)??[],n=u(t,[e]),s=n.join("-");if(Mt.__renderCollecting)Mt.collect(gt(n)),Mt.setDirectiveQ(n);else if(Mt.__collecting){let t;switch(Mt.__collectType){case ct.COMPUTED:t=Ot.get(Mt.__collecting),t||(t={},Ot.set(Mt.__collecting,t));break;case ct.CSS:t=Rt.get(Mt.__collecting),t||(t={},Rt.set(Mt.__collecting,t))}let e=t[s];e||(e=t[s]=[]),e.push(Mt.__updater)}}return n},set(t,e,r,n){if(!e)return!1;let s=t[e];if(!i(s)&&s===r)return!0;if(Number.isNaN(r)&&Number.isNaN(s))return!0;let a=xt.get(n)??[],c=u(a,[e]),d=Dt.get(n).from,p=o(d.constructor,ut.PROPS),h=o(d.constructor,ut.STATES),f=o(p,[c[0],"hasChanged"])||o(h,[c[0],"hasChanged"]);if(f){if(!f.call(d,r,s))return!0}else if(s===r&&!at.has(s))return!0;p&&p[e]&&t.__isData&&p[e].sync&&d.emit("update:"+e,{value:r});let g=Dt.get(n)?.contextSet,m=r;!i(r)||y(r)||r instanceof Node||Object.isFrozen(r)||g.forEach((t=>{let r=Dt.get(n)?.pathMap,s=r?.get(t);s&&(c=u(s,[e]),xt.set(m,c),m=Ht(m,t),Wt.add(m),xt.set(m,c))}));let v=Reflect.set(t,e,m),b=Dt.get(n).pathMap;return g.forEach((t=>{let r=b.get(t);if(!r)return;t===d&&a.length>1&&r.length>1&&a[0]===r[0]&&(r=a),c=u(r,"length"==e&&N(n)?[]:[e]);let i=Ot.get(t),p=Rt.get(t),h=Lt.get(t);if(i||p||h){let t=c.length;for(;t;){let e=c.slice(0,t).join("-");if(h){const r=h[e];t===c.length?r?.forEach((t=>{let e=t();e.ov=s,Vt.pushWatch(e)})):r?.forEach((t=>{let e=t();o(e,"deep")&&(e.ov=s,Vt.pushWatch(e))}))}if(i){let t=i[e];if(!l(t))for(let e=0;e<t.length;e++){const r=t[e];Vt.pushComputed(r)}}if(p){let t=p[e];if(!l(t))for(let e=0;e<t.length;e++){const r=t[e];Vt.pushCss(r)}}t--}}let f=t._notify(s,c);Vt.pushNext(f,t.cid)})),v}});Wt.has(r)||Wt.add(r);let n=xt.get(t)??[];if(Object.isExtensible(t)&&!Dt.get(r)){let t=new Set;t.add(e);let s=new WeakMap;s.set(e,n),Dt.set(r,{from:e,contextSet:t,pathMap:s})}else{Dt.get(r).contextSet.add(e);let t=Dt.get(r).pathMap,s=t.get(e),i=u(n);if(s&&s.join("")!==i.join("")){let t=o(e,S(s));N(t)||function(...t){console.warn("[CompElem]",...t)}(`The object is referenced by more than one @state '${i.join(".")},${s.join(".")}'`),s=i}else t.set(e,i)}let s=o(e.constructor,ut.PROPS),a=o(e.constructor,ut.STATES);for(let r in t){const l=t[r];let c=o(s,[r,"shallow"])||o(a,[r,"shallow"]);!i(l)||Wt.has(l)||y(l)||l instanceof Node||Object.isFrozen(l)||c||(xt.set(l,u(n,[r])),t[r]=Ht(l,e),Wt.add(t[r]),xt.set(t[r],u(n,[r])))}return r}const It=new Map;class Vt{static watchSet=new Set;static computedSet=new Set;static cssSet=new Set;static nextSet=new Set;static nextPending=!1;static next;static flush(){Vt.nextPending=!1;let t=Array.from(Vt.watchSet);Vt.watchSet.clear();let e=Array.from(Vt.computedSet);Vt.computedSet.clear();let r=Array.from(Vt.cssSet);Vt.cssSet.clear();let n=Array.from(Vt.nextSet);Vt.nextSet.clear(),t.forEach((t=>t(o(t,"ov")))),e.forEach((t=>t())),r.forEach((t=>t())),n.forEach((t=>t())),It.clear()}static pushWatch(t){Vt.watchSet.add(t)}static pushComputed(t){Vt.computedSet.add(t)}static pushCss(t){Vt.cssSet.add(t)}static pushNext(t,e){if(e){if(It.has(e))return;It.set(e,t)}Vt.nextSet.add(t),Vt.nextPending||(Vt.nextPending=!0,Vt.next())}}(()=>{const t=Promise.resolve(),e=Vt.flush;Vt.next=()=>{t.then(e)}})();const $t={boolean:Boolean,string:String,number:Number,object:Object,array:Array,function:Function,undefined:Object},Bt=new WeakMap;let Ut=[],jt=0;const Ft=new Map;class zt extends HTMLElement{static __l_globalRule=document.createElement("style");static defaults(t){Ut=C(t.css,(t=>{if(r(t)){let e=new CSSStyleSheet;return e.replaceSync(t),e}return t instanceof CSSStyleSheet?t:[]})),t.global,g(t,((t,e)=>{_(e[0],/[A-Z]/)}))}#t;#e={};#r={"#slots":{}};#n={};#s={};#o;#i={};__events={};get[Symbol.toStringTag](){return this.constructor.name}get cid(){return this.#t}get reactiveData(){return this.#n}get attrs(){return this.#a}get props(){return this.#l}get renderRoot(){return this.#c}get renderRoots(){return this.#u}get parentComponent(){return this.#d}get wrapperComponent(){return this.#p}get slotHooks(){return this.#h}get css(){return Bt.get(this.constructor)}get globalStyleSheet(){return Ft.get(this.constructor)?.sheet}get isMounted(){return this.#f}get slots(){return this.#r["#slots"]}#a;#l;#c;#u;#d;#p;#g={};#h={};#m={};#f=!1;static get styles(){return[]}static get globalStyles(){return[]}get styles(){return[]}#v=!1;#b=!1;constructor(...t){super(),this.#t=jt++,1===T(t)&&(this.#l={},A(this.#l,w(t)));let e=this.render.bind(this);this.render=function(){let t;return Mt.startRender(this),t=e(),Mt.endRender(this),t};let n=o(this.constructor,"globalStyles"),s=Ft.has(this.constructor);if(!l(n)&&!s){let t="";n.forEach((e=>{r(e)&&(t+=e+"\n")}));let e=document.createElement("style");e.textContent+=t,Ft.set(this.constructor,e),document.head.appendChild(e)}let i=Bt.get(this.constructor),a=i??[];i||(g(o(this.constructor,"styles"),(t=>{if(r(t)){let e=new CSSStyleSheet;e.replaceSync(t),a.push(e)}else a.push(t)})),Bt.set(this.constructor,a)),this.#o=this.attachShadow({mode:"open"}),this.#o.adoptedStyleSheets=[...Ut,...a],this.#E();let c=o(this.constructor,yt);c&&c.sort(((t,e)=>e.priority-t.priority)).forEach((t=>t.create(this))),this.#y=this.#N.bind(this)}#y;connectedCallback(){let t=P(this.parentNode,(t=>t instanceof zt||t.host instanceof zt),"parentNode");this.#d=t?t instanceof zt?t:t.host:null,this.__init()}disconnectedCallback(){}__init(){if(this.#v)return;if(this.#b)return;this.#b=!0;const t=this.#S();this.propsReady(t);for(const e in t){const r=t[e];this.#r[e]=r}this.#C(),g(this.#r,((t,e)=>{let r=Reflect.getOwnPropertyDescriptor(this.#r,e);Reflect.defineProperty(this,e,{get(){let t=Reflect.get(this.#n,e);return r?.get?r?.get():t},set(t){r?.set?r?.set(t):Reflect.set(this.#n,e,t)}})})),Reflect.defineProperty(this.#r,"__isData",{enumerable:!1,value:!0}),this.#n=Ht(this.#r,this);let e=o(this.constructor,ut.COMPUTED);g(e,((t,e)=>{Mt.startCollect(this,ct.COMPUTED),Mt.setUpdater((()=>{this.#n[e]=t.call(this)})),this.#r[e]=t.call(this),Mt.endCollect(),Reflect.defineProperty(this,e,{get(){return Reflect.get(this.#n,e)},set(t){ft(this.tagName,"Cannot set a computed property '"+e+"'")}})}));let r=o(this.constructor,ut.WATCH);g(r,((t,e)=>{t.forEach((t=>{let{source:r,options:n,handler:s}=t,i=s.bind(this);o(n,"once",!1)&&(i=k(i));const a=function(t){let e=o(this,r.replaceAll("-","."));i(e,t,r)}.bind(this);let l=o(n,"deep",!1);if(a.deep=l,Mt.collectWatch(this,(()=>a),e),!o(n,"immediate",!1))return;let c=o(this,r.replaceAll("-","."));i(c,c,r)}))}));let n=function(t,e){let r,n=[];if(He.has(e.constructor)){let s=He.get(e.constructor),i=function(t,e){let r=u(e.vars),n=e.strings.length-1;for(let s=0;s<=n;s++){let n=o(e.vars,s,"");if(n instanceof or){let[e,o]=Ke(t,n);r.splice(s,1,...o)}}return r}(e,t);r=Ie.has(e.constructor)?function(t,e,r){let n=Ie.get(r.constructor)?.cloneNode(!0),s=Ve.get(r.constructor);const o=document.createNodeIterator(n,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let i,a,l=0,c=0;for(;i=o.nextNode();){let n;if(c++,a&&!a.contains(i)&&(a=void 0),i instanceof HTMLElement||i instanceof SVGElement){i instanceof zt&&(a=i);let o={};s[c].forEach((s=>{let c=e[l++];switch(s.type){case $e.Event:n=rt(s.up),s.value||l--,Ae(s.name,c.bind(r),i,r),i.removeAttribute(s.attrName);break;case $e.AttrSlot:a&&s.name,i.removeAttribute(s.attrName);break;case $e.Ref:n=rt(s.up),c.current=i,i.removeAttribute(s.attrName);break;case $e.AttrKey:n=rt(s.up),i.setAttribute(Oe,c);break;case $e.AttrBool:n=rt(s.up),n.value=!!c,n.node=i,n.value&&i.setAttribute(s.name,""),i.removeAttribute(s.attrName);break;case $e.AttrProp:n=rt(s.up),n.value=c,n.node=i,o[s.name]=c;break;case $e.AttrRef:case $e.Attr:n=rt(s.up),n.value=c,n.node=i,i.setAttribute(s.attrName,c),$e.AttrRef===s.type&&i.removeAttribute(s.name);break;case $e.DirectiveAttr:case $e.DirectiveTag:case $e.DirectiveProp:n=rt(s.up),n.value=c,n.node=i;let t=rt(s.point);t.startNode=i;let[e,u,d,p,h]=c,f=Ge.get(i);if(f||(f={},Ge.set(i,f)),f[s.attrName??Symbol.keyFor(e)]=[t,r,a],d(t,u,void 0,{renderComponent:r,slotComponent:a,varChain:h}),$e.DirectiveAttr===s.type){let t=i.getAttribute(s.attrName);t=Y(t,qe,""),i.setAttribute(s.attrName,t)}s.name&&i.removeAttribute(s.name)}n&&t.push(n)})),i instanceof zt?(i._initProps(o),i._regWrapper(r)):i instanceof HTMLSlotElement&&r._bindSlot(i,i.name||"default",o)}else{s[c].forEach((s=>{let o=e[l++];switch(s.type){case $e.DirectiveSlot:case $e.DirectiveText:n=rt(s.up),n.value=o,n.node=i;let[t,e,l,c,u]=o,d=Symbol.keyFor(t),p=document.createComment(`compelem-${r.tagName}-${d}-start`);n.textNode=p,i.parentNode.insertBefore(p,i),i.nodeValue=`compelem-${r.tagName}-${d}-end`;let h=rt(s.point);h.startNode=p,h.endNode=i,Fe.set(i,[h,r,a,e,u]),je.set(i,l),ze.set(i,n),Mt.startRender(i);let f=l(h,e,void 0,{renderComponent:r,slotComponent:a,varChain:u});Mt.endRender(r);let g=Ze(i,f[1],r);g&&g.length>0&&er.insertBefore(i,Array.from(g));break;case $e.Text:n=rt(s.up),n.node=i;let m=Z(o??""),v=document.createTextNode(m);i.replaceWith(v),n.textNode=v}n&&t.push(n)}))}}return n.childNodes}(n,i,e):Ye(n,s,i,e)}else{let[s,o]=Ke(e,t);He.set(e.constructor,s),r=Ye(n,s,o,e)}return Be.set(e,n),r}(this.render(),this);n&&(this.#o.append(...n),this.#u=B(this.#o.childNodes,(t=>t.nodeType===Node.ELEMENT_NODE)),this.#c=this.#u[0]),g(this.#h,((t,e)=>{this.#_(e)}));const i=this;let a=o(this.constructor,yt);a&&a.sort(((t,e)=>e.priority-t.priority)).forEach((t=>{t.beforeMount(this,((t,e)=>(i.#n[t]=e,i.#n[t])))})),this.beforeMount();let l=o(this.constructor,ut.EVENTS);l&&l.forEach((async t=>{let e=t.name,r=A({target:document,once:!1,passive:!1,capture:!1},t.options),n=M(t.fn,this),s=r.target;y(s)&&(s=await s.call(this,this)),s?s.addEventListener(e,n,r):ft(this.tagName,"The target of @event('"+e+"',...) is invalid")})),Mt.startCollect(this,ct.CSS);let c=[];this.styles.forEach((t=>{if(!y(t))return;let e=new CSSStyleSheet;c.push(e),Mt.setUpdater((()=>{let r=t()??"";e.replaceSync(r)}));let r=t();s(r)||e.replaceSync(r)})),Mt.endCollect(),c.length>0&&(this.#o.adoptedStyleSheets=[...this.#o.adoptedStyleSheets,...c]),setTimeout((()=>{this.#f=!0,this.mounted(),a&&a.forEach((t=>{t.mounted(this,((t,e)=>(i.#n[t]=e,i.#n[t])))}))}),0),this.#v=!0}propsReady(t){}render(){throw Error(`[CompElem <${this.tagName}>] Missing render()`)}beforeMount(){}mounted(){}#T(t,e){this.#E();let r=o(this.#e[e],"props");r&&g(this.slots,((t,e)=>{t.filter((t=>t.nodeType===Node.ELEMENT_NODE)).forEach((t=>{t instanceof zt?t._updateProps(r):g(r,((e,r)=>{if(t instanceof HTMLSlotElement){let n=o(t,"__l_comp");if(n){let s=t.name||"default",o=n.#e[s];o||(o=n.#e[s]={props:{}}),o.props||(o.props={}),o.props[r]=e,n.#T(t,s)}}else t.setAttribute(r,e)}))}))})),this.slotChange(t,e)}slotChange(t,e){}attributeChangedCallback(t,e,r){this.#A(t,e,r)}shouldUpdate(t){return!0}updated(t){}#w={};_notify(t,e){let r=[];for(let n=0;n<e.length;n++){const s=e[n];r.push(s);let a=o(this,r),l=gt(r);this.#s[l]={value:a,chain:"slots"===l?["slots"]:r,oldValue:t,end:r.length===e.length},i(a)&&"#"!=l[0]&&at.set(a,l)}return this.#y}#N(){if(T(this.#s)<1)return;const t=this.#s;this.#s={};let e=o(this.constructor,yt);if(e&&e.sort(((t,e)=>e.priority-t.priority)).forEach((e=>{e.updated(this,t)})),!this.shouldUpdate(t))return;let r=new Set;g(t,(({value:t,chain:e,oldValue:n},s)=>{this.#i[s]&&this.#i[s].forEach((t=>{r.add(t)}))})),r.forEach((t=>{t===this?Je(this.render(),this):tr(t,this)})),this.#P.forEach((t=>{this.#_(t)})),this.updated(t),g(t,(({value:t,chain:e,oldValue:r},n)=>{i(t)&&at.has(t)&&at.delete(t)}))}#S(){let t=o(this.constructor,ut.PROPS),r=this.attributes,s=this.tagName,l=this.#l,u={};g(r,(({name:e,value:r})=>{if(e[0]===we||e[0]===Pe||e[0]===ke||e===xe||"slot"===e)return;let n=D(e);t&&!t[n]&&(u[e]=r)})),this.#a=this.#a?A(this.#a,u):u;let d={};if(!t)return Object.seal(d);let p=Object.keys(t),h=p.length;for(let u=0;u<h;u++){const h=p[u];let g,v=t[h],b=c(l,h),E=o(this,h);if(!("_defaultValue"in v)&&(v._defaultValue=E,!v.type)){n(E)&&ft(s,"Prop '"+h+"' has neither propType nor defaultValue be used for type inference");let t=typeof E;N(E)&&(t="array");let e=$t[t];v.type=e}if(b)g=x(l[h])?E:l[h];else{g=E;let t=r.getNamedItem(m(h))||r.getNamedItem(Pe+m(h));t&&(b=!0,g=t.value)}if(v.required&&!b){ft(s,"Prop '"+h+"' is required");break}g=this.#k(t,h,g);let y=o(t,[h,"getter"]);y&&(y=M(y,this));let S=o(t,[h,"setter"]);if(S&&(S=M(S,this)),(y||S)&&Reflect.defineProperty(this.#r,h,{set:S||function(t){},get:y}),v.attribute&&a(g)&&!i(g)){let t=m(h),r=O(g);(f=v.type)===Boolean||e(f,(t=>t===Boolean))?(r=vt(g),R(r)?this.toggleAttribute(t,r):this.setAttribute(t,r)):this.setAttribute(t,r)}this.#r[h]=g,d[h]=g}var f;return Object.seal(d)}#M(t,e){let r=t;try{for(let n=0;n<e.length;n++){const s=e[n];r=s===Boolean?vt(t):s===Number?Number(t):s===String?String(t):s===Object||s===Array?L(t):s===Date?new Date(t):new s(t)}}catch(e){ft(this.tagName,"Convert attribute error with "+t)}return r}#k(t,n,s){let o=t[n];if(!o)return s;let i=o.isValid,l=o.type,c=N(l)?l:[l],u=o.converter,d=s;if(!e(c,(t=>t===String))&&r(d)&&!W(d))try{d=u?u(d):this.#M(d,c)}catch(t){ft(this.tagName,`Convert attribute '${n}' error with `+d)}for(let t=0;t<c.length;t++){"Boolean"===c[t].name&&(d=vt(d))}let p=typeof d,h=!a(d);for(let t=0;t<c.length;t++){const e=c[t];if(_(p,e.name,"i")||d instanceof e||Object.prototype.toString.call(d)===Object.prototype.toString.call(e.prototype)){h=!0;break}}return h||ft(this.tagName,`Invalid prop '${n}'. expected '${c.map((t=>t.name||t))}' but got '${p}'`),i&&(i.call(this,d,this.#r)||ft(this.tagName,`Invalid prop '${n}'. IsValid() check failed`)),d}#C(){let t=o(this.constructor,ut.STATES);g(t,((e,r)=>{let n=t[r],s=o(this,r);if(n){let t=n.prop;s=t?f(this.#r[t]):o(this,r)}this.#r[r]=s}))}#D=H(this.propsReady,100);_setParentProps(t,e){if(this.#v){let r=o(this.constructor,ut.PROPS);g(t,((t,e)=>{let n=D(e),s=r[n];if(!s)return;let o=this.#r[n];t=this.#k(r,n,t),s.hasChanged&&!s.hasChanged.call(this,t,o)||(this.#r[n]=t,this._notify(o,[n]))})),A(this.#l,t),A(this.#a,e),this.#D(this.#l)}}_updateProps(t){let e=o(this.constructor,ut.PROPS);g(t,((t,r)=>{let n=D(r);e[n]&&(t=this.#k(e,n,t),Mt.__skipCheck=!0,I(this,n,t),Mt.__skipCheck=!1)})),A(this.#l,t),this.#D(this.#l)}_initProps(t,e){this.#l=h(this.#l||{},t),this.#a=h({},e)}_bindSlot(t,e,r){if(this.#g[e]||(this.#g[e]=t,Reflect.defineProperty(t,"__l_comp",{value:this})),t.addEventListener("slotchange",(r=>{this.#v&&this.#T(t,"default"===e?"":e)})),!l(r)){let t=this.#e[e];t||(t=this.#e[e]={}),t.props=r}}_bindSlotHook(t,e){this.#h[t]=e}#P=new Set;_updateSlot(t,e,r){let n=this.#g[t],s=this.#h[t];if(!s&&!n)return;let o=this.#e[t];if(e&&(o.props||(o.props={}),o.props[e]=r),s)this.#P.add(t);else{let t=n.assignedElements({flatten:!0});for(let n=0;n<t.length;n++){t[n].setAttribute(e,r+"")}}}#E(){const t=C(this.childNodes,(t=>t.nodeType===Node.COMMENT_NODE?[]:t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}):t));let e=V(t,(t=>t.nodeType===Node.TEXT_NODE?"default":t instanceof Element?t.getAttribute("slot")||"default":void 0));if(l(e))return void(l(this.#r["#slots"])||(this.#v?this.#n["#slots"]={}:this.#r["#slots"]={}));g(e,((t,e)=>{if(e){for(;t.length>0;){let e=t[0];if(!(e.nodeType===Node.TEXT_NODE&&s(e.textContent)||e instanceof HTMLSlotElement&&l(e.assignedNodes({flatten:!0}))))break;t.shift()}for(;t.length>0;){let e=b(t);if(!(e.nodeType===Node.TEXT_NODE&&s(e.textContent)||e instanceof HTMLSlotElement&&l(e.assignedNodes({flatten:!0}))))break;t.pop()}}}));let r={};g(e,((t,e)=>{l(t)||(r[e]=t)})),this.#v?this.#n["#slots"]=r:this.#r["#slots"]=r}#_(t){let e=this.#h[t];if(!e)return;let r=this.#e[t];if(!this.#r["#slots"][t])return;this.renderAsync(e,o(r,"props"));const n=this._asyncDirectives.get(e);let s=n?.buildView(e(o(r,"props"))),i=$(v(s),(t=>t.nodeType===Node.COMMENT_NODE));if(i){let e=this.#m[t];if(!l(e))for(let t=0;t<e.length;t++){const r=e[t];r.parentNode?.removeChild(r)}this.#m[t]=i,this.append(...i),this.#P.clear()}}_asyncDirectives=new WeakMap;renderAsync(t,...e){}#A(t,e,r){if(!this.isMounted)return;if(kt(this.constructor).has(t)){let e=D(t);if(W(r)){r=o(this.constructor,ut.PROPS)[e]._defaultValue}this._updateProps({[e]:r})}}_regDeps(t,e){let r=this.#i[t];r||(r=this.#i[t]=new Set),r.add(e);let n=t.split("-");if(n.pop(),n.length<1)return;let s=n.join("-");r=this.#i[s],r||(r=this.#i[s]=new Set),r.add(e)}_regWrapper(t){this.#p=t}emit(t,e={},r){r&&r.event&&(e.event=r.event),e.target=this,this.dispatchEvent(new CustomEvent(t,{bubbles:o(r,"bubbles",!1),composed:o(r,"composed",!1),cancelable:!0,detail:e}))}on(t,e){this.#w[t]||(this.#w[t]=[]);let r=e.bind(this);this.#w[t].push(r),this.addEventListener(t,r)}nextTick(t,e){Vt.pushNext(t,e)}forceUpdate(){g(this.#n,((t,e)=>{this.#s[e]={value:void 0,chain:void 0}})),this.#N()}}var Gt,Kt,Qt;!function(t){t.ATTR="attr",t.PROP="prop",t.TEXT="text",t.CLASS="class",t.STYLE="style",t.SLOT="slot",t.TAG="tag"}(Gt||(Gt={})),function(t){t.NONE="NONE",t.REMOVE="REMOVE",t.REPLACE="REPLACE",t.UPDATE="UPDATE",t.APPEND="APPEND"}(Kt||(Kt={}));class Xt{key;varIndex;value;isText=!1;isDirective=!1;node;textNode;isComponent=!1;attrName;attrTmpl;isProp=!1;isToggleProp=!1;notUpdated;constructor(t,e,r,n){this.varIndex=t,this.node=e,r&&(this.attrName=r),n&&(this.attrTmpl=n)}}class qt{startNode;endNode;type;attrName;varIndex;expressionChain;nodes;constructor(t,e,r){this.startNode=t,this.attrName=e,this.type=r}setVarIndex(t){this.varIndex=t}getNodes(){let t=this.startNode.nextSibling;if(!this.endNode)return[t];let e=[];for(;t&&t!==this.endNode;)e.push(t),t=t?.nextSibling;return e}}!function(t){t.AFTER_BEGIN="afterbegin"}(Qt||(Qt={}));const Yt={};function Zt(t,e,r,n,s,o,i,a=!1){let c;if(a?(Mt.startRender(t.endNode),c=n(t,e,r,{renderComponent:s,slotComponent:o,varChain:i}),Mt.endRender(s)):c=n(t,e,r,{renderComponent:s,slotComponent:o,varChain:i}),!c)return;let[u,d]=c;if(u===Kt.NONE)return;let p=t.getNodes();if(u===Kt.REMOVE)for(let t=0;t<p.length;t++){const e=p[t];e.parentNode?.removeChild(e)}else if(u===Kt.REPLACE){let e=[];for(let t=0;t<p.length;t++){const e=p[t];e.parentNode?.removeChild(e)}let r=Ze(t.endNode,d,s);e=v(r);let n=document.createDocumentFragment();n.append(...e),t.endNode.parentNode.insertBefore(n,t.endNode)}else if(u===Kt.UPDATE){let e,r={},n=[],o=[],i=Ue.get(t.endNode);if(d||(d=new or([],[])),l(p)){let e=Ze(t.endNode,d,s);return void t.startNode.after(...e)}let a={};d instanceof or&&d.vars.forEach((t=>{if(t instanceof or){const e=t.getKey();a[e]=t,r[e]=!0,o.push(e)}})),p=B(U(p),(t=>t.nodeType===Node.ELEMENT_NODE)),e=B(U(v(e)),(t=>t.nodeType===Node.ELEMENT_NODE));let c={},u="",h={};for(let t=0;t<p.length;t++){let e=p[t],r=e.getAttribute("key");if(r){if(c[r]){u=r;break}c[r]=e,n.push(r),h[r]=!0}}if(u)return void ht(`${D(t.endNode._diName)} - duplicate key '${u}'`);let f=r;const m=t.startNode.parentNode;let E=[],y=[];g(h,((t,e)=>{f[e]||(y.push(e),delete h[e],j(n,(t=>t===e)))}));let N,C=!1;if(!l(o)){let e=-1,r=[],s=[],i=0,a=0;for(;a<o.length;a++){const l=o[a];let u=n.findIndex((t=>t===l));if(u<0){let e=o[a-1],r=e?c[e]||e:t.startNode;E.push({prevNode:r,newkey:l}),i++}else if(u>-1&&u!==a-i){if(e<0||1===Math.abs(e-u)){let t=b(r);r.push({nodeId:l,targetId:0===a?Qt.AFTER_BEGIN:t?t.nodeId:o[a-1]})}else s.push({moveGroup:r,moveIndex:a+r.length}),r=[],r.push({nodeId:l,targetId:o[a-1]});e=u}}if(r.length>0&&s.push({moveGroup:r,moveIndex:a+r.length}),s.length>0){C=!0;let e=s.sort(((t,e)=>t.moveGroup.length-e.moveGroup.length));if(e.length<2){let{moveGroup:r}=e[0];if(r.length>1){let t=b(r).targetId;r[r.length-2].nodeId===t&&(r=S(r))}r.forEach((({targetId:e,nodeId:r})=>{let n,s=c[r];e===Qt.AFTER_BEGIN?(n=t.startNode,n.after(s)):(n=c[e],n.after(s))}))}else{let r=b(e).moveIndex;1===Math.abs(e[e.length-2].moveIndex-r)&&(e=S(e)),e.forEach((({moveGroup:e})=>{e.forEach((({targetId:e,nodeId:r})=>{let n,s=c[r];e===Qt.AFTER_BEGIN?(n=t.startNode,n.after(s)):(n=c[e],n.after(s))}))}))}}}if(E.length>0&&(N=function(t,e,r,n,s,o){const i=[],a=[],l=[];let c,u=[];t.forEach((t=>{let r=b(u);r&&c===t.prevNode?(r.group||(r.group=[c]),r.group.push(t.newkey)):u.push(t),c=t.newkey;let n=t.newkey;l.push(n),i.push(""),a.push(e[n])})),i.push("");let d=new or(i,a),p=[...s],h=Ze(o,d,n),f=Ue.get(o);s.length=0,s.push(...f);let g=new Map;return h.forEach((t=>{const e=t.getAttribute("key");l.includes(e)&&(g.set(e,!0),Yt[e]=t)})),p.forEach(((t,e)=>{const n=t.key+"";!g.get(n)&&r.includes(n)&&s.push(t)})),u}(E,a,o,s,i,t.endNode),N.forEach(((e,r)=>{let n=e.newkey,s=Yt[n],o=e.prevNode;if(e.group){let t=document.createDocumentFragment();t.append(...F(e.group,(t=>Yt[t]))),s=t}o===t.endNode?o.before(s):o===t.startNode?o.after(s):"string"==typeof o?Yt[o].after(s):o.after(s)}))),y.forEach((t=>{let e=c[t];e&&e.parentNode&&m.removeChild(e)})),d.vars[0]instanceof or){let t=[],e=[];g(d.vars,(r=>{e.push(...r.vars),t.push(...F(r.vars,(t=>"1")))})),t.push("1"),d=new or(t,e)}if(C||y.length>0||N){const t=V(i,(t=>t.key));let e=[],r=0;o.forEach((n=>{t[n].forEach((t=>{t.varIndex=r++,e.push(t)}))})),i=e}tr(t.endNode,s,d,i)}}let Jt=0;function te(t,e){let r=t.name||"Di-"+Jt++,n=Symbol.for(r);return(...r)=>{let s=t(...r);return[n,r,s,t=>{process.env.DEV&&(l(e)||_(e.join(","),t)||ht(`Directive '${Symbol.keyFor(n)}' is out of scopes, expect '${e.join(",")}' bug got '${t}'`))},Mt.popDirectiveQ()]}}const ee=["resize","outside","mutate"],re=new WeakMap,ne=[],se=[],oe=[],ie=new ResizeObserver((t=>{for(const e of t){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize,r=Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize;let n=re.get(e.target);if(n){n(new CustomEvent("resize",{bubbles:!1,cancelable:!1,detail:{borderBox:{w:r.inlineSize,h:r.blockSize},contentBox:{w:t.inlineSize,h:t.blockSize}}}),e.target)}}}));var ae;!function(t){t.Child="child",t.Tree="tree",t.Attr="attr",t.Char="char"}(ae||(ae={}));const le=new WeakMap,ce=new MutationObserver((t=>{for(let e=0;e<t.length;e++){const r=t[e];let n=le.get(r.target);if(!n)return;let s={target:r.target},o=null;switch(r.type){case"subtree":s.type=ae.Tree,o=n[ae.Tree];break;case"childList":s.type=ae.Child,s.addedNodes=r.addedNodes,s.removedNodes=r.removedNodes,o=n[ae.Child];break;case"attributes":s.type=ae.Attr,s.attributeName=r.attributeName,s.oldValue=r.oldValue,o=n[ae.Attr];break;case"characterData":s.type=ae.Char,s.oldValue=r.oldValue,o=n[ae.Char]}if(o){o(new CustomEvent("mutate",{bubbles:!1,cancelable:!1,detail:s}))}}}));function ue(t,e,r,n){if("resize"===t)!function(t,e){re.has(t)||(re.set(t,e),ie.observe(t))}(e,r);else if("outside"===t)switch(n[0]){case"mousedown":!function(t,e){ne.push([t,e])}(e,r);break;case"dblclick":!function(t,e){oe.push([t,e])}(e,r);break;default:!function(t,e){se.push([t,e])}(e,r)}else"mutate"===t&&function(t,e,r){let n=z(r,"child"),s=z(r,"attr"),o=z(r,"char"),i=z(r,"tree"),a=le.get(t);a||(a={},le.set(t,a),n&&(a[ae.Child]=e),s&&(a[ae.Attr]=e),o&&(a[ae.Char]=e),i&&(a[ae.Tree]=e),ce.observe(t,{childList:n,attributes:s,characterData:o,subtree:i}))}(e,r,n)}document.addEventListener("mousedown",(t=>{let e=o(t.composedPath(),0,t.target);ne.forEach((([r,n])=>{if(!r.contains(e)&&!r.contains(P(e,(t=>t instanceof ShadowRoot),"parentNode")?.host)){n(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:r,event:t}}),r)}}))}),!1),document.addEventListener("click",(t=>{let e=o(t.composedPath(),0,t.target);se.forEach((([r,n])=>{if(!r.contains(e)&&!r.contains(P(e,(t=>t instanceof ShadowRoot),"parentNode")?.host)){n(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:r,event:t}}),r)}}))}),!1),document.addEventListener("dblclick",(t=>{let e=o(t.composedPath(),0,t.target);oe.forEach((([r,n])=>{if(!r.contains(e)&&!r.contains(P(e,(t=>t instanceof ShadowRoot),"parentNode")?.host)){n(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:r,event:t}}),r)}}))}),!1);const de=/,|^(debounce:.+)|(debounce$)/,pe=/,|^(throttle:.+)|(throttle$)/,he="self",fe="stop",ge="prevent",me="once",ve="left",be="right",Ee="middle",ye="ctrl",Ne="alt",Se="shift",Ce="meta",_e={esc:"escape"},Te=":";function Ae(t,e,r,n){let s,o=t.split("."),i=o.shift(),a=o.includes(me),l=e;if(s=G(o,(t=>de.test(t)))){let t=s.split(Te);l=H(l,parseInt(t[1])||100)}if(s=G(o,(t=>pe.test(t)))){let t=s.split(Te);l=K(l,parseInt(t[1])||100)}if(a&&(l=k(l)),function(t){return ee.includes(t)}(i))return ue(i,r,l,o),l;let c=t=>{if(o.includes(ge)&&t.preventDefault(),o.includes(fe)&&t.stopPropagation(),!o.includes(he)||t.target===t.currentTarget){if(t instanceof MouseEvent){if(o.includes(ve)&&0!=t.button)return;if(o.includes(be)&&2!=t.button)return;if(o.includes(Ee)&&1!=t.button)return}else if(t instanceof KeyboardEvent){if(j(o,(t=>t==ye))[0]&&!t.ctrlKey)return;if(j(o,(t=>t==Ne))[0]&&!t.altKey)return;if(j(o,(t=>t==Se))[0]&&!t.shiftKey)return;if(j(o,(t=>t==Ce))[0]&&!t.metaKey)return;if(!F(o,(t=>_e[t]||t)).includes(t.key.toLowerCase()))return}l(t)}};r.addEventListener(i,c);let u=n.__events[i];return u||(u=n.__events[i]=[]),u.push([r,c]),c}const we="@",Pe=".",ke="?",Me="*",De=":",xe="ref",Oe="key",Re=/[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--c_ui-pl_df-->){2,}.*?\1/ims,Le=/<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/gims,We="slot-props",He=new Map,Ie=new Map,Ve=new Map;var $e;!function(t){t.Event="event",t.Directive="directive",t.DirectiveTag="directiveTag",t.DirectiveAttr="directiveAttr",t.DirectiveProp="directiveProp",t.DirectiveText="directiveText",t.DirectiveSlot="directiveSlot",t.Attr="attr",t.AttrProp="attrProp",t.AttrBool="attrBool",t.AttrRef="attrRef",t.AttrSlot="attrSlot",t.AttrKey="key",t.Ref="ref",t.Text="text"}($e||($e={}));const Be=new WeakMap,Ue=new WeakMap,je=new WeakMap,Fe=new WeakMap,ze=new WeakMap,Ge=new WeakMap;function Ke(t,e){let r="",n=u(e.vars),s=e.strings.length-1,i=e.vars.length-1,a=0;for(let l=0;l<=s;l++){const s=e.strings[l];let c=o(n,a,"");if(c instanceof or){let[e,r]=Ke(t,c);c=e,n.splice(a,1,...r),a+=r.length-1}else c=l>i?"":Qe;a++,r=r+s+c}if(process.env.DEV){let t=r.match(Re);if(t){return ht(`Parse error: attribute value can be set only one interpolation —— \n ${J(t[0],Qe,"${...}")}`),["",n]}}let l=0;return r=r.replace(Le,((t,e)=>J(t,Qe,(()=>Qe.replace("--\x3e","")+l++)))),r=r.replace(nr,"$1><").trim(),[r,n]}const Qe="\x3c!--c_ui-pl_df--\x3e",Xe="\x3c!--c_ui-pl_df",qe=/<!--c_ui-pl_df\d*(-->)?/;function Ye(t,e,r,n,s=!1){const o=document.createElement("div");o.innerHTML=e;const i=Ve.has(n.constructor);s||!i||Ie.has(n.constructor)||Ie.set(n.constructor,o.cloneNode(!0));let a=0;const l=document.createNodeIterator(o,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let u,d,p=0,h=i?void 0:{},f=null,g="";for(;u=l.nextNode();){a++;let e=i?void 0:[];if(d&&!d.contains(u)&&(d=void 0),u instanceof HTMLElement||u instanceof SVGElement){u instanceof zt&&(d=u);let s={},o=v(u.attributes);for(let i=0;i<o.length;i++){const a=o[i];let{name:l,value:h}=a;if(l!==We)if(E(l,Xe)){let s=r[p];if(N(s)&&tt(s[0])){let[,r,o,i,a]=s;i(Gt.TAG);let c=new qt(u,l.substring(1),Gt.TAG),h=Ge.get(u);h||(h={},Ge.set(u,h)),h[Symbol.keyFor(s[0])]=[c,n,d];let m=new Xt(p,u);m.isDirective=!0,m.value=s,m.isComponent=!!d,t.push(m),f&&f?.contains(u)&&(m.key=g),p++,o(c,r,void 0,{renderComponent:n,slotComponent:d,varChain:a}),e&&e.push({type:$e.DirectiveTag,point:c,up:m,name:l})}u.removeAttribute(l)}else if(l[0]!==we)if(l!==xe)if(l!==Oe)if(!process.env.DEV||l[0]!==Pe||qe.test(h)){if(qe.test(h)){let o=r[p],i=new Xt(p,u,l.replace(/\.|\?|@/,""),h);if(i.isComponent=!!d,f&&f?.contains(u)&&(i.key=g),l[0]===Pe||l[0]===ke||l[0]===Me){if(N(o)&&tt(o[0])){let[,t,r,s,a]=o;s(Gt.PROP);let c=l.substring(1),p=new qt(u,c,Gt.PROP),h=Ge.get(u);h||(h={},Ge.set(u,h)),h[c]=[p,n,d],r(p,t,void 0,{renderComponent:n,slotComponent:d}),i.value=o,i.isDirective=!0,e&&e.push({type:$e.DirectiveProp,up:i,point:p,name:l,attrName:c})}else if(l[0]===ke){i.isToggleProp=!0,i.value=!!o;let t=l.substring(1);i.value&&u.setAttribute(t,""),e&&e.push({type:$e.AttrBool,name:t,up:i,attrName:l})}else if(l[0]===Me){i.value=o;let t=l.substring(1);const[r,n]=t.split(De);let s=r;switch(n){case"camel":s=D(s);break;case"kebab":s=m(s);break;case"snake":s=et(s)}i.attrName=s,u.setAttribute(s,o),e&&e.push({type:$e.AttrRef,up:i,name:l,attrName:s})}else if(!process.env.DEV||u instanceof zt||"SLOT"===u.tagName){let t=D(l.substring(1));process.env.DEV&&!(t in u)&&"SLOT"!==u.tagName&&ft(u.tagName,`Prop '${l}' is not defined in ${u.tagName}`),i.value=o,i.isProp=!0,s[t]=o,e&&e.push({type:$e.AttrProp,up:i,name:t,attrName:l})}else ft(u.tagName,`Prop '${l}' can only be set on a CompElem or a slot`);u.removeAttribute(l),o=""}else{let t,r;i.value=o;let s={type:$e.Attr,up:i,attrName:l};if(N(o)&&tt(o[0])){let e=Gt.ATTR;"class"===l?e=Gt.CLASS:"style"===l&&(e=Gt.STYLE);let[,a,c,p,h]=o;p(e),i.isDirective=!0,i.attrName=l;let f=new qt(u,l,e),g=Ge.get(u);g||(g={},Ge.set(u,g)),g[l]=[f,n,d],r=a,t=c,o="",s.type=$e.DirectiveAttr,s.point=f}h=Y(h,qe,o),a.value=h,t&&t(s.point,r,void 0,{renderComponent:n,slotComponent:d}),e&&e.push(s)}t.push(i),p++}}else ft(u.tagName,`Prop '${l}' must be an interpolation`);else{let n=r[p];u.setAttribute(l,n);let s=new Xt(p,u);s.notUpdated=!0,f&&f?.contains(u)&&(s.key=g),t.push(s),p++,f=u,g=n,e&&e.push({up:s,type:$e.AttrKey}),t.length>0&&t.forEach((t=>{t.key=t.key??n}))}else{if(qe.test(h)){let n=r[p];if(process.env.DEV&&!c(n,"current")){ft(u.tagName,"Ref must be a RefObject");continue}let s=new Xt(p,u);s.notUpdated=!0,f&&f?.contains(u)&&(s.key=g),t.push(s),p++,n.current=u,e&&e.push({type:$e.Ref,up:s,attrName:l})}u.removeAttribute(l)}else{let s=t=>{},o=new Xt(p,u);o.notUpdated=!0,f&&f?.contains(u)&&(o.key=g),t.push(o);let i=!1;if(qe.test(h)){let t=r[p];if(process.env.DEV&&!y(t)){ft(u.tagName,`Event '${l}' must be a function`);continue}s=t.bind(n),p++,i=!0}let a=l.substring(1);Ae(a,s,u,n),u.removeAttribute(l),e&&e.push({type:$e.Event,up:o,name:a,attrName:l,value:i})}else{let t=u.getAttribute("name")||"default";e&&e.push({type:$e.AttrSlot,name:t,attrName:l})}}u instanceof zt?(u._initProps(s),u._regWrapper(n)):u instanceof HTMLSlotElement&&n._bindSlot(u,u.name||"default",s)}else{let s=u;if(`\x3c!--${s.nodeValue}--\x3e`!==Qe)continue;let o=new Xt(p,u);f&&f?.contains(u)&&(o.key=g),t.push(o),o.isComponent=!!d,o.isText=!0;let i=r[p];if(N(i)&&tt(i[0])){const t=Symbol.keyFor(i[0]);let r;r=document.createComment(`compelem-${n.tagName}-${t}-start`),o.textNode=r,s.parentNode.insertBefore(r,s),s.nodeValue=`compelem-${n.tagName}-${t}-end`,s._diName=t,o.isDirective=!0,o.value=i;let a=d?Gt.SLOT:Gt.TEXT,[,l,c,u,p]=i;u(a);let h=new qt(r,"",a);h.endNode=s,Fe.set(s,[h,n,d,l,p]),je.set(s,c),ze.set(s,o),Mt.startRender(s);let f=c(h,l,void 0,{renderComponent:n,slotComponent:d,varChain:p});if(Mt.endRender(n),f){let t=Ze(s,f[1],n);t&&t.length>0&&er.insertBefore(s,Array.from(t))}i=void 0,e&&e.push({type:a===Gt.SLOT?$e.DirectiveSlot:$e.DirectiveText,up:o,point:h})}else o.value=i,e&&e.push({type:$e.Text,up:o});p++;let a=Z(i??""),l=document.createTextNode(a);s.parentNode.insertBefore(l,s),o.textNode=l}h&&e&&(h[a]=e),f&&!f.contains(u)&&f!==u&&(f=null,g="")}return!s&&h&&Ve.set(n.constructor,h),o.childNodes}function Ze(t,e,r){let[n,s]=Ke(r,e),o=[],i=Ye(o,n,s,r,!0);return Ue.set(t,o),i}function Je(t,e,r){if(s(Q(t.strings)))return;if(!Be.has(e))return;let{vars:n}=t;r=r??Be.get(e);for(let t=0;t<r.length;t++){const s=r[t];let a=s.varIndex;if(a<0)continue;if(s.notUpdated)continue;let l=s.value,c=n,u=s.node,d=X(a,"-");for(let e=0;e<d.length;e++){const r=d[e];c=o(c,r),c&&c.vars&&t<d.length-1&&(c=c.vars)}if(!i(l)&&l===c)continue;let p=u;if(s.isDirective){let[t,e,r,,n]=s.value,o=Fe.get(u);if(!o){const e=Ge.get(u);o=e[s.attrName]||e[Symbol.keyFor(t)]}let[i,a,l]=o,[,d]=c;const p=ze.get(u);if(p){p.value=c;Fe.get(u)[3]=d}Zt(i,d,e,r,a,l,n,i.type==Gt.TEXT||i.type==Gt.SLOT)}else if(s.isToggleProp){if(!!c===l)continue;p.toggleAttribute(s.attrName,!!c),I(p,s.attrName,!!c)}else if(s.isProp){if(!i(c)&&c===l)continue;u instanceof zt?u._updateProps({[s.attrName]:c}):u instanceof HTMLSlotElement&&e._updateSlot(u.getAttribute("name")||"default",s.attrName,c)}else if(s.attrName){if(!q(l,c))switch(s.attrName){case"value":if(u instanceof HTMLInputElement){u.value=c;break}default:u.setAttribute(s.attrName,Y(s.attrTmpl,qe,c+""))}}else if(s.isText){s.textNode.textContent=Z(c??"")}s.value=c}}function tr(t,e,r,n){const s=je.get(t),[o,i,a,l,c]=Fe.get(t),u=ze.get(t);if(!r){let t=s(o,u.value[1],l,{renderComponent:i,slotComponent:a,varChain:c});if(!t)return;r=t[1]}if(r&&r.vars[0]instanceof or){let t=[],e=[];g(r.vars,(r=>{e.push(...r.vars),t.push(...F(r.vars,(t=>"1")))})),t.push("1"),r=new or(t,e)}n&&Ue.set(t,n),Je(r,e,n=n??Ue.get(t))}const er={insertBefore:function(t,e){if(!t.parentNode)return;let r=document.createDocumentFragment();r.append(...e),t.parentNode.insertBefore(r,t)},remove:function(t,e){if(t===e)return void t?.parentNode?.removeChild(t);let r=t.nextSibling;for(;r&&r!==e;)r?.parentNode?.removeChild(r),r=t.nextSibling}};function rr(t,...e){return new or(r(t)?[t]:t,e)}const nr=/([a-z0-9"'])\s*>\s*</gim;function sr(t){return{current:t}}class or{strings;vars;constructor(t,e){this.strings=u(t),this.vars=e}getKey(){let t=this.vars,e="";return g(this.strings,((r,n)=>{if(lt.test(r))return e=Z(t[n]),!1})),e}getKeys(){let t=this.vars,e=[];for(let r=0;r<this.strings.length;r++){const n=this.strings[r];if(lt.test(n)){let n=Z(t[r]);e.push(n)}}return l(e)&&t.forEach((t=>{if(t instanceof or){let r=t.getKey();e.push(r)}})),e}append(t){let e=b(this.strings);return t.strings.forEach(((t,r)=>{0!=r?this.strings.push(t):this.strings[this.strings.length-1]=e+t})),this.vars=u(this.vars,t.vars),this}insert(t,e){let r=e.strings.shift();return this.strings[t]+=r,this.strings.splice(t+1,0,...e.strings),this.vars.splice(t,0,...e.vars),this}getHTML(t){let[e,r]=Ke(t,this),n=Ye([],e,r,t);return nt(n,((t,e)=>t+e.outerHTML),"")}}function ir(t,e,r){r.get||ht(`Computed '${e}' must be a getter`),c(t.constructor,ut.COMPUTED)||(t.constructor[ut.COMPUTED]=l(t.constructor[ut.COMPUTED])?{}:f(t.constructor[ut.COMPUTED])),t.constructor[ut.COMPUTED][e]=r.get}const ar=_t(class extends bt{static get priority(){return Number.MAX_VALUE}created(t,e,r,...n){let s=o(t,r);I(t,r,H(s,this.wait,this.immediate));let i=Reflect.getPrototypeOf(t);i&&!o(i,r+"_$__")&&I(i,r+"_$__",s)}beforeMount(t,e,...r){}mounted(t,e,...r){}updated(t,e){}get targets(){return[pt.METHOD]}wait;immediate;result;constructor(t,e=!1){super(),this.wait=t,this.immediate=e}});function lr(t,e){return(r,n,s)=>{c(r.constructor,ut.EVENTS)||(r.constructor[ut.EVENTS]=l(r.constructor[ut.EVENTS])?[]:f(r.constructor[ut.EVENTS])),r.constructor[ut.EVENTS].push({name:t,options:e,fn:r[n]})}}var cr;!function(t){t.ONCE="once",t.UPDATABLE="updatable"}(cr||(cr={}));class ur extends bt{static get priority(){return Number.MAX_VALUE}created(t,e,r,...n){}mounted(t,e,...r){}get targets(){return[pt.FIELD]}selector;cache;result;constructor(t,e){super(),this.selector=t,this.cache=e}static getKey(t){return t}getter(t){this.result=t.shadowRoot?.querySelector(this.selector)}beforeMount(t,e,r,n,...s){const o=this;Reflect.defineProperty(t,n,{get:()=>(o.result&&o.cache||o.getter(t),o.result)})}updated(t,e){this.cache===cr.UPDATABLE&&this.getter(t)}}const dr=_t(ur),pr=_t(class extends ur{getter(t){this.result=t.shadowRoot?.querySelectorAll(this.selector)}});function hr(t){if(1===arguments.length)return(e,r)=>{fr(e,r,t)};fr(arguments[0],arguments[1],{prop:""})}function fr(t,e,r){if(!c(t.constructor,ut.STATES)){const e={};let r=t.constructor;for(;(r=mt(r))!==zt;)h(e,r[ut.STATES]?f(r[ut.STATES]):{});Reflect.defineProperty(t.constructor,ut.STATES,{configurable:!1,enumerable:!1,value:e})}r.shallow=r.shallow||!1,t.constructor[ut.STATES][e]=r}function gr(t,e,r){fr(t.prototype,e,r||{prop:""})}function mr(t){return e=>{if(e){if(e.prototype.hasOwnProperty("attributeChangedCallback")){let t=e.prototype.attributeChangedCallback;e.prototype.attributeChangedCallback=function(e,r,n){zt.prototype.attributeChangedCallback.call(this,e,r,n),t.call(this,e,r,n)}}if(e.prototype.hasOwnProperty("connectedCallback")){let t=e.prototype.connectedCallback;e.prototype.connectedCallback=function(){zt.prototype.connectedCallback.call(this),t.call(this)}}if(e.prototype.hasOwnProperty("disconnectedCallback")){let t=e.prototype.disconnectedCallback;e.prototype.disconnectedCallback=function(){zt.prototype.disconnectedCallback.call(this),t.call(this)}}customElements.define(t,e)}}}function vr(t,e){return(r,n)=>{c(r.constructor,ut.WATCH)||(r.constructor[ut.WATCH]=l(r.constructor[ut.WATCH])?{}:f(r.constructor[ut.WATCH]));(N(t)?t:[t]).forEach((t=>{let s=t.replaceAll(".","-"),o=r.constructor[ut.WATCH][s];N(o)||(o=r.constructor[ut.WATCH][s]=[]),o.push({source:t,options:e,handler:r[n]})}))}}const br=["key"],Er=te((function(t){return(t,[e],r)=>{if(r)return;let n=t.startNode;if(n instanceof zt){let t={},r={};g(e,((e,s)=>{br.includes(s)||(s in n?t[s]=e:r[s]=e+"")})),n._initProps(t,r)}else g(e,((t,e)=>{n.setAttribute(e,t)}))}}),[Gt.TAG]);let yr=0;const Nr=new Map,Sr=new Map,Cr=te((function(t){return(t,[e],n,{renderComponent:s})=>{let o=[];if(N(e)?o=U(e):i(e)?o=C(e,((t,e)=>t?e:[])):r(e)&&(o=e.split(" ")),o.length<1&&!n)return;let a=t.startNode;if(Sr.get(a)&&Sr.get(a).length===o.length&&st(Sr.get(a),o))return;let l=Nr.get(a);l||(l="class_d"+yr++,Nr.set(a,l)),s.nextTick((()=>{let t=Sr.get(a);g(t,(t=>{a.classList.remove(t)})),g(o,(t=>{a.classList.add(t)})),t=u(o),Sr.set(a,t)}),l)}}),[Gt.CLASS]),_r=new Map,Tr=new Map,Ar=te((function(t,e){return(t,r,n,{varChain:s})=>{let o=t.startNode,i=function(t,e,r){let n=F(t,((t,r)=>e(t,r)));if(n.length<1){let t=new or([],[]);return Tr.set(r,t),t}let s=[],o=[];const i=[],a=[];for(let t=0;t<n.length;t++){const e=n[t];let r=b(o),l=e.vars,c=!0,u=e.strings;for(let t=0;t<u.length;t++){const e=u[t];if(lt.test(e)){let e=l[t]+"";if(s.includes(e))return void ht(`forEach - duplicate key '${e}'`);s.push(e),c=!1}0==t&&r?o[o.length-1]=r+e:o.push(e)}if(c)return void ht("forEach - missing 'key' prop");let d=b(i);d&&u.length>0&&(i[i.length-1]=O(d)+u.shift()),i.push(""),a.push(e)}i.push("");let l=new or(i,a);return Tr.set(r,l),l}(r[0],e,o);if(n){const e=_r.get(o);if(l(t.getNodes())&&(!r||l(r[0])))return[Kt.NONE,i];if(st(e,r[0])&&e.length===r[0].length)return[Kt.NONE,i]}return _r.set(o,rt(r[0])),n?[Kt.UPDATE,i]:[Kt.APPEND,i]}}),[Gt.TEXT,Gt.SLOT]);const wr=new WeakMap,Pr=te((function(t,e,r){return(n,[s,o],i,{renderComponent:a})=>{let l=n.endNode;if(i){if(!!s==!!i[0]){let t=wr.get(l);return[Kt.NONE,t.call(a,s)]}let t=s?e:r;return wr.set(l,t),[Kt.REPLACE,t.call(a,s)]}{let n=s?e:r;return wr.set(l,n),[Kt.APPEND,n.call(a,t)]}}}),[Gt.TEXT,Gt.SLOT]),kr=te((function(t,e){return(t,[e,r],n)=>n?e===n[0]?[Kt.NONE,e?r():rr``]:e?[Kt.REPLACE,e?r():rr``]:[Kt.REMOVE]:[Kt.APPEND,e?r():rr``]}),[Gt.TEXT,Gt.SLOT]);var Mr;!function(t){t.CHANGE="change",t.INPUT="input"}(Mr||(Mr={}));const Dr=new WeakMap,xr=te((function(t,e="value"){return(r,n,s,{varChain:a,renderComponent:l})=>{const c=r.startNode;if(s){if(q(n,s))return;if(!q(n,s)){let t=n[0];if(c instanceof zt)c._updateProps({[e]:t});else if(c instanceof HTMLTextAreaElement||c instanceof HTMLSelectElement)c.setAttribute(e,t+"");else if(c instanceof HTMLInputElement){if(c.value==t)return;switch(c.type){case"checkbox":case"radio":t?c.setAttribute("checked",""):c.removeAttribute("checked");break;case"text":case"email":case"number":case"password":case"search":case"tel":case"url":c.setAttribute(e,t+""),I(c,e,t);break;default:c.setAttribute(e,t+"")}}}return}if("binded"===o(c,"_model"))return;let u=b(a);if(Dr.set(c,u),i(t)||O(t)||(t=""),c instanceof zt)c._initProps({[e]:t}),c.addEventListener("update:"+e,(t=>{I(l,u,t.detail.value)})),I(c,"_model","binded");else if(c instanceof HTMLTextAreaElement)c.setAttribute(e,t+""),c.addEventListener("input",(t=>{let e=t.target;I(l,u,e.value)})),I(c,"_model","binded");else if(c instanceof HTMLInputElement){let r="",n="";switch(c.type){case"checkbox":case"radio":r="checked",n="change";break;default:r="value",n="input"}c.setAttribute(e??r,t+""),c.addEventListener(n,(t=>{let e=t.target;I(l,u,e.value)})),I(c,"_model","binded")}else c instanceof HTMLSelectElement&&(c.setAttribute(e,t+""),c.addEventListener("change",(t=>{let e=t.target;I(l,u,e.value)})),I(c,"_model","binded"))}}),[Gt.TAG]),Or=new Map,Rr=te((function(t,e){return(t,[r],n)=>{if(n&&r===n[0])return;let s=t.startNode;if(!Or.has(s)){let t=s.style.display;Or.set(s,"none"==t?"unset":t)}s.style.display=r?Or.get(s):"none",e&&e(s,r)}}),[Gt.TAG]),Lr=te((function(t,e){return(r,n,s,{renderComponent:o,slotComponent:i})=>{s||(t=t.bind(o),i._bindSlotHook(e||"default",t))}}),[Gt.SLOT]);class Wr{static getCssText(t,e=!1){return r(t)?t:Q(F(t,((t,r)=>r.startsWith("--")?r+":"+t+(e?" !important":""):m(r)+":"+t+(e?" !important":""))),";")}static setStyle(t,e){if(r(t)&&!O(t))return{};let n=Wr.getCssText(t),s={};return g(n.split(";"),(t=>{let r=t.split(":"),n=O(r[0]),o=O(r[1]);s[n]=e.style.getPropertyValue(n),e.style.setProperty(n,o)})),s}}const Hr=new Map;let Ir=0;const Vr=te((function(t){return(t,e,r,{renderComponent:n})=>{let s=t.startNode,o=Hr.get(s);o||(o="style_d"+Ir++,Hr.set(s,o)),n.nextTick((()=>{Wr.setStyle(e[0],s)}),o)}}),[Gt.STYLE]),$r=te((function(t){return(e,r,n,{renderComponent:s,varChain:o})=>{const i=e.startNode;if(n){if(!q(r,n)){let t=e.attrName;i._updateProps({[t]:r[0]})}return}let a=b(o),l=e.attrName;i._initProps({[l]:t}),i.addEventListener("update:"+l,(t=>{I(s,a,t.detail.value)}))}}),[Gt.PROP]),Br=te((function(t,e){return(t,[e,r],n)=>{let s=()=>rr``,o=[],i=[];g(r,((t,e)=>{if(y(t))o.push(e),i.push(t);else{let e=t[0],r=t[1];o.push(e),i.push(r)}"default"===e&&(s=t)}));let a=ot(o,(t=>y(t)?t(e):t==e));return n?[Kt.REPLACE,it(i[a]??s)]:[Kt.APPEND,it(i[a]??s)]}}),[Gt.TEXT,Gt.SLOT]);export{zt as CompElem,Wr as CssHelper,bt as Decorator,pt as DecoratorType,St as DecoratorWrapper,Kt as DirectiveUpdateTag,qt as EnterPoint,Gt as EnterPointType,Et as GetKeyFnName,Mr as ModelTriggerType,cr as QueryCache,or as Template,Xt as UpdatePoint,Nt as _DecoratorMap,yt as _DecoratorsKey,kt as _getObservedAttrs,Er as bind,Ke as buildHTML,Cr as classes,ir as computed,sr as createRef,ar as debounced,_t as decorator,te as directive,lr as event,Ar as forEach,rr as html,Pr as ifElse,kr as ifTrue,gr as makeState,xr as model,At as prop,dr as query,pr as queryAll,Rr as show,Lr as slot,hr as state,Vr as styles,$r as sync,mr as tag,Zt as updateDirective,vr as watch,Br as when};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "compelem",
-  "version": "0.6.6-b1",
+  "version": "0.6.7-b2",
   "description": "A modern, reactive, fast, lightweight and flexible lib for building web components",
   "main": "index.js",
   "module": "index.js",
@@ -36,7 +36,7 @@
     "bootstrap-icons": "^1.11.3",
     "eslint": "9.19.0",
     "eslint-config-prettier": "^10.0.1",
-    "myfx": "^1.13.0",
+    "myfx": "^1.13.1",
     "postcss": "^8.4.38",
     "prettier": "^2.8.3",
     "rollup-plugin-banner2": "1.2.2",

package/reactive.d.ts

@@ -4,7 +4,6 @@
  */
 import { CompElem } from "./CompElem";
 import { CollectorType } from "./constants";
-import { IView } from "./render/RenderContext";
 import { Getter, Updater } from "./types";
 export declare const Collector: {
     collectWatch(comp: CompElem, updater: Getter, subPath: string): void;
@@ -14,7 +13,7 @@ export declare const Collector: {
     __directiveQ: any[][];
     setDirectiveQ(val: any[]): void;
     popDirectiveQ(): any[];
-    startRender(context: IView): void;
+    startRender(context: Node): void;
     endRender(component: CompElem): void;
     collect(prop: string): void;
     clear(): void;
@@ -46,5 +45,5 @@ export declare class Queue {
     static pushWatch(updater: Getter): void;
     static pushComputed(updater: Getter): void;
     static pushCss(updater: Getter): void;
-    static pushNext(updater: () => void): void;
+    static pushNext(updater: () => void, key?: string | number): void;
 }

package/render/render.d.ts

@@ -1,6 +1,5 @@
 import { CompElem } from "../CompElem";
 import { UpdatePoint } from "../types";
-import { IView } from "./RenderContext";
 import { Template } from "./Template";
 export declare const ATTR_PREFIX_EVENT = "@";
 export declare const ATTR_PREFIX_PROP = ".";
@@ -8,6 +7,8 @@ export declare const ATTR_PREFIX_BOOLEAN = "?";
 export declare const ATTR_PREFIX_REF = "*";
 export declare const ATTR_PROP_DELIMITER = ":";
 export declare const ATTR_REF = "ref";
+export declare const ATTR_KEY = "key";
+export declare const DirectiveUpdatePointsMap: WeakMap<Node, UpdatePoint[]>;
 /**
  * 提供渲染函数相关操作
  * @author holyhigh2
@@ -31,7 +32,12 @@ export declare const PLACEHOLDER_EXP: RegExp;
  * 构建模板为DOM结构
  * @param html
  */
-export declare function buildTmplate(updatePoints: Array<UpdatePoint>, html: string, vars: any[], component: CompElem, viewContext: IView): NodeListOf<ChildNode>;
+export declare function buildTmplate(updatePoints: Array<UpdatePoint>, html: string, vars: any[], renderComponent: CompElem, isDirective?: boolean): NodeListOf<ChildNode>;
+export declare function buildTmplate2(updatePoints: Array<UpdatePoint>, vars: any[], component: CompElem): NodeListOf<ChildNode>;
+export declare function buildView(tmpl: Template, component: CompElem): NodeListOf<ChildNode>;
+export declare function buildDirectiveView(pointNode: Node, tmpl: Template, component: CompElem): NodeListOf<ChildNode>;
+export declare function updateView(tmpl: Template, comp: CompElem, updatePoints?: UpdatePoint[]): void;
+export declare function updateDirectiveView(node: Node, comp: CompElem, tmpl?: Template, updatePoints?: UpdatePoint[]): void;
 export declare const DomUtil: {
     insertBefore: (node: Node, newNodes: any[]) => void;
     remove: (startNode: Node, endNode: Node) => void;

package/types.d.ts

@@ -1,6 +1,8 @@
 /**
  * @author holyhigh2
  */
+import { CompElem } from "./CompElem";
+import { EnterPoint } from "./directive";
 import { Template } from "./render/Template";
 export type Constructor<T> = new (...args: any[]) => T;
 export type Getter = () => any;
@@ -13,6 +15,30 @@ export type SlotOptions = {
     hook: Function;
 };
 export type TmplFn = (...args: any[]) => Template;
+/**
+ * 属性定义
+ */
+export declare enum EnterPointType {
+    ATTR = "attr",//属性，文本内容，可以内嵌多插值
+    PROP = "prop",//参数，智能内嵌一个插值
+    TEXT = "text",
+    CLASS = "class",
+    STYLE = "style",
+    SLOT = "slot",
+    TAG = "tag"
+}
+export type DirectiveExecutor = (point: EnterPoint, newArgs: any[], oldArgs: any[] | undefined, meta?: {
+    renderComponent?: CompElem;
+    slotComponent?: CompElem;
+    varChain?: string[][];
+}) => [DirectiveUpdateTag, Template?] | void;
+export type DirectiveInstance = [
+    symbol,
+    Array<any>,
+    DirectiveExecutor,
+    (scopeType: string) => void,
+    any[][]
+];
 export declare enum DirectiveUpdateTag {
     NONE = "NONE",//框架不处理
     REMOVE = "REMOVE",//删除指令创建的节点
@@ -33,7 +59,6 @@ export declare class UpdatePoint {
     varIndex: number;
     value: any;
     isText: boolean;
-    isTmpl: boolean;
     isDirective: boolean;
     node: Node;
     textNode: Node;
@@ -42,6 +67,6 @@ export declare class UpdatePoint {
     attrTmpl: string;
     isProp: boolean;
     isToggleProp: boolean;
-    isEvent: boolean;
+    notUpdated: boolean;
     constructor(varIndex: number, node: Node, attrName?: string, attrTmpl?: string);
 }

package/directive/Directive.d.ts

@@ -1,42 +0,0 @@
-import { Template } from "../render/Template";
-import { DirectiveUpdateTag } from "../types";
-import { EnterPoint, EnterPointType } from "./index";
-declare const Directive_base: {
-    new (...args: any[]): {
-        [x: string]: any;
-        __updatePoints: Array<import("../types").UpdatePoint>;
-        renderComponent: import("..").CompElem;
-        buildView(tmpl: Template): NodeListOf<ChildNode>;
-        updateView(tmpl: Template): void;
-    };
-} & ObjectConstructor;
-/**
- * 用于解析HTML模板
- * @author holyhigh2
- */
-export declare abstract class Directive extends Directive_base {
-    _renderArgs: any[];
-    /**
-     * 指令使用范围，超出范围会报错
-     */
-    static get scopes(): Array<EnterPointType>;
-    /**
-     * 更新时调用
-     * @param point
-     */
-    abstract update(point: EnterPoint, newArgs: any[], oldArgs: any[]): DirectiveUpdateTag;
-    /**
-     * 渲染HTML内容，该回调内无法访问DOM
-     */
-    abstract render(...args: any): Template | void;
-    /**
-     * 指令所在DOM创建后渲染前调用，可以访问插入点信息
-     * 此时可对DOM进行操作
-     */
-    abstract created(point: EnterPoint, ...args: any): void;
-    /**
-     * 指令渲染参数变量链
-     */
-    renderParams: Array<string[]>;
-}
-export {};

package/render/RenderContext.d.ts

@@ -1,52 +0,0 @@
-import { CompElem } from "../CompElem";
-import { UpdatePoint } from "../types";
-import { Template } from "./Template";
-export interface IView {
-    /**
-     * 对比新的模板数据，更新变化点
-     * @param tmpl
-     */
-    updateView(tmpl: Template): void;
-    /**
-     * 构建模板返回nodes并更新 __updatePoints 属性
-     * @param tmpl
-     */
-    buildView(tmpl: Template): NodeListOf<ChildNode>;
-}
-/**
- * 视图基类 为组件视图及指令子视图提供统一服务
- * @param spuerClass
- * @returns
- */
-export declare function View<T extends new (...args: any[]) => any>(spuerClass: T): {
-    new (...args: any[]): {
-        [x: string]: any;
-        __updatePoints: Array<UpdatePoint>;
-        /**
-         * 渲染上下文所属组件，仅用于指令
-         */
-        renderComponent: CompElem;
-        buildView(tmpl: Template): NodeListOf<ChildNode>;
-        updateView(tmpl: Template): void;
-    };
-} & T;
-declare const SubView_base: {
-    new (...args: any[]): {
-        [x: string]: any;
-        __updatePoints: Array<UpdatePoint>;
-        /**
-         * 渲染上下文所属组件，仅用于指令
-         */
-        renderComponent: CompElem;
-        buildView(tmpl: Template): NodeListOf<ChildNode>;
-        updateView(tmpl: Template): void;
-    };
-} & ObjectConstructor;
-/**
- * 子视图，用于组件视图模板中的非指令子模版
- */
-export declare class SubView extends SubView_base {
-    tmpl: Template;
-    constructor(tmpl: Template);
-}
-export {};