@dooboostore/simple-web-component 1.0.5 → 1.0.6

package/src/decorators/emitCustomEvent.ts

@@ -0,0 +1,57 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export interface EmitCustomEventOptions {
+  type: string;
+  attributeName?: string; // Default: on + type
+  bubbles?: boolean; // Default: true
+  composed?: boolean; // Default: true
+  cancelable?: boolean;
+}
+
+export interface EmitCustomEventMetadata {
+  propertyKey: string | symbol;
+  options: EmitCustomEventOptions;
+}
+
+export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol('simple-web-component:emit-custom-event');
+
+export function emitCustomEvent(typeOrOptions: string | EmitCustomEventOptions): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = target.constructor;
+    const options: EmitCustomEventOptions = typeof typeOrOptions === 'string' ? { type: typeOrOptions } : typeOrOptions;
+
+    if (!options.attributeName) {
+      options.attributeName = `on${options.type}`;
+    }
+    if (options.bubbles === undefined) options.bubbles = true;
+    if (options.composed === undefined) options.composed = true;
+
+    let list = ReflectUtils.getMetadata<EmitCustomEventMetadata[]>(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+
+    // Wrap the original method to dispatch event after execution
+    const originalMethod = descriptor.value;
+    descriptor.value = function (this: HTMLElement, ...args: any[]) {
+      const detail = originalMethod.apply(this, args);
+
+      const event = new CustomEvent(options.type, {
+        detail,
+        bubbles: options.bubbles,
+        composed: options.composed,
+        cancelable: options.cancelable
+      });
+
+      this.dispatchEvent(event);
+      return detail;
+    };
+  };
+}
+
+export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+};

package/src/decorators/lifecycles.ts

@@ -6,6 +6,10 @@ export const ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:
 export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol('simple-web-component:on-after-disconnected');
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol('simple-web-component:on-after-adopted');
+export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:on-add-event-listener');
+export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
+
+export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
 function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
@@ -21,17 +25,53 @@ function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
 
 export const onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
 export const onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
-export const onConnected = onAfterConnected; // Alias for backward compatibility
+export const onConnected = onAfterConnected;
 
 export const onBeforeDisconnected = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
 export const onAfterDisconnected = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
-export const onDisconnected = onAfterDisconnected; // Alias
+export const onDisconnected = onAfterDisconnected;
 
 export const onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
 export const onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
-export const onAdopted = onAfterAdopted; // Alias
+export const onAdopted = onAfterAdopted;
+
+export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+
+export function onAttributeChanged(attributeName: string | string[]): MethodDecorator;
+export function onAttributeChanged(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onAttributeChanged(arg1: string | string[] | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  const decorator = (attributeName: string, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getMetadata<Map<string, (string | symbol)[]>>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = new Map<string, (string | symbol)[]>();
+      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+    }
+
+    let methods = meta.get(attributeName);
+    if (!methods) {
+      methods = [];
+      meta.set(attributeName, methods);
+    }
+    if (!methods.includes(propertyKey)) {
+      methods.push(propertyKey);
+    }
+  };
+
+  if (typeof arg1 === 'string') {
+    return (target: Object, propertyKey: string | symbol) => {
+      decorator(arg1, target, propertyKey);
+    };
+  } else if (Array.isArray(arg1)) {
+    return (target: Object, propertyKey: string | symbol) => {
+      arg1.forEach(name => decorator(name, target, propertyKey));
+    };
+  } else if (arg1 && arg2) {
+    decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);
+  }
+}
 
-export const getLifecycleMetadata = (target: any, metadataKey: symbol): (string | symbol)[] | undefined => {
+export const getLifecycleMetadata = (target: any, metadataKey: symbol): any => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(metadataKey, constructor);
 };

package/src/decorators/state.ts

