@dooboostore/simple-web-component 1.0.9 → 1.0.11

package/src/is/SwcIfChildrenTextArea.ts

@@ -1,67 +1,12 @@
 import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
-import { SwcHTMLTextAreaElementBase } from './SwcHTMLTextAreaElementBase';
+import { SwcHTMLTextAreaElementBase } from '../elements/base/SwcHTMLTextAreaElementBase';
 
 @elementDefine({ name: 'swc-if-children-textarea', extends: 'textarea' })
 export class SwcIfChildrenTextArea extends SwcHTMLTextAreaElementBase {
-  @attribute('swc-value')
-  _swcValue: any = false;
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('swc-value')
-  onValueChange() {
-    if (this._masterTplNodes.length === 0) this.initCore();
-    this.render();
-  }
-
-  set swcValue(val: any) {
-    this._swcValue = val;
-  }
-
-  get swcValue(): any {
-    return this._swcValue;
-  }
-
-  @innerHtml
-  renderTemplate() {
-    return `<slot id="tpl-slot" style="display:none;"></slot>`;
-  }
-
-  connectedCallback() {
-    this.initCore();
-    if (this._masterTplNodes.length > 0) {
-      this.innerHTML = '';
-      this.render();
-    }
-  }
-
-  private render() {
-    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');
-    if (attrValue !== null && attrValue.includes('{{')) return;
-
-    let displayValue = attrValue !== null ? attrValue : this._swcValue;
-    let isTruthy = !!displayValue;
-    if (typeof displayValue === 'string') {
-      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
-      else {
-        try {
-          isTruthy = !!new Function('return ' + displayValue)();
-        } catch (e) {
-          isTruthy = true;
-        }
-      }
-    }
-
-    this.innerHTML = '';
-    if (isTruthy && this._masterTplNodes.length > 0) {
-      this._masterTplNodes.forEach(tplNode => {
-        const clone = tplNode.cloneNode(true) as HTMLElement;
-        this.appendChild(clone);
-        if (clone.style) clone.style.display = 'contents';
-        this.applyData(clone, this._swcValue);
-      });
-    }
-  }
+  @attribute('swc-value') _swcValue: any = false;
+  @onAttributeChanged('swc-value') onValueChange() { if (this._masterTplNodes.length === 0) this.initCore(); this.render(); }
+  set swcValue(val: any) { this._swcValue = val; } get swcValue(): any { return this._swcValue; }
+  @innerHtml renderTemplate() { return `<slot id="tpl-slot" style="display:none;"></slot>`; }
+  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
+  private render() { const attrValue = this.getAttribute('swc-value') || this.getAttribute('value'); if (attrValue !== null && attrValue.includes('{{')) return; let displayValue = attrValue !== null ? attrValue : this._swcValue; let isTruthy = !!displayValue; if (typeof displayValue === 'string') { if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false; else { try { isTruthy = !!new Function('return ' + displayValue)(); } catch (e) { isTruthy = true; } } } this.innerHTML = ''; if (isTruthy && this._masterTplNodes.length > 0) { this._masterTplNodes.forEach(tplNode => { const clone = tplNode.cloneNode(true) as HTMLElement; this.appendChild(clone); if (clone.style) clone.style.display = 'contents'; this.applyData(clone, this._swcValue); }); } }
 }

package/src/is/SwcIfChildrenTime.ts

@@ -1,67 +1,12 @@
 import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
