@zcomponent/core 0.0.16 → 0.0.18

package/css/zcomponent.css

@@ -91,4 +91,32 @@
 
 .zcomponent-hc-vc {
     transform: translate(-50%, -50%);
+}
+
+.zcomponent-textalert-container {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+    row-gap: 24px;
+    max-width: 80%;
+}
+
+.zcomponent-textalert {
+    transition: opacity 0.5s;
+    background-color: black;
+    border-radius: 10px;
+    padding: 20px;
+    color: white;
+    font-family: sans-serif;
+    opacity: 0;
+    text-align: center;
+}
+
+.zcomponent-textalert-shown {
+    opacity: 1;
 }

package/lib/behavior.d.ts

@@ -16,6 +16,7 @@ export declare class Behavior<InstanceType extends Component = Component> extend
      */
     constructor(contextManager: ContextManager, instance: InstanceType);
     private _updateEnabledResolved;
+    dispose(): never;
 }
 export declare function shouldBehaviorRunAtDesignTime(b: BehaviorConstructor): boolean;
 export declare function registerBehaviorRunAtDesignTime(b: BehaviorConstructor): Set<new (contextManager: ContextManager, instance: Component<any, import("./component").ConstructorProps>, ...args: any[]) => Behavior<Component<any, import("./component").ConstructorProps>>>;

package/lib/behavior.js

@@ -17,9 +17,14 @@ export class Behavior extends Entity {
                 this.enabledResolved.value = newValue;
             }
         };
+        instance.addBehavior(this);
         this.register(this.enabled, this._updateEnabledResolved, { bindWhenDisabled: true });
         this.register(instance.enabledResolved, this._updateEnabledResolved, { bindWhenDisabled: true });
     }
