@zcomponent/html 2.0.0-alpha.1 → 2.0.0-alpha.2

package/index.js

@@ -1,4 +1 @@
-/* eslint-disable n/no-unsupported-features/es-syntax */
-/* eslint-disable n/no-missing-import */
-
 export * from './lib';

package/lib/CSS.d.ts

@@ -1,12 +1,11 @@
-import { Component, ContextManager } from '@zcomponent/core';
-interface CSSConstructorProps {
-    /** @zprop
-     * @zvalues files *.css
+import { Component, ConstructorProps, ContextManager, ProjectFile } from '@zcomponent/core';
+interface CSSConstructorProps extends ConstructorProps {
+    /**
      */
-    source: string;
+    source: ProjectFile<'*.css'>;
     /**
-     * @zprop
-     * @zdefault true
+     *
+     * @default true
      */
     includeAtDesignTime: boolean;
 }
@@ -14,7 +13,6 @@ interface CSSConstructorProps {
  * 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
  */

package/lib/CSS.js

@@ -1,49 +1,101 @@
-import { Component, isDesignTime, registerLoadable } from '@zcomponent/core';
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { Component, isDesignTime, registerLoadable, zComponent } from '@zcomponent/core';
 import { HTMLContext } from './context';
 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(contextManager, constructorProps) {
-        super(contextManager, constructorProps);
-        this.constructorProps = constructorProps;
-        if (!constructorProps.source || (constructorProps.includeAtDesignTime === false && isDesignTime(contextManager)))
-            return;
-        this._elm = alreadyAdded.get(constructorProps.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', () => {
-                    contextManager.get(HTMLContext).onCSSChanged.emit();
-                    resolve();
-                });
-                this._elm[1].addEventListener('error', reject);
-            }));
-            this._elm[1].setAttribute('rel', 'stylesheet');
-            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(constructorProps.source, this._elm);
+let CSS = (() => {
+    let _classDecorators = [zComponent({ icon: 'html' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    var CSS = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            CSS = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
         }
-    }
-    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);
+        constructorProps;
+        _elm;
+        constructor(contextManager, constructorProps) {
+            super(contextManager, constructorProps);
+            this.constructorProps = constructorProps;
+            if (!constructorProps.source || (constructorProps.includeAtDesignTime === false && isDesignTime(contextManager)))
+                return;
+            this._elm = alreadyAdded.get(constructorProps.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', () => {
+                        contextManager.get(HTMLContext).onCSSChanged.emit();
+                        resolve();
+                    });
+                    this._elm[1].addEventListener('error', reject);
+                }));
+                this._elm[1].setAttribute('rel', 'stylesheet');
+                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(constructorProps.source, this._elm);
             }
         }
-        return super.dispose();
-    }
-}
+        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();
+        }
+    };
+    return CSS = _classThis;
+})();
+export { CSS };

package/lib/HTMLElement.d.ts

@@ -1,146 +1,226 @@
-import { Component, ConstructorProps, ContextManager, Event, Observable } from '@zcomponent/core';
+import { Component, ConstructorProps, ContextManager, Event, ValueOf } from '@zcomponent/core';
 export interface HTMLElementProps extends ConstructorProps {
+    /**
+     * @zignore
+     */
     innerText?: string;
 }
 export declare class ZHTMLElement<T extends HTMLElement> extends Component {
-    element: T;
-    /** @zprop */
     onClick: Event<[MouseEvent]>;
     /**
-     * @zprop
+     * The inner text of the element.
+     * @default ""
+     * @zui
      * @ztype text-multiline
-     * @zgrouppriority 21
      */
-    innerText: Observable<string, never>;
+    innerText: string;
+    /**
+     * @zignore
+     */
+    element: T;
+    /**
+     * Creates a new ZHTMLElement.
+     * @param contextManager - The context manager
+     * @param props - The properties of the element
+     * @param element  - The element to wrap
+     */
     constructor(contextManager: ContextManager, props: HTMLElementProps, element: T);
-    appendChild(c: Component): void;
-    private _connectChild;
-    private _cssLengthObservable;
+    connectElements(): void;
     private _attachEvent;
-    /** @zprop */
-    id: Observable<string, never>;
-    /** @zprop */
-    classList: Observable<string[], never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    /**
+     * @default ""
+     */
+    id: string;
+    /**
+     * @default []
+     */
+    classList: string[];
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Position
      */
-    left: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    left: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Position
      */
-    right: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    right: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Position
      */
-    top: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    top: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Position
      */
-    bottom: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    bottom: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Size
      */
-    width: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    width: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Size
      */
-    height: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    height: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Spacing
      */
-    marginLeft: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    marginLeft: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Spacing
      */
-    marginRight: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    marginRight: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Spacing
      */
-    marginTop: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    marginTop: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Spacing
      */
-    marginBottom: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    marginBottom: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Spacing
      */
-    paddingLeft: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    paddingLeft: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Spacing
      */
-    paddingRight: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    paddingRight: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Spacing
      */
-    paddingTop: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
-     * @zdefault [0, "px"]
+    paddingTop: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default [0,"px"]
+     * @zui
      * @zgroup Spacing
      */
-    paddingBottom: Observable<[number, CSSLengthUnit] | undefined, never>;
-    /** @zprop
+    paddingBottom: [
+        number,
+        CSSLengthUnitValue
+    ] | undefined;
+    /**
+     * @default "static"
+     * @zui
      * @zgroup Position
-     * @zdefault static
      */
-    position: Observable<CSSPosition, never>;
-    /** @zprop */
-    display: Observable<CSSDisplay | undefined, never>;
-    /** @zprop
-     * @zdefault row
+    position: CSSPositionValue;
+    /**
+     * @zui
+     * @zgroup Display
+     */
+    display: CSSDisplayValue | undefined;
+    /**
+     * @default "row"
+     * @zui
+     * @zgroup Display
      */
-    flexDirection: Observable<CSSFlexDirection, never>;
+    flexDirection: CSSFlexDirectionValue;
     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"
-}
+export declare const CSSLengthUnit: {
+    readonly cm: "cm";
+    readonly mm: "mm";
+    readonly in: "in";
+    readonly px: "px";
+    readonly pt: "pt";
+    readonly pc: "pc";
+    readonly em: "em";
+    readonly ex: "ex";
+    readonly ch: "ch";
+    readonly rem: "rem";
+    readonly vw: "vw";
+    readonly vh: "vh";
+    readonly vmin: "vmin";
+    readonly vmax: "vmax";
+    readonly '%': "%";
+};
+export type CSSLengthUnitValue = ValueOf<typeof CSSLengthUnit>;
+export declare const CSSPosition: {
+    readonly static: "static";
+    readonly relative: "relative";
+    readonly absolute: "absolute";
+    readonly fixed: "fixed";
+    readonly sticky: "sticky";
+};
+export type CSSPositionValue = ValueOf<typeof CSSPosition>;
+export declare const CSSDisplay: {
+    readonly none: "none";
+    readonly block: "block";
+    readonly inline: "inline";
+    readonly 'inline-block': "inline-block";
+    readonly flex: "flex";
+    readonly 'inline-flex': "inline-flex";
+    readonly grid: "grid";
+    readonly 'inline-grid': "inline-grid";
+};
+export type CSSDisplayValue = ValueOf<typeof CSSDisplay>;
+export declare const CSSFlexDirection: {
+    readonly row: "row";
+    readonly 'row-reverse': "row-reverse";
+    readonly column: "column";
+    readonly 'column-reverse': "column-reverse";
+};
+export type CSSFlexDirectionValue = ValueOf<typeof CSSFlexDirection>;