@dooboostore/simple-web-component 1.0.4 → 1.0.5

package/dist/cjs/is/SwcChooseLegend.js

@@ -33,6 +33,9 @@ let SwcChooseLegend = class SwcChooseLegend2 extends import_SwcHTMLLegendElement
     super(...arguments);
     this._observer = null;
     this._swcValue = void 0;
+    this._branches = [];
+    this._otherBranch = null;
+    this._isInitialized = false;
   }
   set swcValue(val) {
     this._swcValue = val;
@@ -42,51 +45,75 @@ let SwcChooseLegend = class SwcChooseLegend2 extends import_SwcHTMLLegendElement
     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);
   }
 };
 SwcChooseLegend = __decorate([

package/dist/cjs/is/SwcChooseLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcChooseLegend.ts"],
-  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLLegendElementBase } from './SwcHTMLLegendElementBase';\n@elementDefine({ name: 'swc-choose-legend', extends: 'legend' })\nexport class SwcChooseLegend extends SwcHTMLLegendElementBase {\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,eAA8B;AAC9B,sCAAyC;;;;;;;AAElC,IAAM,kBAAN,MAAMA,yBAAwB,yDAAwB;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;MAD3B,wBAAc,EAAE,MAAM,qBAAqB,SAAS,SAAQ,CAAE;GAClD,eAAe;",
+  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLLegendElementBase } from './SwcHTMLLegendElementBase';\n\ninterface Branch {\n  tpl: HTMLElement;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose-legend', extends: 'legend' })\nexport class SwcChooseLegend extends SwcHTMLLegendElementBase {\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,eAA8B;AAC9B,sCAAyC;;;;;;;AAQlC,IAAM,kBAAN,MAAMA,yBAAwB,yDAAwB;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;MAD3B,wBAAc,EAAE,MAAM,qBAAqB,SAAS,SAAQ,CAAE;GAClD,eAAe;",
   "names": ["SwcChooseLegend"]
 }

package/dist/cjs/is/SwcChooseLi.js

@@ -33,6 +33,9 @@ let SwcChooseLi = class SwcChooseLi2 extends import_SwcHTMLLIElementBase.SwcHTML
     super(...arguments);
     this._observer = null;
     this._swcValue = void 0;
+    this._branches = [];
+    this._otherBranch = null;
+    this._isInitialized = false;
   }
   set swcValue(val) {
     this._swcValue = val;
@@ -42,51 +45,75 @@ let SwcChooseLi = class SwcChooseLi2 extends import_SwcHTMLLIElementBase.SwcHTML
     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);
   }
 };
 SwcChooseLi = __decorate([

package/dist/cjs/is/SwcChooseLi.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcChooseLi.ts"],
-  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLLIElementBase } from './SwcHTMLLIElementBase';\n@elementDefine({ name: 'swc-choose-li', extends: 'li' })\nexport class SwcChooseLi extends SwcHTMLLIElementBase {\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,eAA8B;AAC9B,kCAAqC;;;;;;;AAE9B,IAAM,cAAN,MAAMA,qBAAoB,iDAAoB;EAA9C,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;MADvB,wBAAc,EAAE,MAAM,iBAAiB,SAAS,KAAI,CAAE;GAC1C,WAAW;",
+  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLLIElementBase } from './SwcHTMLLIElementBase';\n\ninterface Branch {\n  tpl: HTMLElement;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose-li', extends: 'li' })\nexport class SwcChooseLi extends SwcHTMLLIElementBase {\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,eAA8B;AAC9B,kCAAqC;;;;;;;AAQ9B,IAAM,cAAN,MAAMA,qBAAoB,iDAAoB;EAA9C,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;MADvB,wBAAc,EAAE,MAAM,iBAAiB,SAAS,KAAI,CAAE;GAC1C,WAAW;",
   "names": ["SwcChooseLi"]
 }

package/dist/cjs/is/SwcChooseLink.js

@@ -33,6 +33,9 @@ let SwcChooseLink = class SwcChooseLink2 extends import_SwcHTMLLinkElementBase.S
     super(...arguments);
     this._observer = null;
     this._swcValue = void 0;
+    this._branches = [];
+    this._otherBranch = null;
+    this._isInitialized = false;
   }
   set swcValue(val) {
     this._swcValue = val;
@@ -42,51 +45,75 @@ let SwcChooseLink = class SwcChooseLink2 extends import_SwcHTMLLinkElementBase.S
     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);
   }
 };
 SwcChooseLink = __decorate([

package/dist/cjs/is/SwcChooseLink.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcChooseLink.ts"],
-  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLLinkElementBase } from './SwcHTMLLinkElementBase';\n@elementDefine({ name: 'swc-choose-link', extends: 'link' })\nexport class SwcChooseLink extends SwcHTMLLinkElementBase {\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,eAA8B;AAC9B,oCAAuC;;;;;;;AAEhC,IAAM,gBAAN,MAAMA,uBAAsB,qDAAsB;EAAlD,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,gBAAa,WAAA;MADzB,wBAAc,EAAE,MAAM,mBAAmB,SAAS,OAAM,CAAE;GAC9C,aAAa;",
+  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLLinkElementBase } from './SwcHTMLLinkElementBase';\n\ninterface Branch {\n  tpl: HTMLElement;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose-link', extends: 'link' })\nexport class SwcChooseLink extends SwcHTMLLinkElementBase {\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,eAA8B;AAC9B,oCAAuC;;;;;;;AAQhC,IAAM,gBAAN,MAAMA,uBAAsB,qDAAsB;EAAlD,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,gBAAa,WAAA;MADzB,wBAAc,EAAE,MAAM,mBAAmB,SAAS,OAAM,CAAE;GAC9C,aAAa;",
   "names": ["SwcChooseLink"]
 }

package/dist/cjs/is/SwcChooseMap.js

@@ -33,6 +33,9 @@ let SwcChooseMap = class SwcChooseMap2 extends import_SwcHTMLMapElementBase.SwcH
     super(...arguments);
     this._observer = null;
     this._swcValue = void 0;
+    this._branches = [];
+    this._otherBranch = null;
+    this._isInitialized = false;
   }
   set swcValue(val) {
     this._swcValue = val;
@@ -42,51 +45,75 @@ let SwcChooseMap = class SwcChooseMap2 extends import_SwcHTMLMapElementBase.SwcH
     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);
   }
 };
 SwcChooseMap = __decorate([

package/dist/cjs/is/SwcChooseMap.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/is/SwcChooseMap.ts"],
-  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLMapElementBase } from './SwcHTMLMapElementBase';\n@elementDefine({ name: 'swc-choose-map', extends: 'map' })\nexport class SwcChooseMap extends SwcHTMLMapElementBase {\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,eAA8B;AAC9B,mCAAsC;;;;;;;AAE/B,IAAM,eAAN,MAAMA,sBAAqB,mDAAqB;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;MADxB,wBAAc,EAAE,MAAM,kBAAkB,SAAS,MAAK,CAAE;GAC5C,YAAY;",
+  "sourcesContent": ["import { elementDefine } from '../index';\nimport { SwcHTMLMapElementBase } from './SwcHTMLMapElementBase';\n\ninterface Branch {\n  tpl: HTMLElement;\n  test: string | null;\n}\n\n@elementDefine({ name: 'swc-choose-map', extends: 'map' })\nexport class SwcChooseMap extends SwcHTMLMapElementBase {\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,eAA8B;AAC9B,mCAAsC;;;;;;;AAQ/B,IAAM,eAAN,MAAMA,sBAAqB,mDAAqB;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;MADxB,wBAAc,EAAE,MAAM,kBAAkB,SAAS,MAAK,CAAE;GAC5C,YAAY;",
   "names": ["SwcChooseMap"]
 }