+    dispose() {
+        this.instance.removeBehavior(this);
+        return super.dispose();
+    }
 }
 const behaviorsToRunAtDesignTime = new Set();
 export function shouldBehaviorRunAtDesignTime(b) {

package/lib/behaviors/ConsoleLog.d.ts

@@ -0,0 +1,22 @@
+import { ActionBehavior } from "../actionbehavior";
+/**
+ * Outputs a message to the console log.
+ *
+ * @zbehavior
+ * @zicon terminal
+ * @zgroup Actions
+ */
+export declare class ConsoleLog extends ActionBehavior {
+    /**
+     * The text to log
+     * @zprop
+     */
+    text: string;
+    /**
+     * If true, the event name will be logged in addition to the text
+     * @zprop
+     * @zdefault true
+     */
+    includeEventName: boolean;
+    perform(): void;
+}

package/lib/behaviors/ConsoleLog.js

@@ -0,0 +1,18 @@
+import { ActionBehavior } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
+/**
+ * Outputs a message to the console log.
+ *
+ * @zbehavior
+ * @zicon terminal
+ * @zgroup Actions
+ */
+export class ConsoleLog extends ActionBehavior {
+    perform() {
+        if (this.includeEventName ?? true)
+            console.log(this.constructorProps.event, this.text);
+        else
+            console.log(this.text);
+    }
+}
+registerBehaviorRunAtDesignTime(ConsoleLog);

package/lib/behaviors/LaunchURL.d.ts

@@ -5,6 +5,7 @@ import { ActionBehavior } from "../actionbehavior";
  * **Important Note**: Safari on iOS will not open URLs in new tabs for pointer events except `onPointerUp`.
  *
  * @zbehavior
+ * @zicon open_in_new
  * @zgroup Actions
  */
 export declare class LaunchURL extends ActionBehavior {

package/lib/behaviors/LaunchURL.js

@@ -5,6 +5,7 @@ import { ActionBehavior } from "../actionbehavior";
  * **Important Note**: Safari on iOS will not open URLs in new tabs for pointer events except `onPointerUp`.
  *
  * @zbehavior
+ * @zicon open_in_new
  * @zgroup Actions
  */
 export class LaunchURL extends ActionBehavior {

package/lib/behaviors/LogAnalyticsEvent.d.ts

@@ -5,6 +5,7 @@ import { ActionBehavior } from "../actionbehavior";
  * Note: you must have added an analytics provider to the Hierarchy in one of your components for this behavior to have any effect.
  *
  * @zbehavior
+ * @zicon analytics
  * @zgroup Actions
  */
 export declare class LogAnalyticsEvent extends ActionBehavior {

package/lib/behaviors/LogAnalyticsEvent.js

@@ -6,6 +6,7 @@ import { logEvent } from "../contexts/analyticscontext";
  * Note: you must have added an analytics provider to the Hierarchy in one of your components for this behavior to have any effect.
  *
  * @zbehavior
+ * @zicon analytics
  * @zgroup Actions
  */
 export class LogAnalyticsEvent extends ActionBehavior {

package/lib/behaviors/PlaySound.d.ts

@@ -13,6 +13,7 @@ export interface PlaySoundProps extends ActionBehaviorConstructorProps {
  * Plays a sound
  *
  * @zbehavior
+ * @zicon volume_up
  * @zgroup Actions
  */
 export declare class PlaySound extends ActionBehavior<PlaySoundProps> {

package/lib/behaviors/PlaySound.js

@@ -5,6 +5,7 @@ import { registerLoadable } from "../contexts/loadcontext";
  * Plays a sound
  *
  * @zbehavior
+ * @zicon volume_up
  * @zgroup Actions
  */
 export class PlaySound extends ActionBehavior {

package/lib/behaviors/ShowTextAlert.d.ts

@@ -0,0 +1,62 @@
+import { ActionBehavior } from "../actionbehavior";
+import { Observable } from "../observable";
+/**
+ * Displays a pop-up text alert on screen.
+ *
+ * @zbehavior
+ * @zicon sms
+ * @zgroup Actions
+ */
+export declare class ShowTextAlert extends ActionBehavior {
+    /**
+     * The text to show in the alert
+     * @zprop
+     * @zgroup ShowTextAlert
+     * @zgrouppriority 20
+     */
+    text: Observable<string, never>;
+    /**
+     * The time (in milliseconds) that the text alert should remain on screen
+     *
+     * @zprop
+     * @zgroup Appearance
+     * @zgrouppriority 10
+     * @zdefault 3000
+     */
+    timeout: Observable<number, never>;
+    /**
+     * The color of the background of the text alert
+     *
+     * @zprop
+     * @zgroup Appearance
+     * @zgrouppriority 10
+     * @zdefault black
+     * @ztype color-hex
+     */
+    backgroundColor: Observable<string, never>;
+    /**
+     * The color of the text of the text alert
+     *
+     * @zprop
+     * @zgroup Appearance
+     * @zgrouppriority 10
+     * @zdefault #ffffff
+     * @ztype color-hex
+     */
+    textColor: Observable<string, never>;
+    /**
+     * Additional CSS class names to add to the alert DOM element
+     *
+     * @zprop
+     * @zgroup Appearance
+     * @zgrouppriority 10
+     * @zdefault []
+     */
+    classNames: Observable<string[], never>;
+    /**
+     * How long the alert will apear on the screen
+     */
+    perform(): void;
+    /** @zprop */
+    preview(): void;
+}

package/lib/behaviors/ShowTextAlert.js

@@ -0,0 +1,77 @@
+import { ActionBehavior } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
+import { showTextAlert } from "../contexts/textalertcontext";
+import { Observable } from "../observable";
+/**
+ * Displays a pop-up text alert on screen.
+ *
+ * @zbehavior
+ * @zicon sms
+ * @zgroup Actions
+ */
+export class ShowTextAlert extends ActionBehavior {
+    constructor() {
+        super(...arguments);
+        /**
+         * The text to show in the alert
+         * @zprop
+         * @zgroup ShowTextAlert
+         * @zgrouppriority 20
+         */
+        this.text = new Observable('');
+        /**
+         * The time (in milliseconds) that the text alert should remain on screen
+         *
+         * @zprop
+         * @zgroup Appearance
+         * @zgrouppriority 10
+         * @zdefault 3000
+         */
+        this.timeout = new Observable(3000);
+        /**
+         * The color of the background of the text alert
+         *
+         * @zprop
+         * @zgroup Appearance
+         * @zgrouppriority 10
+         * @zdefault black
+         * @ztype color-hex
+         */
+        this.backgroundColor = new Observable('#000000');
+        /**
+         * The color of the text of the text alert
+         *
+         * @zprop
+         * @zgroup Appearance
+         * @zgrouppriority 10
+         * @zdefault #ffffff
+         * @ztype color-hex
+         */
+        this.textColor = new Observable('#ffffff');
+        /**
+         * Additional CSS class names to add to the alert DOM element
+         *
+         * @zprop
+         * @zgroup Appearance
+         * @zgrouppriority 10
+         * @zdefault []
+         */
+        this.classNames = new Observable([]);
+    }
+    /**
+     * How long the alert will apear on the screen
+     */
+    perform() {
+        showTextAlert(this.contextManager, this.text.value, {
+            backgroundColor: this.backgroundColor.value,
+            textColor: this.textColor.value,
+            classNames: this.classNames.value,
+            timeout: this.timeout.value
+        });
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(ShowTextAlert);

package/lib/component.d.ts

@@ -1,6 +1,7 @@
 import { ContextManager } from './context';
 import { Entity } from './entity';
 import { Observable } from './observable';
+import type { Behavior, BehaviorConstructor } from './behavior';
 export type ConstructorPropsOfComponent<ComponentType> = ComponentType extends Component<any, infer R> ? R : never;
 export type ComponentConstructor<ConstructorPropsType extends ConstructorProps, ComponentType extends Component> = new (props: ConstructorPropsType, contextManager: ContextManager) => ComponentType;
 export type ConstructorForComponent<ComponentType extends Component = Component> = new (contextManager: ContextManager, props: ComponentType extends Component<any, infer PropsType> ? PropsType : never) => ComponentType;
@@ -21,6 +22,7 @@ export declare class Component<ElementType = any, ConstructorPropsType extends C
      */
     element?: ElementType;
     readonly children: Component[];
+    readonly behaviors: Behavior[];
     parent?: Component;
     constructor(contextManager: ContextManager, constructorProps?: ConstructorPropsType | undefined);
     constructChildren(children: ComponentChildren, contextManager?: ContextManager): void;
@@ -39,6 +41,10 @@ export declare class Component<ElementType = any, ConstructorPropsType extends C
      * Removes this component from its parent component.
      */
     remove(): void;
+    addBehavior(b: Behavior): void;
+    removeBehavior(b: Behavior): void;
+    getBehavior<T extends BehaviorConstructor>(type: T): InstanceType<T> | undefined;
+    getBehaviors<T extends BehaviorConstructor>(type: T): InstanceType<T>[];
     /**
      * An array of the elements that this component instance exposes. In the case that this component
      * does not expose any elements of its own, this will be an array of the elements

package/lib/component.js

@@ -6,6 +6,7 @@ export class Component extends Entity {
         super(contextManager);
         this.constructorProps = constructorProps;
         this.children = [];
+        this.behaviors = [];
         /**
          * An array of string 'tags' assocated with this component.
          *
@@ -81,6 +82,23 @@ export class Component extends Entity {
     remove() {
         this.parent?.removeChild(this);
     }
+    addBehavior(b) {
+        this.behaviors.push(b);
+    }
+    removeBehavior(b) {
+        const indx = this.behaviors.indexOf(b);
+        if (indx >= 0)
+            this.behaviors.splice(indx, 1);
+    }
+    getBehavior(type) {
+        for (const behavior of this.behaviors) {
+            if (behavior instanceof type)
+                return behavior;
+        }
+    }
+    getBehaviors(type) {
+        return this.behaviors.filter(entry => entry instanceof type);
+    }
     /**
      * An array of the elements that this component instance exposes. In the case that this component
      * does not expose any elements of its own, this will be an array of the elements

package/lib/components/Children.d.ts

@@ -2,6 +2,8 @@ import { Component, ConstructorProps } from "../component";
 import { ContextManager } from "../context";
 /**
  * @zcomponent
+ * @zgroup Advanced
+ * @zicon list
  */
 export declare class Children extends Component {
     constructor(contextManager: ContextManager, props: ConstructorProps);

package/lib/components/Children.js

@@ -1,6 +1,8 @@
 import { Component } from "../component";
 /**
  * @zcomponent
+ * @zgroup Advanced
+ * @zicon list
  */
 export class Children extends Component {
     constructor(contextManager, props) {

package/lib/components/DefaultLoader.d.ts

@@ -35,15 +35,17 @@ export declare class DefaultLoader extends Component {
      */
     subtitle: Observable<string>;
     /** @zprop
-     * @zdefault black
+     * @zdefault #000000
      * @zgroup Appearance
      * @zgrouppriority 10
+     * @ztype color-hex
      */
     backgroundColor: Observable<string>;
     /** @zprop
-     * @zdefault white
+     * @zdefault #ffffff
      * @zgroup Appearance
      * @zgrouppriority 10
+     * @ztype color-hex
      */
     textColor: Observable<string>;
     /** @zprop

package/lib/components/DefaultLoader.js

@@ -56,8 +56,8 @@ export class DefaultLoader extends Component {
         this._percentageElement = this.element.querySelector("#zcomponent-defaultloader-progress-percentage") || document.createElement("div");
         this.title = new Observable('', t => titleElement.innerText = t);
         this.subtitle = new Observable('', t => subtitleElement.innerText = t);
-        this.textColor = new Observable('white', t => this.element.style.color = t ?? 'white');
-        this.backgroundColor = new Observable('black', t => this.element.style.backgroundColor = t ?? 'black');
+        this.textColor = new Observable('#ffffff', t => this.element.style.color = t);
+        this.backgroundColor = new Observable('#000000', t => this.element.style.backgroundColor = t);
         this.zIndex = new Observable(1000, t => this.element.style.zIndex = t.toString());
         this.register(this.preview, this._updatePercentage);
         this.register(this.preview, this._updateVisibility);

package/lib/components/Gamepad.d.ts

@@ -11,6 +11,7 @@ export interface GamepadButtonEvent {
 }
 /**
  * @zcomponent
+ * @zicon sports_esports
  */
 export declare class Gamepad extends Component {
     /** @zprop */

package/lib/components/Gamepad.js

@@ -6,6 +6,7 @@ import { Event } from "../event";
 import { Observable } from "../observable";
 /**
  * @zcomponent
+ * @zicon sports_esports
  */
 export class Gamepad extends Component {
     constructor(contextManager, props) {

package/lib/components/LongLoad.d.ts

@@ -1,4 +1,4 @@
-import { Component, ContextManager } from "..";
+import { Component, ContextManager, Event } from "..";
 export interface LongLoadConstructorProps {
     /**
      * The number of loading processes to simulate
@@ -41,5 +41,7 @@ export interface LongLoadConstructorProps {
  * @zgroup Advanced
  */
 export declare class LongLoad extends Component<any, LongLoadConstructorProps> {
+    /** @zui */
+    onLoad: Event<[]>;
     constructor(contextManager: ContextManager, props: LongLoadConstructorProps);
 }

package/lib/components/LongLoad.js

@@ -1,4 +1,4 @@
-import { Component, isDevelopmentBuild, registerLoadable } from "..";
+import { Component, Event, isDevelopmentBuild, registerLoadable } from "..";
 /**
  * Simulates long random loading times to facilitate development and debugging of loading processes.
  *
@@ -9,12 +9,15 @@ import { Component, isDevelopmentBuild, registerLoadable } from "..";
 export class LongLoad extends Component {
     constructor(contextManager, props) {
         super(contextManager, props);
+        /** @zui */
+        this.onLoad = new Event();
         if (!props.runInProduction && !isDevelopmentBuild(contextManager))
             return;
         const minimumLoadTime = props.minimumLoadTime ?? 500;
         const maximumLoadTime = props.maximumLoadTime ?? 5000;
+        const all = [];
         for (let i = 0; i < (props.numberOfLoads ?? 10); i++) {
-            registerLoadable(contextManager, new Promise(resolve => {
+            const promise = new Promise(resolve => {
                 if (this.disposed)
                     return;
                 setTimeout(() => {
@@ -22,7 +25,14 @@ export class LongLoad extends Component {
                         return;
                     resolve();
                 }, minimumLoadTime + Math.random() * (maximumLoadTime - minimumLoadTime));
-            }));
+            });
+            registerLoadable(contextManager, promise);
+            all.push(promise);
         }
+        Promise.all(all).then(() => {
+            if (this.disposed)
+                return;
+            this.onLoad.emit();
+        });
     }
 }

package/lib/contexts/textalertcontext.d.ts

@@ -0,0 +1,13 @@
+import { ContextManager, Context } from '../context';
+export declare class TextAlertContext extends Context {
+    private _container;
+    constructor(contextManager: ContextManager);
+    showTextAlert(txt: string, options?: TextAlertOptions): void;
+}
+export interface TextAlertOptions {
+    classNames?: string[];
+    timeout?: number;
+    backgroundColor?: string;
+    textColor?: string;
+}
+export declare function showTextAlert(mgr: ContextManager, txt: string, options?: TextAlertOptions): void;

package/lib/contexts/textalertcontext.js

@@ -0,0 +1,36 @@
+import { Context } from '../context';
+import { useOverlay } from './canvascontext';
+export class TextAlertContext extends Context {
+    constructor(contextManager) {
+        super(contextManager, {});
+        this._container = document.createElement('div');
+        this._container.classList.add('zcomponent-textalert-container');
+        useOverlay(contextManager).addListener(val => {
+            val.appendChild(this._container);
+        });
+    }
+    showTextAlert(txt, options) {
+        const entry = document.createElement('div');
+        entry.classList.add('zcomponent-textalert');
+        options?.classNames?.forEach(val => entry.classList.add(val));
+        entry.innerText = txt;
+        entry.style.backgroundColor = options?.backgroundColor ?? 'black';
+        entry.style.color = options?.textColor ?? 'white';
+        entry.addEventListener('click', evt => {
+            entry.remove();
+            evt.stopPropagation();
+        });
+        this._container.appendChild(entry);
+        const timeout = options?.timeout ?? 3000;
+        setTimeout(() => {
+            entry.classList.add('zcomponent-textalert-shown');
+        }, 30);
+        setTimeout(() => {
+            entry.classList.remove('zcomponent-textalert-shown');
+            setTimeout(() => entry.remove(), 1000);
+        }, timeout);
+    }
+}
+export function showTextAlert(mgr, txt, options) {
+    return mgr.get(TextAlertContext).showTextAlert(txt, options);
+}

package/lib/selectors.js

@@ -212,22 +212,39 @@ export default Comp;
 `;
 };
 function makeCommentSafe(c) {
-    return c.replaceAll('*/', '').split('\n').join('\n\t* ');
+    return c.replaceAll('*/', '');
+}
+function getJSDocForProp(prop) {
+    let lines = [];
+    for (const comment of (prop.comments ?? [])) {
+        lines.push(...comment.split('\n'));
+    }
+    if (lines.length > 0)
+        lines.push('');
+    lines.push('@zprop');
+    if (prop.default !== undefined)
+        lines.push(`@zdefault ${JSON.stringify(prop.default)}`);
+    if (prop.group)
+        lines.push('@zgroup ' + prop.group);
+    if (prop.groupPriority)
+        lines.push('@zgrouppriority ' + prop.groupPriority);
+    if (prop.type.typeHint)
+        lines.push('@ztype ' + prop.type.typeHint);
+    if (prop.values) {
+        for (const val of prop.values) {
+            lines.push('@zvalues ' + val.type + ' ' + val.param);
+        }
+    }
+    lines = lines.map(makeCommentSafe);
+    lines = lines.map(entry => '\t * ' + entry);
+    return `\t/**\n${lines.join('\n')}\n\t */`;
 }
 function typeOutputForProp(prop) {
-    const comments = (prop.comments && prop.comments.length > 0) ? '\n\t* ' + prop.comments.map(makeCommentSafe).join('\n\t*\n\t* ') + '\n\t* ' : '';
-    return `	/**${comments}
-	* @zprop
-	* ${prop.default !== undefined ? `@zdefault ${JSON.stringify(prop.default)}` : ''}
-	*/
+    return `${getJSDocForProp(prop)}
 	public ${prop.name}: Observable<${outputForType(prop.type, true)}>;`;
 }
 function typeOutputForConstructorProp(prop) {
-    const comments = (prop.comments && prop.comments.length > 0) ? '\n\t* ' + prop.comments.map(makeCommentSafe).join('\n\t*\n\t* ') + '\n\t* ' : '';
-    return `	/**${comments}
-	* @zprop
-	* ${prop.default !== undefined && `@zdefault ${JSON.stringify(prop.default)}`}
-	*/
+    return `${getJSDocForProp(prop)}
 	${prop.name}: ${outputForType(prop.type, true)};`;
 }
 export function getSafeKeyName(n) {

package/lib/types.d.ts

@@ -55,10 +55,20 @@ export declare enum TypeHint {
     "proportion" = "proportion",
     'color-norm-rgb' = "color-norm-rgb",
     'color-unnorm-rgb' = "color-unnorm-rgb",
-    'color-hex' = "color-hex"
+    'color-hex' = "color-hex",
+    'color-css' = "color-css"
+}
+export declare enum ValuesType {
+    'files' = "files",
+    'animations' = "animations",
+    'morphTargets' = "morphTargets",
+    'events' = "events",
+    'parentNodes' = "parentNodes",
+    'nodelabels' = "nodelabels",
+    'nodeids' = "nodeids"
 }
 export interface Values {
-    type: 'files' | 'animations' | 'morphTargets' | 'events' | 'parentNodes' | 'nodelabels';
+    type: ValuesType;
     param: string;
 }
 export interface Prop {
@@ -104,6 +114,13 @@ export interface ValueInfo {
     type: Type;
     comments?: string[];
 }
+export interface PreviewInfo {
+    name: string;
+    file: string;
+    isDefault?: string;
+    comments?: string[];
+    filePattern: string;
+}
 export interface SourceFileTypeInfo {
     components: {
         [id: string]: ComponentInfo;
@@ -111,6 +128,9 @@ export interface SourceFileTypeInfo {
     values: {
         [id: string]: ValueInfo;
     };
+    previewers: {
+        [id: string]: PreviewInfo;
+    };
 }
 export type TypeInfoByFileName = {
     [id: string]: SourceFileTypeInfo;
@@ -124,6 +144,11 @@ export interface TemplateInfo {
     content: string;
     extn?: string;
 }
+export interface FileGenerator {
+    name: string;
+    url: string;
+    icon?: string;
+}
 export declare function symbolPathFromFilename(f: string): string;
 export declare function isValidValueForType(def: any, t: Type, allowUndefined?: boolean): boolean;
 export declare function outputForType(t: Type, alwaysBasic?: boolean): string;

package/lib/types.js

@@ -6,7 +6,18 @@ export var TypeHint;
     TypeHint["color-norm-rgb"] = "color-norm-rgb";
     TypeHint["color-unnorm-rgb"] = "color-unnorm-rgb";
     TypeHint["color-hex"] = "color-hex";
+    TypeHint["color-css"] = "color-css";
 })(TypeHint || (TypeHint = {}));
+export var ValuesType;
+(function (ValuesType) {
+    ValuesType["files"] = "files";
+    ValuesType["animations"] = "animations";
+    ValuesType["morphTargets"] = "morphTargets";
+    ValuesType["events"] = "events";
+    ValuesType["parentNodes"] = "parentNodes";
+    ValuesType["nodelabels"] = "nodelabels";
+    ValuesType["nodeids"] = "nodeids";
+})(ValuesType || (ValuesType = {}));
 function valuesCompatible(l, r) {
     if (!l && !r)
         return true;

package/lib/zcomponent.d.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentChildren, ConstructorProps } from './component';
+import { Component, ComponentChildren, ConstructorForComponent, ConstructorProps } from './component';
 import { ContextManager, Context } from './context';
 import { Entity } from './entity';
 import { ZComponentData } from './interfaces';
@@ -48,6 +48,7 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     constructor(contextManager: ContextManager, constructorProps: ConstructorProps, _opts: ZComponentOptions);
     private _constructorForNode;
     private _constructorForBehavior;
+    resolveNodeID<T extends Component = Component>(id: string, type?: ConstructorForComponent<T>): T | undefined;
     private _inflateBehaviors;
     private _wrapBehaviors;
     notifyPropsChanged(entries: Map<string, Set<string>>): void;

package/lib/zcomponent.js

@@ -178,6 +178,18 @@ export class ZComponent extends Component {
             }
         };
     }
+    resolveNodeID(id, type) {
+        const entity = this.entityByID.get(id);
+        if (!entity)
+            return this.getZComponentInstance()?.resolveNodeID(id, type);
+        if (!(entity instanceof Component))
+            return undefined;
+        if (!type)
+            return entity;
+        if (entity instanceof type)
+            return entity;
+        return undefined;
+    }
     _inflateBehaviors() {
         for (const [nodeID, impl, ctx] of this._behaviorsToInitialize) {
             this._wrapBehaviors(nodeID, impl, ctx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",