-import { SwcHTMLTimeElementBase } from './SwcHTMLTimeElementBase';
+import { SwcHTMLTimeElementBase } from '../elements/base/SwcHTMLTimeElementBase';
 
 @elementDefine({ name: 'swc-if-children-time', extends: 'time' })
 export class SwcIfChildrenTime extends SwcHTMLTimeElementBase {
-  @attribute('swc-value')
-  _swcValue: any = false;
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('swc-value')
-  onValueChange() {
-    if (this._masterTplNodes.length === 0) this.initCore();
-    this.render();
-  }
-
-  set swcValue(val: any) {
-    this._swcValue = val;
-  }
-
-  get swcValue(): any {
-    return this._swcValue;
-  }
-
-  @innerHtml
-  renderTemplate() {
-    return `<slot id="tpl-slot" style="display:none;"></slot>`;
-  }
-
-  connectedCallback() {
-    this.initCore();
-    if (this._masterTplNodes.length > 0) {
-      this.innerHTML = '';
-      this.render();
-    }
-  }
-
-  private render() {
-    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');
-    if (attrValue !== null && attrValue.includes('{{')) return;
-
-    let displayValue = attrValue !== null ? attrValue : this._swcValue;
-    let isTruthy = !!displayValue;
-    if (typeof displayValue === 'string') {
-      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
-      else {
-        try {
-          isTruthy = !!new Function('return ' + displayValue)();
-        } catch (e) {
-          isTruthy = true;
-        }
-      }
-    }
-
-    this.innerHTML = '';
-    if (isTruthy && this._masterTplNodes.length > 0) {
-      this._masterTplNodes.forEach(tplNode => {
-        const clone = tplNode.cloneNode(true) as HTMLElement;
-        this.appendChild(clone);
-        if (clone.style) clone.style.display = 'contents';
-        this.applyData(clone, this._swcValue);
-      });
-    }
-  }
+  @attribute('swc-value') _swcValue: any = false;
+  @onAttributeChanged('swc-value') onValueChange() { if (this._masterTplNodes.length === 0) this.initCore(); this.render(); }
+  set swcValue(val: any) { this._swcValue = val; } get swcValue(): any { return this._swcValue; }
+  @innerHtml renderTemplate() { return `<slot id="tpl-slot" style="display:none;"></slot>`; }
+  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
+  private render() { const attrValue = this.getAttribute('swc-value') || this.getAttribute('value'); if (attrValue !== null && attrValue.includes('{{')) return; let displayValue = attrValue !== null ? attrValue : this._swcValue; let isTruthy = !!displayValue; if (typeof displayValue === 'string') { if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false; else { try { isTruthy = !!new Function('return ' + displayValue)(); } catch (e) { isTruthy = true; } } } this.innerHTML = ''; if (isTruthy && this._masterTplNodes.length > 0) { this._masterTplNodes.forEach(tplNode => { const clone = tplNode.cloneNode(true) as HTMLElement; this.appendChild(clone); if (clone.style) clone.style.display = 'contents'; this.applyData(clone, this._swcValue); }); } }
 }

package/src/is/SwcIfChildrenTitle.ts

@@ -1,67 +1,12 @@
 import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
-import { SwcHTMLTitleElementBase } from './SwcHTMLTitleElementBase';
+import { SwcHTMLTitleElementBase } from '../elements/base/SwcHTMLTitleElementBase';
 
 @elementDefine({ name: 'swc-if-children-title', extends: 'title' })
 export class SwcIfChildrenTitle extends SwcHTMLTitleElementBase {
-  @attribute('swc-value')
-  _swcValue: any = false;
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('swc-value')
-  onValueChange() {
-    if (this._masterTplNodes.length === 0) this.initCore();
-    this.render();
-  }
-
-  set swcValue(val: any) {
-    this._swcValue = val;
-  }
-
-  get swcValue(): any {
-    return this._swcValue;
-  }
-
-  @innerHtml
-  renderTemplate() {
-    return `<slot id="tpl-slot" style="display:none;"></slot>`;
-  }
-
-  connectedCallback() {
-    this.initCore();
-    if (this._masterTplNodes.length > 0) {
-      this.innerHTML = '';
-      this.render();
-    }
-  }
-
-  private render() {
-    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');
-    if (attrValue !== null && attrValue.includes('{{')) return;
-
-    let displayValue = attrValue !== null ? attrValue : this._swcValue;
-    let isTruthy = !!displayValue;
-    if (typeof displayValue === 'string') {
-      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
-      else {
-        try {
-          isTruthy = !!new Function('return ' + displayValue)();
-        } catch (e) {
-          isTruthy = true;
-        }
-      }
-    }
-
-    this.innerHTML = '';
-    if (isTruthy && this._masterTplNodes.length > 0) {
-      this._masterTplNodes.forEach(tplNode => {
-        const clone = tplNode.cloneNode(true) as HTMLElement;
-        this.appendChild(clone);
-        if (clone.style) clone.style.display = 'contents';
-        this.applyData(clone, this._swcValue);
-      });
-    }
-  }
+  @attribute('swc-value') _swcValue: any = false;
+  @onAttributeChanged('swc-value') onValueChange() { if (this._masterTplNodes.length === 0) this.initCore(); this.render(); }
+  set swcValue(val: any) { this._swcValue = val; } get swcValue(): any { return this._swcValue; }
+  @innerHtml renderTemplate() { return `<slot id="tpl-slot" style="display:none;"></slot>`; }
+  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
+  private render() { const attrValue = this.getAttribute('swc-value') || this.getAttribute('value'); if (attrValue !== null && attrValue.includes('{{')) return; let displayValue = attrValue !== null ? attrValue : this._swcValue; let isTruthy = !!displayValue; if (typeof displayValue === 'string') { if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false; else { try { isTruthy = !!new Function('return ' + displayValue)(); } catch (e) { isTruthy = true; } } } this.innerHTML = ''; if (isTruthy && this._masterTplNodes.length > 0) { this._masterTplNodes.forEach(tplNode => { const clone = tplNode.cloneNode(true) as HTMLElement; this.appendChild(clone); if (clone.style) clone.style.display = 'contents'; this.applyData(clone, this._swcValue); }); } }
 }

