@dooboostore/dom-render 1.0.109 → 1.0.111

package/src/components/ComponentBase.ts

@@ -245,11 +245,11 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
           const paramTypes = ReflectUtils.getParameterTypes(this, propertyKey);
           if (paramTypes && paramTypes.length > 0 && paramTypes[0] === Array) {
               // For array methods, pass only new elements
-              method.call(this, processedNewElements, processedElements);
+              method.call(this, processedNewElements, {all: processedElements});
           } else {
               // For single element methods, pass first new element
               if (processedNewElements.length > 0) {
-                  method.call(this, processedNewElements[0]);
+                  method.call(this, processedNewElements[0], {all: processedElements, newAll: processedNewElements});
               }
           }
       }
@@ -578,7 +578,7 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
   }
 
   getFirstChild<T>(type: ConstructorType<T>): T | undefined {
-    return this._children.find(it => it instanceof type)?.instance;
+    return this._children.find(it => it.instance instanceof type)?.instance;
   }
 
   getParentThis<P>():P {
@@ -663,7 +663,7 @@ export class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBas
     }
   }
 
-  onInitRender(param: any, rawSet: RawSet) {
+  async onInitRender(param: any, rawSet: RawSet) {
     this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(debounceTime(this.componentConfig?.createChildrenDebounce??0)).subscribe(it => {
       this.onCreatedThisChildDebounce(it);
     });

package/src/components/appender/Appender.ts

@@ -33,13 +33,8 @@ export namespace Appender {
     // test() {
     //   console.log('t', this.getAttribute('appender'))
     // }
-    onInitRender(param: any, rawSet: RawSet) {
-      // console.log('--onInitRender onInitRender')
-      super.onInitRender(param, rawSet);
 
 
-    }
-
     // push(...data:D[]) {
     //   console.log('push/////', data);
     //   this.appender.push(...data);

package/src/components/checkbox/CheckBox.ts

@@ -2,22 +2,20 @@ import { ComponentBase } from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
-import { OnInitRender } from '../../lifecycle/OnInitRender';
-import { ComponentSet } from '../../components/ComponentSet';
 import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 
 export namespace CheckBox {
   export const selector = 'dr-checkbox';
   export type Attribute = {
     class?: string;
-  }
+  };
   export type ChangeOption = { type: 'initialize' | 'event' | 'attributeChange' };
   export type WrapAttribute = {
     class?: string;
     name?: string;
     checked?: boolean;
-    change?: (checked: boolean, option: ChangeOption) => void
-  }
+    change?: (checked: boolean, option: ChangeOption) => void;
+  };
 
   class CheckBoxBase extends ComponentBase<Attribute> {
     public hidden = true;
@@ -32,7 +30,7 @@ export namespace CheckBox {
     public name = 'checked';
 
     constructor() {
-      super({onlyParentType: CheckBox});
+      super({ onlyParentType: CheckBox });
     }
   }
 
@@ -45,7 +43,7 @@ export namespace CheckBox {
     public name = 'unChecked';
 
     constructor() {
-      super({onlyParentType: CheckBox});
+      super({ onlyParentType: CheckBox });
     }
   }
 
@@ -58,7 +56,8 @@ export namespace CheckBox {
     private checked = false;
     private inputElement?: HTMLInputElement;
 
-    change(option: ChangeOption, checked?: boolean) { checked = checked ?? this.checked;
+    change(option: ChangeOption, checked?: boolean) {
+      checked = checked ?? this.checked;
       this.checked = checked;
       this.setChildrenHidden(checked);
       this.getAttribute('change')?.(checked, option);
@@ -82,7 +81,7 @@ export namespace CheckBox {
       // console.log('---cr', element)
       this.inputElement = element;
       this.inputElement.checked = !!this.getAttribute('checked');
-      this.change({type: 'initialize'}, !!this.getAttribute('checked'));
+      this.change({ type: 'initialize' }, !!this.getAttribute('checked'));
     }
 
     onChangeAttrRender(name: string, val: any, other: OtherData) {
@@ -90,38 +89,36 @@ export namespace CheckBox {
       // console.log('Checkbox ChangeAttr------', name, val, this.inputElement)
       if (this.inputElement && this.getAttribute('checked') !== this.checked) {
         this.inputElement.checked = !!this.getAttribute('checked');
-        this.change({type: 'attributeChange'}, !!this.getAttribute('checked'));
+        this.change({ type: 'attributeChange' }, !!this.getAttribute('checked'));
       }
     }
-
   }
 }
 
-
-
 export default {
   checkBoxChecked: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${CheckBox.selector}-checked`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new CheckBox.Checked(), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new CheckBox.Checked(), config: config });
       }
-    })
+    });
   },
   checkBoxUnchecked: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${CheckBox.selector}-unchecked`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new CheckBox.UnChecked(), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new CheckBox.UnChecked(), config: config });
       }
-    })
+    });
   },
   checkBox: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${CheckBox.selector}`,
-      template: '<label class="${@this@.getAttribute(\'class\')}$">\n' +
+      template:
+        '<label class="${@this@.getAttribute(\'class\')}$">\n' +
         '  <input\n' +
         '    name="${@this@.getAttribute(\'name\')}$"\n' +
         '    dr-on-init="@this@.onInitInputElement($element)"\n' +
@@ -129,9 +126,9 @@ export default {
         '    type="checkbox" hidden="hidden"/>\n' +
         '  #innerHTML#\n' +
         '</label>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new CheckBox.CheckBox(...counstructorParam), config: config});
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new CheckBox.CheckBox(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/choose/Choose.ts

@@ -2,18 +2,16 @@ import { ComponentBase } from '../ComponentBase';
 import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
-import { OnInitRender } from '../../lifecycle/OnInitRender';
-import { ComponentSet } from '../../components/ComponentSet';
 import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 
 export namespace Choose {
   export const selector = 'dr-choose';
   export type Attribute<D> = {
     data: D;
-  }
+  };
   export type WhenAttribute<D> = {
     test: (data?: D | null) => boolean;
-  }
+  };
 
   class ChildOtherWiseBase<A> extends ComponentBase<A> {
     public hidden = true;
@@ -25,18 +23,17 @@ export namespace Choose {
 
   export class When<D> extends ChildBase<D> {
     constructor() {
-      super({onlyParentType: Choose<D>});
+      super({ onlyParentType: Choose<D> });
     }
   }
 
   export class OtherWise<D> extends ChildBase<D> {
     constructor() {
-      super({onlyParentType: Choose<D>});
+      super({ onlyParentType: Choose<D> });
     }
   }
 
   export class Choose<D> extends ComponentBase<Attribute<D>> {
-
     private choose?: When<D> | OtherWise<D>;
 
     onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
@@ -48,9 +45,10 @@ export namespace Choose {
       super.onChangeAttrRender(name, value, other);
       if (this.equalsAttributeName(name, 'data')) {
         this.choose = undefined;
-        const children = this.getChildren([When, OtherWise]).sort((a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0));
+        const children = this.getChildren([When, OtherWise]).sort(
+          (a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0)
+        );
         children.forEach(it => this.setChange(it as any));
-
       }
     }
 
@@ -60,7 +58,7 @@ export namespace Choose {
 
       console.log('eeeeeee?', child, child.getAttribute('test'), this.getAttribute('data'));
       if (!this.choose && child instanceof When && child.getAttribute('test')?.(this.getAttribute('data'))) {
-      console.log('eeeeeee?2');
+        console.log('eeeeeee?2');
         // console.log('------------', child.attribute?.test?.(this.attribute?.data))
         this.choose = child;
         if (child.hidden) {
@@ -83,33 +81,32 @@ export namespace Choose {
   }
 }
 
-
 export default {
   chooseWhen: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Choose.selector}-when`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Choose.When(), config: config});
