@dooboostore/simple-web-component 1.0.3 → 1.0.4

package/src/is/SwcChooseMod.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLModElementBase } from './SwcHTMLModElementBase';
+@elementDefine({ name: 'swc-choose-del', extends: 'del' })
+export class SwcChooseMod extends SwcHTMLModElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseObject.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLObjectElementBase } from './SwcHTMLObjectElementBase';
+@elementDefine({ name: 'swc-choose-object', extends: 'object' })
+export class SwcChooseObject extends SwcHTMLObjectElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseOl.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLOListElementBase } from './SwcHTMLOListElementBase';
+@elementDefine({ name: 'swc-choose-ol', extends: 'ol' })
+export class SwcChooseOl extends SwcHTMLOListElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseOptGroup.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLOptGroupElementBase } from './SwcHTMLOptGroupElementBase';
+@elementDefine({ name: 'swc-choose-optgroup', extends: 'optgroup' })
+export class SwcChooseOptGroup extends SwcHTMLOptGroupElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseOption.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLOptionElementBase } from './SwcHTMLOptionElementBase';
+@elementDefine({ name: 'swc-choose-option', extends: 'option' })
+export class SwcChooseOption extends SwcHTMLOptionElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseOutput.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLOutputElementBase } from './SwcHTMLOutputElementBase';
+@elementDefine({ name: 'swc-choose-output', extends: 'output' })
+export class SwcChooseOutput extends SwcHTMLOutputElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseParagraph.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLParagraphElementBase } from './SwcHTMLParagraphElementBase';
+@elementDefine({ name: 'swc-choose-p', extends: 'p' })
+export class SwcChooseParagraph extends SwcHTMLParagraphElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseParam.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLParamElementBase } from './SwcHTMLParamElementBase';
+@elementDefine({ name: 'swc-choose-param', extends: 'param' })
+export class SwcChooseParam extends SwcHTMLParamElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChoosePicture.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLPictureElementBase } from './SwcHTMLPictureElementBase';
+@elementDefine({ name: 'swc-choose-picture', extends: 'picture' })
+export class SwcChoosePicture extends SwcHTMLPictureElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChoosePre.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLPreElementBase } from './SwcHTMLPreElementBase';
+@elementDefine({ name: 'swc-choose-pre', extends: 'pre' })
+export class SwcChoosePre extends SwcHTMLPreElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseProgress.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLProgressElementBase } from './SwcHTMLProgressElementBase';
+@elementDefine({ name: 'swc-choose-progress', extends: 'progress' })
+export class SwcChooseProgress extends SwcHTMLProgressElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseQuote.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLQuoteElementBase } from './SwcHTMLQuoteElementBase';
+@elementDefine({ name: 'swc-choose-blockquote', extends: 'blockquote' })
+export class SwcChooseQuote extends SwcHTMLQuoteElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseScript.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLScriptElementBase } from './SwcHTMLScriptElementBase';
+@elementDefine({ name: 'swc-choose-script', extends: 'script' })
+export class SwcChooseScript extends SwcHTMLScriptElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseSelect.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLSelectElementBase } from './SwcHTMLSelectElementBase';
+@elementDefine({ name: 'swc-choose-select', extends: 'select' })
+export class SwcChooseSelect extends SwcHTMLSelectElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseSlot.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLSlotElementBase } from './SwcHTMLSlotElementBase';
+@elementDefine({ name: 'swc-choose-slot', extends: 'slot' })
+export class SwcChooseSlot extends SwcHTMLSlotElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseSource.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLSourceElementBase } from './SwcHTMLSourceElementBase';
+@elementDefine({ name: 'swc-choose-source', extends: 'source' })
+export class SwcChooseSource extends SwcHTMLSourceElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseSpan.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLSpanElementBase } from './SwcHTMLSpanElementBase';
+@elementDefine({ name: 'swc-choose-span', extends: 'span' })
+export class SwcChooseSpan extends SwcHTMLSpanElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseStyle.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLStyleElementBase } from './SwcHTMLStyleElementBase';
+@elementDefine({ name: 'swc-choose-style', extends: 'style' })
+export class SwcChooseStyle extends SwcHTMLStyleElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}

package/src/is/SwcChooseTable.ts

@@ -0,0 +1,31 @@
+import { elementDefine } from '../index';
+import { SwcHTMLTableElementBase } from './SwcHTMLTableElementBase';
+@elementDefine({ name: 'swc-choose-table', extends: 'table' })
+export class SwcChooseTable extends SwcHTMLTableElementBase {
+  private _observer: MutationObserver | null = null;
+  private _swcValue: any = undefined;
+  set swcValue(val: any) { this._swcValue = val; this.evaluate(); }
+  get swcValue() { return this._swcValue; }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() { this._observer?.disconnect(); }
+  private evaluate() {
+    const whens = Array.from(this.querySelectorAll('[is^="swc-when-"], swc-when'));
+    const other = this.querySelector('[is^="swc-other-"], swc-other');
+    let matched = false;
+    const chooseValue = this.getAttribute('swc-value') ?? this.getAttribute('value') ?? this._swcValue;
+    whens.forEach(when => {
+      if (matched) { (when as HTMLElement).style.display = 'none'; return; }
+      const testAttr = when.getAttribute('test');
+      if (testAttr === null || testAttr.includes('{{')) return;
+      let isConditionMet = false;
+      if (chooseValue !== undefined && chooseValue !== null) { isConditionMet = String(chooseValue) === String(testAttr); }
+      else { try { if (testAttr === 'true') isConditionMet = true; else if (testAttr === 'false') isConditionMet = false; else isConditionMet = !!new Function('return ' + testAttr)(); } catch (e) { isConditionMet = false; } }
+      if (isConditionMet) { (when as HTMLElement).style.display = ''; matched = true; } else { (when as HTMLElement).style.display = 'none'; }
+    });
+    if (other) { (other as HTMLElement).style.display = matched ? 'none' : ''; }
+  }
+}