package/src/is/SwcIfChildrenTrack.ts

@@ -1,67 +1,12 @@
 import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
-import { SwcHTMLTrackElementBase } from './SwcHTMLTrackElementBase';
+import { SwcHTMLTrackElementBase } from '../elements/base/SwcHTMLTrackElementBase';
 
 @elementDefine({ name: 'swc-if-children-track', extends: 'track' })
 export class SwcIfChildrenTrack extends SwcHTMLTrackElementBase {
-  @attribute('swc-value')
-  _swcValue: any = false;
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('swc-value')
-  onValueChange() {
-    if (this._masterTplNodes.length === 0) this.initCore();
-    this.render();
-  }
-
-  set swcValue(val: any) {
-    this._swcValue = val;
-  }
-
-  get swcValue(): any {
-    return this._swcValue;
-  }
-
-  @innerHtml
-  renderTemplate() {
-    return `<slot id="tpl-slot" style="display:none;"></slot>`;
-  }
-
-  connectedCallback() {
-    this.initCore();
-    if (this._masterTplNodes.length > 0) {
-      this.innerHTML = '';
-      this.render();
-    }
-  }
-
-  private render() {
-    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');
-    if (attrValue !== null && attrValue.includes('{{')) return;
-
-    let displayValue = attrValue !== null ? attrValue : this._swcValue;
-    let isTruthy = !!displayValue;
-    if (typeof displayValue === 'string') {
-      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
-      else {
-        try {
-          isTruthy = !!new Function('return ' + displayValue)();
-        } catch (e) {
-          isTruthy = true;
-        }
-      }
-    }
-
-    this.innerHTML = '';
-    if (isTruthy && this._masterTplNodes.length > 0) {
-      this._masterTplNodes.forEach(tplNode => {
-        const clone = tplNode.cloneNode(true) as HTMLElement;
-        this.appendChild(clone);
-        if (clone.style) clone.style.display = 'contents';
-        this.applyData(clone, this._swcValue);
-      });
-    }
-  }
+  @attribute('swc-value') _swcValue: any = false;
+  @onAttributeChanged('swc-value') onValueChange() { if (this._masterTplNodes.length === 0) this.initCore(); this.render(); }
+  set swcValue(val: any) { this._swcValue = val; } get swcValue(): any { return this._swcValue; }
+  @innerHtml renderTemplate() { return `<slot id="tpl-slot" style="display:none;"></slot>`; }
+  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
+  private render() { const attrValue = this.getAttribute('swc-value') || this.getAttribute('value'); if (attrValue !== null && attrValue.includes('{{')) return; let displayValue = attrValue !== null ? attrValue : this._swcValue; let isTruthy = !!displayValue; if (typeof displayValue === 'string') { if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false; else { try { isTruthy = !!new Function('return ' + displayValue)(); } catch (e) { isTruthy = true; } } } this.innerHTML = ''; if (isTruthy && this._masterTplNodes.length > 0) { this._masterTplNodes.forEach(tplNode => { const clone = tplNode.cloneNode(true) as HTMLElement; this.appendChild(clone); if (clone.style) clone.style.display = 'contents'; this.applyData(clone, this._swcValue); }); } }
 }

package/src/is/SwcIfChildrenUl.ts

@@ -1,67 +1,12 @@
 import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
