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

package/lib/HTMLElement.js

@@ -1,194 +1,419 @@
-import { Component, Event, Observable } 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, Event, zIgnore, zObserve, zUI } from '@zcomponent/core';
 import { useOnNodeConstructed, useOnNodeDisposed } from './context';
-export class ZHTMLElement extends Component {
-    constructor(contextManager, props, element) {
-        super(contextManager, props);
-        this.element = element;
-        /** @zprop */
-        this.onClick = new Event();
-        /**
-         * @zprop
+let ZHTMLElement = (() => {
+    let _classSuper = Component;
+    let _onClick_decorators;
+    let _onClick_initializers = [];
+    let _onClick_extraInitializers = [];
+    let _innerText_decorators;
+    let _innerText_initializers = [];
+    let _innerText_extraInitializers = [];
+    let _element_decorators;
+    let _element_initializers = [];
+    let _element_extraInitializers = [];
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    let _classList_decorators;
+    let _classList_initializers = [];
+    let _classList_extraInitializers = [];
+    let _left_decorators;
+    let _left_initializers = [];
+    let _left_extraInitializers = [];
+    let _right_decorators;
+    let _right_initializers = [];
+    let _right_extraInitializers = [];
+    let _top_decorators;
+    let _top_initializers = [];
+    let _top_extraInitializers = [];
+    let _bottom_decorators;
+    let _bottom_initializers = [];
+    let _bottom_extraInitializers = [];
+    let _width_decorators;
+    let _width_initializers = [];
+    let _width_extraInitializers = [];
+    let _height_decorators;
+    let _height_initializers = [];
+    let _height_extraInitializers = [];
+    let _marginLeft_decorators;
+    let _marginLeft_initializers = [];
+    let _marginLeft_extraInitializers = [];
+    let _marginRight_decorators;
+    let _marginRight_initializers = [];
+    let _marginRight_extraInitializers = [];
+    let _marginTop_decorators;
+    let _marginTop_initializers = [];
+    let _marginTop_extraInitializers = [];
+    let _marginBottom_decorators;
+    let _marginBottom_initializers = [];
+    let _marginBottom_extraInitializers = [];
+    let _paddingLeft_decorators;
+    let _paddingLeft_initializers = [];
+    let _paddingLeft_extraInitializers = [];
+    let _paddingRight_decorators;
+    let _paddingRight_initializers = [];
+    let _paddingRight_extraInitializers = [];
+    let _paddingTop_decorators;
+    let _paddingTop_initializers = [];
+    let _paddingTop_extraInitializers = [];
+    let _paddingBottom_decorators;
+    let _paddingBottom_initializers = [];
+    let _paddingBottom_extraInitializers = [];
+    let _position_decorators;
+    let _position_initializers = [];
+    let _position_extraInitializers = [];
+    let _display_decorators;
+    let _display_initializers = [];
+    let _display_extraInitializers = [];
+    let _flexDirection_decorators;
+    let _flexDirection_initializers = [];
+    let _flexDirection_extraInitializers = [];
+    return class ZHTMLElement extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _onClick_decorators = [zUI()];
+            _innerText_decorators = [zUI({ type: 'text-multiline', priority: 21 }), zObserve((v, instance) => {
+                    instance.element.innerText = v;
+                })];
+            _element_decorators = [zIgnore()];
+            _id_decorators = [zObserve((val, instance) => {
+                    instance.element.id = val;
+                }), zUI()];
+            _classList_decorators = [zObserve((val, instance) => {
+                    instance.element.className = val.join(' ');
+                }), zUI()];
+            _left_decorators = [zObserve((val, instance) => {
+                    instance.element.style.left = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Position' })];
+            _right_decorators = [zObserve((val, instance) => {
+                    instance.element.style.right = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Position' })];
+            _top_decorators = [zObserve((val, instance) => {
+                    instance.element.style.top = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Position' })];
+            _bottom_decorators = [zObserve((val, instance) => {
+                    instance.element.style.bottom = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Position' })];
+            _width_decorators = [zObserve((val, instance) => {
+                    instance.element.style.width = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Size' })];
+            _height_decorators = [zObserve((val, instance) => {
+                    instance.element.style.height = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Size' })];
+            _marginLeft_decorators = [zObserve((val, instance) => {
+                    instance.element.style.marginLeft = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Spacing' })];
+            _marginRight_decorators = [zObserve((val, instance) => {
+                    instance.element.style.marginRight = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Spacing' })];
+            _marginTop_decorators = [zObserve((val, instance) => {
+                    instance.element.style.marginTop = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Spacing' })];
+            _marginBottom_decorators = [zObserve((val, instance) => {
+                    instance.element.style.marginBottom = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Spacing' })];
+            _paddingLeft_decorators = [zObserve((val, instance) => {
+                    instance.element.style.paddingLeft = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Spacing' })];
+            _paddingRight_decorators = [zObserve((val, instance) => {
+                    instance.element.style.paddingRight = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Spacing' })];
+            _paddingTop_decorators = [zObserve((val, instance) => {
+                    instance.element.style.paddingTop = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Spacing' })];
+            _paddingBottom_decorators = [zObserve((val, instance) => {
+                    instance.element.style.paddingBottom = converCSSLength(val) ?? '';
+                }), zUI({ group: 'Spacing' })];
+            _position_decorators = [zObserve((val, instance) => {
+                    instance.element.style.position = val;
+                }), zUI({ group: 'Position' })];
+            _display_decorators = [zObserve((val, instance) => {
+                    instance.element.style.display = val ?? '';
+                }), zUI({ group: 'Display' })];
+            _flexDirection_decorators = [zObserve((val, instance) => {
+                    instance.element.style.flexDirection = val;
+                }), zUI({ group: 'Display' })];
+            __esDecorate(null, null, _onClick_decorators, { kind: "field", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick, set: (obj, value) => { obj.onClick = value; } }, metadata: _metadata }, _onClick_initializers, _onClick_extraInitializers);
+            __esDecorate(null, null, _innerText_decorators, { kind: "field", name: "innerText", static: false, private: false, access: { has: obj => "innerText" in obj, get: obj => obj.innerText, set: (obj, value) => { obj.innerText = value; } }, metadata: _metadata }, _innerText_initializers, _innerText_extraInitializers);
+            __esDecorate(null, null, _element_decorators, { kind: "field", name: "element", static: false, private: false, access: { has: obj => "element" in obj, get: obj => obj.element, set: (obj, value) => { obj.element = value; } }, metadata: _metadata }, _element_initializers, _element_extraInitializers);
+            __esDecorate(null, null, _id_decorators, { kind: "field", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(null, null, _classList_decorators, { kind: "field", name: "classList", static: false, private: false, access: { has: obj => "classList" in obj, get: obj => obj.classList, set: (obj, value) => { obj.classList = value; } }, metadata: _metadata }, _classList_initializers, _classList_extraInitializers);
+            __esDecorate(null, null, _left_decorators, { kind: "field", name: "left", static: false, private: false, access: { has: obj => "left" in obj, get: obj => obj.left, set: (obj, value) => { obj.left = value; } }, metadata: _metadata }, _left_initializers, _left_extraInitializers);
+            __esDecorate(null, null, _right_decorators, { kind: "field", name: "right", static: false, private: false, access: { has: obj => "right" in obj, get: obj => obj.right, set: (obj, value) => { obj.right = value; } }, metadata: _metadata }, _right_initializers, _right_extraInitializers);
+            __esDecorate(null, null, _top_decorators, { kind: "field", name: "top", static: false, private: false, access: { has: obj => "top" in obj, get: obj => obj.top, set: (obj, value) => { obj.top = value; } }, metadata: _metadata }, _top_initializers, _top_extraInitializers);
+            __esDecorate(null, null, _bottom_decorators, { kind: "field", name: "bottom", static: false, private: false, access: { has: obj => "bottom" in obj, get: obj => obj.bottom, set: (obj, value) => { obj.bottom = value; } }, metadata: _metadata }, _bottom_initializers, _bottom_extraInitializers);
+            __esDecorate(null, null, _width_decorators, { kind: "field", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers);
+            __esDecorate(null, null, _height_decorators, { kind: "field", name: "height", static: false, private: false, access: { has: obj => "height" in obj, get: obj => obj.height, set: (obj, value) => { obj.height = value; } }, metadata: _metadata }, _height_initializers, _height_extraInitializers);
+            __esDecorate(null, null, _marginLeft_decorators, { kind: "field", name: "marginLeft", static: false, private: false, access: { has: obj => "marginLeft" in obj, get: obj => obj.marginLeft, set: (obj, value) => { obj.marginLeft = value; } }, metadata: _metadata }, _marginLeft_initializers, _marginLeft_extraInitializers);
+            __esDecorate(null, null, _marginRight_decorators, { kind: "field", name: "marginRight", static: false, private: false, access: { has: obj => "marginRight" in obj, get: obj => obj.marginRight, set: (obj, value) => { obj.marginRight = value; } }, metadata: _metadata }, _marginRight_initializers, _marginRight_extraInitializers);
+            __esDecorate(null, null, _marginTop_decorators, { kind: "field", name: "marginTop", static: false, private: false, access: { has: obj => "marginTop" in obj, get: obj => obj.marginTop, set: (obj, value) => { obj.marginTop = value; } }, metadata: _metadata }, _marginTop_initializers, _marginTop_extraInitializers);
+            __esDecorate(null, null, _marginBottom_decorators, { kind: "field", name: "marginBottom", static: false, private: false, access: { has: obj => "marginBottom" in obj, get: obj => obj.marginBottom, set: (obj, value) => { obj.marginBottom = value; } }, metadata: _metadata }, _marginBottom_initializers, _marginBottom_extraInitializers);
+            __esDecorate(null, null, _paddingLeft_decorators, { kind: "field", name: "paddingLeft", static: false, private: false, access: { has: obj => "paddingLeft" in obj, get: obj => obj.paddingLeft, set: (obj, value) => { obj.paddingLeft = value; } }, metadata: _metadata }, _paddingLeft_initializers, _paddingLeft_extraInitializers);
+            __esDecorate(null, null, _paddingRight_decorators, { kind: "field", name: "paddingRight", static: false, private: false, access: { has: obj => "paddingRight" in obj, get: obj => obj.paddingRight, set: (obj, value) => { obj.paddingRight = value; } }, metadata: _metadata }, _paddingRight_initializers, _paddingRight_extraInitializers);
+            __esDecorate(null, null, _paddingTop_decorators, { kind: "field", name: "paddingTop", static: false, private: false, access: { has: obj => "paddingTop" in obj, get: obj => obj.paddingTop, set: (obj, value) => { obj.paddingTop = value; } }, metadata: _metadata }, _paddingTop_initializers, _paddingTop_extraInitializers);
+            __esDecorate(null, null, _paddingBottom_decorators, { kind: "field", name: "paddingBottom", static: false, private: false, access: { has: obj => "paddingBottom" in obj, get: obj => obj.paddingBottom, set: (obj, value) => { obj.paddingBottom = value; } }, metadata: _metadata }, _paddingBottom_initializers, _paddingBottom_extraInitializers);
+            __esDecorate(null, null, _position_decorators, { kind: "field", name: "position", static: false, private: false, access: { has: obj => "position" in obj, get: obj => obj.position, set: (obj, value) => { obj.position = value; } }, metadata: _metadata }, _position_initializers, _position_extraInitializers);
+            __esDecorate(null, null, _display_decorators, { kind: "field", name: "display", static: false, private: false, access: { has: obj => "display" in obj, get: obj => obj.display, set: (obj, value) => { obj.display = value; } }, metadata: _metadata }, _display_initializers, _display_extraInitializers);
+            __esDecorate(null, null, _flexDirection_decorators, { kind: "field", name: "flexDirection", static: false, private: false, access: { has: obj => "flexDirection" in obj, get: obj => obj.flexDirection, set: (obj, value) => { obj.flexDirection = value; } }, metadata: _metadata }, _flexDirection_initializers, _flexDirection_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        onClick = __runInitializers(this, _onClick_initializers, new Event());
+        /**
+         * The inner text of the element.
+         * @default ""
+         * @zui
          * @ztype text-multiline
-         * @zgrouppriority 21
-         */
-        this.innerText = new Observable('');
-        /** @zprop */
-        this.id = new Observable('', v => (this.element.id = v));
-        /** @zprop */
-        this.classList = new Observable([], v => (this.element.className = v.join(' ')));
-        /** @zprop
-         * @zdefault [0, "px"]
+         */
+        innerText = (__runInitializers(this, _onClick_extraInitializers), __runInitializers(this, _innerText_initializers, ''));
+        /**
+         * @zignore
+         */
+        element = (__runInitializers(this, _innerText_extraInitializers), __runInitializers(this, _element_initializers, void 0));
+        /**
+         * Creates a new ZHTMLElement.
+         * @param contextManager - The context manager
+         * @param props - The properties of the element
+         * @param element  - The element to wrap
+         */
+        constructor(contextManager, props, element) {
+            super(contextManager, props);
+            __runInitializers(this, _flexDirection_extraInitializers);
+            this.element = element;
+            if (props.innerText !== undefined) {
+                this.innerText = props.innerText;
+            }
+            for (const child of this.children) {
+                child.connectElements();
+            }
+            this._attachEvent(this.onClick, 'click');
+            useOnNodeConstructed(contextManager).emit(this.element);
+        }
+        connectElements() {
+            let parent = this.parent;
+            while (parent) {
+                if (parent === undefined)
+                    return;
+                if (parent.element === undefined) {
+                    parent = parent.parent;
+                    continue;
+                }
+                if (parent instanceof ZHTMLElement) {
+                    parent.element.appendChild(this.element);
+                    break;
+                }
+                else {
+                    return; // stop if parent element exists but is not an HTMLElement
+                }
+            }
+        }
+        _attachEvent(evt, evtName) {
+            const handler = (e) => {
+                if (this.enabledResolved)
+                    evt.emit(e);
+            };
+            evt.hasListeners.addListener(b => {
+                if (b)
+                    this.element.addEventListener(evtName, handler);
+                else
+                    this.element.removeEventListener(evtName, handler);
+            });
+        }
+        /**
+         * @default ""
+         */
+        id = (__runInitializers(this, _element_extraInitializers), __runInitializers(this, _id_initializers, ''));
+        /**
+         * @default []
+         */
+        classList = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _classList_initializers, []));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Position
          */
