@zcomponent/core 0.0.8 → 0.0.10

package/lib/actionbehavior.d.ts

@@ -1,8 +1,7 @@
-import { Behavior, BehaviorConstructorProps } from "./behavior";
+import { Behavior } from "./behavior";
 import { Component } from "./component";
 import { ContextManager } from "./context";
-import { Observable } from "./observable";
-export interface ActionBehaviorConstructorProps extends BehaviorConstructorProps {
+export interface ActionBehaviorConstructorProps {
     /** @zprop
      * @zvalues events
      */
@@ -13,14 +12,10 @@ export interface ActionBehaviorConstructorProps extends BehaviorConstructorProps
      */
     runAtEditTime: boolean;
 }
-export declare abstract class ActionBehavior<ConstructorProps extends ActionBehaviorConstructorProps = ActionBehaviorConstructorProps> extends Behavior<Component, ConstructorProps> {
-    /**
-     * @zprop
-     * @zdefault true
-     */
-    enabled: Observable<boolean, never>;
-    constructor(props: ConstructorProps, contextManager: ContextManager);
+export declare abstract class ActionBehavior<ConstructorProps extends ActionBehaviorConstructorProps = ActionBehaviorConstructorProps> extends Behavior<Component> {
+    protected constructorProps: ConstructorProps;
+    constructor(contextManager: ContextManager, instance: Component, constructorProps: ConstructorProps);
     private _updateRegistration;
     private _perform;
-    abstract perform(): any;
+    abstract perform(...args: any[]): any;
 }

package/lib/actionbehavior.js

@@ -1,38 +1,30 @@
 import { Behavior } from "./behavior";
 import { EnvironmentContext, isEditTime } from "./contexts/environmentcontext";
 import { Event } from "./event";
-import { Observable } from "./observable";
 export class ActionBehavior extends Behavior {
-    constructor(props, contextManager) {
-        super(props, contextManager);
-        /**
-         * @zprop
-         * @zdefault true
-         */
-        this.enabled = new Observable(true);
+    constructor(contextManager, instance, constructorProps) {
+        super(contextManager, instance);
+        this.constructorProps = constructorProps;
         this._updateRegistration = () => {
-            const evt = this.constructorProps.instance[this.constructorProps.event];
+            const evt = this.instance[this.constructorProps.event];
             if (evt instanceof Event) {
-                if (this.enabled.value && (!isEditTime(this.contextManager) || this.constructorProps.runAtEditTime === true)) {
+                this.unregister(evt, this._perform);
+                if (this.enabledResolved.value && (!isEditTime(this.contextManager) || this.constructorProps.runAtEditTime === true)) {
                     this.register(evt, this._perform);
                 }
-                else {
-                    this.unregister(evt, this._perform);
-                }
             }
         };
-        this._perform = (e) => {
-            if (!this.enabled.value)
-                return;
-            if (!this.instance.enabledResolved.value)
+        this._perform = (...args) => {
+            if (!this.enabledResolved.value)
                 return;
-            this.perform();
+            this.perform(...args);
+            const e = args[0];
             if (e && typeof e === 'object' && typeof e['stopPropagation'] === 'function') {
                 e['stopPropagation'].call(e);
             }
         };
         const env = contextManager.get(EnvironmentContext);
         this.register(env.editTime, this._updateRegistration);
-        this.register(this.enabled, this._updateRegistration);
+        this.register(this.enabledResolved, this._updateRegistration);
     }
 }

package/lib/animation.d.ts

@@ -1,7 +1,7 @@
-export declare type ByID<T> = {
+export type ByID<T> = {
     [id: string]: T | undefined;
 };
-export declare type ByNodeProperty<T> = {
+export type ByNodeProperty<T> = {
     [id: string]: {
         [id: string]: T | undefined;
     } | undefined;
@@ -10,7 +10,7 @@ export interface Animation {
     clips: ByID<Clip>;
     layers: ByID<Layer>;
 }
-export declare type BlendType = 'overlay' | 'add';
+export type BlendType = 'overlay' | 'add';
 export interface FadeParameters {
     time: number;
     pin?: 'start' | 'middle' | 'end';
@@ -25,7 +25,7 @@ export interface LayerClip {
     reverse?: boolean;
     playbackSpeed?: number;
 }
-export declare type Clip = StateClip | TimelineClip;
+export type Clip = StateClip | TimelineClip;
 export interface BaseClip {
     type: 'timeline' | 'state';
 }
@@ -48,7 +48,7 @@ export interface TimelineClip extends BaseClip {
     defaultFadeParameters?: FadeParameters;
     timeSourceTrack?: string;
 }
-export declare type Track = PropertyTrack | ClipTrack | StreamTrack | FunctionTrack | LabelTrack;
+export type Track = PropertyTrack | ClipTrack | StreamTrack | FunctionTrack | LabelTrack;
 export interface BaseTrack {
     type: 'property' | 'clip' | 'stream' | 'function' | 'label';
 }
@@ -58,9 +58,9 @@ export interface Keyframe<T> {
     label?: string;
     easing?: Easing;
 }
-export declare type Easing = 'linear' | 'step' | 'bounce' | Bezier[];
-export declare type BezierCP = [number, number];
-export declare type Bezier = [
+export type Easing = 'linear' | 'step' | 'bounce' | Bezier[];
+export type BezierCP = [number, number];
+export type Bezier = [
     BezierCP,
     BezierCP,
     [number, number]
@@ -105,7 +105,7 @@ export interface FunctionTrack extends BaseTrack {
     type: 'function';
     data: FunctionTrackEntry[];
 }
-export declare type FunctionTrackEntry = EntityFunctionTrackEntry | ImportFunctionTrackEntry;
+export type FunctionTrackEntry = EntityFunctionTrackEntry | ImportFunctionTrackEntry;
 export interface BaseFunctionTrackEntry {
     type: 'entity' | 'import';
     args: any[];

package/lib/behavior.d.ts

@@ -1,20 +1,31 @@
-import { Component } from './component';
+import { Component, ConstructorForComponent } from './component';
 import { ContextManager } from './context';
 import { Event } from './event';
 import { Observable } from './observable';
-export declare type BehaviorConstructor<BehaviorType = Behavior> = BehaviorType extends Behavior<any, infer ConstructorPropsType> ? new (props: ConstructorPropsType, contextManager: ContextManager) => BehaviorType : never;
-export declare type ConstructorPropsOfBehavior<BehaviorType> = BehaviorType extends Behavior<infer R> ? R : never;
-export interface BehaviorConstructorProps<InstanceType extends Component = Component> {
-    instance: InstanceType;
-}
-export declare class Behavior<InstanceType extends Component = Component, ConstructorPropsType extends BehaviorConstructorProps<InstanceType> = BehaviorConstructorProps<InstanceType>> {
-    constructorProps: ConstructorPropsType;
-    contextManager: ContextManager;
+import { ZComponent } from './zcomponent';
+export type BehaviorConstructor<BehaviorType = Behavior, K extends Component = Component> = BehaviorType extends Behavior<K> ? new (contextManager: ContextManager, instance: K, ...args: any[]) => BehaviorType : never;
+export type ConstructorPropsOfBehavior<BehaviorType> = BehaviorType extends Behavior<infer R> ? R : never;
+export type BehaviorConstructorProps = {
+    [id: string]: unknown;
+};
+export declare class Behavior<InstanceType extends Component = Component> {
+    protected readonly contextManager: ContextManager;
+    readonly instance: InstanceType;
     private static callSuperDispose;
     onDispose: Event<[]>;
-    instance: InstanceType;
     private _registered;
-    constructor(constructorProps: ConstructorPropsType, contextManager: ContextManager);
+    private _zcomponent;
+    constructor(contextManager: ContextManager, instance: InstanceType);
+    getZComponentInstance<T extends ZComponent = ZComponent>(type?: ConstructorForComponent<T>): T;
+    private _updateEnabledResolved;
+    /**
+     * @zprop
+     * @zdefault true
+     * @zgroup Behavior
+     * @zgrouppriority 10
+     */
+    enabled: Observable<boolean, never>;
+    enabledResolved: Observable<boolean, never>;
     register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
     register<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
     unregister<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
@@ -22,4 +33,4 @@ export declare class Behavior<InstanceType extends Component = Component, Constr
     dispose(): never;
 }
 export declare function shouldBehaviorRunAtDesignTime(b: BehaviorConstructor): boolean;
-export declare function registerBehaviorRunAtDesignTime(b: BehaviorConstructor): Set<new (props: BehaviorConstructorProps<Component<import("./component").ConstructorProps, any>>, contextManager: ContextManager) => Behavior<Component<import("./component").ConstructorProps, any>, BehaviorConstructorProps<Component<import("./component").ConstructorProps, any>>>>;
+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

@@ -1,12 +1,40 @@
 import { Event } from './event';
 import { Observable } from './observable';
+import { getCurrentZComponentConstruction } from './zcomponentconstruction';
 export class Behavior {
-    constructor(constructorProps, contextManager) {
-        this.constructorProps = constructorProps;
+    constructor(contextManager, instance) {
         this.contextManager = contextManager;
+        this.instance = instance;
         this.onDispose = new Event();
         this._registered = [];
-        this.instance = this.constructorProps.instance;
+        this._updateEnabledResolved = () => {
+            let newValue = this.enabled.value;
+            if (this.instance.enabledResolved?.value === false)
+                newValue = false;
+            if (newValue !== this.enabledResolved.value) {
+                this.enabledResolved.value = newValue;
+            }
+        };
+        /**
+         * @zprop
+         * @zdefault true
+         * @zgroup Behavior
+         * @zgrouppriority 10
+         */
+        this.enabled = new Observable(true);
+        this.enabledResolved = new Observable(true);
+        this._zcomponent = getCurrentZComponentConstruction();
+        this.register(this.enabled, this._updateEnabledResolved);
+        this.register(instance.enabledResolved, this._updateEnabledResolved);
+    }
+    getZComponentInstance(type) {
+        if (this._zcomponent === undefined)
+            throw new Error("getZComponentInstance called in behavior that's not part of a ZComponent");
+        if (!type)
+            return this._zcomponent;
+        if (this._zcomponent instanceof type)
+            return this._zcomponent;
+        throw new Error("getZComponentInstance called in behavior passing wrong kind of ZComponent");
     }
     register(e, fn) {
         if (e instanceof Event)

package/lib/behaviors/PlaySound.d.ts

@@ -1,4 +1,5 @@
 import { ActionBehavior, ActionBehaviorConstructorProps } from "../actionbehavior";
+import { Component } from "../component";
 import { ContextManager } from "../context";
 export interface PlaySoundProps extends ActionBehaviorConstructorProps {
     /** The URL of the file to play
@@ -16,7 +17,7 @@ export interface PlaySoundProps extends ActionBehaviorConstructorProps {
  */
 export declare class PlaySound extends ActionBehavior<PlaySoundProps> {
     private _elm;
-    constructor(props: PlaySoundProps, contextManager: ContextManager);
+    constructor(contextManager: ContextManager, instance: Component, props: PlaySoundProps);
     perform(): void;
     /** @zprop */
     preview(): void;

package/lib/behaviors/PlaySound.js

@@ -8,8 +8,8 @@ import { registerLoadable } from "../contexts/loadcontext";
  * @zgroup Actions
  */
 export class PlaySound extends ActionBehavior {
-    constructor(props, contextManager) {
-        super(props, contextManager);
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
         this._elm = document.createElement('audio');
         registerLoadable(contextManager, new Promise((resolve, reject) => {
             this._elm.addEventListener('canplaythrough', () => resolve());

package/lib/component.d.ts

@@ -1,33 +1,42 @@
 import { ContextManager } from './context';
 import { Event } from './event';
 import { Observable } from './observable';
-export declare type ComponentConstructor<ComponentType = Component> = ComponentType extends Component<infer ConstructorPropsType> ? new (props: ConstructorPropsType, contextManager: ContextManager) => ComponentType : never;
-export declare type ConstructorPropsOfComponent<ComponentType> = ComponentType extends Component<infer R> ? R : never;
-export declare type ComponentChild<ComponentType extends Component> = [ComponentConstructor<ComponentType>, ConstructorPropsOfComponent<ComponentType>] | [ComponentConstructor<ComponentType>, ConstructorPropsOfComponent<ComponentType>, Observable<ComponentType | undefined>];
-export declare type ComponentChildren = ComponentChild<Component>[];
+import { ZComponent } from './zcomponent';
+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;
+export type ComponentChild<ComponentType extends Component> = [ConstructorForComponent<ComponentType>, ComponentType extends Component<any, infer U> ? U : never] | [
+    ConstructorForComponent<ComponentType>,
+    ComponentType extends Component<any, infer U> ? U : never,
+    Observable<ComponentType>
+];
+export type ComponentChildren = ComponentChild<Component>[];
 export interface ConstructorProps {
     [id: string]: any;
     children?: ComponentChildren;
 }
-export interface ComponentOptions {
-    dontConstructChildren?: boolean;
-}
-export declare class Component<ConstructorPropsType extends ConstructorProps = ConstructorProps, RootType = any> {
-    constructorProps: ConstructorPropsType;
-    contextManager: ContextManager;
-    private _options?;
-    root?: RootType;
-    onDispose: Event<[]>;
-    children: Component[];
+export declare class Component<ElementType = any, ConstructorPropsType extends ConstructorProps = ConstructorProps> {
+    readonly contextManager: ContextManager;
+    protected constructorProps?: ConstructorPropsType | undefined;
+    element?: ElementType;
+    readonly onDispose: Event<[]>;
+    readonly children: Component[];
     parent?: Component;
     disposed: boolean;
     private _registered;
-    constructor(constructorProps: ConstructorPropsType, contextManager: ContextManager, _options?: ComponentOptions | undefined);
-    forEachRoot(fn: (root: any) => void): void;
+    private _zcomponent;
+    constructor(contextManager: ContextManager, constructorProps?: ConstructorPropsType | undefined);
+    constructChildren(children: ComponentChildren, contextManager?: ContextManager): void;
+    getZComponentInstance<T extends ZComponent = ZComponent>(type?: ConstructorForComponent<T>): T | undefined;
+    appendChild(c: Component): void;
+    removeChild(c: Component): void;
+    remove(): void;
+    get elementsResolved(): any[];
     /**
      * @zprop
      * @zdefault true
      * @zgroup Behavior
+     * @group Behavior
      * @zgrouppriority 10
      */
     enabled: Observable<boolean, never>;
@@ -35,10 +44,10 @@ export declare class Component<ConstructorPropsType extends ConstructorProps = C
     /**
      * @zprop
      * @zgroup Other
+     * @group Other
      * @zgrouppriority 0
      */
     tags: Observable<string[], never>;
-    protected _constructChildren(children?: ComponentChildren): void;
     protected register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
     protected register<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
     protected unregister<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;

package/lib/component.js

@@ -1,11 +1,11 @@
 import { TagContext } from './contexts/tagcontext';
 import { Event } from './event';
 import { Observable } from './observable';
+import { getCurrentZComponentConstruction } from './zcomponentconstruction';
 export class Component {
-    constructor(constructorProps, contextManager, _options) {
-        this.constructorProps = constructorProps;
+    constructor(contextManager, constructorProps) {
         this.contextManager = contextManager;
-        this._options = _options;
+        this.constructorProps = constructorProps;
         this.onDispose = new Event();
         this.children = [];
         this.disposed = false;
@@ -14,6 +14,7 @@ export class Component {
          * @zprop
          * @zdefault true
          * @zgroup Behavior
+         * @group Behavior
          * @zgrouppriority 10
          */
         this.enabled = new Observable(true);
@@ -21,6 +22,7 @@ export class Component {
         /**
          * @zprop
          * @zgroup Other
+         * @group Other
          * @zgrouppriority 0
          */
         this.tags = new Observable([]);
@@ -38,27 +40,59 @@ export class Component {
             const context = this.contextManager.get(TagContext);
             context.registerComponent(this, this.tags.value);
         };
-        if (this._options?.dontConstructChildren !== true)
-            this._constructChildren(this.constructorProps.children);
+        this._zcomponent = getCurrentZComponentConstruction();
+        this.constructChildren(constructorProps?.children ?? []);
         this.register(this.enabled, this._updateEnabledResolved);
         this.register(this.tags, this._updateTags);
     }
-    forEachRoot(fn) {
-        if (Array.isArray(this.root))
-            this.root.forEach(fn);
-        else if (this.root !== undefined)
-            fn(this.root);
-    }
-    _constructChildren(children) {
-        if (Array.isArray(children)) {
-            for (const child of children) {
-                const instance = new child[0](child[1], this.contextManager);
-                this.children.push(instance);
-                instance.parent = this;
-                if (child[2] instanceof Observable)
-                    child[2].value = instance;
+    constructChildren(children, contextManager) {
+        contextManager = contextManager ?? this.contextManager;
+        for (const [constructor, props, ref] of children) {
+            try {
+                const instance = new constructor(contextManager, props);
+                this.appendChild(instance);
+                if (ref)
+                    ref.value = instance;
             }
+            catch (err) {
+                console.log('An error occurred when constructing component child of type:', constructor, err);
+            }
+        }
+    }
+    getZComponentInstance(type) {
+        if (this._zcomponent === undefined)
+            throw new Error("getZComponentInstance called in component that's not part of a ZComponent");
+        if (!type)
+            return this._zcomponent;
+        if (this._zcomponent instanceof type)
+            return this._zcomponent;
+        throw new Error("getZComponentInstance called in component passing wrong kind of ZComponent");
+    }
+    appendChild(c) {
+        c.remove();
+        this.children.push(c);
+        c.parent = this;
+        c._updateEnabledResolved();
+    }
+    removeChild(c) {
+        const indx = this.children.indexOf(c);
+        if (indx >= 0)
+            this.children.splice(indx, 1);
+    }
+    remove() {
+        this.parent?.removeChild(this);
+    }
+    get elementsResolved() {
+        if (this.element !== undefined) {
+            if (Array.isArray(this.element))
+                return this.element;
+            return [this.element];
         }
+        const ret = [];
+        for (const child of this.children) {
+            ret.push(...child.elementsResolved);
+        }
+        return ret;
     }
     register(e, fn) {
         if (e instanceof Event)
@@ -82,7 +116,7 @@ export class Component {
             }
             catch (err) { }
         }
-        this.children = [];
+        this.children.length = 0;
         for (const entry of this._registered) {
             if (entry[0] instanceof Event)
                 entry[0].unbindfn(entry[1]);

package/lib/components/Children.d.ts

@@ -0,0 +1,8 @@
+import { Component, ConstructorProps } from "../component";
+import { ContextManager } from "../context";
+/**
+ * @zcomponent
+ */
+export declare class Children extends Component {
+    constructor(contextManager: ContextManager, props: ConstructorProps);
+}

package/lib/components/Children.js

@@ -0,0 +1,11 @@
+import { Component } from "../component";
+/**
+ * @zcomponent
+ */
+export class Children extends Component {
+    constructor(contextManager, props) {
+        super(contextManager, props);
+        const zcomponent = this.getZComponentInstance();
+        this.constructChildren(zcomponent?.constructorProps?.children ?? []);
+    }
+}

package/lib/components/DefaultLoader.d.ts

@@ -17,7 +17,7 @@ export interface DefaultLoaderConstructorProps {
  * @zgroup Advanced
  */
 export declare class DefaultLoader extends Component {
-    root: HTMLDivElement;
+    element: HTMLDivElement;
     /** @zprop
     * @zdefault false
     * @zgroup Design Time
@@ -54,7 +54,7 @@ export declare class DefaultLoader extends Component {
     zIndex: Observable<number>;
     private _percentageElement;
     private _attached;
-    constructor(constructorProps: DefaultLoaderConstructorProps, contextManager: ContextManager);
+    constructor(contextManager: ContextManager, constructorProps: DefaultLoaderConstructorProps);
     private _updatePercentage;
     private _updateVisibility;
     private _update;

package/lib/components/DefaultLoader.js

@@ -7,9 +7,9 @@ import { Component, useCanvas, Observable, isDesignTime, useIsLoaded, useLoadPer
  * @zgroup Advanced
  */
 export class DefaultLoader extends Component {
-    constructor(constructorProps, contextManager) {
-        super(constructorProps, contextManager);
-        this.root = document.createElement('div');
+    constructor(contextManager, constructorProps) {
+        super(contextManager, constructorProps);
+        this.element = document.createElement('div');
         /** @zprop
         * @zdefault false
         * @zgroup Design Time
@@ -28,11 +28,11 @@ export class DefaultLoader extends Component {
             if (isDesignTime(this.contextManager) && this.preview.value)
                 shouldBeAttached = true;
             if (!this._attached && shouldBeAttached) {
-                document.body.appendChild(this.root);
+                document.body.appendChild(this.element);
                 this._attached = true;
             }
             else if (this._attached && !shouldBeAttached) {
-                this.root.remove();
+                this.element.remove();
                 this._attached = false;
             }
         };
@@ -40,25 +40,25 @@ export class DefaultLoader extends Component {
             if (this.disposed)
                 return;
             const rect = useCanvas(this.contextManager).getBoundingClientRect();
-            this.root.style.left = rect.left.toString() + "px";
-            this.root.style.top = rect.top.toString() + "px";
-            this.root.style.width = rect.width.toString() + "px";
-            this.root.style.height = rect.height.toString() + "px";
+            this.element.style.left = rect.left.toString() + "px";
+            this.element.style.top = rect.top.toString() + "px";
+            this.element.style.width = rect.width.toString() + "px";
+            this.element.style.height = rect.height.toString() + "px";
             requestAnimationFrame(this._update);
         };
-        this.root.innerHTML = loaderHTML;
-        this.root.className = "zcomponent-defaultloader";
+        this.element.innerHTML = loaderHTML;
+        this.element.className = "zcomponent-defaultloader";
         if (constructorProps.backgroundImage) {
-            this.root.style.backgroundImage = `url(${constructorProps.backgroundImage})`;
+            this.element.style.backgroundImage = `url(${constructorProps.backgroundImage})`;
         }
-        const titleElement = this.root.querySelector("#zcomponent-defaultloader-title") || document.createElement("h1");
-        const subtitleElement = this.root.querySelector("#zcomponent-defaultloader-subtitle") || document.createElement("h1");
-        this._percentageElement = this.root.querySelector("#zcomponent-defaultloader-progress-percentage") || document.createElement("div");
+        const titleElement = this.element.querySelector("#zcomponent-defaultloader-title") || document.createElement("h1");
+        const subtitleElement = this.element.querySelector("#zcomponent-defaultloader-subtitle") || document.createElement("h1");
+        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.root.style.color = t ?? 'white');
-        this.backgroundColor = new Observable('black', t => this.root.style.backgroundColor = t ?? 'black');
-        this.zIndex = new Observable(1000, t => this.root.style.zIndex = t.toString());
+        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.zIndex = new Observable(1000, t => this.element.style.zIndex = t.toString());
         this.register(this.preview, this._updatePercentage);
         this.register(this.preview, this._updateVisibility);
         this.register(useIsLoaded(contextManager), this._updateVisibility);
@@ -66,7 +66,7 @@ export class DefaultLoader extends Component {
         this._update();
     }
     dispose() {
-        this.root.remove();
+        this.element.remove();
         return super.dispose();
     }
 }

package/lib/components/Gamepad.d.ts

@@ -0,0 +1,68 @@
+import { Component } from "../component";
+import { ContextManager } from "../context";
+import { Event } from "../event";
+import { Observable } from "../observable";
+export interface GamepadButtonEvent {
+    button: number;
+    gamepad: number;
+    pressed: boolean;
+    touched: boolean;
+    value: number;
+}
+/**
+ * @zcomponent
+ */
+export declare class Gamepad extends Component {
+    /** @zprop */
+    onButtonDown: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonUp: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonSouth: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonWest: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonNorth: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonEast: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonShoulderLeft: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonShoulderRight: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonTriggerLeft: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonTriggerRight: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonDLeft: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonDRight: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonDUp: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonDDown: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonSelect: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonStart: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonCenter: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonStickLeft: Event<[GamepadButtonEvent]>;
+    /** @zprop */
+    onButtonStickRight: Event<[GamepadButtonEvent]>;
+    private _indexMapping;
+    /**
+     * @zprop
+     */
+    controllerIndex: Observable<number | undefined, never>;
+    /**
+     * @zprop
+     * @zdefault 0.1
+     */
+    analogPressedThreshold: Observable<number, never>;
+    private _downLastFrame;
+    constructor(contextManager: ContextManager, props: any);
+    private _updateRegistration;
+    private _update;
+}