-import { SwcHTMLUListElementBase } from './SwcHTMLUListElementBase';
+import { SwcHTMLUListElementBase } from '../elements/base/SwcHTMLUListElementBase';
 
 @elementDefine({ name: 'swc-if-children-ul', extends: 'ul' })
 export class SwcIfChildrenUl extends SwcHTMLUListElementBase {
-  @attribute('swc-value')
-  _swcValue: any = false;
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('swc-value')
-  onValueChange() {
-    if (this._masterTplNodes.length === 0) this.initCore();
-    this.render();
-  }
-
-  set swcValue(val: any) {
-    this._swcValue = val;
-  }
-
-  get swcValue(): any {
-    return this._swcValue;
-  }
-
-  @innerHtml
-  renderTemplate() {
-    return `<slot id="tpl-slot" style="display:none;"></slot>`;
-  }
-
-  connectedCallback() {
-    this.initCore();
-    if (this._masterTplNodes.length > 0) {
-      this.innerHTML = '';
-      this.render();
-    }
-  }
-
-  private render() {
-    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');
-    if (attrValue !== null && attrValue.includes('{{')) return;
-
-    let displayValue = attrValue !== null ? attrValue : this._swcValue;
-    let isTruthy = !!displayValue;
-    if (typeof displayValue === 'string') {
-      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
-      else {
-        try {
-          isTruthy = !!new Function('return ' + displayValue)();
-        } catch (e) {
-          isTruthy = true;
-        }
-      }
-    }
-
-    this.innerHTML = '';
-    if (isTruthy && this._masterTplNodes.length > 0) {
-      this._masterTplNodes.forEach(tplNode => {
-        const clone = tplNode.cloneNode(true) as HTMLElement;
-        this.appendChild(clone);
-        if (clone.style) clone.style.display = 'contents';
-        this.applyData(clone, this._swcValue);
-      });
-    }
-  }
+  @attribute('swc-value') _swcValue: any = false;
+  @onAttributeChanged('swc-value') onValueChange() { if (this._masterTplNodes.length === 0) this.initCore(); this.render(); }
+  set swcValue(val: any) { this._swcValue = val; } get swcValue(): any { return this._swcValue; }
+  @innerHtml renderTemplate() { return `<slot id="tpl-slot" style="display:none;"></slot>`; }
+  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
+  private render() { const attrValue = this.getAttribute('swc-value') || this.getAttribute('value'); if (attrValue !== null && attrValue.includes('{{')) return; let displayValue = attrValue !== null ? attrValue : this._swcValue; let isTruthy = !!displayValue; if (typeof displayValue === 'string') { if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false; else { try { isTruthy = !!new Function('return ' + displayValue)(); } catch (e) { isTruthy = true; } } } this.innerHTML = ''; if (isTruthy && this._masterTplNodes.length > 0) { this._masterTplNodes.forEach(tplNode => { const clone = tplNode.cloneNode(true) as HTMLElement; this.appendChild(clone); if (clone.style) clone.style.display = 'contents'; this.applyData(clone, this._swcValue); }); } }
 }

package/src/is/SwcIfChildrenVideo.ts

@@ -1,67 +1,12 @@
 import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