-        this.left = this._cssLengthObservable('left');
-        /** @zprop
-         * @zdefault [0, "px"]
+        left = (__runInitializers(this, _classList_extraInitializers), __runInitializers(this, _left_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Position
          */
-        this.right = this._cssLengthObservable('right');
-        /** @zprop
-         * @zdefault [0, "px"]
+        right = (__runInitializers(this, _left_extraInitializers), __runInitializers(this, _right_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Position
          */
-        this.top = this._cssLengthObservable('top');
-        /** @zprop
-         * @zdefault [0, "px"]
+        top = (__runInitializers(this, _right_extraInitializers), __runInitializers(this, _top_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Position
          */
-        this.bottom = this._cssLengthObservable('bottom');
-        /** @zprop
-         * @zdefault [0, "px"]
+        bottom = (__runInitializers(this, _top_extraInitializers), __runInitializers(this, _bottom_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Size
          */
-        this.width = this._cssLengthObservable('width');
-        /** @zprop
-         * @zdefault [0, "px"]
+        width = (__runInitializers(this, _bottom_extraInitializers), __runInitializers(this, _width_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Size
          */
-        this.height = this._cssLengthObservable('height');
-        /** @zprop
-         * @zdefault [0, "px"]
+        height = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _height_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Spacing
          */
