@dooboostore/simple-web-component 1.0.4 → 1.0.6

package/src/is/SwcObjectBase.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLBaseElementBase } from './SwcHTMLBaseElementBase';
+
 @elementDefine({ name: 'swc-object-base', extends: 'base' })
 export class SwcObjectBase extends SwcHTMLBaseElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }

package/src/is/SwcObjectButton.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLButtonElementBase } from './SwcHTMLButtonElementBase';
+
 @elementDefine({ name: 'swc-object-button', extends: 'button' })
 export class SwcObjectButton extends SwcHTMLButtonElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }

package/src/is/SwcObjectCanvas.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLCanvasElementBase } from './SwcHTMLCanvasElementBase';
+
 @elementDefine({ name: 'swc-object-canvas', extends: 'canvas' })
 export class SwcObjectCanvas extends SwcHTMLCanvasElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }

package/src/is/SwcObjectData.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLDataElementBase } from './SwcHTMLDataElementBase';
+
 @elementDefine({ name: 'swc-object-data', extends: 'data' })
 export class SwcObjectData extends SwcHTMLDataElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }

package/src/is/SwcObjectDataList.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLDataListElementBase } from './SwcHTMLDataListElementBase';
+
 @elementDefine({ name: 'swc-object-datalist', extends: 'datalist' })
 export class SwcObjectDataList extends SwcHTMLDataListElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }

package/src/is/SwcObjectDetails.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLDetailsElementBase } from './SwcHTMLDetailsElementBase';
+
 @elementDefine({ name: 'swc-object-details', extends: 'details' })
 export class SwcObjectDetails extends SwcHTMLDetailsElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }

package/src/is/SwcObjectDialog.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLDialogElementBase } from './SwcHTMLDialogElementBase';
+
 @elementDefine({ name: 'swc-object-dialog', extends: 'dialog' })
 export class SwcObjectDialog extends SwcHTMLDialogElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }

package/src/is/SwcObjectDiv.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLDivElementBase } from './SwcHTMLDivElementBase';
+
 @elementDefine({ name: 'swc-object-div', extends: 'div' })
 export class SwcObjectDiv extends SwcHTMLDivElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }

package/src/is/SwcObjectDl.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLDListElementBase } from './SwcHTMLDListElementBase';
+
 @elementDefine({ name: 'swc-object-dl', extends: 'dl' })
 export class SwcObjectDl extends SwcHTMLDListElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }

package/src/is/SwcObjectEmbed.ts

@@ -1,24 +1,56 @@
-import { elementDefine } from '../index';
+import { elementDefine, innerHtml } from '../index';
 import { SwcHTMLEmbedElementBase } from './SwcHTMLEmbedElementBase';
+
 @elementDefine({ name: 'swc-object-embed', extends: 'embed' })
 export class SwcObjectEmbed extends SwcHTMLEmbedElementBase {
   private _swcValue: any = {};
   private _renderedNodes: Node[] = [];
+
+  constructor() {
+    super();
+  }
+
   set swcValue(val: any) {
     if (typeof val !== 'object' || val === null) val = {};
     this._swcValue = this.createReactiveProxy(val, () => this.updateUI());
     if (this._masterTplNodes.length === 0) this.initCore();
     this.render();
   }
-  get swcValue(): any { return this._swcValue; }
-  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
-  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
+
+  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 updateUI() {
+    this._renderedNodes.forEach(node => {
+      this.applyData(node, this._swcValue);
+    });
+  }
+
   private render() {
-    this.innerHTML = ''; this._renderedNodes = [];
+    this.innerHTML = '';
+    this._renderedNodes = [];
     if (this._masterTplNodes.length === 0) return;
+
     this._masterTplNodes.forEach(tplNode => {
-      const clone = tplNode.cloneNode(true);
-      this.appendChild(clone); this._renderedNodes.push(clone); this.applyData(clone, this._swcValue);
+      const clone = tplNode.cloneNode(true) as HTMLElement;
+      this.appendChild(clone);
+      if (clone.style) clone.style.display = 'contents';
+      this._renderedNodes.push(clone);
+      this.applyData(clone, this._swcValue);
     });
   }
 }