@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/components/Gamepad.js

@@ -1,9 +1,43 @@
+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 } from '../component';
 import { useOnBeforeRender } from '../contexts/canvascontext';
-import { isEditTime, EnvironmentContext } from '../contexts/environmentcontext';
+import { EnvironmentContext, isEditTime } from '../contexts/environmentcontext';
 import { GamepadContext } from '../contexts/gamepadcontext';
+import { zComponent, zUI } from '../decorators';
 import { Event } from '../event';
-import { Observable } from '../observable';
 /**
  * Manages gamepad interactions, facilitating the tracking and handling of button press events for a specific controller.
  *
@@ -11,53 +45,149 @@ import { Observable } from '../observable';
  * @zcomponent
  * @zicon sports_esports
  */
-export class Gamepad extends Component {
-    /**
-     * Creates a new Gamepad component.
-     * @param contextManager - The current ContextManager
-     * @param props - The constructor properties.
-     */
-    constructor(contextManager, props) {
-        super(contextManager, props);
-        /** @zprop */
-        this.onButtonDown = new Event();
-        /** @zprop */
-        this.onButtonUp = new Event();
-        /** @zprop */
-        this.onButtonSouth = new Event();
-        /** @zprop */
-        this.onButtonWest = new Event();
-        /** @zprop */
-        this.onButtonNorth = new Event();
-        /** @zprop */
-        this.onButtonEast = new Event();
-        /** @zprop */
-        this.onButtonShoulderLeft = new Event();
-        /** @zprop */
-        this.onButtonShoulderRight = new Event();
-        /** @zprop */
-        this.onButtonTriggerLeft = new Event();
-        /** @zprop */
-        this.onButtonTriggerRight = new Event();
-        /** @zprop */
-        this.onButtonDLeft = new Event();
-        /** @zprop */
-        this.onButtonDRight = new Event();
-        /** @zprop */
-        this.onButtonDUp = new Event();
-        /** @zprop */
-        this.onButtonDDown = new Event();
-        /** @zprop */
-        this.onButtonSelect = new Event();
-        /** @zprop */
-        this.onButtonStart = new Event();
-        /** @zprop */
-        this.onButtonCenter = new Event();
-        /** @zprop */
-        this.onButtonStickLeft = new Event();
-        /** @zprop */
-        this.onButtonStickRight = new Event();
-        this._indexMapping = [
+let Gamepad = (() => {
+    let _classDecorators = [zComponent({ icon: 'sports_esports' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    let _onButtonDown_decorators;
+    let _onButtonDown_initializers = [];
+    let _onButtonDown_extraInitializers = [];
+    let _onButtonUp_decorators;
+    let _onButtonUp_initializers = [];
+    let _onButtonUp_extraInitializers = [];
+    let _onButtonSouth_decorators;
+    let _onButtonSouth_initializers = [];
+    let _onButtonSouth_extraInitializers = [];
+    let _onButtonWest_decorators;
+    let _onButtonWest_initializers = [];
+    let _onButtonWest_extraInitializers = [];
+    let _onButtonNorth_decorators;
+    let _onButtonNorth_initializers = [];
+    let _onButtonNorth_extraInitializers = [];
+    let _onButtonEast_decorators;
+    let _onButtonEast_initializers = [];
+    let _onButtonEast_extraInitializers = [];
+    let _onButtonShoulderLeft_decorators;
+    let _onButtonShoulderLeft_initializers = [];
+    let _onButtonShoulderLeft_extraInitializers = [];
+    let _onButtonShoulderRight_decorators;
+    let _onButtonShoulderRight_initializers = [];
+    let _onButtonShoulderRight_extraInitializers = [];
+    let _onButtonTriggerLeft_decorators;
+    let _onButtonTriggerLeft_initializers = [];
+    let _onButtonTriggerLeft_extraInitializers = [];
+    let _onButtonTriggerRight_decorators;
+    let _onButtonTriggerRight_initializers = [];
+    let _onButtonTriggerRight_extraInitializers = [];
+    let _onButtonDLeft_decorators;
+    let _onButtonDLeft_initializers = [];
+    let _onButtonDLeft_extraInitializers = [];
+    let _onButtonDRight_decorators;
+    let _onButtonDRight_initializers = [];
+    let _onButtonDRight_extraInitializers = [];
+    let _onButtonDUp_decorators;
+    let _onButtonDUp_initializers = [];
+    let _onButtonDUp_extraInitializers = [];
+    let _onButtonDDown_decorators;
+    let _onButtonDDown_initializers = [];
+    let _onButtonDDown_extraInitializers = [];
+    let _onButtonSelect_decorators;
+    let _onButtonSelect_initializers = [];
+    let _onButtonSelect_extraInitializers = [];
+    let _onButtonStart_decorators;
+    let _onButtonStart_initializers = [];
+    let _onButtonStart_extraInitializers = [];
+    let _onButtonCenter_decorators;
+    let _onButtonCenter_initializers = [];
+    let _onButtonCenter_extraInitializers = [];
+    let _onButtonStickLeft_decorators;
+    let _onButtonStickLeft_initializers = [];
+    let _onButtonStickLeft_extraInitializers = [];
+    let _onButtonStickRight_decorators;
+    let _onButtonStickRight_initializers = [];
+    let _onButtonStickRight_extraInitializers = [];
+    let _controllerIndex_decorators;
+    let _controllerIndex_initializers = [];
+    let _controllerIndex_extraInitializers = [];
+    let _analogPressedThreshold_decorators;
+    let _analogPressedThreshold_initializers = [];
+    let _analogPressedThreshold_extraInitializers = [];
+    var Gamepad = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _onButtonDown_decorators = [zUI()];
+            _onButtonUp_decorators = [zUI()];
+            _onButtonSouth_decorators = [zUI()];
+            _onButtonWest_decorators = [zUI()];
+            _onButtonNorth_decorators = [zUI()];
+            _onButtonEast_decorators = [zUI()];
+            _onButtonShoulderLeft_decorators = [zUI()];
+            _onButtonShoulderRight_decorators = [zUI()];
+            _onButtonTriggerLeft_decorators = [zUI()];
+            _onButtonTriggerRight_decorators = [zUI()];
+            _onButtonDLeft_decorators = [zUI()];
+            _onButtonDRight_decorators = [zUI()];
+            _onButtonDUp_decorators = [zUI()];
+            _onButtonDDown_decorators = [zUI()];
+            _onButtonSelect_decorators = [zUI()];
+            _onButtonStart_decorators = [zUI()];
+            _onButtonCenter_decorators = [zUI()];
+            _onButtonStickLeft_decorators = [zUI()];
+            _onButtonStickRight_decorators = [zUI()];
+            _controllerIndex_decorators = [zUI()];
+            _analogPressedThreshold_decorators = [zUI()];
+            __esDecorate(null, null, _onButtonDown_decorators, { kind: "field", name: "onButtonDown", static: false, private: false, access: { has: obj => "onButtonDown" in obj, get: obj => obj.onButtonDown, set: (obj, value) => { obj.onButtonDown = value; } }, metadata: _metadata }, _onButtonDown_initializers, _onButtonDown_extraInitializers);
+            __esDecorate(null, null, _onButtonUp_decorators, { kind: "field", name: "onButtonUp", static: false, private: false, access: { has: obj => "onButtonUp" in obj, get: obj => obj.onButtonUp, set: (obj, value) => { obj.onButtonUp = value; } }, metadata: _metadata }, _onButtonUp_initializers, _onButtonUp_extraInitializers);
+            __esDecorate(null, null, _onButtonSouth_decorators, { kind: "field", name: "onButtonSouth", static: false, private: false, access: { has: obj => "onButtonSouth" in obj, get: obj => obj.onButtonSouth, set: (obj, value) => { obj.onButtonSouth = value; } }, metadata: _metadata }, _onButtonSouth_initializers, _onButtonSouth_extraInitializers);
+            __esDecorate(null, null, _onButtonWest_decorators, { kind: "field", name: "onButtonWest", static: false, private: false, access: { has: obj => "onButtonWest" in obj, get: obj => obj.onButtonWest, set: (obj, value) => { obj.onButtonWest = value; } }, metadata: _metadata }, _onButtonWest_initializers, _onButtonWest_extraInitializers);
+            __esDecorate(null, null, _onButtonNorth_decorators, { kind: "field", name: "onButtonNorth", static: false, private: false, access: { has: obj => "onButtonNorth" in obj, get: obj => obj.onButtonNorth, set: (obj, value) => { obj.onButtonNorth = value; } }, metadata: _metadata }, _onButtonNorth_initializers, _onButtonNorth_extraInitializers);
+            __esDecorate(null, null, _onButtonEast_decorators, { kind: "field", name: "onButtonEast", static: false, private: false, access: { has: obj => "onButtonEast" in obj, get: obj => obj.onButtonEast, set: (obj, value) => { obj.onButtonEast = value; } }, metadata: _metadata }, _onButtonEast_initializers, _onButtonEast_extraInitializers);
+            __esDecorate(null, null, _onButtonShoulderLeft_decorators, { kind: "field", name: "onButtonShoulderLeft", static: false, private: false, access: { has: obj => "onButtonShoulderLeft" in obj, get: obj => obj.onButtonShoulderLeft, set: (obj, value) => { obj.onButtonShoulderLeft = value; } }, metadata: _metadata }, _onButtonShoulderLeft_initializers, _onButtonShoulderLeft_extraInitializers);
+            __esDecorate(null, null, _onButtonShoulderRight_decorators, { kind: "field", name: "onButtonShoulderRight", static: false, private: false, access: { has: obj => "onButtonShoulderRight" in obj, get: obj => obj.onButtonShoulderRight, set: (obj, value) => { obj.onButtonShoulderRight = value; } }, metadata: _metadata }, _onButtonShoulderRight_initializers, _onButtonShoulderRight_extraInitializers);
+            __esDecorate(null, null, _onButtonTriggerLeft_decorators, { kind: "field", name: "onButtonTriggerLeft", static: false, private: false, access: { has: obj => "onButtonTriggerLeft" in obj, get: obj => obj.onButtonTriggerLeft, set: (obj, value) => { obj.onButtonTriggerLeft = value; } }, metadata: _metadata }, _onButtonTriggerLeft_initializers, _onButtonTriggerLeft_extraInitializers);
+            __esDecorate(null, null, _onButtonTriggerRight_decorators, { kind: "field", name: "onButtonTriggerRight", static: false, private: false, access: { has: obj => "onButtonTriggerRight" in obj, get: obj => obj.onButtonTriggerRight, set: (obj, value) => { obj.onButtonTriggerRight = value; } }, metadata: _metadata }, _onButtonTriggerRight_initializers, _onButtonTriggerRight_extraInitializers);
+            __esDecorate(null, null, _onButtonDLeft_decorators, { kind: "field", name: "onButtonDLeft", static: false, private: false, access: { has: obj => "onButtonDLeft" in obj, get: obj => obj.onButtonDLeft, set: (obj, value) => { obj.onButtonDLeft = value; } }, metadata: _metadata }, _onButtonDLeft_initializers, _onButtonDLeft_extraInitializers);
+            __esDecorate(null, null, _onButtonDRight_decorators, { kind: "field", name: "onButtonDRight", static: false, private: false, access: { has: obj => "onButtonDRight" in obj, get: obj => obj.onButtonDRight, set: (obj, value) => { obj.onButtonDRight = value; } }, metadata: _metadata }, _onButtonDRight_initializers, _onButtonDRight_extraInitializers);
+            __esDecorate(null, null, _onButtonDUp_decorators, { kind: "field", name: "onButtonDUp", static: false, private: false, access: { has: obj => "onButtonDUp" in obj, get: obj => obj.onButtonDUp, set: (obj, value) => { obj.onButtonDUp = value; } }, metadata: _metadata }, _onButtonDUp_initializers, _onButtonDUp_extraInitializers);
+            __esDecorate(null, null, _onButtonDDown_decorators, { kind: "field", name: "onButtonDDown", static: false, private: false, access: { has: obj => "onButtonDDown" in obj, get: obj => obj.onButtonDDown, set: (obj, value) => { obj.onButtonDDown = value; } }, metadata: _metadata }, _onButtonDDown_initializers, _onButtonDDown_extraInitializers);
+            __esDecorate(null, null, _onButtonSelect_decorators, { kind: "field", name: "onButtonSelect", static: false, private: false, access: { has: obj => "onButtonSelect" in obj, get: obj => obj.onButtonSelect, set: (obj, value) => { obj.onButtonSelect = value; } }, metadata: _metadata }, _onButtonSelect_initializers, _onButtonSelect_extraInitializers);
+            __esDecorate(null, null, _onButtonStart_decorators, { kind: "field", name: "onButtonStart", static: false, private: false, access: { has: obj => "onButtonStart" in obj, get: obj => obj.onButtonStart, set: (obj, value) => { obj.onButtonStart = value; } }, metadata: _metadata }, _onButtonStart_initializers, _onButtonStart_extraInitializers);
+            __esDecorate(null, null, _onButtonCenter_decorators, { kind: "field", name: "onButtonCenter", static: false, private: false, access: { has: obj => "onButtonCenter" in obj, get: obj => obj.onButtonCenter, set: (obj, value) => { obj.onButtonCenter = value; } }, metadata: _metadata }, _onButtonCenter_initializers, _onButtonCenter_extraInitializers);
+            __esDecorate(null, null, _onButtonStickLeft_decorators, { kind: "field", name: "onButtonStickLeft", static: false, private: false, access: { has: obj => "onButtonStickLeft" in obj, get: obj => obj.onButtonStickLeft, set: (obj, value) => { obj.onButtonStickLeft = value; } }, metadata: _metadata }, _onButtonStickLeft_initializers, _onButtonStickLeft_extraInitializers);
+            __esDecorate(null, null, _onButtonStickRight_decorators, { kind: "field", name: "onButtonStickRight", static: false, private: false, access: { has: obj => "onButtonStickRight" in obj, get: obj => obj.onButtonStickRight, set: (obj, value) => { obj.onButtonStickRight = value; } }, metadata: _metadata }, _onButtonStickRight_initializers, _onButtonStickRight_extraInitializers);
+            __esDecorate(null, null, _controllerIndex_decorators, { kind: "field", name: "controllerIndex", static: false, private: false, access: { has: obj => "controllerIndex" in obj, get: obj => obj.controllerIndex, set: (obj, value) => { obj.controllerIndex = value; } }, metadata: _metadata }, _controllerIndex_initializers, _controllerIndex_extraInitializers);
+            __esDecorate(null, null, _analogPressedThreshold_decorators, { kind: "field", name: "analogPressedThreshold", static: false, private: false, access: { has: obj => "analogPressedThreshold" in obj, get: obj => obj.analogPressedThreshold, set: (obj, value) => { obj.analogPressedThreshold = value; } }, metadata: _metadata }, _analogPressedThreshold_initializers, _analogPressedThreshold_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            Gamepad = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        onButtonDown = __runInitializers(this, _onButtonDown_initializers, new Event());
+        onButtonUp = (__runInitializers(this, _onButtonDown_extraInitializers), __runInitializers(this, _onButtonUp_initializers, new Event()));
+        onButtonSouth = (__runInitializers(this, _onButtonUp_extraInitializers), __runInitializers(this, _onButtonSouth_initializers, new Event()));
+        onButtonWest = (__runInitializers(this, _onButtonSouth_extraInitializers), __runInitializers(this, _onButtonWest_initializers, new Event()));
+        onButtonNorth = (__runInitializers(this, _onButtonWest_extraInitializers), __runInitializers(this, _onButtonNorth_initializers, new Event()));
+        onButtonEast = (__runInitializers(this, _onButtonNorth_extraInitializers), __runInitializers(this, _onButtonEast_initializers, new Event()));
+        onButtonShoulderLeft = (__runInitializers(this, _onButtonEast_extraInitializers), __runInitializers(this, _onButtonShoulderLeft_initializers, new Event()));
+        onButtonShoulderRight = (__runInitializers(this, _onButtonShoulderLeft_extraInitializers), __runInitializers(this, _onButtonShoulderRight_initializers, new Event()));
+        onButtonTriggerLeft = (__runInitializers(this, _onButtonShoulderRight_extraInitializers), __runInitializers(this, _onButtonTriggerLeft_initializers, new Event()));
+        onButtonTriggerRight = (__runInitializers(this, _onButtonTriggerLeft_extraInitializers), __runInitializers(this, _onButtonTriggerRight_initializers, new Event()));
+        onButtonDLeft = (__runInitializers(this, _onButtonTriggerRight_extraInitializers), __runInitializers(this, _onButtonDLeft_initializers, new Event()));
+        onButtonDRight = (__runInitializers(this, _onButtonDLeft_extraInitializers), __runInitializers(this, _onButtonDRight_initializers, new Event()));
+        onButtonDUp = (__runInitializers(this, _onButtonDRight_extraInitializers), __runInitializers(this, _onButtonDUp_initializers, new Event()));
+        onButtonDDown = (__runInitializers(this, _onButtonDUp_extraInitializers), __runInitializers(this, _onButtonDDown_initializers, new Event()));
+        onButtonSelect = (__runInitializers(this, _onButtonDDown_extraInitializers), __runInitializers(this, _onButtonSelect_initializers, new Event()));
+        onButtonStart = (__runInitializers(this, _onButtonSelect_extraInitializers), __runInitializers(this, _onButtonStart_initializers, new Event()));
+        onButtonCenter = (__runInitializers(this, _onButtonStart_extraInitializers), __runInitializers(this, _onButtonCenter_initializers, new Event()));
+        onButtonStickLeft = (__runInitializers(this, _onButtonCenter_extraInitializers), __runInitializers(this, _onButtonStickLeft_initializers, new Event()));
+        onButtonStickRight = (__runInitializers(this, _onButtonStickLeft_extraInitializers), __runInitializers(this, _onButtonStickRight_initializers, new Event()));
+        /**
+         * @default []
+         */
+        _indexMapping = (__runInitializers(this, _onButtonStickRight_extraInitializers), [
             this.onButtonSouth,
             this.onButtonEast,
             this.onButtonWest,
@@ -75,35 +205,41 @@ export class Gamepad extends Component {
             this.onButtonDLeft,
             this.onButtonDRight,
             this.onButtonCenter,
-        ];
+        ]);
+        controllerIndex = __runInitializers(this, _controllerIndex_initializers, undefined);
         /**
-         * @zprop
+         * @default 0.1
          */
-        this.controllerIndex = new Observable(undefined);
+        analogPressedThreshold = (__runInitializers(this, _controllerIndex_extraInitializers), __runInitializers(this, _analogPressedThreshold_initializers, 0.1));
+        _downLastFrame = (__runInitializers(this, _analogPressedThreshold_extraInitializers), new Map());
         /**
-         * @zprop
-         * @zdefault 0.1
+         * Creates a new Gamepad component.
+         * @param contextManager - The current ContextManager
+         * @param props - The constructor properties.
          */
-        this.analogPressedThreshold = new Observable(0.1);
-        this._downLastFrame = new Map();
-        this._updateRegistration = () => {
+        constructor(contextManager, props) {
+            super(contextManager, props);
+            const environment = this.contextManager.get(EnvironmentContext);
+            this.register(environment.editTime, this._updateRegistration);
+        }
+        _updateRegistration = () => {
             if (isEditTime(this.contextManager))
                 this.unregister(useOnBeforeRender(this.contextManager), this._update);
             else
                 this.register(useOnBeforeRender(this.contextManager), this._update);
         };
-        this._update = () => {
-            if (!this.enabledResolved.value)
+        _update = () => {
+            if (!this.enabledResolved)
                 return;
             const downEvents = [];
             const upEvents = [];
             const context = this.contextManager.get(GamepadContext);
-            context.forGamepadsMatchingIndex(this.controllerIndex.value, gamepad => {
+            context.forGamepadsMatchingIndex(this.controllerIndex, gamepad => {
                 const downLastFrame = this._downLastFrame.get(gamepad.index) ?? new Set();
                 this._downLastFrame.set(gamepad.index, downLastFrame);
                 for (let i = 0; i < gamepad.buttons.length; i++) {
                     const button = gamepad.buttons[i];
-                    const downThisFrame = button.pressed || button.value > this.analogPressedThreshold.value;
+                    const downThisFrame = button.pressed || button.value > this.analogPressedThreshold;
                     if (downThisFrame && !downLastFrame.has(i))
                         downEvents.push({
                             button: i,
@@ -134,7 +270,7 @@ export class Gamepad extends Component {
                 this.onButtonUp.emit(evt);
             }
         };
-        const environment = this.contextManager.get(EnvironmentContext);
-        this.register(environment.editTime, this._updateRegistration);
-    }
-}
+    };
+    return Gamepad = _classThis;
+})();
+export { Gamepad };

package/lib/components/LoaderScope.d.ts

@@ -0,0 +1,15 @@
+import { Component, ConstructorProps } from '../component';
+import { ContextManager } from '../context';
+/**
+ * Forks the LoadContext so that children components can have their own loading scope. Use this to create custom loading views for specific parts of your experience by adding loadable components within this scope along with an AnimatedLoader or DefaultLoader.
+ * @zcomponent
+ * @zicon hourglass_bottom
+ * @zgroup Advanced
+ */
+export declare class LoaderScope extends Component {
+    /**
+     * @param contextManager - The current ContextManager
+     * @param props - The constructor properties.
+     */
+    constructor(contextManager: ContextManager, props: ConstructorProps);
+}

package/lib/components/LoaderScope.js

@@ -0,0 +1,71 @@
+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 } from '../component';
+import { LoadContext } from '../contexts/loadcontext';
+import { zComponent } from '../decorators';
+/**
+ * Forks the LoadContext so that children components can have their own loading scope. Use this to create custom loading views for specific parts of your experience by adding loadable components within this scope along with an AnimatedLoader or DefaultLoader.
+ * @zcomponent
+ * @zicon hourglass_bottom
+ * @zgroup Advanced
+ */
+let LoaderScope = (() => {
+    let _classDecorators = [zComponent({ icon: 'hourglass_bottom', group: 'Advanced' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    var LoaderScope = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            LoaderScope = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        /**
+         * @param contextManager - The current ContextManager
+         * @param props - The constructor properties.
+         */
+        constructor(contextManager, props) {
+            const [childContextManager, loadContext] = contextManager.fork(LoadContext);
+            loadContext.isLoaded.value = true;
+            super(childContextManager, props);
+        }
+    };
+    return LoaderScope = _classThis;
+})();
+export { LoaderScope };

package/lib/components/LongLoad.d.ts

@@ -1,49 +1,45 @@
-import { Component, ContextManager, Event } from '..';
+import { Component, ContextManager, Event, Time } from '..';
 export interface LongLoadConstructorProps {
     /**
      * The number of loading processes to simulate
-     * @zprop
+     *
      * @zgroup LongLoad
      * @zgrouppriority 10
-     * @zdefault 10
+     * @default 10
      */
     numberOfLoads?: number;
     /**
      * The shortest time (in milliseconds) that a given load should take
-     * @zprop
+     *
      * @zgroup LongLoad
      * @zgrouppriority 10
-     * @ztype time-milliseconds
-     * @zdefault 500
+     * @default 500
      */
-    minimumLoadTime: number;
+    minimumLoadTime: Time<'milliseconds'>;
     /**
      * The shortest time (in milliseconds) that a given load should take
-     * @zprop
+     *
      * @zgroup LongLoad
      * @zgrouppriority 10
-     * @ztype time-milliseconds
-     * @zdefault 5000
+     * @default 5000
      */
-    maximumLoadTime: number;
+    maximumLoadTime: Time<'milliseconds'>;
     /**
      * If the long loading process should occur in production builds (in addition to development builds)
-     * @zprop
+     *
      * @zgroup LongLoad
      * @zgrouppriority 10
-     * @zdefault false
+     * @default false
      */
     runInProduction: boolean;
 }
 /**
  * Simulates long random loading times to facilitate development and debugging of loading processes.
- *
  * @zcomponent
  * @zicon settings
  * @zgroup Advanced
  */
 export declare class LongLoad extends Component<any, LongLoadConstructorProps> {
-    /** @zui */
     readonly onLoad: Event<[]>;
     /**
      * Creates an instance of LongLoad.

package/lib/components/LongLoad.js

@@ -1,44 +1,99 @@
-import { Component, Event, isDevelopmentBuild, registerLoadable } 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, Event, isDevelopmentBuild, registerLoadable, zComponent, zUI } from '..';
 /**
  * Simulates long random loading times to facilitate development and debugging of loading processes.
- *
  * @zcomponent
  * @zicon settings
  * @zgroup Advanced
  */
-export class LongLoad extends Component {
-    /**
-     * Creates an instance of LongLoad.
-     * @param contextManager - The current ContextManager
-     * @param props - The constructor properties.
-     * @returns - A new LongLoad instance.
-     */
-    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++) {
-            const promise = new Promise(resolve => {
-                if (this.disposed)
-                    return;
-                setTimeout(() => {
+let LongLoad = (() => {
+    let _classDecorators = [zComponent({ icon: 'settings', group: 'Advanced' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    let _onLoad_decorators;
+    let _onLoad_initializers = [];
+    let _onLoad_extraInitializers = [];
+    var LongLoad = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _onLoad_decorators = [zUI()];
+            __esDecorate(null, null, _onLoad_decorators, { kind: "field", name: "onLoad", static: false, private: false, access: { has: obj => "onLoad" in obj, get: obj => obj.onLoad, set: (obj, value) => { obj.onLoad = value; } }, metadata: _metadata }, _onLoad_initializers, _onLoad_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            LongLoad = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        onLoad = __runInitializers(this, _onLoad_initializers, new Event());
+        /**
+         * Creates an instance of LongLoad.
+         * @param contextManager - The current ContextManager
+         * @param props - The constructor properties.
+         * @returns - A new LongLoad instance.
+         */
+        constructor(contextManager, props) {
+            super(contextManager, props);
+            __runInitializers(this, _onLoad_extraInitializers);
+            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++) {
+                const promise = new Promise(resolve => {
                     if (this.disposed)
                         return;
-                    resolve();
-                }, minimumLoadTime + Math.random() * (maximumLoadTime - minimumLoadTime));
+                    setTimeout(() => {
+                        if (this.disposed)
+                            return;
+                        resolve();
+                    }, minimumLoadTime + Math.random() * (maximumLoadTime - minimumLoadTime));
+                });
+                registerLoadable(this, promise);
+                all.push(promise);
+            }
+            Promise.all(all).then(() => {
+                if (this.disposed)
+                    return;
+                this.onLoad.emit();
             });
-            registerLoadable(contextManager, promise);
-            all.push(promise);
         }
-        Promise.all(all).then(() => {
-            if (this.disposed)
-                return;
-            this.onLoad.emit();
-        });
-    }
-}
+    };
+    return LongLoad = _classThis;
+})();
+export { LongLoad };