compelem 0.2.3-beta → 0.2.6-beta

package/CompElem.d.ts

@@ -1,20 +1,15 @@
 import { Directive } from "./directive/Directive";
 import { IComponent } from "./IComponent";
-import { Template } from "./render/render";
-import { IRenderContext } from "./render/RenderContext";
+import { IView } from "./render/RenderContext";
+import { Template } from "./render/Template";
 import { TmplFn } from "./types";
 declare const CompElem_base: {
     new (...args: any[]): {
         [x: string]: any;
-        render(...args: any): void | Template | Template[] | ((...args: any[]) => (Template | Template[]));
-        __expPos: Record<string, import("./types").ExpPos>;
-        __expPosMap: Record<string, Record<string, import("./types").ExpPos> | null>;
-        __directives: Record<string, Directive>;
-        slotComponent: CompElem;
+        __updatePoints: Array<import("./types").UpdatePoint>;
         renderComponent: CompElem;
-        renderContext(...args: any): [NodeListOf<ChildNode>, Record<string, import("./types").ExpPos>, Record<string, Record<string, import("./types").ExpPos> | null>];
-        updateContext(...args: any): void;
-        __updateExpPos(tmpl: Template, _expPos: Record<string, import("./types").ExpPos>): void;
+        buildView(tmpl: Template): NodeListOf<ChildNode>;
+        updateView(tmpl: Template): void;
     };
 } & {
     new (): HTMLElement;
@@ -30,14 +25,15 @@ export declare class CompElem extends CompElem_base implements IComponent {
     #private;
     static __l_globalRule: HTMLStyleElement;
     __events: Record<string, Array<Node | ((e: Event) => void)>[]>;
+    get [Symbol.toStringTag](): string;
     get reactiveData(): Record<string, any>;
     get attrs(): Record<string, string>;
     get props(): Record<string, any>;
     get renderRoot(): HTMLElement;
     get renderRoots(): HTMLElement[];
-    get parentComponent(): HTMLElement | null;
+    get parentComponent(): CompElem | null;
     get slotHooks(): Record<string, (...args: any[]) => Template>;
-    get styles(): CSSStyleSheet[];
+    get css(): CSSStyleSheet[];
     get isMounted(): boolean;
     get slots(): Record<string, Array<Node>>;
     /**
@@ -49,29 +45,17 @@ export declare class CompElem extends CompElem_base implements IComponent {
      */
     static get styles(): Array<string | CSSStyleSheet>;
     static get globalStyles(): Array<string>;
-    get css(): string;
+    get styles(): Array<() => string>;
     constructor(...args: any[]);
     connectedCallback(): void;
     disconnectedCallback(): void;
     __init(): void;
-    /**
-     * 初始化属性及状态，该回调内可以访问props和state
-     * 此时组件dom并未构建，但已有parent 属性，没有root属性
-     */
-    connected(): void;
-    /**
-     * props初始化完成回调
-     */
-    propsReady(): void;
-    /**
-     * 每次更新时调用
-     */
+    propsReady(props: Record<string, any>): void;
     render(): Template;
-    /**
-     * dom渲染完毕后调用，该回调内可以query注解初始化完成
-     */
+    beforeMount(): void;
     mounted(): void;
     slotChange(slot: HTMLSlotElement, name: string): void;
+    attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null): void;
     /**
      * 是否需要更新，可获取变更属性
      * 返回true时更新
@@ -130,8 +114,12 @@ 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, IRenderContext>;
+    _asyncDirectives: WeakMap<TmplFn, IView>;
     renderAsync(cbk: TmplFn, ...args: any[]): void;
+    /**
+     * todo
+     * 1. 取消上溯递归路径
+     */
     _regDeps(varPath: string, renderContext: CompElem | Directive): void;
 }
 export {};

package/IComponent.d.ts

@@ -1,4 +1,4 @@
-import { Template } from "./render/render";
+import { Template } from "./render/Template";
 /**
  * 组件接口
  * 定义组件属性、生命周期及方法
@@ -12,15 +12,19 @@ export interface IComponent {
     get parentComponent(): HTMLElement | null;
     get slots(): Record<string, Array<Node>>;
     get slotHooks(): Record<string, (...args: any[]) => Template>;
-    get styles(): CSSStyleSheet[];
+    get css(): CSSStyleSheet[];
     get isMounted(): boolean;
-    connected(): void;
-    propsReady(): void;
+    get styles(): Array<() => string>;
+    propsReady(props: Record<string, any>): void;
     render(): Template;
+    beforeMount(): void;
     mounted(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     shouldUpdate(changed: Record<string, any>): boolean;
     updated(changed: Record<string, any>): void;
-    slotChange(slot: HTMLSlotElement, name: string): void;
+    slotChange(slot: HTMLSlotElement, slotName: string): void;
+    attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null): void;
     /**
      * 抛出自定义事件
      * @param evName 事件名称

package/README.md

@@ -43,11 +43,15 @@ export class PageTest extends CompElem {
       }...`];
   }
   //动态样式
-  get css() {
-    return `h2,p,i,h3{
-      background-image:${this.color}
-      filter:hue-rotate(${this.rotation}deg)
-    }`
+  get styles() {
+    return [
+      () => `h2,p,i,h3{
+        background-image:${this.color};
+      }`,
+      () => `h2,p,i,h3{
+        filter:hue-rotate(${this.rotation}deg);
+      }`,
+    ]
   }
 
   @query('i[name="text"]')
@@ -140,10 +144,10 @@ export class PageTest extends CompElem {
   ```
   对于需要动态控制 host 元素样式可以使用组件实例 getter
   ```ts
-  get css():string{
-    return `:host{
+  get styles(){
+    return [()=>`:host{
       ${this.border?'border: 1px solid rgb(var(--l-color-border-secondary)); ':''}
-    }`
+    }`]
   }
   ```
 - ### 属性
@@ -250,7 +254,7 @@ export class PageTest extends CompElem {
   - `readonly` shadowRoot 阴影DOM
   - `readonly` slots 插槽元素映射
   - `readonly` slotHooks 动态插槽钩子映射
-  - `readonly` styles 组件样式对象列表
+  - `readonly` css 组件样式对象列表
   - `readonly` attrs 组件特性
   - `readonly` props 组件属性
   - slotComponent 所在插槽组件
@@ -269,17 +273,18 @@ CompElem 组件既可以在 CompElem 环境内调用，也可以直接在原生
 | ------------------------------------------------------------ | --- | ----------- |
 | 1. 创建组件实例，完成类属性默认值设置（prop/state/...)       |     |             |
 | 2. 初始化类全局样式（仅一次）及 实例样式(产生 styles 数组)   |     |             |
-| 3. 创建 shadowRoot 并挂载组件样式                            |     | constructor |
-| 4. 绑定 parentComponent                                               |     | connected   |
-| 5. 获取 attrs 及 parentProps 进行验证及初始化 props |     | propsReady  |
-| 6. 注入 link 外部样式表                                      |     |             |
-| 7. 渲染 render 及依赖绑定                                    |     | render      |
-| 8. 绑定 renderRoot 及 renderRoots                                            |     |             |
-| 9. 执行 ref                                                  |     |             |
-| 10. 执行 @query 注解                                         |     |             |
-| 11. 执行 @watch(immediate) 注解                              |     |             |
-| 12. 执行 @event 注解                                         |     | mounted     |
-| 13. 执行 slot filter / 动态 slot                             |     | slotChange  |
+| 3. 注入 link 外部样式表                                      |     |             |
+| 4. 创建 shadowRoot 并挂载组件样式                            |     |  |
+| 5. 执行装饰器create回调                                      |     |    constructor         |
+| 6. 绑定 parentComponent                                               |     |    |
+| 7. 验证及初始化 props |     |  propsReady |
+| 8. 初始化 states |     |   |
+| 9. 渲染 render 及依赖绑定                                    |     | render      |
+| 10. 绑定 renderRoot 及 renderRoots                                            |     |             |
+| 11. 初始化插槽 slots                                            |     |   beforeMount  |
+| 12. 执行装饰器 beforeMount 回调 ，包括 @watch(immediate)、@computed、@event、@query                                     |     |             |
+| 13. 初始化 css getter                                                   |     |     mounted        |
+| 14. 执行装饰器 mounted 回调 ，包括 @watch                                     |     |             |
 
 > 更新流程【普通】
 
@@ -410,8 +415,30 @@ static get autoSlot() {
 
 ## 事件
 
-事件分为三类
+在CompElem中事件分为三类
 
 1. 原生事件 —— `<div @click="..."`，监听器回调参数返回原生事件对象
-2. 组件自定义事件 —— `<l-select @change="..."`，监听器回调参数返回`CustomEvent`事件对象
-3. 扩展原生事件 —— `<div @resize="..."`，监听器回调参数返回`CustomEvent`事件对象
+2. 扩展原生事件 —— `<div @resize="..."`，监听器回调参数返回`CustomEvent`事件对象
+3. 组件自定义事件 —— `<l-select @change="..."`，监听器回调参数返回`CustomEvent`事件对象
+
+### 事件修饰符
+通过`.`号可使用修饰符修饰事件如 `@scroll.throttle:100="${...}"`
+- 全部通用 —— `debounce/throttle/once` 可组合
+- 原生通用 —— `stop/prevent/self` 可组合
+- 鼠标 —— `left/right/middle` 不可组合
+- 键盘 —— `ctrl/alt/shift/meta` 可组合 `esc/a/b/c/d...` 不可组合,多个key并列表示可选
+- mutate —— `attr/child/char/tree` 可组合
+> 部分修饰符支持参数，可使用冒号传参 —— `throttle:100 / debounce:100`。支持列表如下
+  - throttle:wait
+  - debounce:wait
+  ```html
+  <!-- 示例 -->
+  <div @mutate.child.throttle:100="...">
+  <div @click.left.once="...">
+  <div @mousedown.stop.prevent="...">
+  ```
+### 扩展原生事件
+可直接用于DOM元素的扩展事件（非组件事件），支持列表如下
+- resize 元素尺寸变化时触发
+- outside 鼠标点击元素外部时触发，可通过修饰符限制鼠标点击类型`outside.[mousedown/up/click/dblclick]`，默认click
+- mutate 内容变化时触发。基于  Mutation Observer API

package/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 共享内容
+ */
+export declare const ChangedMap: WeakMap<WeakKey, any>;
+export declare const EXP_KEY: RegExp;

package/decorator/Decorator.d.ts

