@zcomponent/html 1.0.0-beta → 1.0.0-beta.1

package/README.md

@@ -0,0 +1 @@
+# @zcomponent/html

package/index.js

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

package/lib/CSS.js

@@ -1,4 +1,5 @@
 import { Component, isDesignTime, registerLoadable } 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.
@@ -20,7 +21,10 @@ export class CSS extends Component {
         else {
             this._elm = [1, document.createElement('link')];
             registerLoadable(contextManager, new Promise((resolve, reject) => {
-                this._elm[1].addEventListener('load', resolve);
+                this._elm[1].addEventListener('load', () => {
+                    contextManager.get(HTMLContext).onCSSChanged.emit();
+                    resolve();
+                });
                 this._elm[1].addEventListener('error', reject);
             }));
             this._elm[1].setAttribute('rel', 'stylesheet');

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);
         }
@@ -118,7 +128,8 @@ export class ZHTMLElement extends Component {
     }
     _attachEvent(evt, evtName) {
         const handler = (e) => {
-            evt.emit(e);
+            if (this.enabledResolved.value)
+                evt.emit(e);
         };
         evt.hasListeners.addListener(b => {
             if (b)

package/lib/context.d.ts

@@ -2,6 +2,7 @@ import { Event, ContextManager, Context } from '@zcomponent/core';
 export declare class HTMLContext extends Context {
     onNodeConstructed: Event<[Node]>;
     onNodeDisposed: Event<[Node]>;
+    onCSSChanged: Event<[]>;
 }
 export declare function useOnNodeConstructed(mgr: ContextManager): Event<[Node]>;
 export declare function useOnNodeDisposed(mgr: ContextManager): Event<[Node]>;

package/lib/context.js

@@ -4,6 +4,7 @@ export class HTMLContext extends Context {
         super(...arguments);
         this.onNodeConstructed = new Event();
         this.onNodeDisposed = new Event();
+        this.onCSSChanged = new Event();
     }
 }
 export function useOnNodeConstructed(mgr) {

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,29 +1,76 @@
 {
   "name": "@zcomponent/html",
-  "version": "1.0.0-beta",
-  "description": "",
+  "version": "1.0.0-beta.1",
+  "description": "Mattercraft support for HTML",
+  "author": "Zappar Limited",
+  "license": "Proprietary",
   "main": "index.js",
   "types": "index.d.ts",
+  "zexports": [
+    "./lib/**/*"
+  ],
   "directories": {
     "lib": "lib"
   },
-  "scripts": {
-    "build": "tsc"
-  },
   "files": [
     "index.js",
     "index.d.ts",
-    "lib/**/*"
+    "lib/**/*",
+    "public/**/*"
   ],
-  "author": "Zappar Limited",
-  "license": "Proprietary",
-  "dependencies": {
-    "@zcomponent/core": "1.x-beta"
+  "scripts": {
+    "build": "rm -rf lib && tsc && tsc-alias",
+    "watch": "tsc -w",
+    "prepack": "npm run build",
+    "docs": "typedoc --out docs"
   },
+  "dependencies": {},
   "devDependencies": {
-    "typescript": "^4.9.4"
+    "@zcomponent/core": "1.x"
   },
-  "zexports": [
-    "./lib/**/*"
-  ]
+  "peerDependencies": {
+    "@zcomponent/core": "1.x"
+  },
+  "keywords": [],
+  "release": {
+    "extends": "semantic-release-commit-filter",
+    "ci": true,
+    "branches": [
+      "main",
+      {
+        "name": "beta",
+        "channel": "beta",
+        "prerelease": "beta"
+      },
+      {
+        "name": "alpha",
+        "channel": "alpha",
+        "prerelease": "alpha"
+      }
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/changelog",
+      "@semantic-release/npm",
+      "@semantic-release/gitlab",
+      "@semantic-release/git",
+      [
+        "@rimac-technology/semantic-release-s3",
+        {
+          "s3Bucket": {
+            "main": "mattercraft-api-docs/prod",
+            "beta": "mattercraft-api-docs/beta",
+            "alpha": "mattercraft-api-docs/alpha"
+          },
+          "directoryPath": "../../docs/**/*",
+          "objectACL": "",
+          "removeDirectoryRoot": true,
+          "awsAccessKeyName": "DOCS_AWS_ACCESS_KEY_ID",
+          "awsSecretAccessKeyName": "DOCS_AWS_SECRET_ACCESS_KEY"
+        }
+      ]
+    ],
+    "tagFormat": "@zcomponent/html@${version}"
+  }
 }