@zcomponent/html 0.0.1 → 0.0.3

package/lib/CSS.d.ts

@@ -1,9 +1,14 @@
-import { Component, ConstructorProps, ContextManager } from '@zcomponent/core';
-interface CSSConstructorProps extends ConstructorProps {
+import { Component, ContextManager } from '@zcomponent/core';
+interface CSSConstructorProps {
     /** @zprop
      * @zvalues files *.css
      */
     source: string;
+    /**
+     * @zprop
+     * @zdefault true
+     */
+    includeAtDesignTime: boolean;
 }
 /**
  * The CSS component will ensure that the CSS file referenced by its `source` constructor prop is added to your page and loaded by the browser.
@@ -13,9 +18,10 @@ interface CSSConstructorProps extends ConstructorProps {
  * @zcomponent
  * @zicon html
  */
-export declare class CSS extends Component<CSSConstructorProps> {
+export declare class CSS extends Component {
+    protected constructorProps: CSSConstructorProps;
     private _elm;
-    constructor(props: CSSConstructorProps, contextManager: ContextManager);
+    constructor(contextManager: ContextManager, constructorProps: CSSConstructorProps);
     dispose(): never;
 }
 export {};

package/lib/CSS.js

@@ -1,4 +1,4 @@
-import { Component, registerLoadable } from '@zcomponent/core';
+import { Component, isDesignTime, registerLoadable } from '@zcomponent/core';
 const alreadyAdded = new Map();
 /**
  * The CSS component will ensure that the CSS file referenced by its `source` constructor prop is added to your page and loaded by the browser.
@@ -9,11 +9,12 @@ const alreadyAdded = new Map();
  * @zicon html
  */
 export class CSS extends Component {
-    constructor(props, contextManager) {
-        super(props, contextManager);
-        if (!props.source)
+    constructor(contextManager, constructorProps) {
+        super(contextManager, constructorProps);
+        this.constructorProps = constructorProps;
+        if (!constructorProps.source || (constructorProps.includeAtDesignTime === false && isDesignTime(contextManager)))
             return;
-        this._elm = alreadyAdded.get(props.source);
+        this._elm = alreadyAdded.get(constructorProps.source);
         if (this._elm)
             this._elm[0]++;
         else {
@@ -23,12 +24,12 @@ export class CSS extends Component {
                 this._elm[1].addEventListener('error', reject);
             }));
             this._elm[1].setAttribute('rel', 'stylesheet');
-            this._elm[1].setAttribute('href', props.source);
+            this._elm[1].setAttribute('href', constructorProps.source);
             if (document.head)
                 document.head.appendChild(this._elm[1]);
             else if (document.body)
                 document.body.appendChild(this._elm[1]);
-            alreadyAdded.set(props.source, this._elm);
+            alreadyAdded.set(constructorProps.source, this._elm);
         }
     }
     dispose() {

package/lib/HTMLElement.d.ts

@@ -1,101 +1,102 @@
-import { Component, ComponentChildren, ConstructorProps, ContextManager, Event, Observable } from '@zcomponent/core';
+import { Component, ConstructorProps, ContextManager, Event, Observable } from '@zcomponent/core';
 export interface HTMLElementProps extends ConstructorProps {
-    children?: ComponentChildren;
     /** @zprop */
     innerText?: string;
 }
 export declare class ZHTMLElement<T extends HTMLElement> extends Component {
-    root: T;
+    element: T;
     /** @zprop */
     onClick: Event<[MouseEvent]>;
-    constructor(props: HTMLElementProps, contextManager: ContextManager, root: T);
+    constructor(contextManager: ContextManager, props: HTMLElementProps, element: T);
+    appendChild(c: Component): void;
+    private _connectChild;
     private _cssLengthObservable;
     private _attachEvent;
     /** @zprop */
-    id: Observable<string>;
+    id: Observable<string, never>;
     /** @zprop */
-    classList: Observable<string[]>;
+    classList: Observable<string[], never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Position
      */
-    left: Observable<[number, CSSLengthUnit] | undefined>;
+    left: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Position
      */
-    right: Observable<[number, CSSLengthUnit] | undefined>;
+    right: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Position
      */
-    top: Observable<[number, CSSLengthUnit] | undefined>;
+    top: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Position
      */
-    bottom: Observable<[number, CSSLengthUnit] | undefined>;
+    bottom: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Size
      */
-    width: Observable<[number, CSSLengthUnit] | undefined>;
+    width: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Size
      */
-    height: Observable<[number, CSSLengthUnit] | undefined>;
+    height: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Spacing
      */
-    marginLeft: Observable<[number, CSSLengthUnit] | undefined>;
+    marginLeft: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Spacing
      */
-    marginRight: Observable<[number, CSSLengthUnit] | undefined>;
+    marginRight: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Spacing
      */
-    marginTop: Observable<[number, CSSLengthUnit] | undefined>;
+    marginTop: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Spacing
      */
-    marginBottom: Observable<[number, CSSLengthUnit] | undefined>;
+    marginBottom: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Spacing
      */
-    paddingLeft: Observable<[number, CSSLengthUnit] | undefined>;
+    paddingLeft: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Spacing
      */
-    paddingRight: Observable<[number, CSSLengthUnit] | undefined>;
+    paddingRight: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Spacing
      */
-    paddingTop: Observable<[number, CSSLengthUnit] | undefined>;
+    paddingTop: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zdefault [0, "px"]
      * @zgroup Spacing
      */
-    paddingBottom: Observable<[number, CSSLengthUnit] | undefined>;
+    paddingBottom: Observable<[number, CSSLengthUnit] | undefined, never>;
     /** @zprop
      * @zgroup Position
      * @zdefault static
      */
-    position: Observable<CSSPosition>;
+    position: Observable<CSSPosition, never>;
     /** @zprop */
-    display: Observable<CSSDisplay | undefined>;
+    display: Observable<CSSDisplay | undefined, never>;
     /** @zprop
      * @zdefault row
      */
-    flexDirection: Observable<CSSFlexDirection>;
+    flexDirection: Observable<CSSFlexDirection, never>;
     dispose(): never;
 }
 export declare enum CSSLengthUnit {

package/lib/HTMLElement.js

@@ -1,15 +1,15 @@
 import { Component, Event, Observable } from '@zcomponent/core';
 import { useOnNodeConstructed, useOnNodeDisposed } from './context';
 export class ZHTMLElement extends Component {
-    constructor(props, contextManager, root) {
-        super(props, contextManager);
-        this.root = root;
+    constructor(contextManager, props, element) {
+        super(contextManager, props);
+        this.element = element;
         /** @zprop */
         this.onClick = new Event();
         /** @zprop */
-        this.id = new Observable('', v => (this.root.id = v));
+        this.id = new Observable('', v => (this.element.id = v));
         /** @zprop */
-        this.classList = new Observable([], v => (this.root.className = v.join(' ')));
+        this.classList = new Observable([], v => (this.element.className = v.join(' ')));
         /** @zprop
          * @zdefault [0, "px"]
          * @zgroup Position
@@ -84,42 +84,51 @@ export class ZHTMLElement extends Component {
          * @zgroup Position
          * @zdefault static
          */
-        this.position = new Observable(CSSPosition.static, v => (this.root.style.position = v));
+        this.position = new Observable(CSSPosition.static, v => (this.element.style.position = v));
         /** @zprop */
-        this.display = new Observable(undefined, v => (this.root.style.display = v ?? ''));
+        this.display = new Observable(undefined, v => (this.element.style.display = v ?? ''));
         /** @zprop
          * @zdefault row
          */
-        this.flexDirection = new Observable(CSSFlexDirection.row, v => (this.root.style.flexDirection = v));
+        this.flexDirection = new Observable(CSSFlexDirection.row, v => (this.element.style.flexDirection = v));
         if (props.innerText !== undefined)
-            root.innerText = props.innerText;
+            element.innerText = props.innerText;
         for (const child of this.children) {
-            child.forEachRoot(root => {
-                if (root instanceof Node)
-                    this.root.appendChild(root);
-            });
+            this._connectChild(child);
         }
         this._attachEvent(this.onClick, 'click');
-        useOnNodeConstructed(contextManager).emit(this.root);
+        useOnNodeConstructed(contextManager).emit(this.element);
+    }
+    appendChild(c) {
+        super.appendChild(c);
+        this._connectChild(c);
+    }
+    _connectChild(c) {
+        if (!this.element)
+            return;
+        for (const element of c.elementsResolved) {
+            if (element instanceof Node)
+                this.element.appendChild(element);
+        }
     }
     _cssLengthObservable(prop) {
         return new Observable(undefined, v => {
-            this.root.style[prop] = converCSSLength(v) ?? '';
+            this.element.style[prop] = converCSSLength(v) ?? '';
         });
     }
     _attachEvent(evt, evtName) {
         const handler = (e) => {
             evt.emit(e);
         };
-        evt.hasBindings.withValue(b => {
+        evt.hasListeners.addListener(b => {
             if (b)
-                this.root.addEventListener(evtName, handler);
+                this.element.addEventListener(evtName, handler);
             else
-                this.root.removeEventListener(evtName, handler);
+                this.element.removeEventListener(evtName, handler);
         });
     }
     dispose() {
-        useOnNodeDisposed(this.contextManager).emit(this.root);
+        useOnNodeDisposed(this.contextManager).emit(this.element);
         return super.dispose();
     }
 }

package/lib/button.d.ts

@@ -1,11 +1,10 @@
 import { ContextManager } from '@zcomponent/core';
 import { HTMLElementProps, ZHTMLElement } from './HTMLElement';
-export declare type ButtonConstructorProps = HTMLElementProps;
 /** @zcomponent
  * @ztag html/element/button
  * @zparents html/element/**
  * @zicon html
  */
 export declare class Button extends ZHTMLElement<HTMLButtonElement> {
-    constructor(props: ButtonConstructorProps, mgr: ContextManager);
+    constructor(mgr: ContextManager, props: HTMLElementProps);
 }

package/lib/button.js

@@ -5,7 +5,7 @@ import { ZHTMLElement } from './HTMLElement';
  * @zicon html
  */
 export class Button extends ZHTMLElement {
-    constructor(props, mgr) {
-        super(props, mgr, document.createElement('button'));
+    constructor(mgr, props) {
+        super(mgr, props, document.createElement('button'));
     }
 }

package/lib/context.d.ts

@@ -1,10 +1,7 @@
-import { Event, ContextManager } from '@zcomponent/core';
-export interface HTMLContextProperties {
+import { Event, ContextManager, Context } from '@zcomponent/core';
+export declare class HTMLContext extends Context {
+    onNodeConstructed: Event<[Node]>;
+    onNodeDisposed: Event<[Node]>;
 }
-export interface HTMLContext {
-    readonly onNodeConstructed: Event<[Node]>;
-    readonly onNodeDisposed: Event<[Node]>;
-}
-export declare const HTMLContext: import("@zcomponent/core").ContextTypeWithDefault<HTMLContext, [props?: HTMLContextProperties | undefined]>;
 export declare function useOnNodeConstructed(mgr: ContextManager): Event<[Node]>;
 export declare function useOnNodeDisposed(mgr: ContextManager): Event<[Node]>;

package/lib/context.js

@@ -1,10 +1,11 @@
-import { defineContextType, Event } from '@zcomponent/core';
-export const HTMLContext = defineContextType((ctx, props) => {
-    return {
-        onNodeConstructed: new Event(),
-        onNodeDisposed: new Event(),
-    };
-});
+import { Event, Context } from '@zcomponent/core';
+export class HTMLContext extends Context {
+    constructor() {
+        super(...arguments);
+        this.onNodeConstructed = new Event();
+        this.onNodeDisposed = new Event();
+    }
+}
 export function useOnNodeConstructed(mgr) {
     return mgr.get(HTMLContext).onNodeConstructed;
 }

package/lib/div.d.ts

@@ -1,11 +1,10 @@
 import { ContextManager } from '@zcomponent/core';
 import { HTMLElementProps, ZHTMLElement } from './HTMLElement';
-export declare type ButtonConstructorProps = HTMLElementProps;
 /** @zcomponent
  * @ztag html/element/div
  * @zparents html/element/**
  * @zicon html
  */
 export declare class Div extends ZHTMLElement<HTMLDivElement> {
-    constructor(props: ButtonConstructorProps, mgr: ContextManager);
+    constructor(mgr: ContextManager, props: HTMLElementProps);
 }

package/lib/div.js

@@ -5,7 +5,7 @@ import { ZHTMLElement } from './HTMLElement';
  * @zicon html
  */
 export class Div extends ZHTMLElement {
-    constructor(props, mgr) {
-        super(props, mgr, document.createElement('div'));
+    constructor(mgr, props) {
+        super(mgr, props, document.createElement('div'));
     }
 }

package/lib/img.d.ts

@@ -14,5 +14,5 @@ export interface ImgConstructorProps extends HTMLElementProps {
  * @zparents html/element/**
  */
 export declare class Img extends ZHTMLElement<HTMLImageElement> {
-    constructor(props: ImgConstructorProps, mgr: ContextManager);
+    constructor(mgr: ContextManager, props: ImgConstructorProps);
 }

package/lib/img.js

@@ -6,13 +6,13 @@ import { ZHTMLElement } from './HTMLElement';
  * @zparents html/element/**
  */
 export class Img extends ZHTMLElement {
-    constructor(props, mgr) {
+    constructor(mgr, props) {
         const elm = document.createElement('img');
         registerLoadable(mgr, new Promise((resolve, reject) => {
             elm.src = props.src;
             elm.addEventListener('load', () => resolve());
             elm.addEventListener('error', () => reject());
         }));
-        super(props, mgr, elm);
+        super(mgr, props, elm);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/html",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -18,10 +18,10 @@
   "author": "Zappar Limited",
   "license": "Proprietary",
   "dependencies": {
-    "@zcomponent/core": "~0.0.2"
+    "@zcomponent/core": "~0.0.15"
   },
   "devDependencies": {
-    "typescript": "^4.6.3"
+    "typescript": "^4.9.4"
   },
   "zexports": [
     "./lib/**/*"