@@ -0,0 +1,44 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+
+export interface StateOptions {
+  name?: string;
+}
+
+export interface StateMetadata {
+  propertyKey: string | symbol;
+  options: StateOptions;
+}
+
+export const STATE_METADATA_KEY = Symbol('simple-web-component:state');
+
+export function state(nameOrOptions: string | StateOptions): PropertyDecorator;
+export function state(target: Object, propertyKey: string | symbol): void;
+export function state(arg1?: string | StateOptions | Object, arg2?: string | symbol): PropertyDecorator | void {
+  const decorator = (options: StateOptions, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    if (!options.name) options.name = String(propertyKey);
+
+    let list = ReflectUtils.getMetadata<StateMetadata[]>(STATE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(STATE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+
+  if (arg2) {
+    // Used as @state
+    return decorator({}, arg1!, arg2);
+  }
+
+  // Used as @state(options)
+  return (target: Object, propertyKey: string | symbol) => {
+    const options: StateOptions = typeof arg1 === 'string' ? { name: arg1 } : (arg1 as StateOptions) || {};
+    decorator(options, target, propertyKey);
+  };
+}
+
+export const getStateMetadataList = (target: any): StateMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor);
+};

package/src/index.ts

@@ -1,7 +1,9 @@
 import 'reflect-metadata';
 export * from './decorators/elementDefine';
 export * from './decorators/innerHtml';
-export * from './decorators/attributeChanged';
+export * from './decorators/attribute';
+export * from './decorators/state';
+export * from './decorators/emitCustomEvent';
 export * from './decorators/lifecycles';
 export * from './decorators/query';
 export * from './decorators/queryAll';

package/src/is/SwcChooseAnchor.ts

@@ -69,7 +69,6 @@ export class SwcChooseAnchor extends SwcHTMLAnchorElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseArea.ts

@@ -69,7 +69,6 @@ export class SwcChooseArea extends SwcHTMLAreaElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseAudio.ts

@@ -69,7 +69,6 @@ export class SwcChooseAudio extends SwcHTMLAudioElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseBase.ts

@@ -69,7 +69,6 @@ export class SwcChooseBase extends SwcHTMLBaseElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseButton.ts

@@ -69,7 +69,6 @@ export class SwcChooseButton extends SwcHTMLButtonElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseCanvas.ts

@@ -69,7 +69,6 @@ export class SwcChooseCanvas extends SwcHTMLCanvasElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseData.ts

@@ -69,7 +69,6 @@ export class SwcChooseData extends SwcHTMLDataElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDataList.ts

@@ -69,7 +69,6 @@ export class SwcChooseDataList extends SwcHTMLDataListElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDetails.ts

@@ -69,7 +69,6 @@ export class SwcChooseDetails extends SwcHTMLDetailsElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDialog.ts

@@ -69,7 +69,6 @@ export class SwcChooseDialog extends SwcHTMLDialogElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDiv.ts

@@ -69,7 +69,6 @@ export class SwcChooseDiv extends SwcHTMLDivElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseDl.ts

@@ -69,7 +69,6 @@ export class SwcChooseDl extends SwcHTMLDListElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseEmbed.ts

@@ -69,7 +69,6 @@ export class SwcChooseEmbed extends SwcHTMLEmbedElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseFieldSet.ts

@@ -69,7 +69,6 @@ export class SwcChooseFieldSet extends SwcHTMLFieldSetElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseForm.ts

@@ -69,7 +69,6 @@ export class SwcChooseForm extends SwcHTMLFormElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseHeading.ts

@@ -69,7 +69,6 @@ export class SwcChooseHeading extends SwcHTMLHeadingElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseHr.ts

@@ -69,7 +69,6 @@ export class SwcChooseHr extends SwcHTMLHRElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseIFrame.ts

@@ -69,7 +69,6 @@ export class SwcChooseIFrame extends SwcHTMLIFrameElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseImage.ts

@@ -69,7 +69,6 @@ export class SwcChooseImage extends SwcHTMLImageElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseInput.ts

@@ -69,7 +69,6 @@ export class SwcChooseInput extends SwcHTMLInputElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseLabel.ts

@@ -69,7 +69,6 @@ export class SwcChooseLabel extends SwcHTMLLabelElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseLegend.ts

@@ -69,7 +69,6 @@ export class SwcChooseLegend extends SwcHTMLLegendElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseLi.ts

@@ -69,7 +69,6 @@ export class SwcChooseLi extends SwcHTMLLIElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseLink.ts

@@ -69,7 +69,6 @@ export class SwcChooseLink extends SwcHTMLLinkElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseMap.ts

@@ -69,7 +69,6 @@ export class SwcChooseMap extends SwcHTMLMapElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseMeta.ts

@@ -69,7 +69,6 @@ export class SwcChooseMeta extends SwcHTMLMetaElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseMeter.ts

@@ -69,7 +69,6 @@ export class SwcChooseMeter extends SwcHTMLMeterElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseMod.ts

@@ -69,7 +69,6 @@ export class SwcChooseMod extends SwcHTMLModElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseObject.ts

@@ -69,7 +69,6 @@ export class SwcChooseObject extends SwcHTMLObjectElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseOl.ts

@@ -69,7 +69,6 @@ export class SwcChooseOl extends SwcHTMLOListElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseOptGroup.ts

@@ -69,7 +69,6 @@ export class SwcChooseOptGroup extends SwcHTMLOptGroupElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseOption.ts

@@ -69,7 +69,6 @@ export class SwcChooseOption extends SwcHTMLOptionElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseOutput.ts

@@ -69,7 +69,6 @@ export class SwcChooseOutput extends SwcHTMLOutputElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseParagraph.ts

@@ -69,7 +69,6 @@ export class SwcChooseParagraph extends SwcHTMLParagraphElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseParam.ts

@@ -69,7 +69,6 @@ export class SwcChooseParam extends SwcHTMLParamElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChoosePicture.ts

@@ -69,7 +69,6 @@ export class SwcChoosePicture extends SwcHTMLPictureElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChoosePre.ts

@@ -69,7 +69,6 @@ export class SwcChoosePre extends SwcHTMLPreElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseProgress.ts

@@ -69,7 +69,6 @@ export class SwcChooseProgress extends SwcHTMLProgressElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseQuote.ts

@@ -69,7 +69,6 @@ export class SwcChooseQuote extends SwcHTMLQuoteElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseScript.ts

@@ -69,7 +69,6 @@ export class SwcChooseScript extends SwcHTMLScriptElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseSelect.ts

@@ -69,7 +69,6 @@ export class SwcChooseSelect extends SwcHTMLSelectElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseSlot.ts

@@ -69,7 +69,6 @@ export class SwcChooseSlot extends SwcHTMLSlotElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseSource.ts

@@ -69,7 +69,6 @@ export class SwcChooseSource extends SwcHTMLSourceElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseSpan.ts

@@ -69,7 +69,6 @@ export class SwcChooseSpan extends SwcHTMLSpanElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseStyle.ts

@@ -69,7 +69,6 @@ export class SwcChooseStyle extends SwcHTMLStyleElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseTable.ts

@@ -69,7 +69,6 @@ export class SwcChooseTable extends SwcHTMLTableElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseTableCell.ts

@@ -69,7 +69,6 @@ export class SwcChooseTableCell extends SwcHTMLTableCellElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseTableRow.ts

@@ -69,7 +69,6 @@ export class SwcChooseTableRow extends SwcHTMLTableRowElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);

package/src/is/SwcChooseTableSection.ts

@@ -69,7 +69,6 @@ export class SwcChooseTableSection extends SwcHTMLTableSectionElementBase {
 
   private _renderBranch(branch: Branch) {
     const clone = branch.tpl.cloneNode(true) as HTMLElement;
-    // Force visibility since it hides itself in connectedCallback
     clone.style.display = 'contents';
     this.appendChild(clone);
     this.applyData(clone, this._swcValue);