-import { SwcHTMLVideoElementBase } from './SwcHTMLVideoElementBase';
+import { SwcHTMLVideoElementBase } from '../elements/base/SwcHTMLVideoElementBase';
 
 @elementDefine({ name: 'swc-if-children-video', extends: 'video' })
 export class SwcIfChildrenVideo extends SwcHTMLVideoElementBase {
-  @attribute('swc-value')
-  _swcValue: any = false;
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('swc-value')
-  onValueChange() {
-    if (this._masterTplNodes.length === 0) this.initCore();
-    this.render();
-  }
-
-  set swcValue(val: any) {
-    this._swcValue = val;
-  }
-
-  get swcValue(): any {
-    return this._swcValue;
-  }
-
-  @innerHtml
-  renderTemplate() {
-    return `<slot id="tpl-slot" style="display:none;"></slot>`;
-  }
-
-  connectedCallback() {
-    this.initCore();
-    if (this._masterTplNodes.length > 0) {
-      this.innerHTML = '';
-      this.render();
-    }
-  }
-
-  private render() {
-    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');
-    if (attrValue !== null && attrValue.includes('{{')) return;
-
-    let displayValue = attrValue !== null ? attrValue : this._swcValue;
-    let isTruthy = !!displayValue;
-    if (typeof displayValue === 'string') {
-      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
-      else {
-        try {
-          isTruthy = !!new Function('return ' + displayValue)();
-        } catch (e) {
-          isTruthy = true;
-        }
-      }
-    }
-
-    this.innerHTML = '';
-    if (isTruthy && this._masterTplNodes.length > 0) {
-      this._masterTplNodes.forEach(tplNode => {
-        const clone = tplNode.cloneNode(true) as HTMLElement;
-        this.appendChild(clone);
-        if (clone.style) clone.style.display = 'contents';
-        this.applyData(clone, this._swcValue);
-      });
-    }
-  }
+  @attribute('swc-value') _swcValue: any = false;
+  @onAttributeChanged('swc-value') onValueChange() { if (this._masterTplNodes.length === 0) this.initCore(); this.render(); }
+  set swcValue(val: any) { this._swcValue = val; } get swcValue(): any { return this._swcValue; }
+  @innerHtml renderTemplate() { return `<slot id="tpl-slot" style="display:none;"></slot>`; }
+  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
+  private render() { const attrValue = this.getAttribute('swc-value') || this.getAttribute('value'); if (attrValue !== null && attrValue.includes('{{')) return; let displayValue = attrValue !== null ? attrValue : this._swcValue; let isTruthy = !!displayValue; if (typeof displayValue === 'string') { if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false; else { try { isTruthy = !!new Function('return ' + displayValue)(); } catch (e) { isTruthy = true; } } } this.innerHTML = ''; if (isTruthy && this._masterTplNodes.length > 0) { this._masterTplNodes.forEach(tplNode => { const clone = tplNode.cloneNode(true) as HTMLElement; this.appendChild(clone); if (clone.style) clone.style.display = 'contents'; this.applyData(clone, this._swcValue); }); } }
 }

package/src/is/SwcIfData.ts

@@ -1,67 +1,13 @@
 import { attribute, elementDefine, onAttributeChanged } from '../index';
-import { SwcHTMLDataElementBase } from './SwcHTMLDataElementBase';
+import { SwcHTMLDataElementBase } from '../elements/base/SwcHTMLDataElementBase';
 
 @elementDefine({ name: 'swc-if-data', extends: 'data' })
 export class SwcIfData extends SwcHTMLDataElementBase {
   private _placeholder = document.createComment("swc-if-placeholder");
-  private _isShowing = true;
-  private _isInitialized = false;
-
-  @attribute('swc-value')
-  _swcValue: any = false;
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('swc-value')
-  onValueChange() {
-    this.evaluate();
-  }
-
-  set swcValue(val: any) {
-    this._swcValue = val;
-  }
-
-  get swcValue(): any {
-    return this._swcValue;
-  }
-
-  connectedCallback() {
-    if (this._isInitialized) return;
-    this._isInitialized = true;
-    this.evaluate();
-  }
-
-  private evaluate() {
-    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');
-    if (attrValue !== null && attrValue.includes('{{')) return;
-
-    let displayValue = attrValue !== null ? attrValue : this._swcValue;
-    let isTruthy = !!displayValue;
-    if (typeof displayValue === 'string') {
-      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
-      else {
-        try {
-          isTruthy = !!new Function('return ' + displayValue)();
-        } catch (e) {
-          isTruthy = true;
-        }
-      }
-    }
-
-    if (!isTruthy && this._isShowing) {
-      if (this.parentNode) {
-        this.parentNode.insertBefore(this._placeholder, this);
-        this.remove();
-        this._isShowing = false;
-      }
-    } else if (isTruthy && !this._isShowing) {
-      if (this._placeholder.parentNode) {
-        this._placeholder.parentNode.insertBefore(this, this._placeholder);
-        this._placeholder.remove();
-        this._isShowing = true;
-      }
-    }
-  }
+  private _isShowing = true; private _isInitialized = false;
+  @attribute('swc-value') _swcValue: any = false;
+  @onAttributeChanged('swc-value') onValueChange() { this.evaluate(); }
+  set swcValue(val: any) { this._swcValue = val; } get swcValue(): any { return this._swcValue; }
+  connectedCallback() { if (this._isInitialized) return; this._isInitialized = true; this.evaluate(); }
+  private evaluate() { const attrValue = this.getAttribute('swc-value') || this.getAttribute('value'); if (attrValue !== null && attrValue.includes('{{')) return; let displayValue = attrValue !== null ? attrValue : this._swcValue; let isTruthy = !!displayValue; if (typeof displayValue === 'string') { if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false; else { try { isTruthy = !!new Function('return ' + displayValue)(); } catch (e) { isTruthy = true; } } } if (!isTruthy && this._isShowing) { if (this.parentNode) { this.parentNode.insertBefore(this._placeholder, this); this.remove(); this._isShowing = false; } } else if (isTruthy && !this._isShowing) { if (this._placeholder.parentNode) { this._placeholder.parentNode.insertBefore(this, this._placeholder); this._placeholder.remove(); this._isShowing = true; } } }
 }

