@zcomponent/html 0.0.1

package/index.d.ts

@@ -0,0 +1 @@
+export * from './lib';

package/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable node/no-unsupported-features/es-syntax */
+export * from './lib';

package/lib/CSS.d.ts

@@ -0,0 +1,21 @@
+import { Component, ConstructorProps, ContextManager } from '@zcomponent/core';
+interface CSSConstructorProps extends ConstructorProps {
+    /** @zprop
+     * @zvalues files *.css
+     */
+    source: string;
+}
+/**
+ * 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.
+ *
+ * This component is particularly useful if you'd like to style with CSS any HTML elements that you've added to your Hierarchy.
+ *
+ * @zcomponent
+ * @zicon html
+ */
+export declare class CSS extends Component<CSSConstructorProps> {
+    private _elm;
+    constructor(props: CSSConstructorProps, contextManager: ContextManager);
+    dispose(): never;
+}
+export {};

package/lib/CSS.js

@@ -0,0 +1,44 @@
+import { Component, 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.
+ *
+ * This component is particularly useful if you'd like to style with CSS any HTML elements that you've added to your Hierarchy.
+ *
+ * @zcomponent
+ * @zicon html
+ */
+export class CSS extends Component {
+    constructor(props, contextManager) {
+        super(props, contextManager);
+        if (!props.source)
+            return;
+        this._elm = alreadyAdded.get(props.source);
+        if (this._elm)
+            this._elm[0]++;
+        else {
+            this._elm = [1, document.createElement('link')];
+            registerLoadable(contextManager, new Promise((resolve, reject) => {
+                this._elm[1].addEventListener('load', resolve);
+                this._elm[1].addEventListener('error', reject);
+            }));
+            this._elm[1].setAttribute('rel', 'stylesheet');
+            this._elm[1].setAttribute('href', props.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);
+        }
+    }
+    dispose() {
+        if (this._elm) {
+            this._elm[0] = this._elm[0] - 1;
+            if (this._elm[0] <= 0) {
+                this._elm[1]?.remove();
+                alreadyAdded.delete(this.constructorProps.source);
+            }
+        }
+        return super.dispose();
+    }
+}

package/lib/HTMLElement.d.ts

@@ -0,0 +1,140 @@
+import { Component, ComponentChildren, 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;
+    /** @zprop */
+    onClick: Event<[MouseEvent]>;
+    constructor(props: HTMLElementProps, contextManager: ContextManager, root: T);
+    private _cssLengthObservable;
+    private _attachEvent;
+    /** @zprop */
+    id: Observable<string>;
+    /** @zprop */
+    classList: Observable<string[]>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Position
+     */
+    left: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Position
+     */
+    right: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Position
+     */
+    top: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Position
+     */
+    bottom: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Size
+     */
+    width: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Size
+     */
+    height: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Spacing
+     */
+    marginLeft: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Spacing
+     */
+    marginRight: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Spacing
+     */
+    marginTop: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Spacing
+     */
+    marginBottom: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Spacing
+     */
+    paddingLeft: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Spacing
+     */
+    paddingRight: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Spacing
+     */
+    paddingTop: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zdefault [0, "px"]
+     * @zgroup Spacing
+     */
+    paddingBottom: Observable<[number, CSSLengthUnit] | undefined>;
+    /** @zprop
+     * @zgroup Position
+     * @zdefault static
+     */
+    position: Observable<CSSPosition>;
+    /** @zprop */
+    display: Observable<CSSDisplay | undefined>;
+    /** @zprop
+     * @zdefault row
+     */
+    flexDirection: Observable<CSSFlexDirection>;
+    dispose(): never;
+}
+export declare enum CSSLengthUnit {
+    'cm' = "cm",
+    'mm' = "mm",
+    'in' = "in",
+    'px' = "px",
+    'pt' = "pt",
+    'pc' = "pc",
+    'em' = "em",
+    'ex' = "ex",
+    'ch' = "ch",
+    'rem' = "rem",
+    'vw' = "vw",
+    'vh' = "vh",
+    'vmin' = "vmin",
+    'vmax' = "vmax",
+    '%' = "%"
+}
+export declare enum CSSPosition {
+    'static' = "static",
+    'relative' = "relative",
+    'absolute' = "absolute",
+    'fixed' = "fixed",
+    'sticky' = "sticky"
+}
+export declare enum CSSDisplay {
+    'none' = "none",
+    'block' = "block",
+    'inline' = "inline",
+    'inline-block' = "inline-block",
+    'flex' = "flex",
+    'inline-flex' = "inline-flex",
+    'grid' = "grid",
+    'inline-grid' = "inline-grid"
+}
+export declare enum CSSFlexDirection {
+    'row' = "row",
+    'row-reverse' = "row-reverse",
+    'column' = "column",
+    'column-reverse' = "column-reverse"
+}

package/lib/HTMLElement.js

@@ -0,0 +1,174 @@
+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;
+        /** @zprop */
+        this.onClick = new Event();
+        /** @zprop */
+        this.id = new Observable('', v => (this.root.id = v));
+        /** @zprop */
+        this.classList = new Observable([], v => (this.root.className = v.join(' ')));
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Position
+         */
+        this.left = this._cssLengthObservable('left');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Position
+         */
+        this.right = this._cssLengthObservable('right');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Position
+         */
+        this.top = this._cssLengthObservable('top');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Position
+         */
+        this.bottom = this._cssLengthObservable('bottom');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Size
+         */
+        this.width = this._cssLengthObservable('width');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Size
+         */
+        this.height = this._cssLengthObservable('height');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Spacing
+         */
+        this.marginLeft = this._cssLengthObservable('marginLeft');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Spacing
+         */
+        this.marginRight = this._cssLengthObservable('marginRight');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Spacing
+         */
+        this.marginTop = this._cssLengthObservable('marginTop');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Spacing
+         */
+        this.marginBottom = this._cssLengthObservable('marginBottom');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Spacing
+         */
+        this.paddingLeft = this._cssLengthObservable('paddingLeft');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Spacing
+         */
+        this.paddingRight = this._cssLengthObservable('paddingRight');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Spacing
+         */
+        this.paddingTop = this._cssLengthObservable('paddingTop');
+        /** @zprop
+         * @zdefault [0, "px"]
+         * @zgroup Spacing
+         */
+        this.paddingBottom = this._cssLengthObservable('paddingBottom');
+        /** @zprop
+         * @zgroup Position
+         * @zdefault static
+         */
+        this.position = new Observable(CSSPosition.static, v => (this.root.style.position = v));
+        /** @zprop */
+        this.display = new Observable(undefined, v => (this.root.style.display = v ?? ''));
+        /** @zprop
+         * @zdefault row
+         */
+        this.flexDirection = new Observable(CSSFlexDirection.row, v => (this.root.style.flexDirection = v));
+        if (props.innerText !== undefined)
+            root.innerText = props.innerText;
+        for (const child of this.children) {
+            child.forEachRoot(root => {
+                if (root instanceof Node)
+                    this.root.appendChild(root);
+            });
+        }
+        this._attachEvent(this.onClick, 'click');
+        useOnNodeConstructed(contextManager).emit(this.root);
+    }
+    _cssLengthObservable(prop) {
+        return new Observable(undefined, v => {
+            this.root.style[prop] = converCSSLength(v) ?? '';
+        });
+    }
+    _attachEvent(evt, evtName) {
+        const handler = (e) => {
+            evt.emit(e);
+        };
+        evt.hasBindings.withValue(b => {
+            if (b)
+                this.root.addEventListener(evtName, handler);
+            else
+                this.root.removeEventListener(evtName, handler);
+        });
+    }
+    dispose() {
+        useOnNodeDisposed(this.contextManager).emit(this.root);
+        return super.dispose();
+    }
+}
+function converCSSLength(v) {
+    if (v === undefined)
+        return undefined;
+    return v[0].toString() + v[1];
+}
+export var CSSLengthUnit;
+(function (CSSLengthUnit) {
+    CSSLengthUnit["cm"] = "cm";
+    CSSLengthUnit["mm"] = "mm";
+    CSSLengthUnit["in"] = "in";
+    CSSLengthUnit["px"] = "px";
+    CSSLengthUnit["pt"] = "pt";
+    CSSLengthUnit["pc"] = "pc";
+    CSSLengthUnit["em"] = "em";
+    CSSLengthUnit["ex"] = "ex";
+    CSSLengthUnit["ch"] = "ch";
+    CSSLengthUnit["rem"] = "rem";
+    CSSLengthUnit["vw"] = "vw";
+    CSSLengthUnit["vh"] = "vh";
+    CSSLengthUnit["vmin"] = "vmin";
+    CSSLengthUnit["vmax"] = "vmax";
+    CSSLengthUnit["%"] = "%";
+})(CSSLengthUnit || (CSSLengthUnit = {}));
+export var CSSPosition;
+(function (CSSPosition) {
+    CSSPosition["static"] = "static";
+    CSSPosition["relative"] = "relative";
+    CSSPosition["absolute"] = "absolute";
+    CSSPosition["fixed"] = "fixed";
+    CSSPosition["sticky"] = "sticky";
+})(CSSPosition || (CSSPosition = {}));
+export var CSSDisplay;
+(function (CSSDisplay) {
+    CSSDisplay["none"] = "none";
+    CSSDisplay["block"] = "block";
+    CSSDisplay["inline"] = "inline";
+    CSSDisplay["inline-block"] = "inline-block";
+    CSSDisplay["flex"] = "flex";
+    CSSDisplay["inline-flex"] = "inline-flex";
+    CSSDisplay["grid"] = "grid";
+    CSSDisplay["inline-grid"] = "inline-grid";
+})(CSSDisplay || (CSSDisplay = {}));
+export var CSSFlexDirection;
+(function (CSSFlexDirection) {
+    CSSFlexDirection["row"] = "row";
+    CSSFlexDirection["row-reverse"] = "row-reverse";
+    CSSFlexDirection["column"] = "column";
+    CSSFlexDirection["column-reverse"] = "column-reverse";
+})(CSSFlexDirection || (CSSFlexDirection = {}));