-        this.marginLeft = this._cssLengthObservable('marginLeft');
-        /** @zprop
-         * @zdefault [0, "px"]
+        marginLeft = (__runInitializers(this, _height_extraInitializers), __runInitializers(this, _marginLeft_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Spacing
          */
-        this.marginRight = this._cssLengthObservable('marginRight');
-        /** @zprop
-         * @zdefault [0, "px"]
+        marginRight = (__runInitializers(this, _marginLeft_extraInitializers), __runInitializers(this, _marginRight_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Spacing
          */
-        this.marginTop = this._cssLengthObservable('marginTop');
-        /** @zprop
-         * @zdefault [0, "px"]
+        marginTop = (__runInitializers(this, _marginRight_extraInitializers), __runInitializers(this, _marginTop_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Spacing
          */
-        this.marginBottom = this._cssLengthObservable('marginBottom');
-        /** @zprop
-         * @zdefault [0, "px"]
+        marginBottom = (__runInitializers(this, _marginTop_extraInitializers), __runInitializers(this, _marginBottom_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Spacing
          */
-        this.paddingLeft = this._cssLengthObservable('paddingLeft');
-        /** @zprop
-         * @zdefault [0, "px"]
+        paddingLeft = (__runInitializers(this, _marginBottom_extraInitializers), __runInitializers(this, _paddingLeft_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Spacing
          */