+        return DomRender.run({ rootObject: new Choose.When(), config: config });
       }
-    })
+    });
   },
   chooseOtherWise: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Choose.selector}-other-wise`,
       template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Choose.OtherWise(), config: config});
+        return DomRender.run({ rootObject: new Choose.OtherWise(), config: config });
       }
-    })
+    });
   },
   choose: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Choose.selector}`,
       template: '#innerHTML#',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Choose.Choose(...counstructorParam), config: config});
+        return DomRender.run({ rootObject: new Choose.Choose(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/details/Details.ts

@@ -9,7 +9,6 @@ import { type Subscription } from '@dooboostore/core/message/Subscription';
 import { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';
 import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
 
-
 export namespace Details {
   export const selector = 'dr-details';
 
@@ -18,15 +17,15 @@ export namespace Details {
     toggle_form_reset?: boolean;
     disableOtherClickClose?: boolean;
     toggle?: (open: boolean) => void;
-  }
+  };
   export type BodyAttribute = {
-    float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
-  } & Attribute
+    float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+  } & Attribute;
 
   export type FormAttribute = {
     disabledSubmit?: null;
-    submit?: (event: SubmitEvent, element: HTMLFormElement)=>void;
-  } & BodyAttribute
+    submit?: (event: SubmitEvent, element: HTMLFormElement) => void;
+  } & BodyAttribute;
 
   // @Component({
   //   template: '<summary class="${`${@this@.getAttribute(\'class\')} details-summary-container`}$">#innerHTML#</summary>',
@@ -35,7 +34,7 @@ export namespace Details {
   // })
   export class Summary extends ComponentBase<Attribute> {
     constructor() {
-      super({onlyParentType: [Details]});
+      super({ onlyParentType: [Details] });
     }
   }
 
@@ -46,16 +45,13 @@ export namespace Details {
   export class Body extends ComponentBase<BodyAttribute> {
     private $element?: HTMLDivElement;
     constructor() {
-      super({onlyParentType: [Details]});
+      super({ onlyParentType: [Details] });
     }
   }
 
   export const isBody = (instance: any): instance is Body => {
     return instance instanceof Body;
-  }
-
-
-
+  };
 
   // @Component({
   //   template: '<form class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container details-form-container`}$" dr-on-init="@this@.$element = $element;" dr-event-submit="@this@.submit($element,$event);">#innerHTML#</form>',
@@ -65,14 +61,14 @@ export namespace Details {
   export class Form extends ComponentBase<FormAttribute> {
     private $element?: HTMLFormElement;
     constructor() {
-      super({onlyParentType: [Details]});
+      super({ onlyParentType: [Details] });
     }
     submit(element: HTMLFormElement, event: SubmitEvent) {
       if (this.hasAttribute('disabledSubmit')) {
         event.preventDefault();
       }
       if (this.hasAttribute('submit')) {
-        this.getAttribute('submit')?.(event,  element);
+        this.getAttribute('submit')?.(event, element);
       }
     }
     reset() {
@@ -81,7 +77,7 @@ export namespace Details {
   }
   export const isForm = (instance: any): instance is Form => {
     return instance instanceof Form;
-  }
+  };
 
   // @Component({
   //   template: template,
@@ -98,8 +94,7 @@ export namespace Details {
       super.onCreateRenderData(data);
     }
 
-    onCreateRender(...param: any[]): void {
-    }
+    onCreateRender(...param: any[]): void {}
 
     toggle(element: HTMLDetailsElement) {
       const toggleAttribute = this.getAttribute('toggle');
@@ -107,8 +102,8 @@ export namespace Details {
         toggleAttribute?.(element.open);
       }
     }
-    onInitRender(param: any, rawSet: RawSet): void {
-      super.onInitRender(param,rawSet);
+    async onInitRender(param: any, rawSet: RawSet) {
+      await super.onInitRender(param, rawSet);
 
       if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {
         const detailsElement = this.element;
@@ -118,18 +113,18 @@ export namespace Details {
           if (this.getAttribute('disableOtherClickClose')) {
             return;
           }
-          if (detailsElement && !detailsElement?.contains(event?.target as Node)){
+          if (detailsElement && !detailsElement?.contains(event?.target as Node)) {
             detailsElement.open = false;
           }
-        })
+        });
         if (detailsElement) {
           this.toggleSubscription = EventUtils.htmlElementEventObservable(detailsElement, 'toggle').subscribe(it => {
             if (ValidUtils.coreValidUtils.isNotNullUndefined(this.getAttribute('toggle_form_reset'))) {
               this.children?.filter(isForm).forEach(it => {
                 it.reset();
-              })
+              });
             }
-          })
+          });
         }
       }
       // console.log('aaaaaaaaaaaaaaaaaaaaa', rawSet);
@@ -139,7 +134,6 @@ export namespace Details {
       super.onChangeAttrRender(name, value, other);
     }
 
-
     onDestroyRender(...metaData: any[]): void {
       this.toggleSubscription?.unsubscribe();
       this.documentClickSubscription?.unsubscribe();
@@ -151,7 +145,6 @@ export namespace Details {
 
     // changeAttribute(attribute: { className: string } | undefined) {
     // }
-
   }
 }
 
@@ -159,29 +152,32 @@ export default {
   detailsSummary: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Details.selector}-summary`,
-      template: '<summary class="${`${@this@.getAttribute(\'class\')} details-summary-container`}$">#innerHTML#</summary>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Details.Summary(), config: config});
+      template:
+        '<summary class="${`${@this@.getAttribute(\'class\')} details-summary-container`}$">#innerHTML#</summary>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Details.Summary(), config: config });
       }
-    })
+    });
   },
   detailsBody: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Details.selector}-body`,
-      template: '<div class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container`}$" dr-on-init="@this@.$element = $element;">#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Details.Body(), config: config});
+      template:
+        '<div class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container`}$" dr-on-init="@this@.$element = $element;">#innerHTML#</div>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Details.Body(), config: config });
       }
