@zcomponent/core 0.0.15 → 0.0.17

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,8 +17,13 @@ export class Behavior extends Entity {
                 this.enabledResolved.value = newValue;
             }
         };
-        this.register(this.enabled, this._updateEnabledResolved);
-        this.register(instance.enabledResolved, this._updateEnabledResolved);
+        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();

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.
          *
@@ -36,8 +37,8 @@ export class Component extends Entity {
             context.registerComponent(this, this.tags.value);
         };
         this.constructChildren(constructorProps?.children ?? []);
-        this.register(this.enabled, this._updateEnabledResolved);
-        this.register(this.tags, this._updateTags);
+        this.register(this.enabled, this._updateEnabledResolved, { bindWhenDisabled: true });
+        this.register(this.tags, this._updateTags, { bindWhenDisabled: true });
     }
     constructChildren(children, contextManager) {
         contextManager = contextManager ?? this.contextManager;
@@ -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/emitter.d.ts

@@ -1,7 +1,5 @@
-import { Observable } from "./observable";
 export declare class Emitter<Args extends Array<any> = []> {
-    hasListeners: Observable<boolean, never>;
-    private _funcs;
+    protected _funcs: [fn: ((...args: Args) => void), priority: number][];
     private _emitting;
     private _toUnbind;
     private _needsSort;

package/lib/emitter.js

@@ -1,7 +1,5 @@
-import { Observable } from "./observable";
 export class Emitter {
     constructor() {
-        this.hasListeners = new Observable(false);
         this._funcs = [];
         this._emitting = false;
         this._toUnbind = new Set();
@@ -9,7 +7,6 @@ export class Emitter {
     }
     clearListeners() {
         this._funcs = [];
-        this.hasListeners.value = false;
         this._needsSort = false;
     }
     /**
@@ -19,8 +16,6 @@ export class Emitter {
     addListener(f, priority = 0) {
         this._funcs.push([f, priority]);
         this._needsSort = true;
-        if (!this.hasListeners.value)
-            this.hasListeners.value = true;
     }
     /**
      * Unbind an existing function
@@ -36,8 +31,6 @@ export class Emitter {
         if (indx > -1) {
             this._funcs.splice(indx, 1);
         }
-        if (this._funcs.length === 0 && this.hasListeners.value)
-            this.hasListeners.value = false;
     }
     /**
      * Emit an event

package/lib/entity.js

@@ -49,7 +49,9 @@ export class Entity {
         this.enabledResolved = new Observable(true);
         this._updateHandlers = (enabled) => {
             if (enabled && !this._handlersBound) {
-                for (const [e, fn, priority] of this._registered) {
+                for (const [e, fn, priority, bindWhenDisabled] of this._registered) {
+                    if (bindWhenDisabled)
+                        continue;
                     e.addListener(fn, priority);
                 }
                 this._handlersBound = true;

package/lib/event.d.ts

@@ -1,9 +1,14 @@
 import { Emitter } from "./emitter";
+import { Observable } from "./observable";
 export declare class Event<Args extends Array<any> = []> extends Emitter<Args> {
+    hasListeners: Observable<boolean, never>;
     /**
      * Emit an event.
      *
      * @param a - The argument to pass to handler functions.
      */
     emit(...args: Args): void;
+    clearListeners(): void;
+    addListener(f: (...args: Args) => void, priority?: number): void;
+    removeListener(f: (...args: Args) => void): void;
 }

package/lib/event.js

@@ -1,5 +1,10 @@
 import { Emitter } from "./emitter";
+import { Observable } from "./observable";
 export class Event extends Emitter {
+    constructor() {
+        super(...arguments);
+        this.hasListeners = new Observable(false);
+    }
     /**
      * Emit an event.
      *
@@ -8,4 +13,18 @@ export class Event extends Emitter {
     emit(...args) {
         super._emit(...args);
     }
+    clearListeners() {
+        super.clearListeners();
+        if (!this.hasListeners.value)
+            this.hasListeners.value = true;
+    }
+    addListener(f, priority) {
+        super.addListener(f, priority);
+        this.hasListeners.value = true;
+    }
+    removeListener(f) {
+        super.removeListener(f);
+        if (this._funcs.length === 0 && this.hasListeners.value)
+            this.hasListeners.value = false;
+    }
 }

package/lib/observable.js

@@ -117,7 +117,7 @@ export class Observable extends Emitter {
         this._emitValue();
     }
     addListener(fn, priority = 0) {
-        this.addListener(fn);
+        super.addListener(fn);
         try {
             fn(this._value.proxy);
         }

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,19 @@ 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"
 }
 export interface Values {
-    type: 'files' | 'animations' | 'morphTargets' | 'events' | 'parentNodes' | 'nodelabels';
+    type: ValuesType;
     param: string;
 }
 export interface Prop {
@@ -104,6 +113,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 +127,9 @@ export interface SourceFileTypeInfo {
     values: {
         [id: string]: ValueInfo;
     };
+    previewers: {
+        [id: string]: PreviewInfo;
+    };
 }
 export type TypeInfoByFileName = {
     [id: string]: SourceFileTypeInfo;

package/lib/types.js

@@ -6,7 +6,17 @@ 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 || (ValuesType = {}));
 function valuesCompatible(l, r) {
     if (!l && !r)
         return true;

package/package.json

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