package/lib/button.d.ts

@@ -0,0 +1,11 @@
+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);
+}

package/lib/button.js

@@ -0,0 +1,11 @@
+import { ZHTMLElement } from './HTMLElement';
+/** @zcomponent
+ * @ztag html/element/button
+ * @zparents html/element/**
+ * @zicon html
+ */
+export class Button extends ZHTMLElement {
+    constructor(props, mgr) {
+        super(props, mgr, document.createElement('button'));
+    }
+}

package/lib/context.d.ts

@@ -0,0 +1,10 @@
+import { Event, ContextManager } from '@zcomponent/core';
+export interface HTMLContextProperties {
+}
+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

@@ -0,0 +1,13 @@
+import { defineContextType, Event } from '@zcomponent/core';
+export const HTMLContext = defineContextType((ctx, props) => {
+    return {
+        onNodeConstructed: new Event(),
+        onNodeDisposed: new Event(),
+    };
+});
+export function useOnNodeConstructed(mgr) {
+    return mgr.get(HTMLContext).onNodeConstructed;
+}
+export function useOnNodeDisposed(mgr) {
+    return mgr.get(HTMLContext).onNodeDisposed;
+}

package/lib/div.d.ts

@@ -0,0 +1,11 @@
+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);
+}

package/lib/div.js