-    })
+    });
   },
   detailsForm: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: `${Details.selector}-form`,
-      template: '<form class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container details-form-container`}$" dr-on-init="@this@.$element = $element;" dr-event-submit="@this@.submit($element,$event);">#innerHTML#</form>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Details.Form(), config: config});
+      template:
+        '<form class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container details-form-container`}$" dr-on-init="@this@.$element = $element;" dr-event-submit="@this@.submit($element,$event);">#innerHTML#</form>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Details.Form(), config: config });
       }
-    })
+    });
   },
   details: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
@@ -227,10 +223,11 @@ export default {
             /*margin-bottom: 0px;*/
         }
       `,
-      template: '<details class="${`${@this@.getAttribute(\'class\')} details-container`}$" dr-on-init="@this@.element = $element;" dr-event-toggle="@this@.toggle($element)"> #innerHTML# </details>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new Details.Details(...counstructorParam), config: config});
+      template:
+        '<details class="${`${@this@.getAttribute(\'class\')} details-container`}$" dr-on-init="@this@.element = $element;" dr-event-toggle="@this@.toggle($element)"> #innerHTML# </details>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new Details.Details(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/forOf/ForOf.ts

@@ -3,12 +3,11 @@ import { DomRender, DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 
-
 export namespace ForOf {
-  export const selector = 'System:ForOf';
+  export const selector = 'dr-for-of';
   export type Attribute<D> = {
     value: D;
-  }
+  };
 
   // @Component({
   //   template: '<div dr-for-of="@this@.data" dr-option-strip="true">#innerHTML#</div>',
@@ -23,19 +22,17 @@ export namespace ForOf {
         this.value = value;
       }
     }
-
   }
 }
 
