@zcomponent/html 1.0.0 → 1.2.0

package/lib/HTMLElement.d.ts

@@ -1,12 +1,17 @@
 import { Component, ConstructorProps, ContextManager, Event, Observable } from '@zcomponent/core';
 export interface HTMLElementProps extends ConstructorProps {
-    /** @zprop */
     innerText?: string;
 }
 export declare class ZHTMLElement<T extends HTMLElement> extends Component {
     element: T;
     /** @zprop */
     onClick: Event<[MouseEvent]>;
+    /**
+     * @zprop
+     * @ztype text-multiline
+     * @zgrouppriority 21
+     */
+    innerText: Observable<string, never>;
     constructor(contextManager: ContextManager, props: HTMLElementProps, element: T);
     appendChild(c: Component): void;
     private _connectChild;

package/lib/HTMLElement.js

@@ -6,6 +6,12 @@ export class ZHTMLElement extends Component {
         this.element = element;
         /** @zprop */
         this.onClick = new Event();
+        /**
+         * @zprop
+         * @ztype text-multiline
+         * @zgrouppriority 21
+         */
+        this.innerText = new Observable('');
         /** @zprop */
         this.id = new Observable('', v => (this.element.id = v));
         /** @zprop */
@@ -91,8 +97,12 @@ export class ZHTMLElement extends Component {
          * @zdefault row
          */
         this.flexDirection = new Observable(CSSFlexDirection.row, v => (this.element.style.flexDirection = v));
-        if (props.innerText !== undefined)
+        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);
         }

package/lib/i.d.ts

@@ -0,0 +1,10 @@
+import { ContextManager } from '@zcomponent/core';
+import { HTMLElementProps, ZHTMLElement } from './HTMLElement';
+/** @zcomponent
+ * @ztag html/element/i
+ * @zparents html/element/**
+ * @zicon html
+ */
+export declare class I extends ZHTMLElement<HTMLElement> {
+    constructor(mgr: ContextManager, props: HTMLElementProps);
+}

package/lib/i.js

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

package/lib/span.d.ts

@@ -0,0 +1,10 @@
+import { ContextManager } from '@zcomponent/core';
+import { HTMLElementProps, ZHTMLElement } from './HTMLElement';
+/** @zcomponent
+ * @ztag html/element/span
+ * @zparents html/element/**
+ * @zicon html
+ */
+export declare class Span extends ZHTMLElement<HTMLSpanElement> {
+    constructor(mgr: ContextManager, props: HTMLElementProps);
+}

package/lib/span.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/html",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",