@dooboostore/simple-web-component 1.0.4 → 1.0.5

package/dist/esm/is/SwcChooseMeter.js

@@ -11,6 +11,9 @@ let SwcChooseMeter = class SwcChooseMeter2 extends SwcHTMLMeterElementBase {
     super(...arguments);
     this._observer = null;
     this._swcValue = void 0;
+    this._branches = [];
+    this._otherBranch = null;
+    this._isInitialized = false;
   }
   set swcValue(val) {
     this._swcValue = val;
@@ -20,51 +23,75 @@ let SwcChooseMeter = class SwcChooseMeter2 extends SwcHTMLMeterElementBase {
     return this._swcValue;
   }
   connectedCallback() {
+    this.style.display = "contents";
+    this._initBranches();
     this._observer = new MutationObserver(() => this.evaluate());
-    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this._observer.observe(this, { attributes: true });
     this.evaluate();
   }
+  _initBranches() {
+    if (this._isInitialized)
+      return;
+    const children = Array.from(this.children);
+    children.forEach((c) => {
+      const isWhen = c.localName === "swc-when" || c.getAttribute("is")?.startsWith("swc-when-");
+      const isOther = c.localName === "swc-other" || c.getAttribute("is")?.startsWith("swc-other-");
+      const branch = {
+        tpl: c.cloneNode(true),
+        test: c.getAttribute("test")
+      };
+      if (isWhen)
+        this._branches.push(branch);
+      else if (isOther)
+        this._otherBranch = branch;
+    });
+    this.innerHTML = "";
+    this._isInitialized = true;
+  }
   disconnectedCallback() {
     this._observer?.disconnect();
   }
   evaluate() {
-    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
-    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    if (!this._isInitialized)
+      return;
     let matched = false;
     const chooseValue = this.getAttribute("swc-value") ?? this.getAttribute("value") ?? this._swcValue;
-    whens.forEach((when) => {
-      if (matched) {
-        when.style.display = "none";
-        return;
-      }
-      const testAttr = when.getAttribute("test");
+    this.innerHTML = "";
+    for (const branch of this._branches) {
+      if (matched)
+        break;
+      const testAttr = branch.test;
       if (testAttr === null || testAttr.includes("{{"))
-        return;
-      let isConditionMet = false;
+        continue;
+      let isMet = false;
       if (chooseValue !== void 0 && chooseValue !== null) {
-        isConditionMet = String(chooseValue) === String(testAttr);
+        isMet = String(chooseValue) === String(testAttr);
       } else {
         try {
           if (testAttr === "true")
-            isConditionMet = true;
+            isMet = true;
           else if (testAttr === "false")
-            isConditionMet = false;
+            isMet = false;
           else
-            isConditionMet = !!new Function("return " + testAttr)();
+            isMet = !!new Function("return " + testAttr)();
         } catch (e) {
-          isConditionMet = false;
+          isMet = false;
         }
       }
-      if (isConditionMet) {
-        when.style.display = "";
+      if (isMet) {
+        this._renderBranch(branch);
         matched = true;
-      } else {
-        when.style.display = "none";
       }
-    });
-    if (other) {
-      other.style.display = matched ? "none" : "";
     }
+    if (!matched && this._otherBranch) {
+      this._renderBranch(this._otherBranch);
+    }
+  }
+  _renderBranch(branch) {
+    const clone = branch.tpl.cloneNode(true);
+    clone.style.display = "contents";
+    this.appendChild(clone);
+    this.applyData(clone, this._swcValue);
   }
 };
 SwcChooseMeter = __decorate([

package/dist/esm/is/SwcChooseMeter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcChooseMeter.ts"],
-  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLMeterElementBase } from './SwcHTMLMeterElementBase';\n@elementDefine({ name: 'swc-choose-meter', extends: 'meter' })\nexport class SwcChooseMeter extends SwcHTMLMeterElementBase {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }\n  get swcValue() { return this._swcValue; }\n  connectedCallback() {\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true, subtree: true, childList: true });\n    this.evaluate();\n  }\n  disconnectedCallback() { this._observer?.disconnect(); }\n  private evaluate() {\n    const whens = Array.from(this.querySelectorAll('[is^=\"swc-when-\"], swc-when'));\n    const other = this.querySelector('[is^=\"swc-other-\"], swc-other');\n    let matched = false;\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n    whens.forEach(when => {\n      if (matched) { (when as HTMLElement).style.display = 'none'; return; }\n      const testAttr = when.getAttribute('test');\n      if (testAttr === null || testAttr.includes('{{')) return;\n      let isConditionMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }\n      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }\n      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }\n    });\n    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }\n  }\n}\n"],
-  "mappings": ";;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,+BAA+B;AAEjC,IAAM,iBAAN,MAAMA,wBAAuB,wBAAuB;EAApD,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;EAyB3B;EAxBE,IAAI,SAAS,KAAQ;AAAI,SAAK,YAAY;AAAK,SAAK,SAAQ;EAAI;EAChE,IAAI,WAAQ;AAAK,WAAO,KAAK;EAAW;EACxC,oBAAiB;AACf,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,MAAM,SAAS,MAAM,WAAW,KAAI,CAAE;AACjF,SAAK,SAAQ;EACf;EACA,uBAAoB;AAAK,SAAK,WAAW,WAAU;EAAI;EAC/C,WAAQ;AACd,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,6BAA6B,CAAC;AAC7E,UAAM,QAAQ,KAAK,cAAc,+BAA+B;AAChE,QAAI,UAAU;AACd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AACzF,UAAM,QAAQ,UAAO;AACnB,UAAI,SAAS;AAAG,aAAqB,MAAM,UAAU;AAAQ;MAAQ;AACrE,YAAM,WAAW,KAAK,aAAa,MAAM;AACzC,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAClD,UAAI,iBAAiB;AACrB,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAAE,yBAAiB,OAAO,WAAW,MAAM,OAAO,QAAQ;MAAG,OAC/G;AAAE,YAAI;AAAE,cAAI,aAAa;AAAQ,6BAAiB;mBAAe,aAAa;AAAS,6BAAiB;;AAAY,6BAAiB,CAAC,CAAC,IAAI,SAAS,YAAY,QAAQ,EAAC;QAAI,SAAS,GAAG;AAAE,2BAAiB;QAAO;MAAE;AAC1N,UAAI,gBAAgB;AAAG,aAAqB,MAAM,UAAU;AAAI,kBAAU;MAAM,OAAO;AAAG,aAAqB,MAAM,UAAU;MAAQ;IACzI,CAAC;AACD,QAAI,OAAO;AAAG,YAAsB,MAAM,UAAU,UAAU,SAAS;IAAI;EAC7E;;AA1BW,iBAAc,WAAA;EAD1B,cAAc,EAAE,MAAM,oBAAoB,SAAS,QAAO,CAAE;GAChD,cAAc;",
+  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLMeterElementBase } from './SwcHTMLMeterElementBase';\n\ninterface Branch {\n  tpl: HTMLElement;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose-meter', extends: 'meter' })\nexport class SwcChooseMeter extends SwcHTMLMeterElementBase {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n  private _branches: Branch[] = [];\n  private _otherBranch: Branch | null = null;\n  private _isInitialized = false;\n\n  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }\n  get swcValue() { return this._swcValue; }\n\n  connectedCallback() {\n    this.style.display = 'contents';\n    this._initBranches();\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true });\n    this.evaluate();\n  }\n\n  private _initBranches() {\n    if (this._isInitialized) return;\n    const children = Array.from(this.children);\n    children.forEach(c => {\n      const isWhen = c.localName === 'swc-when' || c.getAttribute('is')?.startsWith('swc-when-');\n      const isOther = c.localName === 'swc-other' || c.getAttribute('is')?.startsWith('swc-other-');\n      const branch: Branch = {\n        tpl: c.cloneNode(true) as HTMLElement,\n        test: c.getAttribute('test')\n      };\n      if (isWhen) this._branches.push(branch);\n      else if (isOther) this._otherBranch = branch;\n    });\n    this.innerHTML = '';\n    this._isInitialized = true;\n  }\n\n  disconnectedCallback() { this._observer?.disconnect(); }\n\n  private evaluate() {\n    if (!this._isInitialized) return;\n    let matched = false;\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n    this.innerHTML = '';\n\n    for (const branch of this._branches) {\n      if (matched) break;\n      const testAttr = branch.test;\n      if (testAttr === null || testAttr.includes('{{')) continue;\n      let isMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) { isMet = String(chooseValue) === String(testAttr); }\n      else { try { if (testAttr === 'true') isMet = true; else if (testAttr === 'false') isMet = false; else isMet = !!new Function('return ' + testAttr)(); } catch (e) { isMet = false; } }\n\n      if (isMet) {\n        this._renderBranch(branch);\n        matched = true;\n      }\n    }\n\n    if (!matched && this._otherBranch) { this._renderBranch(this._otherBranch); }\n  }\n\n  private _renderBranch(branch: Branch) {\n    const clone = branch.tpl.cloneNode(true) as HTMLElement;\n    // Force visibility since it hides itself in connectedCallback\n    clone.style.display = 'contents';\n    this.appendChild(clone);\n    this.applyData(clone, this._swcValue);\n  }\n}\n"],
+  "mappings": ";;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,+BAA+B;AAQjC,IAAM,iBAAN,MAAMA,wBAAuB,wBAAuB;EAApD,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;AACjB,SAAA,YAAsB,CAAA;AACtB,SAAA,eAA8B;AAC9B,SAAA,iBAAiB;EA8D3B;EA5DE,IAAI,SAAS,KAAQ;AAAI,SAAK,YAAY;AAAK,SAAK,SAAQ;EAAI;EAChE,IAAI,WAAQ;AAAK,WAAO,KAAK;EAAW;EAExC,oBAAiB;AACf,SAAK,MAAM,UAAU;AACrB,SAAK,cAAa;AAClB,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,KAAI,CAAE;AACjD,SAAK,SAAQ;EACf;EAEQ,gBAAa;AACnB,QAAI,KAAK;AAAgB;AACzB,UAAM,WAAW,MAAM,KAAK,KAAK,QAAQ;AACzC,aAAS,QAAQ,OAAI;AACnB,YAAM,SAAS,EAAE,cAAc,cAAc,EAAE,aAAa,IAAI,GAAG,WAAW,WAAW;AACzF,YAAM,UAAU,EAAE,cAAc,eAAe,EAAE,aAAa,IAAI,GAAG,WAAW,YAAY;AAC5F,YAAM,SAAiB;QACrB,KAAK,EAAE,UAAU,IAAI;QACrB,MAAM,EAAE,aAAa,MAAM;;AAE7B,UAAI;AAAQ,aAAK,UAAU,KAAK,MAAM;eAC7B;AAAS,aAAK,eAAe;IACxC,CAAC;AACD,SAAK,YAAY;AACjB,SAAK,iBAAiB;EACxB;EAEA,uBAAoB;AAAK,SAAK,WAAW,WAAU;EAAI;EAE/C,WAAQ;AACd,QAAI,CAAC,KAAK;AAAgB;AAC1B,QAAI,UAAU;AACd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AACzF,SAAK,YAAY;AAEjB,eAAW,UAAU,KAAK,WAAW;AACnC,UAAI;AAAS;AACb,YAAM,WAAW,OAAO;AACxB,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAClD,UAAI,QAAQ;AACZ,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAAE,gBAAQ,OAAO,WAAW,MAAM,OAAO,QAAQ;MAAG,OACtG;AAAE,YAAI;AAAE,cAAI,aAAa;AAAQ,oBAAQ;mBAAe,aAAa;AAAS,oBAAQ;;AAAY,oBAAQ,CAAC,CAAC,IAAI,SAAS,YAAY,QAAQ,EAAC;QAAI,SAAS,GAAG;AAAE,kBAAQ;QAAO;MAAE;AAEtL,UAAI,OAAO;AACT,aAAK,cAAc,MAAM;AACzB,kBAAU;MACZ;IACF;AAEA,QAAI,CAAC,WAAW,KAAK,cAAc;AAAE,WAAK,cAAc,KAAK,YAAY;IAAG;EAC9E;EAEQ,cAAc,QAAc;AAClC,UAAM,QAAQ,OAAO,IAAI,UAAU,IAAI;AAEvC,UAAM,MAAM,UAAU;AACtB,SAAK,YAAY,KAAK;AACtB,SAAK,UAAU,OAAO,KAAK,SAAS;EACtC;;AAlEW,iBAAc,WAAA;EAD1B,cAAc,EAAE,MAAM,oBAAoB,SAAS,QAAO,CAAE;GAChD,cAAc;",
   "names": ["SwcChooseMeter"]
 }

package/dist/esm/is/SwcChooseMod.js

@@ -11,6 +11,9 @@ let SwcChooseMod = class SwcChooseMod2 extends SwcHTMLModElementBase {
     super(...arguments);
     this._observer = null;
     this._swcValue = void 0;
+    this._branches = [];
+    this._otherBranch = null;
+    this._isInitialized = false;
   }
   set swcValue(val) {
     this._swcValue = val;
@@ -20,51 +23,75 @@ let SwcChooseMod = class SwcChooseMod2 extends SwcHTMLModElementBase {
     return this._swcValue;
   }
   connectedCallback() {
+    this.style.display = "contents";
+    this._initBranches();
     this._observer = new MutationObserver(() => this.evaluate());
-    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this._observer.observe(this, { attributes: true });
     this.evaluate();
   }
+  _initBranches() {
+    if (this._isInitialized)
+      return;
+    const children = Array.from(this.children);
+    children.forEach((c) => {
+      const isWhen = c.localName === "swc-when" || c.getAttribute("is")?.startsWith("swc-when-");
+      const isOther = c.localName === "swc-other" || c.getAttribute("is")?.startsWith("swc-other-");
+      const branch = {
+        tpl: c.cloneNode(true),
+        test: c.getAttribute("test")
+      };
+      if (isWhen)
+        this._branches.push(branch);
+      else if (isOther)
+        this._otherBranch = branch;
+    });
+    this.innerHTML = "";
+    this._isInitialized = true;
+  }
   disconnectedCallback() {
     this._observer?.disconnect();
   }
   evaluate() {
-    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
-    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    if (!this._isInitialized)
+      return;
     let matched = false;
     const chooseValue = this.getAttribute("swc-value") ?? this.getAttribute("value") ?? this._swcValue;
-    whens.forEach((when) => {
-      if (matched) {
-        when.style.display = "none";
-        return;
-      }
-      const testAttr = when.getAttribute("test");
+    this.innerHTML = "";
+    for (const branch of this._branches) {
+      if (matched)
+        break;
+      const testAttr = branch.test;
       if (testAttr === null || testAttr.includes("{{"))
-        return;
-      let isConditionMet = false;
+        continue;
+      let isMet = false;
       if (chooseValue !== void 0 && chooseValue !== null) {
-        isConditionMet = String(chooseValue) === String(testAttr);
+        isMet = String(chooseValue) === String(testAttr);
       } else {
         try {
           if (testAttr === "true")
-            isConditionMet = true;
+            isMet = true;
           else if (testAttr === "false")
-            isConditionMet = false;
+            isMet = false;
           else
-            isConditionMet = !!new Function("return " + testAttr)();
+            isMet = !!new Function("return " + testAttr)();
         } catch (e) {
-          isConditionMet = false;
+          isMet = false;
         }
       }
-      if (isConditionMet) {
-        when.style.display = "";
+      if (isMet) {
+        this._renderBranch(branch);
         matched = true;
-      } else {
-        when.style.display = "none";
       }
-    });
-    if (other) {
-      other.style.display = matched ? "none" : "";
     }
+    if (!matched && this._otherBranch) {
+      this._renderBranch(this._otherBranch);
+    }
+  }
+  _renderBranch(branch) {
+    const clone = branch.tpl.cloneNode(true);
+    clone.style.display = "contents";
+    this.appendChild(clone);
+    this.applyData(clone, this._swcValue);
   }
 };
 SwcChooseMod = __decorate([

package/dist/esm/is/SwcChooseMod.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcChooseMod.ts"],
-  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLModElementBase } from './SwcHTMLModElementBase';\n@elementDefine({ name: 'swc-choose-del', extends: 'del' })\nexport class SwcChooseMod extends SwcHTMLModElementBase {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }\n  get swcValue() { return this._swcValue; }\n  connectedCallback() {\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true, subtree: true, childList: true });\n    this.evaluate();\n  }\n  disconnectedCallback() { this._observer?.disconnect(); }\n  private evaluate() {\n    const whens = Array.from(this.querySelectorAll('[is^=\"swc-when-\"], swc-when'));\n    const other = this.querySelector('[is^=\"swc-other-\"], swc-other');\n    let matched = false;\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n    whens.forEach(when => {\n      if (matched) { (when as HTMLElement).style.display = 'none'; return; }\n      const testAttr = when.getAttribute('test');\n      if (testAttr === null || testAttr.includes('{{')) return;\n      let isConditionMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }\n      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }\n      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }\n    });\n    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }\n  }\n}\n"],
-  "mappings": ";;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAE/B,IAAM,eAAN,MAAMA,sBAAqB,sBAAqB;EAAhD,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;EAyB3B;EAxBE,IAAI,SAAS,KAAQ;AAAI,SAAK,YAAY;AAAK,SAAK,SAAQ;EAAI;EAChE,IAAI,WAAQ;AAAK,WAAO,KAAK;EAAW;EACxC,oBAAiB;AACf,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,MAAM,SAAS,MAAM,WAAW,KAAI,CAAE;AACjF,SAAK,SAAQ;EACf;EACA,uBAAoB;AAAK,SAAK,WAAW,WAAU;EAAI;EAC/C,WAAQ;AACd,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,6BAA6B,CAAC;AAC7E,UAAM,QAAQ,KAAK,cAAc,+BAA+B;AAChE,QAAI,UAAU;AACd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AACzF,UAAM,QAAQ,UAAO;AACnB,UAAI,SAAS;AAAG,aAAqB,MAAM,UAAU;AAAQ;MAAQ;AACrE,YAAM,WAAW,KAAK,aAAa,MAAM;AACzC,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAClD,UAAI,iBAAiB;AACrB,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAAE,yBAAiB,OAAO,WAAW,MAAM,OAAO,QAAQ;MAAG,OAC/G;AAAE,YAAI;AAAE,cAAI,aAAa;AAAQ,6BAAiB;mBAAe,aAAa;AAAS,6BAAiB;;AAAY,6BAAiB,CAAC,CAAC,IAAI,SAAS,YAAY,QAAQ,EAAC;QAAI,SAAS,GAAG;AAAE,2BAAiB;QAAO;MAAE;AAC1N,UAAI,gBAAgB;AAAG,aAAqB,MAAM,UAAU;AAAI,kBAAU;MAAM,OAAO;AAAG,aAAqB,MAAM,UAAU;MAAQ;IACzI,CAAC;AACD,QAAI,OAAO;AAAG,YAAsB,MAAM,UAAU,UAAU,SAAS;IAAI;EAC7E;;AA1BW,eAAY,WAAA;EADxB,cAAc,EAAE,MAAM,kBAAkB,SAAS,MAAK,CAAE;GAC5C,YAAY;",
+  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLModElementBase } from './SwcHTMLModElementBase';\n\ninterface Branch {\n  tpl: HTMLElement;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose-del', extends: 'del' })\nexport class SwcChooseMod extends SwcHTMLModElementBase {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n  private _branches: Branch[] = [];\n  private _otherBranch: Branch | null = null;\n  private _isInitialized = false;\n\n  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }\n  get swcValue() { return this._swcValue; }\n\n  connectedCallback() {\n    this.style.display = 'contents';\n    this._initBranches();\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true });\n    this.evaluate();\n  }\n\n  private _initBranches() {\n    if (this._isInitialized) return;\n    const children = Array.from(this.children);\n    children.forEach(c => {\n      const isWhen = c.localName === 'swc-when' || c.getAttribute('is')?.startsWith('swc-when-');\n      const isOther = c.localName === 'swc-other' || c.getAttribute('is')?.startsWith('swc-other-');\n      const branch: Branch = {\n        tpl: c.cloneNode(true) as HTMLElement,\n        test: c.getAttribute('test')\n      };\n      if (isWhen) this._branches.push(branch);\n      else if (isOther) this._otherBranch = branch;\n    });\n    this.innerHTML = '';\n    this._isInitialized = true;\n  }\n\n  disconnectedCallback() { this._observer?.disconnect(); }\n\n  private evaluate() {\n    if (!this._isInitialized) return;\n    let matched = false;\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n    this.innerHTML = '';\n\n    for (const branch of this._branches) {\n      if (matched) break;\n      const testAttr = branch.test;\n      if (testAttr === null || testAttr.includes('{{')) continue;\n      let isMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) { isMet = String(chooseValue) === String(testAttr); }\n      else { try { if (testAttr === 'true') isMet = true; else if (testAttr === 'false') isMet = false; else isMet = !!new Function('return ' + testAttr)(); } catch (e) { isMet = false; } }\n\n      if (isMet) {\n        this._renderBranch(branch);\n        matched = true;\n      }\n    }\n\n    if (!matched && this._otherBranch) { this._renderBranch(this._otherBranch); }\n  }\n\n  private _renderBranch(branch: Branch) {\n    const clone = branch.tpl.cloneNode(true) as HTMLElement;\n    // Force visibility since it hides itself in connectedCallback\n    clone.style.display = 'contents';\n    this.appendChild(clone);\n    this.applyData(clone, this._swcValue);\n  }\n}\n"],
+  "mappings": ";;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAQ/B,IAAM,eAAN,MAAMA,sBAAqB,sBAAqB;EAAhD,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;AACjB,SAAA,YAAsB,CAAA;AACtB,SAAA,eAA8B;AAC9B,SAAA,iBAAiB;EA8D3B;EA5DE,IAAI,SAAS,KAAQ;AAAI,SAAK,YAAY;AAAK,SAAK,SAAQ;EAAI;EAChE,IAAI,WAAQ;AAAK,WAAO,KAAK;EAAW;EAExC,oBAAiB;AACf,SAAK,MAAM,UAAU;AACrB,SAAK,cAAa;AAClB,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,KAAI,CAAE;AACjD,SAAK,SAAQ;EACf;EAEQ,gBAAa;AACnB,QAAI,KAAK;AAAgB;AACzB,UAAM,WAAW,MAAM,KAAK,KAAK,QAAQ;AACzC,aAAS,QAAQ,OAAI;AACnB,YAAM,SAAS,EAAE,cAAc,cAAc,EAAE,aAAa,IAAI,GAAG,WAAW,WAAW;AACzF,YAAM,UAAU,EAAE,cAAc,eAAe,EAAE,aAAa,IAAI,GAAG,WAAW,YAAY;AAC5F,YAAM,SAAiB;QACrB,KAAK,EAAE,UAAU,IAAI;QACrB,MAAM,EAAE,aAAa,MAAM;;AAE7B,UAAI;AAAQ,aAAK,UAAU,KAAK,MAAM;eAC7B;AAAS,aAAK,eAAe;IACxC,CAAC;AACD,SAAK,YAAY;AACjB,SAAK,iBAAiB;EACxB;EAEA,uBAAoB;AAAK,SAAK,WAAW,WAAU;EAAI;EAE/C,WAAQ;AACd,QAAI,CAAC,KAAK;AAAgB;AAC1B,QAAI,UAAU;AACd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AACzF,SAAK,YAAY;AAEjB,eAAW,UAAU,KAAK,WAAW;AACnC,UAAI;AAAS;AACb,YAAM,WAAW,OAAO;AACxB,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAClD,UAAI,QAAQ;AACZ,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAAE,gBAAQ,OAAO,WAAW,MAAM,OAAO,QAAQ;MAAG,OACtG;AAAE,YAAI;AAAE,cAAI,aAAa;AAAQ,oBAAQ;mBAAe,aAAa;AAAS,oBAAQ;;AAAY,oBAAQ,CAAC,CAAC,IAAI,SAAS,YAAY,QAAQ,EAAC;QAAI,SAAS,GAAG;AAAE,kBAAQ;QAAO;MAAE;AAEtL,UAAI,OAAO;AACT,aAAK,cAAc,MAAM;AACzB,kBAAU;MACZ;IACF;AAEA,QAAI,CAAC,WAAW,KAAK,cAAc;AAAE,WAAK,cAAc,KAAK,YAAY;IAAG;EAC9E;EAEQ,cAAc,QAAc;AAClC,UAAM,QAAQ,OAAO,IAAI,UAAU,IAAI;AAEvC,UAAM,MAAM,UAAU;AACtB,SAAK,YAAY,KAAK;AACtB,SAAK,UAAU,OAAO,KAAK,SAAS;EACtC;;AAlEW,eAAY,WAAA;EADxB,cAAc,EAAE,MAAM,kBAAkB,SAAS,MAAK,CAAE;GAC5C,YAAY;",
   "names": ["SwcChooseMod"]
 }

package/dist/esm/is/SwcChooseObject.js

@@ -11,6 +11,9 @@ let SwcChooseObject = class SwcChooseObject2 extends SwcHTMLObjectElementBase {
     super(...arguments);
     this._observer = null;
     this._swcValue = void 0;
+    this._branches = [];
+    this._otherBranch = null;
+    this._isInitialized = false;
   }
   set swcValue(val) {
     this._swcValue = val;
@@ -20,51 +23,75 @@ let SwcChooseObject = class SwcChooseObject2 extends SwcHTMLObjectElementBase {
     return this._swcValue;
   }
   connectedCallback() {
+    this.style.display = "contents";
+    this._initBranches();
     this._observer = new MutationObserver(() => this.evaluate());
-    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this._observer.observe(this, { attributes: true });
     this.evaluate();
   }
+  _initBranches() {
+    if (this._isInitialized)
+      return;
+    const children = Array.from(this.children);
+    children.forEach((c) => {
+      const isWhen = c.localName === "swc-when" || c.getAttribute("is")?.startsWith("swc-when-");
+      const isOther = c.localName === "swc-other" || c.getAttribute("is")?.startsWith("swc-other-");
+      const branch = {
+        tpl: c.cloneNode(true),
+        test: c.getAttribute("test")
+      };
+      if (isWhen)
+        this._branches.push(branch);
+      else if (isOther)
+        this._otherBranch = branch;
+    });
+    this.innerHTML = "";
+    this._isInitialized = true;
+  }
   disconnectedCallback() {
     this._observer?.disconnect();
   }
   evaluate() {
-    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
-    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    if (!this._isInitialized)
+      return;
     let matched = false;
     const chooseValue = this.getAttribute("swc-value") ?? this.getAttribute("value") ?? this._swcValue;
-    whens.forEach((when) => {
-      if (matched) {
-        when.style.display = "none";
-        return;
-      }
-      const testAttr = when.getAttribute("test");
+    this.innerHTML = "";
+    for (const branch of this._branches) {
+      if (matched)
+        break;
+      const testAttr = branch.test;
       if (testAttr === null || testAttr.includes("{{"))
-        return;
-      let isConditionMet = false;
+        continue;
+      let isMet = false;
       if (chooseValue !== void 0 && chooseValue !== null) {
-        isConditionMet = String(chooseValue) === String(testAttr);
+        isMet = String(chooseValue) === String(testAttr);
       } else {
         try {
           if (testAttr === "true")
-            isConditionMet = true;
+            isMet = true;
           else if (testAttr === "false")
-            isConditionMet = false;
+            isMet = false;
           else
-            isConditionMet = !!new Function("return " + testAttr)();
+            isMet = !!new Function("return " + testAttr)();
         } catch (e) {
-          isConditionMet = false;
+          isMet = false;
         }
       }
-      if (isConditionMet) {
-        when.style.display = "";
+      if (isMet) {
+        this._renderBranch(branch);
         matched = true;
-      } else {
-        when.style.display = "none";
       }
-    });
-    if (other) {
-      other.style.display = matched ? "none" : "";
     }
+    if (!matched && this._otherBranch) {
+      this._renderBranch(this._otherBranch);
+    }
+  }
+  _renderBranch(branch) {
+    const clone = branch.tpl.cloneNode(true);
+    clone.style.display = "contents";
+    this.appendChild(clone);
+    this.applyData(clone, this._swcValue);
   }
 };
 SwcChooseObject = __decorate([

package/dist/esm/is/SwcChooseObject.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcChooseObject.ts"],
-  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLObjectElementBase } from './SwcHTMLObjectElementBase';\n@elementDefine({ name: 'swc-choose-object', extends: 'object' })\nexport class SwcChooseObject extends SwcHTMLObjectElementBase {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }\n  get swcValue() { return this._swcValue; }\n  connectedCallback() {\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true, subtree: true, childList: true });\n    this.evaluate();\n  }\n  disconnectedCallback() { this._observer?.disconnect(); }\n  private evaluate() {\n    const whens = Array.from(this.querySelectorAll('[is^=\"swc-when-\"], swc-when'));\n    const other = this.querySelector('[is^=\"swc-other-\"], swc-other');\n    let matched = false;\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n    whens.forEach(when => {\n      if (matched) { (when as HTMLElement).style.display = 'none'; return; }\n      const testAttr = when.getAttribute('test');\n      if (testAttr === null || testAttr.includes('{{')) return;\n      let isConditionMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }\n      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }\n      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }\n    });\n    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }\n  }\n}\n"],
-  "mappings": ";;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AAElC,IAAM,kBAAN,MAAMA,yBAAwB,yBAAwB;EAAtD,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;EAyB3B;EAxBE,IAAI,SAAS,KAAQ;AAAI,SAAK,YAAY;AAAK,SAAK,SAAQ;EAAI;EAChE,IAAI,WAAQ;AAAK,WAAO,KAAK;EAAW;EACxC,oBAAiB;AACf,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,MAAM,SAAS,MAAM,WAAW,KAAI,CAAE;AACjF,SAAK,SAAQ;EACf;EACA,uBAAoB;AAAK,SAAK,WAAW,WAAU;EAAI;EAC/C,WAAQ;AACd,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,6BAA6B,CAAC;AAC7E,UAAM,QAAQ,KAAK,cAAc,+BAA+B;AAChE,QAAI,UAAU;AACd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AACzF,UAAM,QAAQ,UAAO;AACnB,UAAI,SAAS;AAAG,aAAqB,MAAM,UAAU;AAAQ;MAAQ;AACrE,YAAM,WAAW,KAAK,aAAa,MAAM;AACzC,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAClD,UAAI,iBAAiB;AACrB,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAAE,yBAAiB,OAAO,WAAW,MAAM,OAAO,QAAQ;MAAG,OAC/G;AAAE,YAAI;AAAE,cAAI,aAAa;AAAQ,6BAAiB;mBAAe,aAAa;AAAS,6BAAiB;;AAAY,6BAAiB,CAAC,CAAC,IAAI,SAAS,YAAY,QAAQ,EAAC;QAAI,SAAS,GAAG;AAAE,2BAAiB;QAAO;MAAE;AAC1N,UAAI,gBAAgB;AAAG,aAAqB,MAAM,UAAU;AAAI,kBAAU;MAAM,OAAO;AAAG,aAAqB,MAAM,UAAU;MAAQ;IACzI,CAAC;AACD,QAAI,OAAO;AAAG,YAAsB,MAAM,UAAU,UAAU,SAAS;IAAI;EAC7E;;AA1BW,kBAAe,WAAA;EAD3B,cAAc,EAAE,MAAM,qBAAqB,SAAS,SAAQ,CAAE;GAClD,eAAe;",
+  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLObjectElementBase } from './SwcHTMLObjectElementBase';\n\ninterface Branch {\n  tpl: HTMLElement;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose-object', extends: 'object' })\nexport class SwcChooseObject extends SwcHTMLObjectElementBase {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n  private _branches: Branch[] = [];\n  private _otherBranch: Branch | null = null;\n  private _isInitialized = false;\n\n  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }\n  get swcValue() { return this._swcValue; }\n\n  connectedCallback() {\n    this.style.display = 'contents';\n    this._initBranches();\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true });\n    this.evaluate();\n  }\n\n  private _initBranches() {\n    if (this._isInitialized) return;\n    const children = Array.from(this.children);\n    children.forEach(c => {\n      const isWhen = c.localName === 'swc-when' || c.getAttribute('is')?.startsWith('swc-when-');\n      const isOther = c.localName === 'swc-other' || c.getAttribute('is')?.startsWith('swc-other-');\n      const branch: Branch = {\n        tpl: c.cloneNode(true) as HTMLElement,\n        test: c.getAttribute('test')\n      };\n      if (isWhen) this._branches.push(branch);\n      else if (isOther) this._otherBranch = branch;\n    });\n    this.innerHTML = '';\n    this._isInitialized = true;\n  }\n\n  disconnectedCallback() { this._observer?.disconnect(); }\n\n  private evaluate() {\n    if (!this._isInitialized) return;\n    let matched = false;\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n    this.innerHTML = '';\n\n    for (const branch of this._branches) {\n      if (matched) break;\n      const testAttr = branch.test;\n      if (testAttr === null || testAttr.includes('{{')) continue;\n      let isMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) { isMet = String(chooseValue) === String(testAttr); }\n      else { try { if (testAttr === 'true') isMet = true; else if (testAttr === 'false') isMet = false; else isMet = !!new Function('return ' + testAttr)(); } catch (e) { isMet = false; } }\n\n      if (isMet) {\n        this._renderBranch(branch);\n        matched = true;\n      }\n    }\n\n    if (!matched && this._otherBranch) { this._renderBranch(this._otherBranch); }\n  }\n\n  private _renderBranch(branch: Branch) {\n    const clone = branch.tpl.cloneNode(true) as HTMLElement;\n    // Force visibility since it hides itself in connectedCallback\n    clone.style.display = 'contents';\n    this.appendChild(clone);\n    this.applyData(clone, this._swcValue);\n  }\n}\n"],
+  "mappings": ";;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AAQlC,IAAM,kBAAN,MAAMA,yBAAwB,yBAAwB;EAAtD,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;AACjB,SAAA,YAAsB,CAAA;AACtB,SAAA,eAA8B;AAC9B,SAAA,iBAAiB;EA8D3B;EA5DE,IAAI,SAAS,KAAQ;AAAI,SAAK,YAAY;AAAK,SAAK,SAAQ;EAAI;EAChE,IAAI,WAAQ;AAAK,WAAO,KAAK;EAAW;EAExC,oBAAiB;AACf,SAAK,MAAM,UAAU;AACrB,SAAK,cAAa;AAClB,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,KAAI,CAAE;AACjD,SAAK,SAAQ;EACf;EAEQ,gBAAa;AACnB,QAAI,KAAK;AAAgB;AACzB,UAAM,WAAW,MAAM,KAAK,KAAK,QAAQ;AACzC,aAAS,QAAQ,OAAI;AACnB,YAAM,SAAS,EAAE,cAAc,cAAc,EAAE,aAAa,IAAI,GAAG,WAAW,WAAW;AACzF,YAAM,UAAU,EAAE,cAAc,eAAe,EAAE,aAAa,IAAI,GAAG,WAAW,YAAY;AAC5F,YAAM,SAAiB;QACrB,KAAK,EAAE,UAAU,IAAI;QACrB,MAAM,EAAE,aAAa,MAAM;;AAE7B,UAAI;AAAQ,aAAK,UAAU,KAAK,MAAM;eAC7B;AAAS,aAAK,eAAe;IACxC,CAAC;AACD,SAAK,YAAY;AACjB,SAAK,iBAAiB;EACxB;EAEA,uBAAoB;AAAK,SAAK,WAAW,WAAU;EAAI;EAE/C,WAAQ;AACd,QAAI,CAAC,KAAK;AAAgB;AAC1B,QAAI,UAAU;AACd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AACzF,SAAK,YAAY;AAEjB,eAAW,UAAU,KAAK,WAAW;AACnC,UAAI;AAAS;AACb,YAAM,WAAW,OAAO;AACxB,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAClD,UAAI,QAAQ;AACZ,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAAE,gBAAQ,OAAO,WAAW,MAAM,OAAO,QAAQ;MAAG,OACtG;AAAE,YAAI;AAAE,cAAI,aAAa;AAAQ,oBAAQ;mBAAe,aAAa;AAAS,oBAAQ;;AAAY,oBAAQ,CAAC,CAAC,IAAI,SAAS,YAAY,QAAQ,EAAC;QAAI,SAAS,GAAG;AAAE,kBAAQ;QAAO;MAAE;AAEtL,UAAI,OAAO;AACT,aAAK,cAAc,MAAM;AACzB,kBAAU;MACZ;IACF;AAEA,QAAI,CAAC,WAAW,KAAK,cAAc;AAAE,WAAK,cAAc,KAAK,YAAY;IAAG;EAC9E;EAEQ,cAAc,QAAc;AAClC,UAAM,QAAQ,OAAO,IAAI,UAAU,IAAI;AAEvC,UAAM,MAAM,UAAU;AACtB,SAAK,YAAY,KAAK;AACtB,SAAK,UAAU,OAAO,KAAK,SAAS;EACtC;;AAlEW,kBAAe,WAAA;EAD3B,cAAc,EAAE,MAAM,qBAAqB,SAAS,SAAQ,CAAE;GAClD,eAAe;",
   "names": ["SwcChooseObject"]
 }

package/dist/esm/is/SwcChooseOl.js

@@ -11,6 +11,9 @@ let SwcChooseOl = class SwcChooseOl2 extends SwcHTMLOListElementBase {
     super(...arguments);
     this._observer = null;
     this._swcValue = void 0;
+    this._branches = [];
+    this._otherBranch = null;
+    this._isInitialized = false;
   }
   set swcValue(val) {
     this._swcValue = val;
@@ -20,51 +23,75 @@ let SwcChooseOl = class SwcChooseOl2 extends SwcHTMLOListElementBase {
     return this._swcValue;
   }
   connectedCallback() {
+    this.style.display = "contents";
+    this._initBranches();
     this._observer = new MutationObserver(() => this.evaluate());
-    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this._observer.observe(this, { attributes: true });
     this.evaluate();
   }
+  _initBranches() {
+    if (this._isInitialized)
+      return;
+    const children = Array.from(this.children);
+    children.forEach((c) => {
+      const isWhen = c.localName === "swc-when" || c.getAttribute("is")?.startsWith("swc-when-");
+      const isOther = c.localName === "swc-other" || c.getAttribute("is")?.startsWith("swc-other-");
+      const branch = {
+        tpl: c.cloneNode(true),
+        test: c.getAttribute("test")
+      };
+      if (isWhen)
+        this._branches.push(branch);
+      else if (isOther)
+        this._otherBranch = branch;
+    });
+    this.innerHTML = "";
+    this._isInitialized = true;
+  }
   disconnectedCallback() {
     this._observer?.disconnect();
   }
   evaluate() {
-    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
-    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    if (!this._isInitialized)
+      return;
     let matched = false;
     const chooseValue = this.getAttribute("swc-value") ?? this.getAttribute("value") ?? this._swcValue;
-    whens.forEach((when) => {
-      if (matched) {
-        when.style.display = "none";
-        return;
-      }
-      const testAttr = when.getAttribute("test");
+    this.innerHTML = "";
+    for (const branch of this._branches) {
+      if (matched)
+        break;
+      const testAttr = branch.test;
       if (testAttr === null || testAttr.includes("{{"))
-        return;
-      let isConditionMet = false;
+        continue;
+      let isMet = false;
       if (chooseValue !== void 0 && chooseValue !== null) {
-        isConditionMet = String(chooseValue) === String(testAttr);
+        isMet = String(chooseValue) === String(testAttr);
       } else {
         try {
           if (testAttr === "true")
-            isConditionMet = true;
+            isMet = true;
           else if (testAttr === "false")
-            isConditionMet = false;
+            isMet = false;
           else
-            isConditionMet = !!new Function("return " + testAttr)();
+            isMet = !!new Function("return " + testAttr)();
         } catch (e) {
-          isConditionMet = false;
+          isMet = false;
         }
       }
-      if (isConditionMet) {
-        when.style.display = "";
+      if (isMet) {
+        this._renderBranch(branch);
         matched = true;
-      } else {
-        when.style.display = "none";
       }
-    });
-    if (other) {
-      other.style.display = matched ? "none" : "";
     }
+    if (!matched && this._otherBranch) {
+      this._renderBranch(this._otherBranch);
+    }
+  }
+  _renderBranch(branch) {
+    const clone = branch.tpl.cloneNode(true);
+    clone.style.display = "contents";
+    this.appendChild(clone);
+    this.applyData(clone, this._swcValue);
   }
 };
 SwcChooseOl = __decorate([

package/dist/esm/is/SwcChooseOl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcChooseOl.ts"],
-  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLOListElementBase } from './SwcHTMLOListElementBase';\n@elementDefine({ name: 'swc-choose-ol', extends: 'ol' })\nexport class SwcChooseOl extends SwcHTMLOListElementBase {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }\n  get swcValue() { return this._swcValue; }\n  connectedCallback() {\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true, subtree: true, childList: true });\n    this.evaluate();\n  }\n  disconnectedCallback() { this._observer?.disconnect(); }\n  private evaluate() {\n    const whens = Array.from(this.querySelectorAll('[is^=\"swc-when-\"], swc-when'));\n    const other = this.querySelector('[is^=\"swc-other-\"], swc-other');\n    let matched = false;\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n    whens.forEach(when => {\n      if (matched) { (when as HTMLElement).style.display = 'none'; return; }\n      const testAttr = when.getAttribute('test');\n      if (testAttr === null || testAttr.includes('{{')) return;\n      let isConditionMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }\n      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }\n      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }\n    });\n    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }\n  }\n}\n"],
-  "mappings": ";;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,+BAA+B;AAEjC,IAAM,cAAN,MAAMA,qBAAoB,wBAAuB;EAAjD,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;EAyB3B;EAxBE,IAAI,SAAS,KAAQ;AAAI,SAAK,YAAY;AAAK,SAAK,SAAQ;EAAI;EAChE,IAAI,WAAQ;AAAK,WAAO,KAAK;EAAW;EACxC,oBAAiB;AACf,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,MAAM,SAAS,MAAM,WAAW,KAAI,CAAE;AACjF,SAAK,SAAQ;EACf;EACA,uBAAoB;AAAK,SAAK,WAAW,WAAU;EAAI;EAC/C,WAAQ;AACd,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,6BAA6B,CAAC;AAC7E,UAAM,QAAQ,KAAK,cAAc,+BAA+B;AAChE,QAAI,UAAU;AACd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AACzF,UAAM,QAAQ,UAAO;AACnB,UAAI,SAAS;AAAG,aAAqB,MAAM,UAAU;AAAQ;MAAQ;AACrE,YAAM,WAAW,KAAK,aAAa,MAAM;AACzC,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAClD,UAAI,iBAAiB;AACrB,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAAE,yBAAiB,OAAO,WAAW,MAAM,OAAO,QAAQ;MAAG,OAC/G;AAAE,YAAI;AAAE,cAAI,aAAa;AAAQ,6BAAiB;mBAAe,aAAa;AAAS,6BAAiB;;AAAY,6BAAiB,CAAC,CAAC,IAAI,SAAS,YAAY,QAAQ,EAAC;QAAI,SAAS,GAAG;AAAE,2BAAiB;QAAO;MAAE;AAC1N,UAAI,gBAAgB;AAAG,aAAqB,MAAM,UAAU;AAAI,kBAAU;MAAM,OAAO;AAAG,aAAqB,MAAM,UAAU;MAAQ;IACzI,CAAC;AACD,QAAI,OAAO;AAAG,YAAsB,MAAM,UAAU,UAAU,SAAS;IAAI;EAC7E;;AA1BW,cAAW,WAAA;EADvB,cAAc,EAAE,MAAM,iBAAiB,SAAS,KAAI,CAAE;GAC1C,WAAW;",
+  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLOListElementBase } from './SwcHTMLOListElementBase';\n\ninterface Branch {\n  tpl: HTMLElement;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose-ol', extends: 'ol' })\nexport class SwcChooseOl extends SwcHTMLOListElementBase {\n  private _observer: MutationObserver | null = null;\n  private _swcValue: any = undefined;\n  private _branches: Branch[] = [];\n  private _otherBranch: Branch | null = null;\n  private _isInitialized = false;\n\n  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }\n  get swcValue() { return this._swcValue; }\n\n  connectedCallback() {\n    this.style.display = 'contents';\n    this._initBranches();\n    this._observer = new MutationObserver(() => this.evaluate());\n    this._observer.observe(this, { attributes: true });\n    this.evaluate();\n  }\n\n  private _initBranches() {\n    if (this._isInitialized) return;\n    const children = Array.from(this.children);\n    children.forEach(c => {\n      const isWhen = c.localName === 'swc-when' || c.getAttribute('is')?.startsWith('swc-when-');\n      const isOther = c.localName === 'swc-other' || c.getAttribute('is')?.startsWith('swc-other-');\n      const branch: Branch = {\n        tpl: c.cloneNode(true) as HTMLElement,\n        test: c.getAttribute('test')\n      };\n      if (isWhen) this._branches.push(branch);\n      else if (isOther) this._otherBranch = branch;\n    });\n    this.innerHTML = '';\n    this._isInitialized = true;\n  }\n\n  disconnectedCallback() { this._observer?.disconnect(); }\n\n  private evaluate() {\n    if (!this._isInitialized) return;\n    let matched = false;\n    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;\n    this.innerHTML = '';\n\n    for (const branch of this._branches) {\n      if (matched) break;\n      const testAttr = branch.test;\n      if (testAttr === null || testAttr.includes('{{')) continue;\n      let isMet = false;\n      if (chooseValue !== undefined && chooseValue !== null) { isMet = String(chooseValue) === String(testAttr); }\n      else { try { if (testAttr === 'true') isMet = true; else if (testAttr === 'false') isMet = false; else isMet = !!new Function('return ' + testAttr)(); } catch (e) { isMet = false; } }\n\n      if (isMet) {\n        this._renderBranch(branch);\n        matched = true;\n      }\n    }\n\n    if (!matched && this._otherBranch) { this._renderBranch(this._otherBranch); }\n  }\n\n  private _renderBranch(branch: Branch) {\n    const clone = branch.tpl.cloneNode(true) as HTMLElement;\n    // Force visibility since it hides itself in connectedCallback\n    clone.style.display = 'contents';\n    this.appendChild(clone);\n    this.applyData(clone, this._swcValue);\n  }\n}\n"],
+  "mappings": ";;;;;;AAAA,SAAS,qBAAqB;AAC9B,SAAS,+BAA+B;AAQjC,IAAM,cAAN,MAAMA,qBAAoB,wBAAuB;EAAjD,cAAA;;AACG,SAAA,YAAqC;AACrC,SAAA,YAAiB;AACjB,SAAA,YAAsB,CAAA;AACtB,SAAA,eAA8B;AAC9B,SAAA,iBAAiB;EA8D3B;EA5DE,IAAI,SAAS,KAAQ;AAAI,SAAK,YAAY;AAAK,SAAK,SAAQ;EAAI;EAChE,IAAI,WAAQ;AAAK,WAAO,KAAK;EAAW;EAExC,oBAAiB;AACf,SAAK,MAAM,UAAU;AACrB,SAAK,cAAa;AAClB,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,SAAQ,CAAE;AAC3D,SAAK,UAAU,QAAQ,MAAM,EAAE,YAAY,KAAI,CAAE;AACjD,SAAK,SAAQ;EACf;EAEQ,gBAAa;AACnB,QAAI,KAAK;AAAgB;AACzB,UAAM,WAAW,MAAM,KAAK,KAAK,QAAQ;AACzC,aAAS,QAAQ,OAAI;AACnB,YAAM,SAAS,EAAE,cAAc,cAAc,EAAE,aAAa,IAAI,GAAG,WAAW,WAAW;AACzF,YAAM,UAAU,EAAE,cAAc,eAAe,EAAE,aAAa,IAAI,GAAG,WAAW,YAAY;AAC5F,YAAM,SAAiB;QACrB,KAAK,EAAE,UAAU,IAAI;QACrB,MAAM,EAAE,aAAa,MAAM;;AAE7B,UAAI;AAAQ,aAAK,UAAU,KAAK,MAAM;eAC7B;AAAS,aAAK,eAAe;IACxC,CAAC;AACD,SAAK,YAAY;AACjB,SAAK,iBAAiB;EACxB;EAEA,uBAAoB;AAAK,SAAK,WAAW,WAAU;EAAI;EAE/C,WAAQ;AACd,QAAI,CAAC,KAAK;AAAgB;AAC1B,QAAI,UAAU;AACd,UAAM,cAAc,KAAK,aAAa,WAAW,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK;AACzF,SAAK,YAAY;AAEjB,eAAW,UAAU,KAAK,WAAW;AACnC,UAAI;AAAS;AACb,YAAM,WAAW,OAAO;AACxB,UAAI,aAAa,QAAQ,SAAS,SAAS,IAAI;AAAG;AAClD,UAAI,QAAQ;AACZ,UAAI,gBAAgB,UAAa,gBAAgB,MAAM;AAAE,gBAAQ,OAAO,WAAW,MAAM,OAAO,QAAQ;MAAG,OACtG;AAAE,YAAI;AAAE,cAAI,aAAa;AAAQ,oBAAQ;mBAAe,aAAa;AAAS,oBAAQ;;AAAY,oBAAQ,CAAC,CAAC,IAAI,SAAS,YAAY,QAAQ,EAAC;QAAI,SAAS,GAAG;AAAE,kBAAQ;QAAO;MAAE;AAEtL,UAAI,OAAO;AACT,aAAK,cAAc,MAAM;AACzB,kBAAU;MACZ;IACF;AAEA,QAAI,CAAC,WAAW,KAAK,cAAc;AAAE,WAAK,cAAc,KAAK,YAAY;IAAG;EAC9E;EAEQ,cAAc,QAAc;AAClC,UAAM,QAAQ,OAAO,IAAI,UAAU,IAAI;AAEvC,UAAM,MAAM,UAAU;AACtB,SAAK,YAAY,KAAK;AACtB,SAAK,UAAU,OAAO,KAAK,SAAS;EACtC;;AAlEW,cAAW,WAAA;EADvB,cAAc,EAAE,MAAM,iBAAiB,SAAS,KAAI,CAAE;GAC1C,WAAW;",
   "names": ["SwcChooseOl"]
 }