-
 export default {
   forOf: (config?: DomRenderRunConfig) => {
     return RawSet.createComponentTargetElement({
       name: ForOf.selector,
-      template: '<div dr-for-of="@this@.data" dr-option-strip="true">#innerHTML#</div>',
-      objFactory: (e,o,r2, counstructorParam) => {
-        return DomRender.run({rootObject: new ForOf.ForOf(...counstructorParam), config: config});
+      template: '<div dr-for-of="@this@.value" >#innerHTML#</div>',
+      objFactory: (e, o, r2, counstructorParam) => {
+        return DomRender.run({ rootObject: new ForOf.ForOf(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/if/If.ts

@@ -1,6 +1,6 @@
 import { ComponentBase } from '../ComponentBase';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
-import { DomRender, DomRenderRunConfig } from '../../DomRender';
+import { DomRender } from '../../DomRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { DomRenderConfig } from '../../configs/DomRenderConfig';
@@ -15,12 +15,12 @@ export namespace If {
   // }
   export type Attribute<D> = {
     value?: null | boolean;
-  }
+  };
 
   export class If<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
     private sw: boolean = false;
 
-    onInitRender(param: any, rawSet: RawSet) {
+    async onInitRender(param: any, rawSet: RawSet) {
       super.onInitRender(param, rawSet);
     }
 
@@ -28,7 +28,7 @@ export namespace If {
       super.onChangeAttrRender(name, value, other);
 
       if (this.equalsAttributeName(name, 'value')) {
-        // console.log('------',this,name, value)
+        // console.log('--', value, typeof value);
         this.sw = value;
       }
     }
@@ -41,8 +41,6 @@ export namespace If {
 //   template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>' });
 export default {
   if: (config?: DomRenderConfig) => {
-
-
     // if (!customElements.get(If.selector)) {
     //   customElements.define(If.selector, class extends HTMLElement {
     //     constructor() {
@@ -54,10 +52,10 @@ export default {
 
     return RawSet.createComponentTargetElement({
       name: If.selector,
-      template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>',
+      template: '<div dr-if="@this@.sw" >#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
-        return DomRender.run({rootObject: new If.If(...counstructorParam), config: config});
+        return DomRender.run({ rootObject: new If.If(...counstructorParam), config: config });
       }
-    })
-  },
-}
+    });
+  }
+};

package/src/components/index.ts

@@ -1,3 +1,4 @@
+
 export * from './ComponentBase';
 export * from './ComponentRouterBase';
 export * from './ComponentSet';
@@ -30,6 +31,7 @@ import Details from './details/Details';
 import Input from './input/Input';
 import Route from './router/Route';
 import A from './a/A';
+import ForOf from './forOf/ForOf';
 
 export const drComponent = {
   ...If,
@@ -46,4 +48,5 @@ export const drComponent = {
   ...Route,
   ...RouterOutlet,
   ...A,
+...ForOf
 }