@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/components/DefaultLoader.d.ts

@@ -1,58 +1,70 @@
-import { Component, Observable, ContextManager } from '..';
+import { Component, ContextManager, ProjectFile } from '..';
 export interface DefaultLoaderConstructorProps {
-    /** @zprop
+    /**
      * @zgroup Appearance
      * @zgrouppriority 10
-     * @zvalues files *.+(jpg|jpeg|png|webp)
      */
-    backgroundImage: string;
+    backgroundImage: ProjectFile<'*.+(jpg|jpeg|png|webp)'>;
 }
 /**
  * The DefaultLoader shows a customizable loading bar while the assets of your experience are being downloaded and parsed by the browser.
- *
  * @zcomponent
- * @zicon loader
+ * @zicon hourglass_bottom
  * @zgroup Advanced
  */
 export declare class DefaultLoader extends Component {
+    /**
+     * @zignore
+     */
     element: HTMLDivElement;
-    /** @zprop
-     * @zdefault false
+    /**
+     * @default false
+     * @zui
      * @zgroup Design Time
-     * @zgrouppriority 30
      */
-    readonly preview: Observable<boolean, never>;
-    /** @zprop
+    preview: boolean;
+    /**
+     * @default ""
+     * @zui
      * @zgroup Text
-     * @zgrouppriority 20
      */
-    readonly title: Observable<string>;
-    /** @zprop
+    title: string;
+    /**
+     * @default ""
+     * @zui
      * @zgroup Text
-     * @zgrouppriority 20
      */
-    readonly subtitle: Observable<string>;
-    /** @zprop
-     * @zdefault #000000
+    subtitle: string;
+    /**
+     * @default "#000000"
+     * @zui
      * @zgroup Appearance
-     * @zgrouppriority 10
      * @ztype color-hex
      */
-    readonly backgroundColor: Observable<string>;
-    /** @zprop
-     * @zdefault #ffffff
+    backgroundColor: string;
+    /**
+     * @default "#ffffff"
+     * @zui
      * @zgroup Appearance
-     * @zgrouppriority 10
      * @ztype color-hex
      */
-    readonly textColor: Observable<string>;
-    /** @zprop
-     * @zdefault 1000
+    textColor: string;
+    /**
+     * @default 1000
+     * @zui
+     * @zgroup Appearance
+     */
+    zIndex: number;
+    /**
+     * @default false
+     * @zui
      * @zgroup Appearance
-     * @zgrouppriority 10
      */
-    readonly zIndex: Observable<number>;
+    showIfLoadingAfterStart: boolean;
     private _percentageElement;
+    /**
+     * @default false
+     */
     private _attached;
     /**
      * Creates a new DefaultLoader component.

package/lib/components/DefaultLoader.js

@@ -1,36 +1,204 @@
-import { Component, useCanvas, Observable, isDesignTime, useIsLoaded, useLoadPercent, isStarted } from '..';
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { Component, isDesignTime, isStarted, useCanvas, useIsLoaded, useLoadPercent, zComponent, zIgnore, zObserve, zUI } from '..';
 /**
  * The DefaultLoader shows a customizable loading bar while the assets of your experience are being downloaded and parsed by the browser.
- *
  * @zcomponent
- * @zicon loader
+ * @zicon hourglass_bottom
  * @zgroup Advanced
  */
-export class DefaultLoader extends Component {
-    /**
-     * Creates a new DefaultLoader component.
-     * @param contextManager - The current ContextManager
-     * @param constructorProps - The constructor properties.
-     */
-    constructor(contextManager, constructorProps) {
-        super(contextManager, constructorProps);
-        this.element = document.createElement('div');
-        /** @zprop
-         * @zdefault false
+let DefaultLoader = (() => {
+    let _classDecorators = [zComponent({ icon: 'hourglass_bottom', group: 'Advanced' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    let _element_decorators;
+    let _element_initializers = [];
+    let _element_extraInitializers = [];
+    let _preview_decorators;
+    let _preview_initializers = [];
+    let _preview_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _subtitle_decorators;
+    let _subtitle_initializers = [];
+    let _subtitle_extraInitializers = [];
+    let _backgroundColor_decorators;
+    let _backgroundColor_initializers = [];
+    let _backgroundColor_extraInitializers = [];
+    let _textColor_decorators;
+    let _textColor_initializers = [];
+    let _textColor_extraInitializers = [];
+    let _zIndex_decorators;
+    let _zIndex_initializers = [];
+    let _zIndex_extraInitializers = [];
+    let _showIfLoadingAfterStart_decorators;
+    let _showIfLoadingAfterStart_initializers = [];
+    let _showIfLoadingAfterStart_extraInitializers = [];
+    var DefaultLoader = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _element_decorators = [zIgnore()];
+            _preview_decorators = [zUI({ group: 'Design Time', priority: 30 }), zObserve(function () {
+                    this._updateVisibility();
+                })];
+            _title_decorators = [zUI({ group: 'Text', priority: 20 }), zObserve(function (value) {
+                    const titleElement = this.element.querySelector('#zcomponent-defaultloader-title');
+                    if (titleElement)
+                        titleElement.innerText = value;
+                })];
+            _subtitle_decorators = [zUI({ group: 'Text', priority: 20 }), zObserve(function (value) {
+                    const subtitleElement = this.element.querySelector('#zcomponent-defaultloader-subtitle');
+                    if (subtitleElement)
+                        subtitleElement.innerText = value;
+                })];
+            _backgroundColor_decorators = [zUI({ group: 'Appearance', priority: 10, type: 'color-hex' }), zObserve(function (value) {
+                    this.element.style.backgroundColor = value;
+                })];
+            _textColor_decorators = [zUI({ group: 'Appearance', priority: 10, type: 'color-hex' }), zObserve(function (value) {
+                    this.element.style.color = value;
+                })];
+            _zIndex_decorators = [zUI({ group: 'Appearance', priority: 10 }), zObserve(function (value) {
+                    this.element.style.zIndex = value.toString();
+                })];
+            _showIfLoadingAfterStart_decorators = [zUI({ group: 'Appearance', priority: 10 }), zObserve((v, instance) => () => instance._updateVisibility())];
+            __esDecorate(null, null, _element_decorators, { kind: "field", name: "element", static: false, private: false, access: { has: obj => "element" in obj, get: obj => obj.element, set: (obj, value) => { obj.element = value; } }, metadata: _metadata }, _element_initializers, _element_extraInitializers);
+            __esDecorate(null, null, _preview_decorators, { kind: "field", name: "preview", static: false, private: false, access: { has: obj => "preview" in obj, get: obj => obj.preview, set: (obj, value) => { obj.preview = value; } }, metadata: _metadata }, _preview_initializers, _preview_extraInitializers);
+            __esDecorate(null, null, _title_decorators, { kind: "field", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(null, null, _subtitle_decorators, { kind: "field", name: "subtitle", static: false, private: false, access: { has: obj => "subtitle" in obj, get: obj => obj.subtitle, set: (obj, value) => { obj.subtitle = value; } }, metadata: _metadata }, _subtitle_initializers, _subtitle_extraInitializers);
+            __esDecorate(null, null, _backgroundColor_decorators, { kind: "field", name: "backgroundColor", static: false, private: false, access: { has: obj => "backgroundColor" in obj, get: obj => obj.backgroundColor, set: (obj, value) => { obj.backgroundColor = value; } }, metadata: _metadata }, _backgroundColor_initializers, _backgroundColor_extraInitializers);
+            __esDecorate(null, null, _textColor_decorators, { kind: "field", name: "textColor", static: false, private: false, access: { has: obj => "textColor" in obj, get: obj => obj.textColor, set: (obj, value) => { obj.textColor = value; } }, metadata: _metadata }, _textColor_initializers, _textColor_extraInitializers);
+            __esDecorate(null, null, _zIndex_decorators, { kind: "field", name: "zIndex", static: false, private: false, access: { has: obj => "zIndex" in obj, get: obj => obj.zIndex, set: (obj, value) => { obj.zIndex = value; } }, metadata: _metadata }, _zIndex_initializers, _zIndex_extraInitializers);
+            __esDecorate(null, null, _showIfLoadingAfterStart_decorators, { kind: "field", name: "showIfLoadingAfterStart", static: false, private: false, access: { has: obj => "showIfLoadingAfterStart" in obj, get: obj => obj.showIfLoadingAfterStart, set: (obj, value) => { obj.showIfLoadingAfterStart = value; } }, metadata: _metadata }, _showIfLoadingAfterStart_initializers, _showIfLoadingAfterStart_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            DefaultLoader = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        /**
+         * @zignore
+         */
+        element = __runInitializers(this, _element_initializers, document.createElement('div'));
+        /**
+         * @default false
+         * @zui
          * @zgroup Design Time
-         * @zgrouppriority 30
          */
-        this.preview = new Observable(false);
-        this._attached = false;
-        this._updatePercentage = () => {
-            const p = isDesignTime(this.contextManager) && this.preview.value ? 30 : useLoadPercent(this.contextManager).value;
+        preview = (__runInitializers(this, _element_extraInitializers), __runInitializers(this, _preview_initializers, false));
+        /**
+         * @default ""
+         * @zui
+         * @zgroup Text
+         */
+        title = (__runInitializers(this, _preview_extraInitializers), __runInitializers(this, _title_initializers, ''));
+        /**
+         * @default ""
+         * @zui
+         * @zgroup Text
+         */
+        subtitle = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _subtitle_initializers, ''));
+        /**
+         * @default "#000000"
+         * @zui
+         * @zgroup Appearance
+         * @ztype color-hex
+         */
+        backgroundColor = (__runInitializers(this, _subtitle_extraInitializers), __runInitializers(this, _backgroundColor_initializers, '#000000'));
+        /**
+         * @default "#ffffff"
+         * @zui
+         * @zgroup Appearance
+         * @ztype color-hex
+         */
+        textColor = (__runInitializers(this, _backgroundColor_extraInitializers), __runInitializers(this, _textColor_initializers, '#ffffff'));
+        /**
+         * @default 1000
+         * @zui
+         * @zgroup Appearance
+         */
+        zIndex = (__runInitializers(this, _textColor_extraInitializers), __runInitializers(this, _zIndex_initializers, 1000));
+        /**
+         * @default false
+         * @zui
+         * @zgroup Appearance
+         */
+        showIfLoadingAfterStart = (__runInitializers(this, _zIndex_extraInitializers), __runInitializers(this, _showIfLoadingAfterStart_initializers, false));
+        _percentageElement = __runInitializers(this, _showIfLoadingAfterStart_extraInitializers);
+        /**
+         * @default false
+         */
+        _attached = false;
+        /**
+         * Creates a new DefaultLoader component.
+         * @param contextManager - The current ContextManager
+         * @param constructorProps - The constructor properties.
+         */
+        constructor(contextManager, constructorProps) {
+            super(contextManager, constructorProps);
+            this.element.innerHTML = loaderHTML;
+            this.element.className = 'zcomponent-defaultloader';
+            if (constructorProps.backgroundImage)
+                this.element.style.backgroundImage = `url(${constructorProps.backgroundImage})`;
+            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');
+            // Set initial values
+            if (this.title)
+                titleElement.innerText = this.title;
+            if (this.subtitle)
+                subtitleElement.innerText = this.subtitle;
+            this.element.style.color = this.textColor;
+            this.element.style.backgroundColor = this.backgroundColor;
+            this.element.style.zIndex = this.zIndex.toString();
+            // Register event handlers
+            this.register(useIsLoaded(contextManager), this._updateVisibility);
+            this.register(useLoadPercent(contextManager), this._updatePercentage);
+            this._update();
+        }
+        _updatePercentage = () => {
+            const p = isDesignTime(this.contextManager) && this.preview ? 30 : useLoadPercent(this.contextManager).value;
             this._percentageElement.style.width = p.toString() + '%';
         };
-        this._updateVisibility = () => {
+        _updateVisibility = () => {
             let shouldBeAttached = false;
-            if (!isDesignTime(this.contextManager) && !useIsLoaded(this.contextManager).value && !isStarted(this.contextManager))
+            if (!isDesignTime(this.contextManager) && !useIsLoaded(this.contextManager).value && (!isStarted(this.contextManager) || this.showIfLoadingAfterStart))
                 shouldBeAttached = true;
-            if (isDesignTime(this.contextManager) && this.preview.value)
+            if (isDesignTime(this.contextManager) && this.preview)
                 shouldBeAttached = true;
             if (!this._attached && shouldBeAttached) {
                 document.body.appendChild(this.element);
@@ -41,7 +209,7 @@ export class DefaultLoader extends Component {
                 this._attached = false;
             }
         };
-        this._update = () => {
+        _update = () => {
             if (this.disposed)
                 return;
             const rect = useCanvas(this.contextManager).getBoundingClientRect();
@@ -51,30 +219,14 @@ export class DefaultLoader extends Component {
             this.element.style.height = rect.height.toString() + 'px';
             requestAnimationFrame(this._update);
         };
-        this.element.innerHTML = loaderHTML;
-        this.element.className = 'zcomponent-defaultloader';
-        if (constructorProps.backgroundImage) {
-            this.element.style.backgroundImage = `url(${constructorProps.backgroundImage})`;
+        dispose() {
+            this.element.remove();
+            return super.dispose();
         }
-        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('#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);
-        this.register(useIsLoaded(contextManager), this._updateVisibility);
-        this.register(useLoadPercent(contextManager), this._updatePercentage);
-        this._update();
-    }
-    dispose() {
-        this.element.remove();
-        return super.dispose();
-    }
-}
+    };
+    return DefaultLoader = _classThis;
+})();
+export { DefaultLoader };
 const loaderHTML = `
 <div id="zcomponent-defaultloader-container">
     <h1 id="zcomponent-defaultloader-title"></h1>

package/lib/components/Gamepad.d.ts

@@ -1,7 +1,6 @@
 import { Component } from '../component';
 import { ContextManager } from '../context';
 import { Event } from '../event';
-import { Observable } from '../observable';
 export interface GamepadButtonEvent {
     button: number;
     gamepad: number;
@@ -17,54 +16,34 @@ export interface GamepadButtonEvent {
  * @zicon sports_esports
  */
 export declare class Gamepad extends Component {
-    /** @zprop */
     readonly onButtonDown: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonUp: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonSouth: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonWest: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonNorth: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonEast: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonShoulderLeft: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonShoulderRight: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonTriggerLeft: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonTriggerRight: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonDLeft: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonDRight: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonDUp: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonDDown: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonSelect: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonStart: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonCenter: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonStickLeft: Event<[GamepadButtonEvent]>;
-    /** @zprop */
     readonly onButtonStickRight: Event<[GamepadButtonEvent]>;
-    private _indexMapping;
     /**
-     * @zprop
+     * @default []
      */
-    readonly controllerIndex: Observable<number | undefined, never>;
+    private _indexMapping;
+    controllerIndex?: number;
     /**
-     * @zprop
-     * @zdefault 0.1
+     * @default 0.1
      */
-    readonly analogPressedThreshold: Observable<number, never>;
+    analogPressedThreshold: number;
     private _downLastFrame;
     /**
      * Creates a new Gamepad component.