package/src/is/SwcIfDataList.ts

@@ -1,67 +1,13 @@
 import { attribute, elementDefine, onAttributeChanged } from '../index';
-import { SwcHTMLDataListElementBase } from './SwcHTMLDataListElementBase';
+import { SwcHTMLDataListElementBase } from '../elements/base/SwcHTMLDataListElementBase';
 
 @elementDefine({ name: 'swc-if-datalist', extends: 'datalist' })
 export class SwcIfDataList extends SwcHTMLDataListElementBase {
   private _placeholder = document.createComment("swc-if-placeholder");
-  private _isShowing = true;
-  private _isInitialized = false;
-
-  @attribute('swc-value')
-  _swcValue: any = false;
-
-  constructor() {
-    super();
-  }
-
-  @onAttributeChanged('swc-value')
-  onValueChange() {
-    this.evaluate();
-  }
-
-  set swcValue(val: any) {
-    this._swcValue = val;
-  }
-
-  get swcValue(): any {
-    return this._swcValue;
-  }
-
-  connectedCallback() {
-    if (this._isInitialized) return;
-    this._isInitialized = true;
-    this.evaluate();
-  }
-
-  private evaluate() {
-    const attrValue = this.getAttribute('swc-value') || this.getAttribute('value');
-    if (attrValue !== null && attrValue.includes('{{')) return;
-
-    let displayValue = attrValue !== null ? attrValue : this._swcValue;
-    let isTruthy = !!displayValue;
-    if (typeof displayValue === 'string') {
-      if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false;
-      else {
-        try {
-          isTruthy = !!new Function('return ' + displayValue)();
-        } catch (e) {
-          isTruthy = true;
-        }
-      }
-    }
-
-    if (!isTruthy && this._isShowing) {
-      if (this.parentNode) {
-        this.parentNode.insertBefore(this._placeholder, this);
-        this.remove();
-        this._isShowing = false;
-      }
-    } else if (isTruthy && !this._isShowing) {
-      if (this._placeholder.parentNode) {
-        this._placeholder.parentNode.insertBefore(this, this._placeholder);
-        this._placeholder.remove();
-        this._isShowing = true;
-      }
-    }
-  }
+  private _isShowing = true; private _isInitialized = false;
+  @attribute('swc-value') _swcValue: any = false;
+  @onAttributeChanged('swc-value') onValueChange() { this.evaluate(); }
+  set swcValue(val: any) { this._swcValue = val; } get swcValue(): any { return this._swcValue; }
+  connectedCallback() { if (this._isInitialized) return; this._isInitialized = true; this.evaluate(); }
+  private evaluate() { const attrValue = this.getAttribute('swc-value') || this.getAttribute('value'); if (attrValue !== null && attrValue.includes('{{')) return; let displayValue = attrValue !== null ? attrValue : this._swcValue; let isTruthy = !!displayValue; if (typeof displayValue === 'string') { if (displayValue === 'false' || displayValue === '0' || displayValue === '') isTruthy = false; else { try { isTruthy = !!new Function('return ' + displayValue)(); } catch (e) { isTruthy = true; } } } if (!isTruthy && this._isShowing) { if (this.parentNode) { this.parentNode.insertBefore(this._placeholder, this); this.remove(); this._isShowing = false; } } else if (isTruthy && !this._isShowing) { if (this._placeholder.parentNode) { this._placeholder.parentNode.insertBefore(this, this._placeholder); this._placeholder.remove(); this._isShowing = true; } } }
 }