-        this.paddingRight = this._cssLengthObservable('paddingRight');
-        /** @zprop
-         * @zdefault [0, "px"]
+        paddingRight = (__runInitializers(this, _paddingLeft_extraInitializers), __runInitializers(this, _paddingRight_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Spacing
          */
-        this.paddingTop = this._cssLengthObservable('paddingTop');
-        /** @zprop
-         * @zdefault [0, "px"]
+        paddingTop = (__runInitializers(this, _paddingRight_extraInitializers), __runInitializers(this, _paddingTop_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default [0,"px"]
+         * @zui
          * @zgroup Spacing
          */
-        this.paddingBottom = this._cssLengthObservable('paddingBottom');
-        /** @zprop
+        paddingBottom = (__runInitializers(this, _paddingTop_extraInitializers), __runInitializers(this, _paddingBottom_initializers, [0, CSSLengthUnit.px]));
+        /**
+         * @default "static"
+         * @zui
          * @zgroup Position
-         * @zdefault static
          */
-        this.position = new Observable(CSSPosition.static, v => (this.element.style.position = v));
-        /** @zprop */
-        this.display = new Observable(undefined, v => (this.element.style.display = v ?? ''));
-        /** @zprop
-         * @zdefault row
+        position = (__runInitializers(this, _paddingBottom_extraInitializers), __runInitializers(this, _position_initializers, CSSPosition.static));
+        /**
+         * @zui
+         * @zgroup Display
          */