@@ -10,13 +10,9 @@ export declare enum DecoratorType {
  */
 export declare abstract class Decorator {
     /**
-     * 通过函数方式进行装饰器调用
-     * @param target 所在类
-     * @param deco 装饰器函数
-     * @param fieldName 装饰器应用的字段名/函数名/函数
-     * @param args 不定参数
+     * 优先级，越大越先执行
      */
-    static call(target: any, deco: Function, fieldName: string | Function, ...args: any[]): void;
+    static get priority(): number;
     /**
      * 装饰器使用范围，超出范围会报错
      */
@@ -36,7 +32,7 @@ export declare abstract class Decorator {
      * @param setReactive 为实例设置响应属性，注意，仅是设置到了instance.reactiveData中并非this.key。如需实现this访问，可自行定义组件的properties
      * @param args 装饰器函数参数
      */
-    abstract propsReady(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): any;
+    abstract beforeMount(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): any;
     abstract mounted(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): any;
     abstract updated(component: CompElem, changed: Record<string, any>): any;
 }

package/decorator/index.d.ts

@@ -19,9 +19,10 @@ export declare class DecoratorWrapper {
     decoratorClass: Constructor<Decorator>;
     instanceMap: WeakMap<CompElem, Decorator>;
     key?: string;
+    priority: number;
     constructor(args: any[], metadata: any[], decoratorClass: Constructor<Decorator>);
     create(comp: CompElem): void;
-    propsReady(comp: CompElem, setReactive: (key: string, value: any) => any): void;
+    beforeMount(comp: CompElem, setReactive: (key: string, value: any) => any): void;
     mounted(comp: CompElem, setReactive: (key: string, value: any) => any): void;
     updated(comp: CompElem, changed: Record<string, any>): void;
 }

package/directive/Directive.d.ts

@@ -1,18 +1,13 @@
-import { Template } from "../render/render";
-import { DirectiveUpdateTag, TmplFn } from "../types";
-import { EnterPointType } from "./index";
+import { Template } from "../render/Template";
+import { DirectiveUpdateTag } from "../types";
+import { EnterPoint, EnterPointType } from "./index";
 declare const Directive_base: {
     new (...args: any[]): {
         [x: string]: any;
-        render(...args: any): void | Template | Template[] | ((...args: any[]) => (Template | Template[]));
-        __expPos: Record<string, import("../types").ExpPos>;
-        __expPosMap: Record<string, Record<string, import("../types").ExpPos> | null>;
-        __directives: Record<string, Directive>;
-        slotComponent: import("..").CompElem;
+        __updatePoints: Array<import("../types").UpdatePoint>;
         renderComponent: import("..").CompElem;
-        renderContext(...args: any): [NodeListOf<ChildNode>, Record<string, import("../types").ExpPos>, Record<string, Record<string, import("../types").ExpPos> | null>];
-        updateContext(...args: any): void;
-        __updateExpPos(tmpl: Template, _expPos: Record<string, import("../types").ExpPos>): void;
+        buildView(tmpl: Template): NodeListOf<ChildNode>;
+        updateView(tmpl: Template): void;
     };
 } & ObjectConstructor;
 /**
@@ -29,12 +24,16 @@ export declare abstract class Directive extends Directive_base {
      * 更新时调用
      * @param point
      */
-    abstract update(nodes: Node[], newArgs: any[], oldArgs: any[]): DirectiveUpdateTag;
+    abstract update(point: EnterPoint, newArgs: any[], oldArgs: any[]): DirectiveUpdateTag;
     /**
-     * 调用实现
-     * 如果返回tmplFn则表示异步渲染
+     * 渲染HTML内容，该回调内无法访问DOM
      */
-    abstract render(...args: any): Template | Template[] | void | TmplFn;
+    abstract render(...args: any): Template | void;
+    /**
+     * 指令所在DOM创建后渲染前调用，可以访问插入点信息
+     * 此时可对DOM进行操作
+     */
+    abstract created(point: EnterPoint, ...args: any): void;
     /**
      * 指令渲染参数变量链
      */

package/directive/index.d.ts

@@ -1,4 +1,5 @@
 import { CompElem } from "../CompElem";
+import { Template } from "../render/Template";
 import { Directive } from "./Directive";
 /**
  * 属性定义
@@ -23,8 +24,9 @@ export declare class EnterPoint {
     varIndex: number;
     expressionChain: string;
     nodes: Node[];
-    constructor(level: number, node: Node, attrName: string, type: EnterPointType);
+    constructor(node: Node, attrName: string, type: EnterPointType);
     setVarIndex(varIndex: number): void;
+    getNodes(): Node[];
 }
 /**
  * Delay the actual time of execution of directive
@@ -40,9 +42,10 @@ export declare class DirectiveWrapper extends Function {
     varChain: any[];
     constructor(diClass: typeof Directive, ...args: any[]);
     checkScope(scopeType: string): void;
-    render(component: CompElem): NodeListOf<ChildNode>;
-    update(nodes: Node[], newArgs: any[], oldArgs: any[]): void;
+    render(component: CompElem): void | Template;
+    update(point: EnterPoint, newArgs: any[], oldArgs: any[]): void;
     getDirective(): Directive;
+    newNodeMap: Record<string, HTMLElement>;
 }
 /**
  * 返回指令调用函数

package/events/event.d.ts

@@ -1,10 +1,10 @@
 import { CompElem } from "../CompElem";
-export declare const MODI_PARAM_DIVIDER = ":";
 /*************************************************************
  * 事件修饰符
  * @author holyhigh2
  *
- * 通用 debounce/stop/prevent/once/throttle/self 可组合
+ * 全部通用 debounce/once/throttle 可组合
+ * 原生通用 stop/prevent/self 可组合
  * 鼠标 left/right/middle 不可组合
  * 键盘 ctrl/alt/shift/meta 可组合 esc/letters... 不可组合,多个key并列式表示可选
  *

package/helpers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Css 辅助类
+ */
+export declare class CssHelper {
+    /**
+     * 用于转换style对象为标准style字符串，会自动转换对象key为短横线格式
+     * @param styles 样式对象
+     * @returns
+     */
+    static getCssText(styles: Record<string, string> | string): string;
+    /**
+     * 设置样式
+     * @param styles 样式字符串或样式对象
+     * @param node HTML元素
+     * @returns 每个样式的旧值map
+     */
+    static setStyle(styles: Record<string, string> | string, node: HTMLElement): Record<string, string>;
+}

package/index.d.ts

@@ -1,4 +1,5 @@
-import { buildHTML, createRef, html, RefObject, Template } from "./render/render";
+import { Template } from './render/Template';
+import { buildHTML, createRef, html, RefObject } from "./render/render";
 export * from "./decorator/Decorator";
 export * from "./decorator/index";
 export * from "./decorators/computed";
@@ -24,3 +25,4 @@ export * from "./directives/When";
 export { buildHTML, createRef, html, RefObject, Template };
 export * from './CompElem';
 export * from './types';
+export * from './helpers';

package/index.js

@@ -1,7 +1,7 @@
 /**
-   * compelem v0.2.3-beta.1732103467
+   * compelem v0.2.6-beta.1736948169
    * A modern, reactive, fast, lightweight and flexible lib for building web components
    * @holyhigh2
    * https://github.com/holyhigh2/compelem
    */
-  import{toPath as e,isFunction as t,isObject as s,isDefined as r,get as n,isUndefined as i,isEmpty as o,has as a,concat as l,defaults as c,merge as d,cloneDeep as h,each as u,kebabCase as p,last as f,isEqual as m,startsWith as _,includes as g,clone as v,isElement as E,isArray as C,initial as b,find as N,debounce as y,throttle as P,once as T,remove as x,map as S,size as M,isBlank as A,join as k,split as O,set as L,replace as w,compact as D,toArray as R,assign as j,first as $,isString as I,closest as H,bind as B,trim as U,omitBy as F,camelCase as V,isNil as z,some as W,isNull as K,fval as Q,test as G,omit as X,flatMap as q,groupBy as Y,reject as J,filter as Z,slice as ee,head as te,trimStart as se,trimEnd as re,replaceAll as ne,snakeCase as ie,toString as oe,findIndex as ae,call as le}from"myfx";function ce(e){console.error("[CompElem]",e)}function de(e,t){console.error(`[CompElem <${e}>]`,t)}function he(t){return e(t).join("-")}function ue(e){return Object.getPrototypeOf(e)}var pe;!function(e){e.CLASS="class",e.FIELD="field",e.METHOD="method"}(pe||(pe={}));class fe{static call(e,s,r,...n){if(ge.get(s)){s(...n)(e,r,t(r)?{configurable:!0}:null).create(e)}else s(e,r,...n)}}const me="getKey",_e="__decorators",ge=new WeakMap;class ve{args;metadata;decoratorClass;instanceMap;key;constructor(e,t,s){this.args=e,this.metadata=t,this.decoratorClass=s,this.instanceMap=new WeakMap}create(e){let t,a=new this.decoratorClass(...this.args),l=a.targets,c=this.metadata[2];s(c)&&r(n(c,"configurable"))?t=pe.METHOD:i(this.metadata[2])&&(t=pe.FIELD),!o(l)&&t&&l.includes(t)?(a.created(e,...this.metadata),this.instanceMap.set(e,a)):ce(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${l.join(",")}' bug got '${t}'`)}propsReady(e,t){this.instanceMap.get(e).propsReady(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 Ee=new WeakMap;function Ce(e){let t=(...t)=>(...s)=>{let r=s[0].constructor,i=n(r,_e);if(!a(r,_e)){let e=n(Object.getPrototypeOf(r),_e);i=e?l(e):[],Object.defineProperty(r,_e,{configurable:!1,enumerable:!1,value:i})}let o,c={},d=n(e,me);if(d){let s=Ee.get(e);if(s||(s=new WeakMap,Ee.set(e,s)),c=s.get(r),c||(c={},s.set(r,c)),o=d(...t),c[o])return c[o]}let h=new ve(t,s,e);return c[o]=h,i?.push(h),h};return ge.set(t,!0),t}const be=new WeakMap;function Ne(e){if(1===arguments.length)return(t,s,r)=>{e.required=e.required||!1,e.attribute=!1!==e.attribute,ye(t,s,e,r)};let t=arguments[0],s=arguments[1],r=arguments[2];e={type:void 0,required:!1,attribute:!0},r&&"function"==typeof r.type&&(e=c(r,e),r=void 0),ye(t,s,e,r)}function ye(e,t,s,r){let n;if(/[a-z]/.test(t[0])||ce(`Prop '${t}' must be in CamelCase`),!a(e.constructor,"__deco_props")){const t={};let s=e.constructor;for(;(s=ue(s))!==We;)d(t,s.__deco_props?h(s.__deco_props):{});Object.defineProperty(e.constructor,"__deco_props",{configurable:!1,enumerable:!1,value:t}),n=new Set,u(t,((e,t)=>{if(e.attribute){let e=p(t);n?.add(e)}})),be.set(e.constructor,n)}if(r&&(r.get&&(s.getter=r.get),r.set&&(s.setter=r.set)),s.attribute){n||(n=be.get(e.constructor));let s=p(t);n?.add(s)}e.constructor.__deco_props[t]=s}const Pe=new Set;function Te(e){return be.get(e)??Pe}const xe={startCss(e){this.__cssCollecting=e},endCss(){this.__cssCollecting=null},setCssUpdater(e){this.__cssUpdater=e},startCompute(e){this.__computeCollecting=e},endCompute(){this.__computeCollecting=null},setComputedProp(e){this.__computeUpdater=e},__computeCollecting:null,__computeUpdater:null,__cssCollecting:null,__cssUpdater:null,__directiveQ:[],setDirectiveQ(e){let t=f(this.__directiveQ);t&&m(t,e)||(t&&t.length<e.length&&_(e.join(","),t.join(","))?this.__directiveQ[this.__directiveQ.length-1]=e:this.__directiveQ.push(e))},popDirectiveQ(){let e=l(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=[]},__renderCollection:new Set,__renderContext:null,__renderCollecting:!1,__skipCheck:!1},Se=new WeakMap,Me=new WeakMap,Ae=new WeakMap,ke=new WeakMap;function Oe(e,r){if(!s(e))return e;const i=e.__proxy?e:new Proxy(e,{get(e,t,s){const r=Object.keys(e),n=Reflect.get(e,t,s);if(!g(r,t))return n;if(e.hasOwnProperty(t)){let e=Me.get(s)??[],r=l(e,[t]),n=r.join("-");if(xe.__renderCollecting)xe.collect(he(r)),xe.setDirectiveQ(r);else if(xe.__computeCollecting){let e=Ae.get(xe.__computeCollecting);e||(e={},Ae.set(xe.__computeCollecting,e));let t=e[n];t||(t=e[n]=[]),t.push(xe.__computeUpdater)}else if(xe.__cssCollecting){let e=ke.get(xe.__cssCollecting);e||(e={},ke.set(xe.__cssCollecting,e)),e[n]=xe.__cssUpdater}}return n},set(e,r,i,o){let a=Se.get(o).from,c=n(a.constructor,"__deco_props");c&&c[r]&&e.__isData&&c[r].sync&&a.emit("update:"+r,{value:i});let d=e[r],h=n(a.constructor,"__deco_states"),u=n(c,[r,"hasChanged"])||n(h,[r,"hasChanged"]);if(u){if(!u.call(a,i,d))return!1}else{if(e[r]===i)return!0;if(Number.isNaN(i)&&Number.isNaN(e[r]))return!1}s(d)&&(d=v(d));let p=Se.get(o)?.contextSet,f=Me.get(o)??[],m=l(f,[r]),_=i;!s(i)||t(i)||E(i)||p.forEach((e=>{let t=Se.get(o)?.pathMap,s=t?.get(e);s&&(m=l(s,[r]),Me.set(_,m),_=Oe(_,e),Me.set(_,m))}));let g=Reflect.set(e,r,_),b=Se.get(o).pathMap;return p.forEach((e=>{let t=b.get(e);if(!t)return;m=l(t,"length"==r&&C(o)?[]:[r]),e._notify(d,m);let s=m.join("-"),n=Ae.get(e);if(n){let t=n[s];t&&t.forEach((t=>{t.call(e)}));let r=m.length-1;for(;r;){let t=n[m.slice(0,r).join("-")];t&&t.forEach((t=>{t.call(e)})),r--}}let i=ke.get(e);if(i){let t=i[s];t&&t.call(e);let r=m.length-1;for(;r;){let t=i[m.slice(0,r).join("-")];t&&t.call(e),r--}}})),g}});e.__proxy||Object.defineProperty(e,"__proxy",{enumerable:!1,writable:!1,configurable:!1,value:!0});let o=Me.get(e)??[];if(Object.isExtensible(e)&&!Se.get(i)){let e=new Set;e.add(r);let t=new WeakMap;t.set(r,o),Se.set(i,{from:r,contextSet:e,pathMap:t})}else{Se.get(i).contextSet.add(r);let e=Se.get(i).pathMap,t=e.get(r),s=l(o);if(t&&t.join("")!==s.join("")){let e=n(r,b(t));C(e)||function(...e){console.warn("[CompElem]",...e)}(`The object is referenced by more than one @state '${s.join(".")},${t.join(".")}'`),t=s}else e.set(r,s)}for(let n in e){const i=e[n];!s(i)||t(i)||E(i)||i instanceof Text||(Me.set(i,l(o,[n])),e[n]=Oe(i,r),Me.set(e[n],l(o,[n])))}return i}const Le=["resize","outside"],we=new WeakMap,De=[],Re=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=we.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}}}))}}}));function je(e,t,s,r){if("resize"===e)!function(e,t){we.set(e,t),Re.observe(e)}(t,s);else if("outside"===e&&"mousedown"===r[0])!function(e,t){De.push([e,t])}(t,s)}document.addEventListener("mousedown",(e=>{let t=e.target;De.forEach((([s,r])=>{if(!s.contains(t)){r(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:s,event:e}}))}}))}),!1);const $e=/,|^(debounce:.+)|(debounce$)/,Ie=/,|^(throttle:.+)|(throttle$)/,He={esc:"escape"};function Be(e,t,s,r){let n,i=e.split("."),o=i.shift(),a=i.includes("once"),l=t;if(n=N(i,(e=>$e.test(e)))){let e=n.split(":");l=y(l,parseInt(e[1])||100)}if(n=N(i,(e=>Ie.test(e)))){let e=n.split(":");l=P(l,parseInt(e[1])||100)}if(a&&(l=T(l)),function(e){return Le.includes(e)}(o))return je(o,s,l,i),l;let c=e=>{if(i.includes("prevent")&&e.preventDefault(),i.includes("stop")&&e.stopPropagation(),!i.includes("self")||e.target===e.currentTarget){if(e instanceof MouseEvent){if(i.includes("left")&&0!=e.button)return;if(i.includes("right")&&2!=e.button)return;if(i.includes("middle")&&1!=e.button)return}else if(e instanceof KeyboardEvent){if(x(i,(e=>"ctrl"==e))[0]&&!e.ctrlKey)return;if(x(i,(e=>"alt"==e))[0]&&!e.altKey)return;if(x(i,(e=>"shift"==e))[0]&&!e.shiftKey)return;if(x(i,(e=>"meta"==e))[0]&&!e.metaKey)return;if(!S(i,(e=>He[e]||e)).includes(e.key.toLowerCase()))return}l(e)}};s.addEventListener(o,c);let d=r.__events[o];return d||(d=r.__events[o]=[]),d.push([s,c]),c}function Ue(e){return class extends e{render(...e){}__expPos={};__expPosMap={};__directives={};slotComponent;renderComponent;renderContext(...e){return Fe.call(this,...e)}updateContext(...e){let t=1==M(e)&&(C(e[0])&&e[0][0]instanceof mt||e[0]instanceof mt)?e[0]:this.render(...e);t instanceof mt?this.__updateExpPos(t,this.__expPos):C(t)&&t[0]instanceof mt&&t.forEach(((e,t)=>{this.__updateExpPos(e,this.__expPosMap[e.key??e.getKey()])}))}__updateExpPos(e,t){if(A(k(e.strings)))return;let{vars:r}=e;t&&Object.values(t).forEach((e=>{let t=e.index,i=e.value,a=r,l=e.node,c=O(t,"-");if(c.forEach(((e,t)=>{a=n(a,e),a&&a.vars&&t<c.length-1&&(a=a.vars)})),!s(i)&&i===a)return;let d=l;if(e.isDirective){a.di=i.di,a.di.renderParams=a.varChain,a.di._renderArgs=a.args,a.point=i.point,a.varPath=i.varPath;let e=function(e,t){let s=e.nextSibling;if(!t)return[s];let r=[];for(;s&&s!==t;)r.push(s),s=s?.nextSibling;return r}(a.point.startNode,a.point.endNode);a.update(e,a.args,i.args)}else if(e.isToggleProp){if(!!a===i)return;d.toggleAttribute(e.attrName,!!a),L(d,e.attrName,!!a)}else if(e.isProp){if(!s(a)&&a===i)return;if(s(a)&&m(a,i))return;l instanceof We?l._updateProps({[e.attrName]:a}):l instanceof HTMLSlotElement&&this.renderComponent._updateSlot(l.getAttribute("name")||"default",e.attrName,a)}else if(e.eventName)d.removeEventListener(e.eventName,i),a=a.bind(this.renderComponent),a=Be(e.attrName,a,d,this.renderComponent);else if(e.attrName){if(!m(i,a))switch(e.attrName){case"value":if(l instanceof HTMLInputElement){l.value=a;break}default:l.setAttribute(e.attrName,w(e.attrTmpl,ht,a+""))}}else if(e.isTmpl){if(!m(a,i)){let[t,s,r]=Fe.call(this,a);o(s)?(pt.remove(e.textNode,e.node),pt.insertBefore(e.node,t)):this.__updateExpPos(a,s)}}else if(e.isText){let t=e.textNode.nextSibling;t&&t===e.node.previousSibling?t.textContent=a:(pt.remove(e.textNode,e.node),pt.insertBefore(e.node,[a]))}e.value=a}))}}}function Fe(...e){let t,s,r,n=1===e.length&&e[0]instanceof mt?e[0]:this.render(...e),i=[];if(n instanceof mt){let e=lt(n);s={},t=ut(s,i,e,n.vars,this.renderComponent)}if(C(n)&&n[0]instanceof mt){let e=[];r={},n.forEach((s=>{let n=lt(s),o={};t=ut(o,i,n,s.vars,this.renderComponent),e.push(...t),r[s.key??s.getKey()]=o})),t=e}else n instanceof Function&&this.slotComponent._asyncDirectives.set(n,this);return i.length<1||i.forEach((e=>{let t=D(R(e.render(this.renderComponent)));if(!o(t)){let s=document.createDocumentFragment();s.append(...t),e.point.endNode.parentNode.insertBefore(s,e.point.endNode)}})),[t,s,r]}const Ve={boolean:Boolean,string:String,number:Number,object:Object,array:Array,function:Function,bigint:BigInt,symbol:Symbol,undefined:Object},ze=new WeakMap;class We extends(Ue(HTMLElement)){static __l_globalRule=document.createElement("style");static{document.head.appendChild(We.__l_globalRule)}#e={};#t={"#slots":{}};#s={};#r;#n={};#i;#o;#a={};__events={};get reactiveData(){return this.#s}get attrs(){return this.#l}get props(){return this.#c}get renderRoot(){return this.#d}get renderRoots(){return this.#h}get parentComponent(){return this.#u}get slotHooks(){return this.#p}get styles(){return ze.get(this.constructor)}get isMounted(){return this.#f}get slots(){return this.#t["#slots"]}#l;#c;#d;#h;#u;#m={};#p={};#_={};#f=!1;#g=new CSSStyleSheet;static get autoSlot(){return!0}static get styles(){return[]}static get globalStyles(){return[]}get css(){return""}#v=!1;constructor(...e){super(),1===M(e)&&(this.#c={},j(this.#c,$(e))),this.renderComponent=this;let t=this.render;this.render=()=>{let e;return xe.startRender(this),e=t.call(this),xe.endRender(this.renderComponent),e};let s=n(this.constructor,"globalStyles"),r=n(this.constructor,"_global_style_attached");if(!o(s)&&"1"!==r){let e="";u(s,(t=>{I(t)&&(e+=t+"\n")})),We.__l_globalRule.textContent+=e,L(this.constructor,"_global_style_attached","1")}let i=ze.get(this.constructor),a=i??[];i||(u(n(this.constructor,"styles"),(e=>{if(I(e)){let t=new CSSStyleSheet;t.replace(e),a.push(t)}else a.push(e)})),ze.set(this.constructor,a)),this.#i=this.attachShadow({mode:"open",slotAssignment:n(this.constructor,"autoSlot",!0)?"named":"manual"}),this.#i.adoptedStyleSheets=l(a,this.#g);let c=this.attributes.getNamedItem("css-link")?.value;if(c){const e=document.createElement("style");e.textContent=`@import "${c}"`,this.#i.appendChild(e)}let d=y(this.#E,20);this.#o=new MutationObserver((e=>{e.forEach((e=>{"childList"===e.type?d.call(this):"attributes"===e.type&&e.attributeName&&this.#C(e.attributeName,e.oldValue,this.getAttribute(e.attributeName))}))})),this._slotsPropMap={default:[]};let h=n(this.constructor,_e);u(h,(e=>{e.create(this)}))}connectedCallback(){let e=H(this.parentNode,(e=>e instanceof We||e.host instanceof We),"parentNode");this.#u=e?e instanceof We?e:e.host:null,this.connected(),this.__init()}disconnectedCallback(){this.#o.disconnect()}__init(){if(this.#v)return;this.#b(),this.#N(),this.#y(),u(this.#t,((e,t)=>{let s=Reflect.getOwnPropertyDescriptor(this.#t,t);Object.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)}})})),Object.defineProperty(this.#t,"__isData",{enumerable:!1,value:!0}),this.#s=Oe(this.#t,this);const e=this;let s=n(this.constructor,_e);u(s,(t=>{t.propsReady(this,((t,s)=>(e.#s[t]=s,e.#s[t])))})),this.propsReady();let r=n(this.constructor,"__deco_computed");u(r,(({key:e,getter:t},s)=>{xe.startCompute(this),xe.setComputedProp((()=>{this.#s[s]=t.call(this)})),this.#t[s]=t.call(this),xe.endCompute()})),u(r,((e,t)=>{Object.defineProperty(this,t,{get(){return Reflect.get(this.#s,t)},set(e){de(this.tagName,"Cannot set a computed property '"+t+"'")}})}));let[i,o,a]=this.renderContext();if(this.__expPos=o,i){let e=R(i);u(e,(e=>{this.#i.appendChild(e)})),this.#h=e,this.#d=e[0]}this.#E(),this.#o.observe(this,{childList:!0,attributes:!0});let l=n(this.constructor,"__deco_events");u(l,(e=>{let s=e.name,r=j({target:document,once:!1,passive:!1,capture:!1},e.options),n=B(e.fn,this),i=r.target;t(i)&&(i=i.call(this,this)),i.addEventListener(s,n,r)})),u(this.#p,((e,t)=>{this.#P(t)})),xe.startCss(this),xe.setCssUpdater((()=>{let e=this.css;this.#g.replace(e)}));let c=this.css;U(c)&&this.#g.replace(c),xe.endCss(),setTimeout((()=>{this.#f=!0,this.mounted(),u(s,(t=>{t.mounted(this,((t,s)=>(e.#s[t]=s,e.#s[t])))}))}),0),this.#v=!0}connected(){}propsReady(){}render(){throw Error(`[CompElem <${this.tagName}>] Missing render()`)}mounted(){}#T(e,t){this.#b();let s=n(this.#e[t],"props");s&&u(this.slots,((e,t)=>{e.filter((e=>e.nodeType===Node.ELEMENT_NODE)).forEach((e=>{e instanceof We?e._updateProps(s):u(s,((t,s)=>{if(e instanceof HTMLSlotElement){let r=n(e,"__l_comp");if(r){let n=e.name||"default",i=r.#e[n];i||(i=r.#e[n]={props:{}}),i.props||(i.props={}),i.props[s]=t,r.#T(e,n)}}else e.setAttribute(s,t)}))}))})),this.slotChange(e,t)}slotChange(e,t){}shouldUpdate(e){return!0}updated(e){}emit(e,t={},s){s&&s.event&&(t.event=s.event),t.target=this,this.dispatchEvent(new CustomEvent(e,{bubbles:n(s,"bubbles",!1),composed:n(s,"composed",!1),cancelable:!0,detail:t}))}#x={};on(e,t){this.#x[e]||(this.#x[e]=[]);let s=t.bind(this);this.#x[e].push(s),this.addEventListener(e,s)}nextTick(e){requestAnimationFrame(e)}forceUpdate(){u(this.#s,((e,t)=>{this.#n[t]={value:void 0,chain:void 0}})),this.#S()}_notify(e,t){let s=[];u(t,(r=>{s.push(r);let i=n(this,s),o=he(s);this.#n[o]={value:i,chain:"slots"===o?["slots"]:s,oldValue:e,end:s.length===t.length}})),this.#r&&clearTimeout(this.#r),this.#r=setTimeout(this.#S.bind(this),10)}#S(){const e=Object.seal(v(F(this.#n,((e,t)=>"#"===t[0]))));let t=n(this.constructor,_e);if(u(t,(t=>{t.updated(this,e)})),!this.shouldUpdate(e))return;let s=new Set;u(this.#n,(({value:e,chain:t,oldValue:r},n)=>{this.#a[n]&&this.#a[n].forEach((e=>{s.add(e)}))})),s.forEach((e=>{e.updateContext(...e._renderArgs?e._renderArgs:[])})),u(this.#M,(e=>{this.#P(e)})),this.updated(e),this.#n={}}#N(){let e=n(this.constructor,"__deco_props"),t=this.attributes,o=this.tagName,l=this.#c,c={};u(t,(({name:t,value:s})=>{if(t[0]===Ze||t[0]===et||t[0]===tt||t===nt||"slot"===t)return;let r=V(t);e&&!e[r]&&(c[t]=s)})),this.#l=this.#l?j(this.#l,c):c,u(e,((c,d)=>{let h,u=e[d],f=a(l,d),m=n(this,d);if(!("_defaultValue"in u)&&(u._defaultValue=m,!u.type)){i(m)&&de(o,"Prop '"+d+"' has neither propType nor defaultValue be used for type inference");let e=typeof m;C(m)&&(e="array");let t=Ve[e];u.type=t}if(f)h=z(l[d])?m:l[d];else{h=m;let e=t.getNamedItem(p(d))||t.getNamedItem(et+p(d));e&&(f=!0,h=e.value)}if(u.required&&!f)return de(o,"Prop '"+d+"' is required"),!1;h=this.#A(e,d,h);let _=n(e,[d,"getter"]);_&&(_=B(_,this));let g=n(e,[d,"setter"]);g&&(g=B(g,this)),(_||g)&&Object.defineProperty(this.#t,d,{set:g||function(e){},get:_}),u.attribute&&r(h)&&!s(h)&&this.setAttribute(p(d),U(h)),this.#t[d]=h}))}#A(e,t,s){let n=e[t];if(!n)return s;let o=n.isValid,a=n.type,l=C(a)?a:[a],c=n.converter,d=s;if(!W(l,(e=>e===String))&&I(d)&&!K(d))try{d=c?c(d):Q(d,{html:_t})}catch(e){de(this.tagName,`Convert attribute '${t}' error with `+d)}l.forEach((e=>{"Boolean"===e.name&&(I(d)&&/(?:^true$)|(?:^false$)/.test(d)?d=Q(d):(i(d)||A(d))&&(d=!0))}));let h=typeof d,p=!r(d);return u(l,(e=>{if(G(h,e.name,"i")||d instanceof e)return p=!0,!1})),p||de(this.tagName,`Invalid prop '${t}'. expected '${l.map((e=>e.name||e))}' but got '${h}'`),o&&(o.call(this,d,this.#t)||de(this.tagName,`Invalid prop '${t}'. IsValid() check failed`)),d}#y(){let e=n(this.constructor,"__deco_states");u(e,((t,s)=>{let r=e[s],i=n(this,s);if(r){let e=r.prop;i=e?h(this.#t[e]):n(this,s)}this.#t[s]=i}))}#k=y(this.propsReady,100);_setParentProps(e,t){if(this.#v){let s=n(this.constructor,"__deco_props");u(e,((e,t)=>{let r=V(t),n=s[r];if(!n)return;let i=this.#t[r];e=this.#A(s,r,e),n.hasChanged&&!n.hasChanged.call(this,e,i)||(this.#t[r]=e,this._notify(i,[r]))})),j(this.#c,e),j(this.#l,t),this.#k()}}_updateProps(e){let t=n(this.constructor,"__deco_props");u(e,((e,s)=>{let r=V(s),n=t[r];if(!n)return;let i=this.#t[r];e=this.#A(t,r,e),n.hasChanged&&!n.hasChanged.call(this,e,i)||(xe.__skipCheck=!0,L(this,r,e),xe.__skipCheck=!1)})),j(this.#c,e),this.#k()}_initProps(e,t){this.#c=d(this.#c||{},e),this.#l=d({},t)}_bindSlot(e,t,s){if(this.#m[t]||(this.#m[t]=e,Object.defineProperty(e,"__l_comp",{value:this})),e.addEventListener("slotchange",(s=>{this.#v&&this.#T(e,"default"===t?"":t)})),!o(s)){let e=this.#e[t];e||(e=this.#e[t]={}),s.nodeFilter&&(e.filter=s.nodeFilter),e.props=X(s,"nodeFilter")}}_bindSlotHook(e,t){this.#p[e]=t}#M=new Set;_updateSlot(e,t,s){let r=this.#m[e],n=this.#p[e];if(!n&&!r)return;let i=this.#e[e];if(t&&(i.props||(i.props={}),i.props[t]=s),n)this.#M.add(e);else{let e=r.assignedElements({flatten:!0});u(e,(e=>{e.setAttribute(t,s+"")}))}}#b(){const e=q(this.childNodes,(e=>e.nodeType===Node.COMMENT_NODE?[]:e instanceof HTMLSlotElement?e.assignedNodes({flatten:!0}):e));let t=Y(e,(e=>e.nodeType===Node.TEXT_NODE?"default":e instanceof Element?e.getAttribute("slot")||"default":void 0));if(o(t))return void(o(this.#t["#slots"])||(this.#v?this.#s["#slots"]={}:this.#t["#slots"]={}));u(t,((e,t)=>{if(t){for(;e.length>0;){let t=e[0];if(!(t.nodeType===Node.TEXT_NODE&&A(t.textContent)||t instanceof HTMLSlotElement&&o(t.assignedNodes({flatten:!0}))))break;e.shift()}for(;e.length>0;){let t=f(e);if(!(t.nodeType===Node.TEXT_NODE&&A(t.textContent)||t instanceof HTMLSlotElement&&o(t.assignedNodes({flatten:!0}))))break;e.pop()}}}));let s={};u(t,((e,t)=>{o(e)||(s[t]=e)})),this.#v?this.#s["#slots"]=s:this.#t["#slots"]=s}#P(e){let t=this.#p[e];if(!t)return;let s=this.#e[e];if(!this.#t["#slots"][e])return;this.renderAsync(t,n(s,"props"));const r=this._asyncDirectives.get(t);let[i,a,l]=r?.renderContext(t(n(s,"props"))),c=J(R(i),(e=>e.nodeType===Node.COMMENT_NODE));if(c){let t=this.#_[e];o(t)||u(t,(e=>{e.parentNode?.removeChild(e)})),this.#_[e]=c,this.append(...c),this.#M.clear()}}_asyncDirectives=new WeakMap;renderAsync(e,...t){}#E(){o(this.#e)||u(this.slots,((e,r)=>{if(o(e))return;let n=this.#e[r],i=e;if(n){let r=n.filter;if(t(r))i=r(e);else if(s(r)){let t=r.type,s=r.maxCount;if(t){let s=C(t)?t:[t];i=Z(e,(e=>W(s,(t=>e instanceof t))))}s>0&&(i=ee(e,0,s))}}if("named"===this.#i.slotAssignment){let t=[];for(u(e,(e=>{i.includes(e)||t.push(e)}));t.length>0;){let e=t.pop();e.parentNode?.removeChild(e)}}else this.#m[r].assign(...i);this.#v&&this.#T(this.#m[r],"default"===r?"":r)}))}#C(e,t,s){if(!this.isMounted)return;if(Te(this.constructor).has(e)){if(K(s)){s=n(this.constructor,"__deco_props")[e]._defaultValue}this._updateProps({[e]:s})}}_regDeps(e,t){let s=this.#a[e];s||(s=this.#a[e]=new Set),s.add(t);let r="",n=e.split("-");n.pop(),n.forEach((e=>{r=o(r)?e:r+"-"+e;let s=this.#a[r];s||(s=this.#a[r]=new Set),s.add(t)}))}}var Ke;!function(e){e.NONE="NONE",e.REMOVE="REMOVE",e.REPLACE="REPLACE",e.UPDATE="UPDATE",e.APPEND="APPEND"}(Ke||(Ke={}));class Qe{index;value;isText=!1;isTmpl=!1;isDirective=!1;node;textNode;isComponent=!1;attrName;attrTmpl;isProp=!1;isToggleProp=!1;eventName;constructor(e,t,s,r){this.index=e+"",this.node=t,s&&(this.attrName=s),r&&(this.attrTmpl=r)}}var Ge,Xe;!function(e){e.ATTR="attr",e.PROP="prop",e.TEXT="text",e.CLASS="class",e.STYLE="style",e.SLOT="slot",e.TAG="tag"}(Ge||(Ge={}));class qe{startNode;endNode;type;attrName;varIndex;expressionChain;nodes;constructor(e,t,s,r){this.startNode=t,this.attrName=s,this.type=r}setVarIndex(e){this.varIndex=e}}!function(e){e.AFTER_BEGIN="afterbegin"}(Xe||(Xe={}));class Ye extends Function{diClass;args;di;varPath;point;slotComponent;varChain;constructor(e,...t){super(),this.diClass=e,this.args=t,this.varChain=xe.popDirectiveQ()}checkScope(e){let t=n(this.diClass,"scopes");o(t)||G(t.join(","),e)||ce(`Directive '${this.diClass.name}' is out of scopes, expect '${t.join(",")}' bug got '${e}'`)}render(e){let t=n(e,"__directives"),s=this.di||t[this.varPath];s||(s=new this.diClass(this.point),s.renderComponent=e,s.slotComponent=this.slotComponent,s.renderParams=this.varChain),this.di=s,s._renderArgs=this.args;let[r,i,o]=s.renderContext(...this.args);return o?s.__expPosMap=o:i&&(s.__expPos=i),r}update(e,t,s){let r=this.di.update(e,t,s);if(r===Ke.REMOVE)e.forEach((e=>{e.parentNode?.removeChild(e)}));else if(r===Ke.REPLACE){let s=[];e.forEach((e=>{e.parentNode?.removeChild(e)}));let r=this.di.render(...t),[n,i,o]=this.di.renderContext(r);o?this.di.__expPosMap=o:i&&(this.di.__expPos=i),s=R(n);let a=document.createDocumentFragment();a.append(...s),this.point.endNode.parentNode.insertBefore(a,this.point.endNode)}else if(r===Ke.UPDATE){let s,r={},n={},i=[],a=[],l=this.di.render(...t);C(l)&&l[0]instanceof mt&&l.forEach((e=>{let t=e.key??e.getKey();r[t]="1",n[t]=e,a.push(t)})),e=Z(D(e),(e=>e.nodeType===Node.ELEMENT_NODE)),s=Z(D(R(s)),(e=>e.nodeType===Node.ELEMENT_NODE));let c={},d="",h={};S(e,(e=>{let t=e,s=t.getAttribute("key");if(s){if(c[s])return d=s,!1;c[s]=t,i.push(s),h[s]="1"}})),d&&ce(`${V(this.diClass.name)} - duplicate key '${d}'`);let p={},m=r;const _=this.point.startNode.parentNode;let g=[],v=[];if(u(h,((e,t)=>{m[t]||(v.push(t),delete h[t],x(i,t))})),!o(a)){let e="",t=-1,s=[],r={};a.forEach(((n,o)=>{let l=i.findIndex((e=>e===n));if(l>-1&&l!==o){if(t<0||t-l==1){let e=f(s);s.push({nodeId:n,targetId:0===o?Xe.AFTER_BEGIN:e?e.nodeId:a[o-1]})}else r[s.length]={group:s,targetId:""},s=[],s.push({nodeId:n,targetId:i[l]});t=l}else if(l<0){let t=e?c[e]||this.point.endNode:this.point.startNode;g.push({prevNode:t,newkey:n})}e=n})),o(r)&&s.length>0&&(r[s.length]={group:s,targetId:""});let n=Object.keys(r),l=n.map((e=>parseInt(e))).sort(((e,t)=>e-t));if(n.length<2&&n.length>0){let{group:e}=r[l[0]];b(e).forEach((({targetId:e,nodeId:t})=>{let s,r=c[t];e===Xe.AFTER_BEGIN?(s=this.point.startNode,s.after(r)):(s=c[e],s.after(r))}))}}g.forEach((e=>{let t=e.newkey,s=p[t]||this.#O(n[t],t),r=e.prevNode;r===this.point.endNode?r.before(s):(this.point.startNode,r.after(s))})),v.forEach((e=>{this.#L(e);let t=c[e];t&&_.removeChild(t)})),this.di.updateContext(l)}}getDirective(){return this.di}#O(e,t){let[s,r,n]=this.di.renderContext(e),i=te(s);return this.di.__expPosMap[t]=r,i}#L(e){this.di.__expPosMap[e]=null,delete this.di.__expPosMap[e]}}function Je(e){return(...s)=>{let r=null;return s.forEach(((e,n)=>{if(t(e)){let t=e;s[n]=function(...e){let s=r.di;xe.startRender(s);let n=t(...e);return xe.endRender(s.renderComponent),n}}})),r=new Ye(e,...s),r}}const Ze="@",et=".",tt="?",st="*",rt=":",nt="ref",it=/[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--l_ui-pl_df-->){2,}.*?\1/ims,ot=/<\s*[a-z0-9-]+([^>]*<\!--l_ui-pl_df-->)*[^>]*?(?<!-)>/gims,at="slot-props";function lt(e){let t="";(C(e)?e:[e]).forEach((({strings:e,vars:s})=>{let r=R(e);r[0]=se(r[0]),r[r.length-1]=re(r[r.length-1]);let i=r.length-1;r.forEach(((e,r)=>{let o=n(s,r,"");o=i===r?"":ct,t+=e+o}))}));let s=t.match(it);if(s){return ce(`Parse error: attribute value can be set only one interpolation —— \n ${ne(s[0],ct,"${...}")}`),""}let r=0;return t=t.replace(ot,((e,t)=>ne(e,ct,(()=>ct.replace("--\x3e","")+r++)))),t}const ct="\x3c!--l_ui-pl_df--\x3e",dt="\x3c!--l_ui-pl_df",ht=/<!--l_ui-pl_df\d*(-->)?/;function ut(e,s,r,n,o,l,c=0,d=""){const h=document.createElement("div");h.innerHTML=r;const f=document.createNodeIterator(h,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let m,g=0,v=null;for(;m=f.nextNode();)if(m instanceof HTMLElement||m instanceof SVGElement){m instanceof We?v=m:v?.contains(m)||(v=null);let r={},i=R(m.attributes);u(i,(i=>{let{name:l,value:h}=i;if(l===at){let e=m.name||"default";if(v){let t=v._slotsPropMap[e];t||(t=v._slotsPropMap[e]=[]),t.push(m)}}if(_(l,dt)){let t=n[g];if(t instanceof Ye){t.checkScope(Ge.TAG);let r=new qe(c,m,l.substring(1),Ge.TAG);t.point=r,t.varPath=d+g,t.slotComponent=v,s.push(t);let n=e[d+g]=new Qe(d+g,m);n.isDirective=!0,n.value=t,n.isComponent=!!v,g++}m.removeAttribute(l)}else{if(l[0]===Ze){let s=e=>{},r=null;if(ht.test(h)){let i=n[g];if(!t(i))return void de(m.tagName,`Event '${l}' must be a function`);s=i.bind(o),r=e[d+g]=new Qe(d+g,m,l.replace(/\.|\?|@/,""),h),r.isComponent=!!v,g++}let i=l.substring(1).split(".").shift();return s=Be(l.substring(1),s,m,o),m.removeAttribute(l),void(r&&(r.eventName=i,r.value=s))}if(l!==nt)if(l[0]!==et||ht.test(h)){if(ht.test(h)){let t=n[g],o=e[d+g]=new Qe(d+g,m,l.replace(/\.|\?|@/,""),h);if(o.isComponent=!!v,l[0]===et||l[0]===tt||l[0]===st){if(t instanceof Ye){t.checkScope(Ge.PROP),s.push(t);let e=new qe(c,m,l.substring(1),Ge.PROP);t.varPath=d+g,t.point=e,t.slotComponent=v,o.value=t,o.isDirective=!0}else if(l[0]===tt)o.isToggleProp=!0,o.value=!!t,o.value&&m.setAttribute(l.substring(1),"");else if(l[0]===st){o.value=t;let e=l.substring(1);const[s,r]=e.split(rt);let n=s;switch(r){case"camel":n=V(n);break;case"kebab":n=p(n);break;case"snake":n=ie(n)}o.attrName=n,m.setAttribute(n,t)}else if(m instanceof We||"SLOT"===m.tagName){let e=V(l.substring(1));e in m||"SLOT"===m.tagName||de(m.tagName,`Prop '${l}' is not defined in ${m.tagName}`),o.value=t,o.isProp=!0,r[e]=t}else de(m.tagName,`Prop '${l}' can only be set on a CompElem or a slot`),delete e[d+g];m.removeAttribute(l),t=""}else{if(o.value=t,t instanceof Ye){let e=Ge.ATTR;"class"===l?e=Ge.CLASS:"style"===l&&(e=Ge.STYLE),t.checkScope(e),s.push(t),o.isDirective=!0;let r=new qe(c,m,l,e);t.point=r,t.slotComponent=v,t.varPath=d+g,t=""}h=w(h,ht,t),i.value=h}g++}}else de(m.tagName,`Prop '${l}' must be an interpolation`);else{if(ht.test(h)){let e=n[g];if(!a(e,"current"))return void de(m.tagName,"Ref must be a RefObject");g++,e.current=m}m.removeAttribute(l)}}})),m instanceof We?m._initProps(r):m instanceof HTMLSlotElement&&o._bindSlot(m,m.name||"default",r)}else{let t=m;if(`\x3c!--${t.nodeValue}--\x3e`!==ct)continue;let r=e[d+g]=new Qe(d+g,m);r.isComponent=!!v,r.isText=!0;let a,h=n[g];if(a=document.createComment(`compelem-ui-${c}-${g}-child-start`),t.parentNode.insertBefore(a,t),t.nodeValue=`compelem-ui-${c}-${g}-child-end`,r.textNode=a,h instanceof Ye){r.isDirective=!0,r.value=h;let e=v?Ge.SLOT:Ge.TEXT;s.push(h);let n=new qe(c,a,"",e);n.endNode=t,h.point=n,h.slotComponent=v,h.varPath=d+g,h=""}else if(h instanceof mt){r.isTmpl=!0,r.value=h;let t=lt(h);h=ut(e,s,t,h.vars,o,l,c,d+`${g}-`)}else r.value=h;if(g++,i(h))continue;if(h instanceof NodeList){let e=document.createDocumentFragment();e.append(...h),t.parentNode.insertBefore(e,t)}else if(h instanceof Element)t.parentNode.insertBefore(h,t);else if(U(h)){let e=document.createTextNode(h);t.parentNode.insertBefore(e,t)}}return h.childNodes}const pt={insertBefore:function(e,t){let s=document.createDocumentFragment();s.append(...t),e.parentNode.insertBefore(s,e)},remove:function(e,t){let s=e.nextSibling;for(;s!==t;)s?.parentNode?.removeChild(s),s=e.nextSibling}},ft=/\s+\.?key\s*=/;class mt{strings;vars;key;constructor(e,t){this.strings=l(e),this.vars=t}getKey(){let e=this.vars,t="";return u(this.strings,((s,r)=>{if(ft.test(s))return t=oe(e[r]),!1})),this.key=t,t}append(e){let t=f(this.strings);return e.strings.forEach(((e,s)=>{0!=s?this.strings.push(e):this.strings[this.strings.length-1]=t+e})),this.vars=l(this.vars,e.vars),this}getHTML(){let e="",t=R(this.strings);t[0]=se(t[0]),t[t.length-1]=re(t[t.length-1]);let s=t.length-1;return t.forEach(((t,r)=>{let i=n(this.vars,r,"");i=i instanceof mt?i.getHTML():s===r?"":i,e+=t+i})),e}}function _t(e,...t){return new mt(I(e)?[e]:e,t)}function gt(e){return{current:e}}function vt(e,t,s){s.get||ce(`Prop '${t}' must be a getter`),a(e.constructor,"__deco_computed")||(e.constructor.__deco_computed=o(e.constructor.__deco_computed)?{}:h(e.constructor.__deco_computed)),e.constructor.__deco_computed[t]={key:t,getter:s.get}}function Et(e,t){return(s,r,n)=>{a(s.constructor,"__deco_events")||(s.constructor.__deco_events=o(s.constructor.__deco_events)?[]:h(s.constructor.__deco_events)),s.constructor.__deco_events.push({name:e,options:t,fn:s[r]})}}var Ct;!function(e){e.ONCE="once",e.UPDATABLE="updatable"}(Ct||(Ct={}));class bt extends fe{created(e,...t){}mounted(e,t,...s){}get targets(){return[pe.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)}propsReady(e,t,s,r,...n){const i=this;Object.defineProperty(e,r,{get:()=>(i.result&&i.cache||i.getter(e),i.result)})}updated(e,t){this.cache===Ct.UPDATABLE&&this.getter(e)}}const Nt=Ce(bt),yt=Ce(class extends bt{getter(e){this.result=e.shadowRoot?.querySelectorAll(this.selector)}});function Pt(e){if(1===arguments.length)return(t,s)=>{Tt(t,s,e)};Tt(arguments[0],arguments[1],{prop:""})}function Tt(e,t,s){if(!a(e.constructor,"__deco_states")){const t={};let s=e.constructor;for(;(s=ue(s))!==We;)d(t,s.__deco_states?h(s.__deco_states):{});Object.defineProperty(e.constructor,"__deco_states",{configurable:!1,enumerable:!1,value:t})}e.constructor.__deco_states[t]=s}function xt(e,t,s){Tt(e.prototype,t,s||{prop:""})}function St(e){return t=>{t&&customElements.define(e,t)}}const Mt=Ce(class extends fe{created(e,...t){}propsReady(e,t,...s){}get targets(){return[pe.METHOD]}sources;options;handler;constructor(e,t,s){super(),this.sources=C(e)?e:[e],this.options=t,this.handler=s}static getKey(e){return C(e)?e.sort().join(""):e}mounted(e,s,r,i,...o){this.handler||(this.handler=t(i)?i:e[i]);let a=this.handler,l=n(this.options,"immediate",!1);n(this.options,"once",!1)&&(a=T(a.bind(e)));let c=[];this.sources.forEach((t=>{let s=n(e,t.replaceAll("-","."));l&&c.push({handler:a,value:s,varPath:t})})),c.forEach((({handler:t,value:s,varPath:r})=>{t.call(e,n(e,r),s,r)}))}updated(e,t){this.sources.forEach((s=>{u(t,(({value:t,chain:r,oldValue:i,end:o},a)=>{let l=s.replaceAll(".","-");if(!_(a,l))return;a===l&&o&&this.handler&&this.handler.call(e,t,i,a);let c=r.length-1;for(;c;){let t=r.slice(0,c);if(o&&t.join("-")===l&&n(this.options,"deep")){let s=n(e,t);this.handler.call(e,s,s,t.join("-"))}c--}}))}))}});class At extends(Ue(Object)){_renderArgs;static get scopes(){return[]}renderParams}const kt=["key"];const Ot=Je(class extends At{update(e,t,s){return Ke.NONE}static get scopes(){return[Ge.TAG]}constructor(e){super(),this.point=e}render(e){let t=this.point.startNode;if(t instanceof We){let s={},r={};u(e,((e,n)=>{kt.includes(n)||(n in t?s[n]=e:r[n]=e+"")})),t._initProps(s,r)}else u(e,((e,s)=>{t.setAttribute(s,e)}))}});const Lt=Je(class extends At{update(e,t,s){return this.render(t[0]),Ke.NONE}static get scopes(){return[Ge.CLASS]}constructor(e){super(e),this.point=e}lastCls;render(e){let t=[];C(e)?t=D(e):s(e)?t=q(e,((e,t)=>e?t:[])):I(e)&&(t=e.split(" "));let r=this.point.startNode;u(this.lastCls,(e=>{r.classList.remove(e)})),u(t,(e=>{r.classList.add(e)})),this.lastCls=l(t)}}),wt=/\s+\.?key\s*=/;const Dt=Je(class extends At{update(e,t,s){if(o(e)&&o(t[0]))return Ke.NONE;if(!o(this.renderParams)){let e=f(this.renderParams);C(e)||(e=[e]),this.renderParams=e}return Ke.UPDATE}constructor(e){super(),o(this.renderParams)||(this.renderParams=R(f(this.renderParams)))}static get scopes(){return[Ge.TEXT,Ge.SLOT]}render(e,t){let s=S(e,((e,s)=>t(e,s))),r=[],n=[];return s.forEach((e=>{let t=f(n),s=e.vars,i=!0;e.strings.forEach(((e,o)=>{if(wt.test(e)){let e=s[o]+"";r.includes(e)&&ce(`forEach - duplicate key '${e}'`),r.push(e),i=!1}0==o&&t?n[n.length-1]=t+e:n.push(e)})),i&&ce("forEach - missing 'key' prop")})),s}});const Rt=Je(class extends At{ifNodes;elseNodes;static get scopes(){return[Ge.TEXT,Ge.SLOT]}update(e,t,s){return!!t[0]==!!s[0]?Ke.UPDATE:(t[0],Ke.REPLACE)}render(e,t,s){return e?t(e):s(e)}});const jt=Je(class extends At{static get scopes(){return[Ge.TEXT,Ge.SLOT]}update(e,t,s){return t[0]===s[0]?Ke.UPDATE:t[0]?Ke.REPLACE:(this.cacheNodes=e,Ke.REMOVE)}render(e,t){return e?t():_t``}});var $t;!function(e){e.CHANGE="change",e.INPUT="input"}($t||($t={}));const It=Je(class extends At{update(e,t,s){if(this.modelPath||(this.modelPath=f(this.renderParams)),!m(t,s)){const e=this.point.startNode;if(e instanceof We)e._updateProps({value:t[0]});else if(e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement)e.setAttribute("value",t[0]+"");else if(e instanceof HTMLInputElement)switch(e.type){case"checkbox":case"radio":t[0]?e.setAttribute("checked",""):e.removeAttribute("checked");break;default:e.setAttribute("value",t[0]+"")}}return Ke.NONE}static get scopes(){return[Ge.TAG]}modelPath;point;constructor(e){super(),this.point=e}render(t,r){this.modelPath||(this.modelPath=f(this.renderParams)),r&&(this.modelPath=e(r));const i=this.point.startNode;if("binded"!==n(i,"_model"))if(s(t)||U(t)||(t=""),i instanceof We)i._initProps({value:t}),i.addEventListener("update:value",(e=>{L(this.renderComponent,this.modelPath,e.detail.value)})),L(i,"_model","binded");else if(i instanceof HTMLTextAreaElement)i.setAttribute("value",t+""),i.addEventListener("input",(e=>{let t=e.target;L(this.renderComponent,this.modelPath,t.value)})),L(i,"_model","binded");else if(i instanceof HTMLInputElement){let e="",s="";switch(i.type){case"checkbox":case"radio":e="checked",s="change";break;default:e="value",s="input"}i.setAttribute(e,t+""),i.addEventListener(s,(e=>{let t=e.target;L(this.renderComponent,this.modelPath,t.value)})),L(i,"_model","binded")}else i instanceof HTMLSelectElement&&(i.setAttribute("value",t+""),i.addEventListener("change",(e=>{let t=e.target;L(this.renderComponent,this.modelPath,t.value)})),L(i,"_model","binded"))}});const Ht=Je(class extends At{update(e,t,s){return this.render(t[0]),Ke.NONE}display=void 0;static get scopes(){return[Ge.TAG]}constructor(e){super(),this.point=e}render(e){let t=this.point.startNode;i(this.display)&&(this.display=t.style.display),this.renderComponent.nextTick((()=>{t.style.display=e?this.display:"none"}))}});const Bt=Je(class extends At{update(e,t,s){return Ke.NONE}static get scopes(){return[Ge.SLOT]}render(e,t){return e=e.bind(this.renderComponent),this.slotComponent._bindSlotHook(t||"default",e),e}});const Ut=Je(class extends At{update(e,t,s){return this.render(t[0]),Ke.NONE}constructor(e){super(),this.point=e}static get scopes(){return[Ge.STYLE]}render(e){let t="";s(e)?t=k(S(e,((e,t)=>p(t)+":"+e)),";"):I(e)&&(t=e),u(t.split(";"),(e=>{let t=e.split(":");this.point.startNode.style.setProperty(U(t[0]),U(t[1]))}))}});const Ft=Je(class extends At{update(e,t,s){return m(t,s)||this.targetComponent._updateProps({[this.attrName]:t[0]}),Ke.NONE}static get scopes(){return[Ge.PROP]}modelPath;attrName;targetComponent;constructor(e){super(),this.targetComponent=e.startNode,this.attrName=e.attrName}render(e){this.modelPath||(this.modelPath=f(this.renderParams)),this.targetComponent._initProps({[this.attrName]:e}),this.targetComponent.addEventListener("update:"+this.attrName,(e=>{L(this.renderComponent,this.modelPath,e.detail.value)}))}});const Vt=Je(class extends At{static get scopes(){return[Ge.TEXT,Ge.SLOT]}update(e,t,s){return m(t,s)?Ke.NONE:Ke.REPLACE}render(e,s){let r=()=>_t``,n=[],i=[];u(s,((e,s)=>{if(t(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=ae(n,(s=>t(s)?s(e):s==e));return le(i[o]??r)}});export{We as CompElem,fe as Decorator,pe as DecoratorType,ve as DecoratorWrapper,At as Directive,Ke as DirectiveUpdateTag,Ye as DirectiveWrapper,qe as EnterPoint,Ge as EnterPointType,Qe as ExpPos,me as GetKeyFnName,$t as ModelTriggerType,Ct as QueryCache,mt as Template,ge as _DecoratorMap,_e as _DecoratorsKey,Te as _getObservedAttrs,Ot as bind,lt as buildHTML,Lt as classes,vt as computed,gt as createRef,Ce as decorator,Je as directive,Et as event,Dt as forEach,_t as html,Rt as ifElse,jt as ifTrue,xt as makeState,It as model,Ne as prop,Nt as query,yt as queryAll,Ht as show,Bt as slot,Pt as state,Ut as styles,Ft as sync,St as tag,Mt as watch,Vt as when};
+  import{toPath as e,get as t,isObject as s,isDefined as r,isUndefined as n,isEmpty as i,has as o,concat as a,defaults as l,merge as d,cloneDeep as c,each as h,kebabCase as u,toArray as p,last as f,startsWith as g,isFunction as m,isArray as _,initial as v,isBlank as b,join as C,split as y,set as E,camelCase as N,isEqual as P,replace as T,isPlainObject as S,size as x,assign as w,first as k,isString as A,debounce as M,closest as L,bind as O,isNil as R,trim as D,some as V,isNull as I,fval as $,test as H,omit as j,flatMap as B,groupBy as F,reject as z,filter as U,slice as Q,compact as W,remove as K,includes as X,find as G,throttle as q,once as Y,map as J,replaceAll as Z,snakeCase as ee,toString as te,reduce as se,isMatch as re,clone as ne,findIndex as ie,call as oe}from"myfx";const ae=new WeakMap,le=/\s+\.?key\s*=/;function de(e){console.error("[CompElem]",e)}function ce(e,t){console.error(`[CompElem <${e}>]`,t)}function he(t){return e(t).join("-")}function ue(e){return Object.getPrototypeOf(e)}var pe;!function(e){e.CLASS="class",e.FIELD="field",e.METHOD="method"}(pe||(pe={}));class fe{static get priority(){return 0}}const ge="getKey",me="__decorators",_e=new WeakMap;class ve{args;metadata;decoratorClass;instanceMap;key;priority=0;constructor(e,s,r){this.args=e,this.metadata=s,this.decoratorClass=r,this.priority=t(r,"priority",0),this.instanceMap=new WeakMap}create(e){let o,a=new this.decoratorClass(...this.args),l=a.targets,d=this.metadata[2];s(d)&&r(t(d,"configurable"))?o=pe.METHOD:n(this.metadata[2])&&(o=pe.FIELD),!i(l)&&o&&l.includes(o)?(a.created(e,...this.metadata),this.instanceMap.set(e,a)):de(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${l.join(",")}' bug got '${o}'`)}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 be=new WeakMap;function Ce(e){let s=(...s)=>(...r)=>{let n=r[0].constructor,i=t(n,me);if(!o(n,me)){let e=t(Object.getPrototypeOf(n),me);i=e?a(e):[],Reflect.defineProperty(n,me,{configurable:!1,enumerable:!1,value:i})}let l,d={},c=t(e,ge);if(c){let t=be.get(e);if(t||(t=new WeakMap,be.set(e,t)),d=t.get(n),d||(d={},t.set(n,d)),l=c(...s),d[l])return d[l]}let h=new ve(s,r,e);return d[l]=h,i?.push(h),h};return _e.set(s,!0),s}const ye=new WeakMap;function Ee(e){if(1===arguments.length)return(t,s,r)=>{e.required=e.required||!1,e.attribute=!1!==e.attribute,Ne(t,s,e,r)};let t=arguments[0],s=arguments[1],r=arguments[2];e={type:void 0,required:!1,attribute:!0},r&&"function"==typeof r.type&&(e=l(r,e),r=void 0),Ne(t,s,e,r)}function Ne(e,t,s,r){let n;if(/[a-z]/.test(t[0])||de(`Prop '${t}' must be in CamelCase`),!o(e.constructor,"__deco_props")){const t={};let s=e.constructor;for(;(s=ue(s))!==Ve;)d(t,s.__deco_props?c(s.__deco_props):{});Reflect.defineProperty(e.constructor,"__deco_props",{configurable:!1,enumerable:!1,value:t}),n=new Set,h(t,((e,t)=>{if(e.attribute){let e=u(t);n?.add(e)}})),ye.set(e.constructor,n)}if(r&&(r.get&&(s.getter=r.get),r.set&&(s.setter=r.set)),s.attribute){n||(n=ye.get(e.constructor));let s=u(t);n?.add(s)}o(e.constructor,"observedAttributes")||(e.constructor.observedAttributes=[]),e.constructor.observedAttributes=p(n),e.constructor.__deco_props[t]=s}const Pe=new Set;function Te(e){return ye.get(e)??Pe}const Se={startCss(e){this.__cssCollecting=e},endCss(){this.__cssCollecting=null},setCssUpdater(e){this.__cssUpdater=e},startCompute(e){this.__computeCollecting=e},endCompute(){this.__computeCollecting=null},setComputedProp(e){this.__computeUpdater=e},__computeCollecting:null,__computeUpdater:null,__cssCollecting:null,__cssUpdater:null,__directiveQ:[],setDirectiveQ(e){let t=f(this.__directiveQ);const s=e?e.join(","):"",r=t?t.join(","):"";t&&s===r||(t&&t.length<e.length&&g(s,r)?this.__directiveQ[this.__directiveQ.length-1]=e:this.__directiveQ.push(e))},popDirectiveQ(){let e=a(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=[]},__renderCollection:new Set,__renderContext:null,__renderCollecting:!1,__skipCheck:!1},xe=new WeakMap,we=new WeakMap,ke=new WeakMap,Ae=new WeakMap;function Me(e,r){if(!s(e))return e;const n=e.__proxy?e:new Proxy(e,{get(e,t,s){if(!t)return;const r=Reflect.get(e,t,s);if((Se.__renderCollecting||Se.__computeCollecting||Se.__cssCollecting)&&e.hasOwnProperty(t)){let e=we.get(s)??[],r=a(e,[t]),n=r.join("-");if(Se.__renderCollecting)Se.collect(he(r)),Se.setDirectiveQ(r);else if(Se.__computeCollecting){let e=ke.get(Se.__computeCollecting);e||(e={},ke.set(Se.__computeCollecting,e));let t=e[n];t||(t=e[n]=[]),t.push(Se.__computeUpdater)}else if(Se.__cssCollecting){let e=Ae.get(Se.__cssCollecting);e||(e={},Ae.set(Se.__cssCollecting,e));let t=e[n];t||(t=e[n]=[]),t.push(Se.__cssUpdater)}}return r},set(e,r,n,o){if(!r)return!1;let l=e[r];if(!s(l)&&l===n)return!0;if(Number.isNaN(n)&&Number.isNaN(l))return!0;let d=we.get(o)??[],c=a(d,[r]),h=xe.get(o).from,u=t(h.constructor,"__deco_props"),p=t(h.constructor,"__deco_states"),f=t(u,[c[0],"hasChanged"])||t(p,[c[0],"hasChanged"]);if(f){if(!f.call(h,n,l))return!0}else if(l===n&&!ae.has(l))return!0;u&&u[r]&&e.__isData&&u[r].sync&&h.emit("update:"+r,{value:n});let g=xe.get(o)?.contextSet,v=n;!s(n)||m(n)||n instanceof Node||Object.isFrozen(n)||g.forEach((e=>{let t=xe.get(o)?.pathMap,s=t?.get(e);s&&(c=a(s,[r]),we.set(v,c),v=Me(v,e),we.set(v,c))}));let b=Reflect.set(e,r,v),C=xe.get(o).pathMap;return g.forEach((e=>{let t=C.get(e);if(!t)return;e===h&&d.length>1&&t.length>1&&d[0]===t[0]&&(t=d),c=a(t,"length"==r&&_(o)?[]:[r]),e._notify(l,c);let s=ke.get(e),n=Ae.get(e);if(s||n){let t=c.length;for(;t;){let r=c.slice(0,t).join("-");if(s){let t=s[r];if(!i(t))for(let s=0;s<t.length;s++){t[s].call(e)}}if(n){let t=n[r];if(!i(t))for(let s=0;s<t.length;s++){t[s].call(e)}}t--}}})),b}});e.__proxy||Reflect.defineProperty(e,"__proxy",{enumerable:!1,writable:!1,configurable:!1,value:!0});let o=we.get(e)??[];if(Object.isExtensible(e)&&!xe.get(n)){let e=new Set;e.add(r);let t=new WeakMap;t.set(r,o),xe.set(n,{from:r,contextSet:e,pathMap:t})}else{xe.get(n).contextSet.add(r);let e=xe.get(n).pathMap,s=e.get(r),i=a(o);if(s&&s.join("")!==i.join("")){let e=t(r,v(s));_(e)||function(...e){console.warn("[CompElem]",...e)}(`The object is referenced by more than one @state '${i.join(".")},${s.join(".")}'`),s=i}else e.set(r,i)}for(let t in e){const n=e[t];!s(n)||n.__proxy||m(n)||n instanceof Node||Object.isFrozen(n)||(we.set(n,a(o,[t])),e[t]=Me(n,r),we.set(e[t],a(o,[t])))}return n}function Le(e){return class extends e{__updatePoints;renderComponent;buildView(e){let t=this instanceof Ve?this:this.renderComponent,[s,r]=Nt(t,e),n=[],i=Mt(n,s,r,t,this);return this.__updatePoints=n,i}updateView(e){if(b(C(e.strings)))return;if(!this.__updatePoints)return;let{vars:r}=e,n=this instanceof Ve?this:this.renderComponent;for(let e=0;e<this.__updatePoints.length;e++){const i=this.__updatePoints[e];let o=i.varIndex,a=i.value,l=r,d=i.node,c=y(o,"-");for(let s=0;s<c.length;s++){const r=c[s];l=t(l,r),l&&l.vars&&e<c.length-1&&(l=l.vars)}if(!s(a)&&a===l)continue;let h=d;if(i.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(i.isToggleProp){if(!!l===a)continue;h.toggleAttribute(i.attrName,!!l),E(h,i.attrName,!!l)}else if(i.isProp){if(!s(l)&&l===a)continue;let e=N(i.attrName),r=t(i.node.constructor,"__deco_props");if(r){let t=r[e];if(t&&t.hasChanged&&!t.hasChanged.call(this,l,a))continue}d instanceof Ve?d._updateProps({[i.attrName]:l}):d instanceof HTMLSlotElement&&n._updateSlot(d.getAttribute("name")||"default",i.attrName,l)}else if(i.attrName&&!i.isEvent){if(!P(a,l))switch(i.attrName){case"value":if(d instanceof HTMLInputElement){d.value=l;break}default:d.setAttribute(i.attrName,T(i.attrTmpl,At,l+""))}}else if(i.isTmpl)(l.strings.join()!==a.tmpl.strings.join()||l.vars.some((e=>s(e)&&!S(e)))||a.tmpl.vars.some((e=>s(e)&&!S(e)))||!P(l.vars,a.tmpl.vars))&&i.value.updateView(l),a.tmpl=l,l=a;else if(i.isText){let e=i.textNode.nextSibling;e&&e===i.node.previousSibling?e.textContent=l:(Lt.remove(i.textNode,i.node),Lt.insertBefore(i.node,[l]))}i.value=l}}}}class Oe extends(Le(Object)){tmpl;constructor(e){super(),this._renderVars=t(e,"_renderVars"),this.tmpl=e}}const Re={boolean:Boolean,string:String,number:Number,object:Object,array:Array,function:Function,bigint:BigInt,symbol:Symbol,undefined:Object},De=new WeakMap;class Ve extends(Le(HTMLElement)){static __l_globalRule=document.createElement("style");static{document.head.appendChild(Ve.__l_globalRule)}#e={};#t={"#slots":{}};#s={};#r;#n={};#i;#o;#a={};__events={};get[Symbol.toStringTag](){return this.constructor.name}get reactiveData(){return this.#s}get attrs(){return this.#l}get props(){return this.#d}get renderRoot(){return this.#c}get renderRoots(){return this.#h}get parentComponent(){return this.#u}get slotHooks(){return this.#p}get css(){return De.get(this.constructor)}get isMounted(){return this.#f}get slots(){return this.#t["#slots"]}#l;#d;#c;#h;#u;#g={};#p={};#m={};#f=!1;#_;static get autoSlot(){return!0}static get styles(){return[]}static get globalStyles(){return[]}get styles(){return[]}#v=!1;constructor(...e){super(),1===x(e)&&(this.#d={},w(this.#d,k(e)));let s=this.render.bind(this);this.render=function(){let e;return Se.startRender(this),e=s(),Se.endRender(this),e};const r=Promise.resolve(),n=this.#b.bind(this);this.#_=()=>{r.then(n)};let o=t(this.constructor,"globalStyles"),a=t(this.constructor,"_global_style_attached");if(!i(o)&&"1"!==a){let e="";o.forEach((t=>{A(t)&&(e+=t+"\n")})),Ve.__l_globalRule.textContent+=e,E(this.constructor,"_global_style_attached","1")}let l=De.get(this.constructor),d=l??[];l||(h(t(this.constructor,"styles"),(e=>{if(A(e)){let t=new CSSStyleSheet;t.replaceSync(e),d.push(t)}else d.push(e)})),De.set(this.constructor,d)),this.#i=this.attachShadow({mode:"open",slotAssignment:t(this.constructor,"autoSlot",!0)?"named":"manual"}),this.#i.adoptedStyleSheets=d;let c=this.attributes.getNamedItem("css-link")?.value;if(c){const e=document.createElement("style");e.textContent=`@import "${c}"`,this.#i.appendChild(e)}let u=M(this.#C,20);this.#o=new MutationObserver((e=>{for(let t=0;t<e.length;t++){"childList"===e[t].type&&u.call(this)}})),this._slotsPropMap={default:[]};let p=t(this.constructor,me);p&&p.sort(((e,t)=>t.priority-e.priority)).forEach((e=>e.create(this))),this.#y=M(this.#E,50)}#y;connectedCallback(){let e=L(this.parentNode,(e=>e instanceof Ve||e.host instanceof Ve),"parentNode");this.#u=e?e instanceof Ve?e:e.host:null,this.__init()}disconnectedCallback(){this.#o.disconnect()}__init(){if(this.#v)return;this.#N();const e=this.#P();this.propsReady(e);for(const t in e){const s=e[t];this.#t[t]=s}this.#T(),h(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=Me(this.#t,this);let s=this.render(),r=this.buildView(s);if(r){let e=p(r);e.forEach((e=>{this.#i.appendChild(e)})),this.#h=e,this.#c=e[0]}this.#C(),this.beforeMount();const n=this;let i=t(this.constructor,me);i&&i.sort(((e,t)=>t.priority-e.priority)).forEach((e=>{e.beforeMount(this,((e,t)=>(n.#s[e]=t,n.#s[e])))}));let o=t(this.constructor,"__deco_computed");h(o,(({key:e,getter:t},s)=>{Se.startCompute(this),Se.setComputedProp((()=>{this.#s[s]=t.call(this)})),this.#t[s]=t.call(this),Se.endCompute()})),h(o,((e,t)=>{Reflect.defineProperty(this,t,{get(){return Reflect.get(this.#s,t)},set(e){ce(this.tagName,"Cannot set a computed property '"+t+"'")}})})),this.#o.observe(this,{childList:!0});let a=t(this.constructor,"__deco_events");a&&a.forEach((e=>{let t=e.name,s=w({target:document,once:!1,passive:!1,capture:!1},e.options),r=O(e.fn,this),n=s.target;m(n)&&(n=n.call(this,this)),n?n.addEventListener(t,r,s):ce(this.tagName,"The target of @event('"+t+"',...) is invalid")})),h(this.#p,((e,t)=>{this.#S(t)})),Se.startCss(this);let l=[];this.styles.forEach((e=>{if(!m(e))return;let t=new CSSStyleSheet;l.push(t),Se.setCssUpdater((()=>{let s=e()??"";t.replaceSync(s)}));let s=e();b(s)||t.replaceSync(s)})),Se.endCss(),this.#i.adoptedStyleSheets=[...this.#i.adoptedStyleSheets,...l],setTimeout((()=>{this.#f=!0,this.mounted(),i&&i.forEach((e=>{e.mounted(this,((e,t)=>(n.#s[e]=t,n.#s[e])))}))}),0),this.#v=!0}propsReady(e){}render(){throw Error(`[CompElem <${this.tagName}>] Missing render()`)}beforeMount(){}mounted(){}#x(e,s){this.#N();let r=t(this.#e[s],"props");r&&h(this.slots,((e,s)=>{e.filter((e=>e.nodeType===Node.ELEMENT_NODE)).forEach((e=>{e instanceof Ve?e._updateProps(r):h(r,((s,r)=>{if(e instanceof HTMLSlotElement){let n=t(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.#x(e,t)}}else e.setAttribute(r,s)}))}))})),this.slotChange(e,s)}slotChange(e,t){}attributeChangedCallback(e,t,s){this.#w(e,t,s)}shouldUpdate(e){return!0}updated(e){}emit(e,s={},r){r&&r.event&&(s.event=r.event),s.target=this,this.dispatchEvent(new CustomEvent(e,{bubbles:t(r,"bubbles",!1),composed:t(r,"composed",!1),cancelable:!0,detail:s}))}#k={};on(e,t){this.#k[e]||(this.#k[e]=[]);let s=t.bind(this);this.#k[e].push(s),this.addEventListener(e,s)}#A=[];#M=!1;#b(){this.#M=!1,this.#A.forEach((e=>e())),this.#A=[]}nextTick(e){this.#A.push(e),this.#M||(this.#M=!0,this.#_())}forceUpdate(){h(this.#s,((e,t)=>{this.#n[t]={value:void 0,chain:void 0}})),this.#E()}_notify(e,r){let n=[];for(let i=0;i<r.length;i++){const o=r[i];n.push(o);let a=t(this,n),l=he(n);this.#n[l]={value:a,chain:"slots"===l?["slots"]:n,oldValue:e,end:n.length===r.length},s(a)&&"#"!=l[0]&&ae.set(a,l)}this.#y()}#E(){if(x(this.#n)<1)return;const e=this.#n;this.#n={};let r=t(this.constructor,me);if(r&&r.sort(((e,t)=>t.priority-e.priority)).forEach((t=>{t.updated(this,e)})),!this.shouldUpdate(e))return;let n=new Set;h(e,(({value:e,chain:t,oldValue:s},r)=>{this.#a[r]&&this.#a[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.#L.forEach((e=>{this.#S(e)})),this.updated(e),h(e,(({value:e,chain:t,oldValue:r},n)=>{s(e)&&ae.has(e)&&ae.delete(e)}))}#P(){let e=t(this.constructor,"__deco_props"),i=this.attributes,a=this.tagName,l=this.#d,d={};h(i,(({name:t,value:s})=>{if(t[0]===ft||t[0]===gt||t[0]===mt||t===bt||"slot"===t)return;let r=N(t);e&&!e[r]&&(d[t]=s)})),this.#l=this.#l?w(this.#l,d):d;let c={};return h(e,((d,h)=>{let p,f=e[h],g=o(l,h),m=t(this,h);if(!("_defaultValue"in f)&&(f._defaultValue=m,!f.type)){n(m)&&ce(a,"Prop '"+h+"' has neither propType nor defaultValue be used for type inference");let e=typeof m;_(m)&&(e="array");let t=Re[e];f.type=t}if(g)p=R(l[h])?m:l[h];else{p=m;let e=i.getNamedItem(u(h))||i.getNamedItem(gt+u(h));e&&(g=!0,p=e.value)}if(f.required&&!g)return ce(a,"Prop '"+h+"' is required"),!1;p=this.#O(e,h,p);let v=t(e,[h,"getter"]);v&&(v=O(v,this));let b=t(e,[h,"setter"]);b&&(b=O(b,this)),(v||b)&&Reflect.defineProperty(this.#t,h,{set:b||function(e){},get:v}),f.attribute&&r(p)&&!s(p)&&this.setAttribute(u(h),D(p)),this.#t[h]=p,c[h]=p})),Object.seal(c)}#O(e,t,s){let i=e[t];if(!i)return s;let o=i.isValid,a=i.type,l=_(a)?a:[a],d=i.converter,c=s;if(!V(l,(e=>e===String))&&A(c)&&!I(c))try{c=d?d(c):$(c,{html:Ot})}catch(e){ce(this.tagName,`Convert attribute '${t}' error with `+c)}for(let e=0;e<l.length;e++){"Boolean"===l[e].name&&(A(c)&&/(?:^true$)|(?:^false$)/.test(c)?c=$(c):(n(c)||b(c))&&(c=!0))}let h=typeof c,u=!r(c);for(let e=0;e<l.length;e++){const t=l[e];if(H(h,t.name,"i")||c instanceof t||Object.prototype.toString.call(c)===Object.prototype.toString.call(t.prototype)){u=!0;break}}return u||ce(this.tagName,`Invalid prop '${t}'. expected '${l.map((e=>e.name||e))}' but got '${h}'`),o&&(o.call(this,c,this.#t)||ce(this.tagName,`Invalid prop '${t}'. IsValid() check failed`)),c}#T(){let e=t(this.constructor,"__deco_states");h(e,((s,r)=>{let n=e[r],i=t(this,r);if(n){let e=n.prop;i=e?c(this.#t[e]):t(this,r)}this.#t[r]=i}))}#R=M(this.propsReady,100);_setParentProps(e,s){if(this.#v){let r=t(this.constructor,"__deco_props");h(e,((e,t)=>{let s=N(t),n=r[s];if(!n)return;let i=this.#t[s];e=this.#O(r,s,e),n.hasChanged&&!n.hasChanged.call(this,e,i)||(this.#t[s]=e,this._notify(i,[s]))})),w(this.#d,e),w(this.#l,s),this.#R(this.#d)}}_updateProps(e){let s=t(this.constructor,"__deco_props");h(e,((e,t)=>{let r=N(t),n=s[r];if(!n)return;let i=this.#t[r];e=this.#O(s,r,e),n.hasChanged&&!n.hasChanged.call(this,e,i)||(Se.__skipCheck=!0,E(this,r,e),Se.__skipCheck=!1)})),w(this.#d,e),this.#R(this.#d)}_initProps(e,t){this.#d=d(this.#d||{},e),this.#l=d({},t)}_bindSlot(e,t,s){if(this.#g[t]||(this.#g[t]=e,Reflect.defineProperty(e,"__l_comp",{value:this})),e.addEventListener("slotchange",(s=>{this.#v&&this.#x(e,"default"===t?"":t)})),!i(s)){let e=this.#e[t];e||(e=this.#e[t]={}),s.nodeFilter&&(e.filter=s.nodeFilter),e.props=j(s,"nodeFilter")}}_bindSlotHook(e,t){this.#p[e]=t}#L=new Set;_updateSlot(e,t,s){let r=this.#g[e],n=this.#p[e];if(!n&&!r)return;let i=this.#e[e];if(t&&(i.props||(i.props={}),i.props[t]=s),n)this.#L.add(e);else{let e=r.assignedElements({flatten:!0});for(let r=0;r<e.length;r++){e[r].setAttribute(t,s+"")}}}#N(){const e=B(this.childNodes,(e=>e.nodeType===Node.COMMENT_NODE?[]:e instanceof HTMLSlotElement?e.assignedNodes({flatten:!0}):e));let t=F(e,(e=>e.nodeType===Node.TEXT_NODE?"default":e instanceof Element?e.getAttribute("slot")||"default":void 0));if(i(t))return void(i(this.#t["#slots"])||(this.#v?this.#s["#slots"]={}:this.#t["#slots"]={}));h(t,((e,t)=>{if(t){for(;e.length>0;){let t=e[0];if(!(t.nodeType===Node.TEXT_NODE&&b(t.textContent)||t instanceof HTMLSlotElement&&i(t.assignedNodes({flatten:!0}))))break;e.shift()}for(;e.length>0;){let t=f(e);if(!(t.nodeType===Node.TEXT_NODE&&b(t.textContent)||t instanceof HTMLSlotElement&&i(t.assignedNodes({flatten:!0}))))break;e.pop()}}}));let s={};h(t,((e,t)=>{i(e)||(s[t]=e)})),this.#v?this.#s["#slots"]=s:this.#t["#slots"]=s}#S(e){let s=this.#p[e];if(!s)return;let r=this.#e[e];if(!this.#t["#slots"][e])return;this.renderAsync(s,t(r,"props"));const n=this._asyncDirectives.get(s);let o=n?.buildView(s(t(r,"props"))),a=z(p(o),(e=>e.nodeType===Node.COMMENT_NODE));if(a){let t=this.#m[e];if(!i(t))for(let e=0;e<t.length;e++){const s=t[e];s.parentNode?.removeChild(s)}this.#m[e]=a,this.append(...a),this.#L.clear()}}_asyncDirectives=new WeakMap;renderAsync(e,...t){}#C(){i(this.#e)||h(this.slots,((e,t)=>{if(i(e))return;let r=this.#e[t],n=e;if(r){let t=r.filter;if(m(t))n=t(e);else if(s(t)){let s=t.type,r=t.maxCount;if(s){let t=_(s)?s:[s];n=U(e,(e=>V(t,(t=>e instanceof t))))}r>0&&(n=Q(e,0,r))}}if("named"===this.#i.slotAssignment){let t=[];for(let s=0;s<e.length;s++){const r=e[s];n.includes(r)||t.push(r)}for(;t.length>0;){let e=t.pop();e.parentNode?.removeChild(e)}}else this.#g[t].assign(...n);this.#v&&this.#x(this.#g[t],"default"===t?"":t)}))}#w(e,s,r){if(!this.isMounted)return;if(Te(this.constructor).has(e)){let s=N(e);if(I(r)){r=t(this.constructor,"__deco_props")[s]._defaultValue}this._updateProps({[s]:r})}}_regDeps(e,t){let s=this.#a[e];s||(s=this.#a[e]=new Set),s.add(t);let r=e.split("-");if(r.pop(),r.length<1)return;let n=r.join("-");s=this.#a[n],s||(s=this.#a[n]=new Set),s.add(t)}}var Ie,$e,He;!function(e){e.NONE="NONE",e.REMOVE="REMOVE",e.REPLACE="REPLACE",e.UPDATE="UPDATE",e.APPEND="APPEND"}(Ie||(Ie={}));class je{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)}}!function(e){e.ATTR="attr",e.PROP="prop",e.TEXT="text",e.CLASS="class",e.STYLE="style",e.SLOT="slot",e.TAG="tag"}($e||($e={}));class Be{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"}(He||(He={}));class Fe extends Function{diClass;args;di;varPath;point;slotComponent;varChain;constructor(e,...t){super(),this.diClass=e,this.args=t,this.varChain=Se.popDirectiveQ(),this.di=new this.diClass,this.di.renderParams=this.varChain}checkScope(e){let s=t(this.diClass,"scopes");i(s)||H(s.join(","),e)||de(`Directive '${this.diClass.name}' is out of scopes, expect '${s.join(",")}' bug got '${e}'`)}render(e){let t=this.di;return this.args,t.renderComponent||(t.renderComponent=e),this.di=t,t._renderArgs=this.args,this.di.render(...this.args)}update(e,t,s){let r=this.di.update(e,t,s);if(r===Ie.NONE)return;let n=e.getNodes();if(r===Ie.REMOVE)for(let e=0;e<n.length;e++){const t=n[e];t.parentNode?.removeChild(t)}else if(r===Ie.REPLACE){let s=[];for(let e=0;e<n.length;e++){const t=n[e];t.parentNode?.removeChild(t)}let r=this.di.render(...t),i=this.di.buildView(r);s=p(i);let o=document.createDocumentFragment();o.append(...s),e.endNode.parentNode.insertBefore(o,e.endNode)}else if(r===Ie.UPDATE){let s,r={},o=[],a=[],l=this.di.render(...t);if(l||(l=new Vt([],[])),i(n)){let t=this.di.buildView(l);return void e.startNode.after(...t)}let d={};l instanceof Vt&&l.vars.forEach((e=>{if(e instanceof Vt){const t=e.getKey();d[t]=e,r[t]=!0,a.push(t)}})),n=U(W(n),(e=>e.nodeType===Node.ELEMENT_NODE)),s=U(W(p(s)),(e=>e.nodeType===Node.ELEMENT_NODE));let c={},u="",g={};for(let e=0;e<n.length;e++){let t=n[e],s=t.getAttribute("key");if(s){if(c[s]){u=s;break}c[s]=t,o.push(s),g[s]=!0}}if(u)return void de(`${N(this.diClass.name)} - duplicate key '${u}'`);let m=r;const _=e.startNode.parentNode;let b=[],C=[];if(h(g,((e,t)=>{m[t]||(C.push(t),delete g[t],K(o,t))})),!i(a)){let t="",s=-1,r=[],n=new Map;for(let i=0;i<a.length;i++){const l=a[i];let d=o.findIndex((e=>e===l));if(d>-1&&d!==i){if(s<0||s-d==1){let e=f(r);r.push({nodeId:l,targetId:0===i?He.AFTER_BEGIN:e?e.nodeId:a[i-1]})}else n.set(r.length,{group:r,targetId:""}),r=[],r.push({nodeId:l,targetId:o[d]});s=d}else if(d<0){let s=t?c[t]||e.endNode:e.startNode;b.push({prevNode:s,newkey:l})}t=l}i(n)&&r.length>0&&n.set(r.length,{group:r,targetId:""});let l=n.keys().toArray(),d=l.sort(((e,t)=>e-t));if(l.length>0&&l.length<2){let{group:t}=n.get(d[0]);v(t).forEach((({targetId:t,nodeId:s})=>{let r,n=c[s];t===He.AFTER_BEGIN?(r=e.startNode,r.after(n)):(r=c[t],r.after(n))}))}}b.length>0&&this.#D(b,d,a),b.forEach((t=>{let s=t.newkey,r=this.newNodeMap[s],n=t.prevNode;n===e.endNode?n.before(r):(e.startNode,n.after(r))})),C.forEach((e=>{let t=o.findIndex((t=>t==e));this.#V(t);let s=c[e];s&&s.parentNode&&_.removeChild(s)})),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(l)}}getDirective(){return this.di}newNodeMap={};#D(e,t,s){const r=[],n=[];e.forEach((e=>{let s=e.newkey;r.push(""),n.push(t[s])})),r.push("");let i=new Vt(r,n),o=this.di.__updatePoints,a=this.di.buildView(i);this.di.__updatePoints.forEach(((e,t)=>{const s=e.value.tmpl.getKey();e.key=s})),this.di.__updatePoints.push(...o),a.forEach((e=>{e instanceof HTMLElement&&(this.newNodeMap[e.getAttribute("key")]=e)}))}#V(e){K(this.di.__updatePoints,((t,s)=>{if(t.varIndex==e)return Lt.remove(t.node,t.textNode),!0}))}}function ze(e){return(...t)=>{let s=null;return t.forEach(((e,r)=>{if(m(e)){let n=e;t[r]=function(...e){let t=s.di;Se.startRender(t);let r=n.call(t.renderComponent,...e);return Se.endRender(t.renderComponent),r}}})),s=new Fe(e,...t),s}}const Ue=["resize","outside","mutate"],Qe=new WeakMap,We=[],Ke=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=Qe.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}}}))}}}));var Xe;!function(e){e.Child="child",e.Tree="tree",e.Attr="attr",e.Char="char"}(Xe||(Xe={}));const Ge=new WeakMap,qe=new MutationObserver((e=>{for(let t=0;t<e.length;t++){const s=e[t];let r=Ge.get(s.target);if(!r)return;let n={target:s.target},i=null;switch(s.type){case"subtree":n.type=Xe.Tree,i=r[Xe.Tree];break;case"childList":n.type=Xe.Child,n.addedNodes=s.addedNodes,n.removedNodes=s.removedNodes,i=r[Xe.Child];break;case"attributes":n.type=Xe.Attr,n.attributeName=s.attributeName,n.oldValue=s.oldValue,i=r[Xe.Attr];break;case"characterData":n.type=Xe.Char,n.oldValue=s.oldValue,i=r[Xe.Char]}if(i){i(new CustomEvent("mutate",{bubbles:!1,cancelable:!1,detail:n}))}}}));function Ye(e,t,s,r){if("resize"===e)!function(e,t){Qe.has(e)||(Qe.set(e,t),Ke.observe(e))}(t,s);else if("outside"===e){if("mousedown"===r[0])!function(e,t){We.push([e,t])}(t,s)}else"mutate"===e&&function(e,t,s){let r=X(s,"child"),n=X(s,"attr"),i=X(s,"char"),o=X(s,"tree"),a=Ge.get(e);a||(a={},Ge.set(e,a),r&&(a[Xe.Child]=t),n&&(a[Xe.Attr]=t),i&&(a[Xe.Char]=t),o&&(a[Xe.Tree]=t),qe.observe(e,{childList:r,attributes:n,characterData:i,subtree:o}))}(t,s,r)}document.addEventListener("mousedown",(e=>{let t=e.target;We.forEach((([s,r])=>{if(!s.contains(t)){r(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:s,event:e}}))}}))}),!1);const Je=/,|^(debounce:.+)|(debounce$)/,Ze=/,|^(throttle:.+)|(throttle$)/,et="self",tt="stop",st="prevent",rt="once",nt="left",it="right",ot="middle",at="ctrl",lt="alt",dt="shift",ct="meta",ht={esc:"escape"},ut=":";function pt(e,t,s,r){let n,i=e.split("."),o=i.shift(),a=i.includes(rt),l=t;if(n=G(i,(e=>Je.test(e)))){let e=n.split(ut);l=M(l,parseInt(e[1])||100)}if(n=G(i,(e=>Ze.test(e)))){let e=n.split(ut);l=q(l,parseInt(e[1])||100)}if(a&&(l=Y(l)),function(e){return Ue.includes(e)}(o))return Ye(o,s,l,i),l;let d=e=>{if(i.includes(st)&&e.preventDefault(),i.includes(tt)&&e.stopPropagation(),!i.includes(et)||e.target===e.currentTarget){if(e instanceof MouseEvent){if(i.includes(nt)&&0!=e.button)return;if(i.includes(it)&&2!=e.button)return;if(i.includes(ot)&&1!=e.button)return}else if(e instanceof KeyboardEvent){if(K(i,(e=>e==at))[0]&&!e.ctrlKey)return;if(K(i,(e=>e==lt))[0]&&!e.altKey)return;if(K(i,(e=>e==dt))[0]&&!e.shiftKey)return;if(K(i,(e=>e==ct))[0]&&!e.metaKey)return;if(!J(i,(e=>ht[e]||e)).includes(e.key.toLowerCase()))return}l(e)}};s.addEventListener(o,d);let c=r.__events[o];return c||(c=r.__events[o]=[]),c.push([s,d]),d}const ft="@",gt=".",mt="?",_t="*",vt=":",bt="ref",Ct=/[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--c_ui-pl_df-->){2,}.*?\1/ims,yt=/<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/gims,Et="slot-props";function Nt(e,s){let r="",n=a(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(s.vars,n,"");if(a&&a.di){let t=a.render(e);if(t instanceof Vt){let[s,r]=Nt(e,t);Reflect.defineProperty(a,"_renderVars",{value:r}),a=Pt+s+Tt}else a=t??wt}else if(a instanceof Vt){let[t,s]=Nt(e,a);Reflect.defineProperty(a,"_renderVars",{value:s}),a=St+t+xt}else a=n>o?"":wt;r+=i+a}let l=r.match(Ct);if(l){return de(`Parse error: attribute value can be set only one interpolation —— \n ${Z(l[0],wt,"${...}")}`),["",n]}let d=0;return r=r.replace(yt,((e,t)=>Z(e,wt,(()=>wt.replace("--\x3e","")+d++)))),r=r.replace(Rt,"$1><").trim(),[r,n]}const Pt="\x3c!--c_ui-pl_di-start--\x3e",Tt="\x3c!--c_ui-pl_di-end--\x3e",St="\x3c!--c_ui-pl_tmpl-start--\x3e",xt="\x3c!--c_ui-pl_tmpl-end--\x3e",wt="\x3c!--c_ui-pl_df--\x3e",kt="\x3c!--c_ui-pl_df",At=/<!--c_ui-pl_df\d*(-->)?/;function Mt(e,s,r,i,a){const l=document.createElement("div");l.innerHTML=s;const d=document.createNodeIterator(l,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let c,h,_=0,v=null,b=[],C=[],y=[],E=[e],P=[],S=[];for(;c=d.nextNode();)if(c instanceof HTMLElement||c instanceof SVGElement){c instanceof Ve?v=c:v?.contains(c)||(v=null);let t={},s=p(c.attributes);for(let n=0;n<s.length;n++){const a=s[n];let{name:l,value:d}=a;if(l===Et){let e=c.getAttribute("name")||"default";if(v){let t=v._slotsPropMap[e];t||(t=v._slotsPropMap[e]=[]),t.push(c)}}if(g(l,kt)){let t=r[_];if(t instanceof Fe){t.checkScope($e.TAG);let s=new Be(c,l.substring(1),$e.TAG);t.point=s,t.di.slotComponent=v,t.di.renderComponent=i;let r=new je(_,c);r.isDirective=!0,r.value=t,r.isComponent=!!v,e.push(r),_++,t.di.created(s,...t.args)}c.removeAttribute(l)}else if(l[0]!==ft)if(l!==bt)if(l[0]!==gt||At.test(d)){if(At.test(d)){let s=r[_],n=new je(_,c,l.replace(/\.|\?|@/,""),d);if(e.push(n),n.isComponent=!!v,l[0]===gt||l[0]===mt||l[0]===_t){if(s instanceof Fe){s.checkScope($e.PROP);let e=new Be(c,l.substring(1),$e.PROP);s.point=e,s.slotComponent=v,n.value=s,n.isDirective=!0,s&&s.di.created(s.point,...s.args)}else if(l[0]===mt)n.isToggleProp=!0,n.value=!!s,n.value&&c.setAttribute(l.substring(1),"");else if(l[0]===_t){n.value=s;let e=l.substring(1);const[t,r]=e.split(vt);let i=t;switch(r){case"camel":i=N(i);break;case"kebab":i=u(i);break;case"snake":i=ee(i)}n.attrName=i,c.setAttribute(i,s)}else if(c instanceof Ve||"SLOT"===c.tagName){let e=N(l.substring(1));e in c||"SLOT"===c.tagName||ce(c.tagName,`Prop '${l}' is not defined in ${c.tagName}`),n.value=s,n.isProp=!0,t[e]=s}else ce(c.tagName,`Prop '${l}' can only be set on a CompElem or a slot`);c.removeAttribute(l),s=""}else{let e;if(n.value=s,s instanceof Fe){let t=$e.ATTR;"class"===l?t=$e.CLASS:"style"===l&&(t=$e.STYLE),s.checkScope(t),n.isDirective=!0;let r=new Be(c,l,t);s.point=r,s.di.slotComponent=v,s.di.renderComponent=i,e=s,s=""}d=T(d,At,s),a.value=d,e&&e.di.created(e.point,...e.args)}_++}}else ce(c.tagName,`Prop '${l}' must be an interpolation`);else{if(At.test(d)){let e=r[_];if(!o(e,"current")){ce(c.tagName,"Ref must be a RefObject");continue}_++,e.current=c}c.removeAttribute(l)}else{let t=e=>{};if(At.test(d)){let s=r[_];if(!m(s)){ce(c.tagName,`Event '${l}' must be a function`);continue}t=s.bind(i);let n=new je(_,c,l.replace(/\.|\?|@/,""),d);n.isComponent=!!v,n.isEvent=!0,e.push(n),_++}t=pt(l.substring(1),t,c,i),c.removeAttribute(l)}}c instanceof Ve?c._initProps(t):c instanceof HTMLSlotElement&&i._bindSlot(c,c.name||"default",t)}else{let s=c,o=`\x3c!--${s.nodeValue}--\x3e`;if(o===Pt){h&&b.push(h),h=s;let t=r[_],n=new je(_,c);n.isComponent=!!v,n.isDirective=!0,n.value=t;let o=v?$e.SLOT:$e.TEXT,a=new Be(h,"",o);t.point=a,t.di.slotComponent=v,t.di.renderComponent=i,C.push(t),e.push(n),y.push(n),e=[],E.push(e),_++,S.push(_),P.push(r),r=t._renderVars,_=0;continue}if(o===Tt){y.pop().textNode=s;let t=C.pop();t.point.endNode=s,t.di.created(t.point,...t.args),h=b.pop(),t.di.__updatePoints=e,E.pop(),e=f(E),r=P.pop(),_=S.pop()}else{if(o===St){h&&b.push(h),h=s;let n=r[_],o=new je(_,c);o.isComponent=!!v,o.isTmpl=!0;let l=f(C);(l&&"ForEach"===t(l,"diClass.name")||"ForEach"==a.constructor.name)&&(o.key=n.getKey()),n=o.value=new Oe(n);let d=v?$e.SLOT:$e.TEXT,u=new Be(h,"",d);n.point=u,n.slotComponent=v,n.renderComponent=i,C.push(n),e.push(o),y.push(o),e=[],E.push(e),_++,S.push(_),P.push(r),r=n._renderVars,_=0;continue}if(o===xt){y.pop().textNode=s;let t=C.pop();t.point.endNode=s,h=b.pop(),t.__updatePoints=e,E.pop(),e=f(E),r=P.pop(),_=S.pop()}}if(o!==wt)continue;let l=new je(_,c);e.push(l),l.isComponent=!!v,l.isText=!0;let d,u=r[_];if(d=document.createComment(`compelem-ui-${_}-child-start`),s.parentNode.insertBefore(d,s),s.nodeValue=`compelem-ui-${_}-child-end`,l.textNode=d,u instanceof Fe){l.isDirective=!0,l.value=u;let e=v?$e.SLOT:$e.TEXT,t=new Be(d,"",e);t.endNode=s,u.point=t,u.di.slotComponent=v,u.di.renderComponent=i,u.di.created(t,...u.args),u=""}else if(u instanceof Vt){l.isTmpl=!0,l.value=u;let[t,s]=Nt(i,u);u=Mt(e,t,s,i,a)}else l.value=u;if(_++,n(u))continue;if(u instanceof NodeList){let e=document.createDocumentFragment();e.append(...u),s.parentNode.insertBefore(e,s)}else if(u instanceof Element)s.parentNode.insertBefore(u,s);else if(D(u)){let e=document.createTextNode(u);s.parentNode.insertBefore(e,s)}}return l.childNodes}const Lt={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 Ot(e,...t){return new Vt(A(e)?[e]:e,t)}const Rt=/([a-z0-9"'])\s*>\s*</gim;function Dt(e){return{current:e}}class Vt{strings;vars;constructor(e,t){this.strings=a(e),this.vars=t}getKey(){let e=this.vars,t="";return h(this.strings,((s,r)=>{if(le.test(s))return t=te(e[r]),!1})),t}getKeys(){let e=this.vars,t=[];for(let s=0;s<this.strings.length;s++){const r=this.strings[s];if(le.test(r)){let r=te(e[s]);t.push(r)}}return i(t)&&e.forEach((e=>{if(e instanceof Vt){let s=e.getKey();t.push(s)}})),t}append(e){let t=f(this.strings);return e.strings.forEach(((e,s)=>{0!=s?this.strings.push(e):this.strings[this.strings.length-1]=t+e})),this.vars=a(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[t,s]=Nt(e,this),r=Mt([],t,s,e,e);return se(r,((e,t)=>e+t.outerHTML),"")}}function It(e,t,s){s.get||de(`Prop '${t}' must be a getter`),o(e.constructor,"__deco_computed")||(e.constructor.__deco_computed=i(e.constructor.__deco_computed)?{}:c(e.constructor.__deco_computed)),e.constructor.__deco_computed[t]={key:t,getter:s.get}}function $t(e,t){return(s,r,n)=>{o(s.constructor,"__deco_events")||(s.constructor.__deco_events=i(s.constructor.__deco_events)?[]:c(s.constructor.__deco_events)),s.constructor.__deco_events.push({name:e,options:t,fn:s[r]})}}var Ht;!function(e){e.ONCE="once",e.UPDATABLE="updatable"}(Ht||(Ht={}));class jt extends fe{static get priority(){return Number.MAX_VALUE}created(e,t,s,...r){}mounted(e,t,...s){}get targets(){return[pe.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(e,t){this.cache===Ht.UPDATABLE&&this.getter(e)}}const Bt=Ce(jt),Ft=Ce(class extends jt{getter(e){this.result=e.shadowRoot?.querySelectorAll(this.selector)}});function zt(e){if(1===arguments.length)return(t,s)=>{Ut(t,s,e)};Ut(arguments[0],arguments[1],{prop:""})}function Ut(e,t,s){if(!o(e.constructor,"__deco_states")){const t={};let s=e.constructor;for(;(s=ue(s))!==Ve;)d(t,s.__deco_states?c(s.__deco_states):{});Reflect.defineProperty(e.constructor,"__deco_states",{configurable:!1,enumerable:!1,value:t})}e.constructor.__deco_states[t]=s}function Qt(e,t,s){Ut(e.prototype,t,s||{prop:""})}function Wt(e){return t=>{if(t){if(t.prototype.hasOwnProperty("attributeChangedCallback")){let e=t.prototype.attributeChangedCallback;t.prototype.attributeChangedCallback=function(t,s,r){Ve.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(){Ve.prototype.connectedCallback.call(this),e.call(this)}}if(t.prototype.hasOwnProperty("disconnectedCallback")){let e=t.prototype.connectedCallback;t.prototype.disconnectedCallback=function(){Ve.prototype.disconnectedCallback.call(this),e.call(this)}}customElements.define(e,t)}}}const Kt=Ce(class extends fe{created(e,s,r,...n){this.handler||(this.handler=m(r)?r:e[r]),t(this.options,"once",!1)&&(this.handler=Y(this.handler.bind(e)))}beforeMount(e,s,r,n,...i){let o=this.handler,a=t(this.options,"immediate",!1);this.sources.forEach((s=>{let r=t(e,s.replaceAll("-","."));a&&o.call(e,t(e,s),r,s)}))}get targets(){return[pe.METHOD]}sources;options;handler;constructor(e,t,s){super(),this.sources=_(e)?e:[e],this.options=t,this.handler=s}static getKey(e){return _(e)?e.sort().join(""):e}mounted(e,s,r,n,...i){let o=this.handler,a=t(this.options,"immediate",!1);this.sources.forEach((s=>{let r=t(e,s.replaceAll("-","."));a||o.call(e,t(e,s),r,s)}))}updated(e,s){this.sources.forEach((r=>{h(s,(({value:s,chain:n,oldValue:i,end:o},a)=>{let l=r.replaceAll(".","-");if(!g(a,l))return;a===l&&o&&this.handler&&this.handler.call(e,s,i,a);let d=n.length-1;for(;d;){let s=n.slice(0,d);if(o&&s.join("-")===l&&t(this.options,"deep")){let r=t(e,s);this.handler.call(e,r,r,s.join("-"))}d--}}))}))}});class Xt extends(Le(Object)){_renderArgs;static get scopes(){return[]}renderParams}const Gt=["key"];const qt=ze(class extends Xt{created(e,t){let s=e.startNode;if(s instanceof Ve){let e={},r={};h(t,((t,n)=>{Gt.includes(n)||(n in s?e[n]=t:r[n]=t+"")})),s._initProps(e,r)}else h(t,((e,t)=>{s.setAttribute(t,e)}))}update(e,t,s){return Ie.NONE}static get scopes(){return[$e.TAG]}render(e){}});const Yt=ze(class extends Xt{created(e,t){let r=[];_(t)?r=W(t):s(t)?r=B(t,((e,t)=>e?t:[])):A(t)&&(r=t.split(" "));let n=e.startNode;h(this.lastCls,(e=>{n.classList.remove(e)})),h(r,(e=>{n.classList.add(e)})),this.lastCls=a(r)}update(e,t,s){return this.created(e,t[0]),Ie.NONE}static get scopes(){return[$e.CLASS]}lastCls;render(e){}});const Jt=ze(class extends Xt{created(e,...t){}update(e,t,s){if(i(e.getNodes())&&(!t||i(t[0])))return Ie.NONE;if(re(this.lastAry,t[0])&&this.lastAry.length===t[0].length)return Ie.NONE;if(!i(this.renderParams)){let e=f(this.renderParams);_(e)||(e=[e]),this.renderParams=e}return this.lastAry=ne(t[0]),Ie.UPDATE}constructor(e){super(),i(this.renderParams)||(this.renderParams=p(f(this.renderParams)))}static get scopes(){return[$e.TEXT,$e.SLOT]}lastAry;lastRenderTmpl;render(e,t){let s=J(e,((e,s)=>t(e,s)));if(s.length<1)return this.lastRenderTmpl=new Vt([],[]),this.lastRenderTmpl;let r=[],n=[];const i=[],o=[];for(let e=0;e<s.length;e++){const t=s[e];let a=f(n),l=t.vars,d=!0,c=t.strings;for(let e=0;e<c.length;e++){const t=c[e];if(le.test(t)){let t=l[e]+"";if(r.includes(t))return void de(`forEach - duplicate key '${t}'`);r.push(t),d=!1}0==e&&a?n[n.length-1]=a+t:n.push(t)}if(d)return void de("forEach - missing 'key' prop");let h=f(i);h&&c.length>0&&(i[i.length-1]=D(h)+c.shift()),i.push(""),o.push(t)}return this.lastAry=ne(e),i.push(""),this.lastRenderTmpl=new Vt(i,o),this.lastRenderTmpl}});const Zt=ze(class extends Xt{created(e,...t){}ifNodes;elseNodes;static get scopes(){return[$e.TEXT,$e.SLOT]}update(e,t,s){return!!t[0]==!!s[0]?Ie.NONE:(t[0],Ie.REPLACE)}render(e,t,s){return e?t(e):s(e)}});const es=ze(class extends Xt{created(e,...t){}static get scopes(){return[$e.TEXT,$e.SLOT]}update(e,t,s){return t[0]===s[0]?Ie.NONE:t[0]?Ie.REPLACE:Ie.REMOVE}render(e,t){return e?t():Ot``}});var ts;!function(e){e.CHANGE="change",e.INPUT="input"}(ts||(ts={}));const ss=ze(class extends Xt{created(r,n,i){this.modelPath||(this.modelPath=f(this.renderParams)),i&&(this.modelPath=e(i));const o=r.startNode;if("binded"!==t(o,"_model"))if(s(n)||D(n)||(n=""),o instanceof Ve)o._initProps({value:n}),o.addEventListener("update:value",(e=>{E(this.renderComponent,this.modelPath,e.detail.value)})),E(o,"_model","binded");else if(o instanceof HTMLTextAreaElement)o.setAttribute("value",n+""),o.addEventListener("input",(e=>{let t=e.target;E(this.renderComponent,this.modelPath,t.value)})),E(o,"_model","binded");else if(o instanceof HTMLInputElement){let e="",t="";switch(o.type){case"checkbox":case"radio":e="checked",t="change";break;default:e="value",t="input"}o.setAttribute(e,n+""),o.addEventListener(t,(e=>{let t=e.target;E(this.renderComponent,this.modelPath,t.value)})),E(o,"_model","binded")}else o instanceof HTMLSelectElement&&(o.setAttribute("value",n+""),o.addEventListener("change",(e=>{let t=e.target;E(this.renderComponent,this.modelPath,t.value)})),E(o,"_model","binded"))}update(e,t,s){if(this.modelPath||(this.modelPath=f(this.renderParams)),!P(t,s)){const s=e.startNode;if(s instanceof Ve)s._updateProps({value:t[0]});else if(s instanceof HTMLTextAreaElement||s instanceof HTMLSelectElement)s.setAttribute("value",t[0]+"");else if(s instanceof HTMLInputElement)switch(s.type){case"checkbox":case"radio":t[0]?s.setAttribute("checked",""):s.removeAttribute("checked");break;default:s.setAttribute("value",t[0]+"")}}return Ie.NONE}static get scopes(){return[$e.TAG]}modelPath;render(e,t){}});const rs=ze(class extends Xt{created(e,t){let s=e.startNode;n(this.display)&&(this.display=s.style.display),this.renderComponent.nextTick((()=>{s.style.display=t?this.display:"none"}))}update(e,t,s){return this.created(e,t[0]),Ie.NONE}display=void 0;static get scopes(){return[$e.TAG]}constructor(e){super(),this.point=e}render(e){}});const ns=ze(class extends Xt{created(e,t,s){t=t.bind(this.renderComponent),this.slotComponent._bindSlotHook(s||"default",t)}update(e,t,s){return Ie.NONE}static get scopes(){return[$e.SLOT]}render(e,t){}});class is{static getCssText(e){return A(e)?e:C(J(e,((e,t)=>u(t)+":"+e)),";")}static setStyle(e,t){if(A(e)&&!D(e))return{};let s=is.getCssText(e),r={};return h(s.split(";"),(e=>{let s=e.split(":"),n=D(s[0]),i=D(s[1]);r[n]=t.style.getPropertyValue(n),t.style.setProperty(n,i)})),r}}const os=ze(class extends Xt{created(e,t){is.setStyle(t,e.startNode)}update(e,t,s){return this.created(e,t[0]),Ie.NONE}constructor(e){super(),this.point=e}static get scopes(){return[$e.STYLE]}render(e){}});const as=ze(class extends Xt{created(e,t){this.modelPath||(this.modelPath=f(this.renderParams));const s=e.startNode;let r=e.attrName;s._initProps({[r]:t}),s.addEventListener("update:"+r,(e=>{E(this.renderComponent,this.modelPath,e.detail.value)}))}update(e,t,s){if(!P(t,s)){const s=e.startNode;let r=e.attrName;s._updateProps({[r]:t[0]})}return Ie.NONE}static get scopes(){return[$e.PROP]}modelPath;constructor(e){super()}render(e){}});const ls=ze(class extends Xt{created(e,...t){}static get scopes(){return[$e.TEXT,$e.SLOT]}update(e,t,s){return P(t,s)?Ie.NONE:Ie.REPLACE}render(e,t){let s=()=>Ot``,r=[],n=[];h(t,((e,t)=>{if(m(e))r.push(t),n.push(e);else{let t=e[0],s=e[1];r.push(t),n.push(s)}"default"===t&&(s=e)}));let i=ie(r,(t=>m(t)?t(e):t==e));return oe(n[i]??s)}});export{Ve as CompElem,is as CssHelper,fe as Decorator,pe as DecoratorType,ve as DecoratorWrapper,Xt as Directive,Ie as DirectiveUpdateTag,Fe as DirectiveWrapper,Be as EnterPoint,$e as EnterPointType,ge as GetKeyFnName,ts as ModelTriggerType,Ht as QueryCache,Vt as Template,je as UpdatePoint,_e as _DecoratorMap,me as _DecoratorsKey,Te as _getObservedAttrs,qt as bind,Nt as buildHTML,Yt as classes,It as computed,Dt as createRef,Ce as decorator,ze as directive,$t as event,Jt as forEach,Ot as html,Zt as ifElse,es as ifTrue,Qt as makeState,ss as model,Ee as prop,Bt as query,Ft as queryAll,rs as show,ns as slot,zt as state,os as styles,as as sync,Wt as tag,Kt as watch,ls as when};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "compelem",
-  "version": "0.2.3-beta",
+  "version": "0.2.6-beta",
   "description": "A modern, reactive, fast, lightweight and flexible lib for building web components",
   "main": "index.js",
   "module": "index.js",
@@ -35,7 +35,7 @@
     "bootstrap-icons": "^1.11.3",
     "eslint": "8.23.1",
     "eslint-config-prettier": "^8.5.0",
-    "myfx": "^1.4.14",
+    "myfx": "^1.7.0",
     "postcss": "^8.4.38",
     "prettier": "^2.8.3",
     "rollup-plugin-banner2": "1.2.2",

package/reactive.d.ts

@@ -3,7 +3,7 @@
  * @author holyhigh2
  */
 import { CompElem } from "./CompElem";
-import { IRenderContext } from "./render/RenderContext";
+import { IView } from "./render/RenderContext";
 import { Getter } from "./types";
 export declare const Collector: {
     startCss(comp: CompElem): void;
@@ -19,7 +19,7 @@ export declare const Collector: {
     __directiveQ: any[][];
     setDirectiveQ(val: any[]): void;
     popDirectiveQ(): any[];
-    startRender(context: IRenderContext): void;
+    startRender(context: IView): void;
     endRender(component: CompElem): void;
     collect(prop: string): void;
     clear(): void;

package/render/RenderContext.d.ts

@@ -1,37 +1,52 @@
-import { Directive } from "../directive/Directive";
 import { CompElem } from "../CompElem";
-import { ExpPos } from "../types";
-import { Template } from "./render";
-export interface IRenderContext {
-    render(...args: any): Template | Template[] | void | ((...args: any[]) => (Template | Template[]));
-    slotComponent: CompElem;
-    renderComponent: CompElem;
-    renderContext(...args: any): [NodeListOf<ChildNode>, Record<string, ExpPos>, Record<string, typeof this.__expPos | null>];
-    updateContext(...args: any): void;
+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>;
 }
 /**
- * 为组件/指令提供渲染接口
- * @author holyhigh2
+ * 视图基类 为组件视图及指令子视图提供统一服务
+ * @param spuerClass
+ * @returns
  */
-export declare function RenderContext<T extends new (...args: any[]) => any>(spuerClass: T): {
+export declare function View<T extends new (...args: any[]) => any>(spuerClass: T): {
     new (...args: any[]): {
         [x: string]: any;
+        __updatePoints: Array<UpdatePoint>;
         /**
-       * 渲染实现
-       */
-        render(...args: any): Template | Template[] | void | ((...args: any[]) => (Template | Template[]));
-        __expPos: Record<string, ExpPos>;
-        __expPosMap: Record<string, Record<string, ExpPos> | null>;
-        __directives: Record<string, Directive>; /**
-        * 指令/组件所在的插槽所属组件
-        */
-        slotComponent: CompElem;
-        /**
-         * 渲染上下文所属组件
+         * 渲染上下文所属组件，仅用于指令
          */
         renderComponent: CompElem;
-        renderContext(...args: any): [NodeListOf<ChildNode>, Record<string, ExpPos>, Record<string, Record<string, ExpPos> | null>];
-        updateContext(...args: any): void;
-        __updateExpPos(tmpl: Template, _expPos: Record<string, ExpPos>): void;
+        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 {};

package/render/Template.d.ts

@@ -0,0 +1,26 @@
+import { CompElem } from "../CompElem";
+/**
+ * 视图模板
+ * @author holyhigh2
+ */
+export declare class Template {
+    strings: Array<string>;
+    vars: Array<any>;
+    constructor(strings: Array<string>, vars: Array<any>);
+    getKey(): string;
+    getKeys(): string[];
+    /**
+   * 追加tmpl
+   * 交接处模板进行合并
+   * @param tmpl
+   */
+    append(tmpl: Template): this;
+    /**
+     * 指定位置插入模板
+     * @param position 字符模板位置
+     * @param tmpl
+     * @returns
+     */
+    insert(position: number, tmpl: Template): this;
+    getHTML(comp: CompElem): string;
+}

package/render/render.d.ts

@@ -1,6 +1,7 @@
 import { CompElem } from "../CompElem";
-import { DirectiveWrapper } from "../directive/index";
-import { ExpPos } from "../types";
+import { UpdatePoint } from "../types";
+import { IView } from "./RenderContext";
+import { Template } from "./Template";
 export declare const ATTR_PREFIX_EVENT = "@";
 export declare const ATTR_PREFIX_PROP = ".";
 export declare const ATTR_PREFIX_BOOLEAN = "?";
@@ -20,38 +21,21 @@ export declare const ATTR_REF = "ref";
  *    1. 在后面追加同内容注释节点，标记两个节点，以便变量可以进行绑定
  *    2. 在中间插入变量内容
  * 3. 只有表达式是一个指令时才能绑定依赖
+ * @param component
  * @param tmpl
- * @param slotArgs
- * @returns
+ * @returns [html,vars]
  */
-export declare function buildHTML(tmpl: Template | Template[]): string;
+export declare function buildHTML(component: CompElem, tmpl: Template): [string, any[]];
 export declare const PLACEHOLDER_EXP: RegExp;
 /**
  * 构建模板为DOM结构
  * @param html
  */
-export declare function buildTmplate(expPos: Record<string, ExpPos>, directives: Array<DirectiveWrapper>, html: string, vars: any[], component: CompElem, slotArgs?: Record<string, any>, level?: number, expressionChain?: string): NodeListOf<ChildNode>;
+export declare function buildTmplate(updatePoints: Array<UpdatePoint>, html: string, vars: any[], component: CompElem, viewContext: IView): NodeListOf<ChildNode>;
 export declare const DomUtil: {
     insertBefore: (node: Node, newNodes: any[]) => void;
     remove: (startNode: Node, endNode: Node) => void;
 };
-export declare class Template {
-    strings: Array<string>;
-    vars: Array<any>;
-    key: string;
-    constructor(strings: Array<string>, vars: Array<any>);
-    getKey(): string;
-    /**
-     * 追加tmpl
-     * 交接处模板进行合并
-     * @param tmpl
-     */
-    append(tmpl: Template): this;
-    /**
-     * 获取html字符串
-     */
-    getHTML(): string;
-}
 /**
  * 标签函数，用于构建模板
  * @param strings

package/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * @author holyhigh2
  */
-import { Template } from "./render/render";
+import { Template } from "./render/Template";
 export type Constructor<T> = new (...args: any[]) => T;
 export type Getter = () => any;
 /**
@@ -21,10 +21,11 @@ export declare enum DirectiveUpdateTag {
     APPEND = "APPEND"
 }
 /**
- * 模板中的表达式位置
+ * 视图更新点
  */
-export declare class ExpPos {
-    index: string;
+export declare class UpdatePoint {
+    key: string;
+    varIndex: number;
     value: any;
     isText: boolean;
     isTmpl: boolean;
@@ -36,6 +37,6 @@ export declare class ExpPos {
     attrTmpl: string;
     isProp: boolean;
     isToggleProp: boolean;
-    eventName: string;
-    constructor(varIndex: string | number, node: Node, attrName?: string, attrTmpl?: string);
+    isEvent: boolean;
+    constructor(varIndex: number, node: Node, attrName?: string, attrTmpl?: string);
 }