@@ -0,0 +1,11 @@
+import { ZHTMLElement } from './HTMLElement';
+/** @zcomponent
+ * @ztag html/element/div
+ * @zparents html/element/**
+ * @zicon html
+ */
+export class Div extends ZHTMLElement {
+    constructor(props, mgr) {
+        super(props, mgr, document.createElement('div'));
+    }
+}

package/lib/img.d.ts

@@ -0,0 +1,18 @@
+import { ContextManager } from '@zcomponent/core';
+import { HTMLElementProps, ZHTMLElement } from './HTMLElement';
+export interface ImgConstructorProps extends HTMLElementProps {
+    /** @zprop
+     * @zvalues files *.jpg
+     * @zvalues files *.jpeg
+     * @zvalues files *.png
+     */
+    src: string;
+}
+/** @zcomponent
+ * @ztag html/element/img
+ * @zicon html
+ * @zparents html/element/**
+ */
+export declare class Img extends ZHTMLElement<HTMLImageElement> {
+    constructor(props: ImgConstructorProps, mgr: ContextManager);
+}

package/lib/img.js

@@ -0,0 +1,18 @@
+import { registerLoadable } from '@zcomponent/core';
+import { ZHTMLElement } from './HTMLElement';
+/** @zcomponent
+ * @ztag html/element/img
+ * @zicon html
+ * @zparents html/element/**
+ */
+export class Img extends ZHTMLElement {
+    constructor(props, mgr) {
+        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);
+    }
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@zcomponent/html",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "build": "tsc"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "lib/**/*"
+  ],
+  "author": "Zappar Limited",
+  "license": "Proprietary",
+  "dependencies": {
+    "@zcomponent/core": "~0.0.2"
+  },
+  "devDependencies": {
+    "typescript": "^4.6.3"
+  },
+  "zexports": [
+    "./lib/**/*"
+  ]
+}