-        this.flexDirection = new Observable(CSSFlexDirection.row, v => (this.element.style.flexDirection = v));
-        if (props.innerText === undefined) {
-            this.innerText.addListener(v => (element.innerText = v));
-        }
-        else {
-            element.innerText = props.innerText;
-        }
-        for (const child of this.children) {
-            this._connectChild(child);
-        }
-        this._attachEvent(this.onClick, 'click');
-        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);
+        display = (__runInitializers(this, _position_extraInitializers), __runInitializers(this, _display_initializers, undefined));
+        /**
+         * @default "row"
+         * @zui
+         * @zgroup Display
+         */
+        flexDirection = (__runInitializers(this, _display_extraInitializers), __runInitializers(this, _flexDirection_initializers, CSSFlexDirection.row));
+        dispose() {
+            useOnNodeDisposed(this.contextManager).emit(this.element);
+            return super.dispose();
         }
-    }
-    _cssLengthObservable(prop) {
-        return new Observable(undefined, v => {
-            this.element.style[prop] = converCSSLength(v) ?? '';
-        });
-    }
-    _attachEvent(evt, evtName) {
-        const handler = (e) => {
-            if (this.enabledResolved.value)
-                evt.emit(e);
-        };
-        evt.hasListeners.addListener(b => {
-            if (b)
-                this.element.addEventListener(evtName, handler);
-            else
-                this.element.removeEventListener(evtName, handler);
-        });
-    }
-    dispose() {
-        useOnNodeDisposed(this.contextManager).emit(this.element);
-        return super.dispose();
-    }
-}
+    };
+})();
+export { ZHTMLElement };
 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 = {}));
+export const 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',
+    '%': '%',
+};
+Object.freeze(CSSLengthUnit);
+export const CSSPosition = {
+    static: 'static',
+    relative: 'relative',
+    absolute: 'absolute',
+    fixed: 'fixed',
+    sticky: 'sticky',
+};
+Object.freeze(CSSPosition);
+export const CSSDisplay = {
+    none: 'none',
+    block: 'block',
+    inline: 'inline',
+    'inline-block': 'inline-block',
+    flex: 'flex',
+    'inline-flex': 'inline-flex',
+    grid: 'grid',
+    'inline-grid': 'inline-grid',
+};
+Object.freeze(CSSDisplay);
+export const CSSFlexDirection = {
+    row: 'row',
+    'row-reverse': 'row-reverse',
+    column: 'column',
+    'column-reverse': 'column-reverse',
+};
+Object.freeze(CSSFlexDirection);

package/lib/button.d.ts

@@ -1,10 +1,20 @@
 import { ContextManager } from '@zcomponent/core';
 import { HTMLElementProps, ZHTMLElement } from './HTMLElement';
-/** @zcomponent
+/**
+ *
+ * A HTML Button component.
+ *
+ * You can access the underlying HTMLButtonElement using the `element` property.
+ * @zcomponent
+ * @zicon html
  * @ztag html/element/button
  * @zparents html/element/**
- * @zicon html
  */
 export declare class Button extends ZHTMLElement<HTMLButtonElement> {
+    /**
+     *
+     * @param mgr - The context manager
+     * @param props - The properties of the button
+     */
     constructor(mgr: ContextManager, props: HTMLElementProps);
 }