@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/component.js

@@ -1,6 +1,41 @@
+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 { TagContext } from './contexts/tagcontext';
+import { zObserve, zUI } from './decorators';
 import { Entity } from './entity';
-import { Observable } from './observable';
+import { notify } from './observe';
 /**
  * Base class for all components.
  *
@@ -10,23 +45,186 @@ import { Observable } from './observable';
  *
  * @link [custom-components](https://docs.zap.works/mattercraft/scripting/custom-components/)
  */
-export class Component extends Entity {
-    /**
-     * Creates an instance of Component.
-     * @param contextManager The current ContextManager
-     * @param constructorProps - The constructor properties.
-     */
-    constructor(contextManager, constructorProps) {
-        super(contextManager);
-        this.constructorProps = constructorProps;
+let Component = (() => {
+    let _classSuper = Entity;
+    let _tags_decorators;
+    let _tags_initializers = [];
+    let _tags_extraInitializers = [];
+    return class Component extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _tags_decorators = [zUI({ group: 'Other', priority: 0 }), zObserve((v, instance) => {
+                    const context = instance.contextManager.get(TagContext);
+                    context.registerComponent(instance, v);
+                })];
+            __esDecorate(null, null, _tags_decorators, { kind: "field", name: "tags", static: false, private: false, access: { has: obj => "tags" in obj, get: obj => obj.tags, set: (obj, value) => { obj.tags = value; } }, metadata: _metadata }, _tags_initializers, _tags_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        constructorProps;
+        /**
+         * The raw element(s) that this component exposes
+         * @zignore
+         */
+        element;
         /**
          * The children of this component.
+         *
+         * @zignore
+         * @default []
          */
-        this.children = [];
+        children = [];
         /**
          * The behaviors attached to this component.
+         *
+         * @zignore
+         * @default []
+         */
+        behaviors = [];
+        /**
+         * If true, this component can't be selected at design time in the 3D preview.
+         * @zignore
+         */
+        locked;
+        _parent;
+        /**
+         * The parent of this component.
+         * @zignore
+         */
+        get parent() {
+            return this._parent;
+        }
+        /**
+         * Creates an instance of Component.
+         * @param contextManager The current ContextManager
+         * @param constructorProps - The constructor properties.
+         */
+        constructor(contextManager, constructorProps) {
+            super(contextManager);
+            this.constructorProps = constructorProps;
+            this.constructChildren(constructorProps?.children ?? []);
+            this.observe(this, 'enabled', this._updateEnabledResolved, { bindWhenDisabled: true });
+        }
+        /**
+         * Constructs the children of this component.
+         * @zignore
+         */
+        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);
+                }
+            }
+        }
+        /**
+         * Adds the supplied component instance as a child of this component, removing it from any existing parent.
+         *
+         * @param c The component instance to add
+         * @zignore
+         */
+        appendChild(c) {
+            c.remove();
+            this.children.push(c);
+            c._parent = this;
+            c.connectElements();
+            c._updateEnabledResolved();
+        }
+        connectElements() {
+            if (this.element === undefined) {
+                for (const child of this.children) {
+                    child.connectElements();
+                }
+            }
+        }
+        /**
+         * Removes the supplied component instance from the list of children.
+         * @param c The component to remove
+         * @zignore
+         */
+        removeChild(c) {
+            const indx = this.children.indexOf(c);
+            if (indx >= 0)
+                this.children.splice(indx, 1);
+            if (c._parent === this)
+                delete c._parent;
+        }
+        /**
+         * Removes this component from its parent component.
+         * @zignore
+         */
+        remove() {
+            this._parent?.removeChild(this);
+        }
+        /**
+         * Adds a behavior to the component.
+         * @param {Behavior} b - The behavior to add.
+         * @zignore
+         */
+        addBehavior(b) {
+            this.behaviors.push(b);
+        }
+        /**
+         * Removes a behavior from the component.
+         * @param {Behavior} b - The behavior to remove.
+         * @zignore
+         */
+        removeBehavior(b) {
+            const indx = this.behaviors.indexOf(b);
+            if (indx >= 0)
+                this.behaviors.splice(indx, 1);
+        }
+        /**
+         * Gets a behavior of a specific type from the component.
+         * @param {T} type - The type of behavior to get.
+         * @returns {InstanceType<T> | undefined} The behavior of the specified type, or undefined if no such behavior exists.
+         * @template T The behavior type.
+         * @zignore
+         */
+        getBehavior(type) {
+            for (const behavior of this.behaviors) {
+                if (behavior instanceof type)
+                    return behavior;
+            }
+        }
+        /**
+         * Gets all behaviors of a specific type from the component.
+         * @param {T} type - The type of behaviors to get.
+         * @returns {InstanceType<T>[]} An array of behaviors of the specified type.
+         * @template T The behavior type.
+         * @zignore
          */
-        this.behaviors = [];
+        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
+         * exposed by this component's children.
+         */
+        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;
+        }
+        /**
+         * Returns true if this component, or any of its parents, are marked as locked.
+         */
+        get lockedResolved() {
+            return (this.locked ?? false) || (this._parent?.lockedResolved ?? false);
+        }
         /**
          * An array of string 'tags' assocated with this component.
          *
@@ -35,150 +233,38 @@ export class Component extends Entity {
          *
          * By default, tags are scoped to the ZComponent instance that a component is constructed by.
          * Tags that begin with `global:` are scoped to the experience as a whole.
-         *
-         * @zprop
+         * @default []
+         * @zui
          * @zgroup Other
-         * @group Other
-         * @zgrouppriority 0
          */
-        this.tags = new Observable([]);
-        this._updateEnabledResolved = () => {
-            let newValue = this.enabled.value;
-            if (this.parent?.enabledResolved?.value === false)
+        tags = __runInitializers(this, _tags_initializers, []);
+        _updateEnabledResolved = (__runInitializers(this, _tags_extraInitializers), () => {
+            let newValue = this.enabled;
+            if (this._parent?.enabledResolved === false)
                 newValue = false;
-            if (newValue !== this.enabledResolved.value) {
-                this.enabledResolved.value = newValue;
+            if (newValue !== this.enabledResolved) {
+                this._enabledResolved = newValue;
+                notify(this, 'enabledResolved');
                 for (const child of this.children)
                     child._updateEnabledResolved();
             }
-        };
-        this._updateTags = () => {
-            const context = this.contextManager.get(TagContext);
-            context.registerComponent(this, this.tags.value);
-        };
-        this.constructChildren(constructorProps?.children ?? []);
-        this.register(this.enabled, this._updateEnabledResolved, { bindWhenDisabled: true });
-        this.register(this.tags, this._updateTags, { bindWhenDisabled: true });
-    }
-    /**
-     * Constructs the children of this component.
-     */
-    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);
-            }
-        }
-    }
-    /**
-     * Adds the supplied component instance as a child of this component, removing it from any existing parent.
-     *
-     * @param c The component instance to add
-     */
-    appendChild(c) {
-        c.remove();
-        this.children.push(c);
-        c.parent = this;
-        c._updateEnabledResolved();
-    }
-    /**
-     * Removes the supplied component instance from the list of children.
-     * @param c The component to remove
-     */
-    removeChild(c) {
-        const indx = this.children.indexOf(c);
-        if (indx >= 0)
-            this.children.splice(indx, 1);
-        if (c.parent === this)
-            delete c.parent;
-    }
-    /**
-     * Removes this component from its parent component.
-     */
-    remove() {
-        this.parent?.removeChild(this);
-    }
-    /**
-     * Adds a behavior to the component.
-     * @param {Behavior} b - The behavior to add.
-     */
-    addBehavior(b) {
-        this.behaviors.push(b);
-    }
-    /**
-     * Removes a behavior from the component.
-     * @param {Behavior} b - The behavior to remove.
-     */
-    removeBehavior(b) {
-        const indx = this.behaviors.indexOf(b);
-        if (indx >= 0)
-            this.behaviors.splice(indx, 1);
-    }
-    /**
-     * Gets a behavior of a specific type from the component.
-     * @param {T} type - The type of behavior to get.
-     * @returns {InstanceType<T> | undefined} The behavior of the specified type, or undefined if no such behavior exists.
-     * @template T The behavior type.
-     */
-    getBehavior(type) {
-        for (const behavior of this.behaviors) {
-            if (behavior instanceof type)
-                return behavior;
-        }
-    }
-    /**
-     * Gets all behaviors of a specific type from the component.
-     * @param {T} type - The type of behaviors to get.
-     * @returns {InstanceType<T>[]} An array of behaviors of the specified type.
-     * @template T The behavior type.
-     */
-    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
-     * exposed by this component's children.
-     */
-    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;
-    }
-    /**
-     * Returns true if this component, or any of its parents, are marked as locked.
-     */
-    get lockedResolved() {
-        return (this.locked ?? false) || (this.parent?.lockedResolved ?? false);
-    }
-    /**
-     * Dispose of this component and all of its children.
-     */
-    dispose() {
-        for (const child of this.children) {
-            try {
-                child.dispose();
-            }
-            catch (err) {
-                // Fail silently
+        });
+        /**
+         * Dispose of this component and all of its children.
+         */
+        dispose() {
+            for (const child of this.children) {
+                try {
+                    child.dispose();
+                }
+                catch (err) {
+                    // Fail silently
+                }
             }
+            this.children.length = 0;
+            this.contextManager.get(TagContext).unregisterComponent(this);
+            return super.dispose();
         }
-        this.children.length = 0;
-        this.contextManager.get(TagContext).unregisterComponent(this);
-        return super.dispose();
-    }
-}
+    };
+})();
+export { Component };

package/lib/components/AnimatedLoader.d.ts

@@ -0,0 +1,51 @@
+import { Component, ConstructorProps } from '../component';
+import { ContextManager } from '../context';
+import { Event } from '../event';
+/**
+ * A component that plays different layer clips and emits events based on the loading state of the experience. Use it to build animated loading screens for your experience.
+ *
+ * For the initial loading of the experience, the 3D scene and animation system may not yet be available, so it's recommended to use the DefaultLoader component for that phase.
+ *
+ * Placing this component within a LoaderScope, along with other loadable components, allows it to track the loading state of those components specifically.
+ * @zcomponent
+ * @zicon hourglass_bottom
+ * @zgroup Advanced
+ */
+export declare class AnimatedLoader extends Component {
+    onLoading: Event<[]>;
+    onNotLoading: Event<[]>;
+    /**
+     * A layer clip that will be played when there is no loading being performed
+     * @zui
+     * @zgroup Animation
+     * @zgrouppriority 10
+     * @zvalues layerclipids
+     */
+    notLoadingLayerClip: string | undefined;
+    /**
+     * A layer clip that will be played when there is loading being performed
+     * @zui
+     * @zgroup Animation
+     * @zgrouppriority 10
+     * @zvalues layerclipids
+     */
+    loadingLayerClip: string | undefined;
+    /**
+     * A timeline that will have it's current time set to the percentage of loading completion
+     * @zui
+     * @zgroup Animation
+     * @zgrouppriority 10
+     * @zvalues layerclipids
+     */
+    loadingProgressLayerClip: string | undefined;
+    /**
+     * Creates a new AnimatedLoader component.
+     * @param contextManager - The current ContextManager
+     * @param constructorProps - The constructor properties.
+     */
+    constructor(contextManager: ContextManager, constructorProps: ConstructorProps);
+    private _updatePercentage;
+    private _updateVisibility;
+    private _playLayerClip;
+    private _setLayerClipPercentage;
+}

package/lib/components/AnimatedLoader.js

@@ -0,0 +1,159 @@
+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 { useIsLoaded, useLoadPercent } from '../contexts/loadcontext';
+import { zComponent, zUI } from '../decorators';
+import { Event } from '../event';
+/**
+ * A component that plays different layer clips and emits events based on the loading state of the experience. Use it to build animated loading screens for your experience.
+ *
+ * For the initial loading of the experience, the 3D scene and animation system may not yet be available, so it's recommended to use the DefaultLoader component for that phase.
+ *
+ * Placing this component within a LoaderScope, along with other loadable components, allows it to track the loading state of those components specifically.
+ * @zcomponent
+ * @zicon hourglass_bottom
+ * @zgroup Advanced
+ */
+let AnimatedLoader = (() => {
+    let _classDecorators = [zComponent({ icon: 'hourglass_bottom', group: 'Advanced' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    let _onLoading_decorators;
+    let _onLoading_initializers = [];
+    let _onLoading_extraInitializers = [];
+    let _onNotLoading_decorators;
+    let _onNotLoading_initializers = [];
+    let _onNotLoading_extraInitializers = [];
+    let _notLoadingLayerClip_decorators;
+    let _notLoadingLayerClip_initializers = [];
+    let _notLoadingLayerClip_extraInitializers = [];
+    let _loadingLayerClip_decorators;
+    let _loadingLayerClip_initializers = [];
+    let _loadingLayerClip_extraInitializers = [];
+    let _loadingProgressLayerClip_decorators;
+    let _loadingProgressLayerClip_initializers = [];
+    let _loadingProgressLayerClip_extraInitializers = [];
+    var AnimatedLoader = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _onLoading_decorators = [zUI()];
+            _onNotLoading_decorators = [zUI()];
+            _notLoadingLayerClip_decorators = [zUI({ group: { name: 'Animation', priority: 10 }, values: 'layerclipids' })];
+            _loadingLayerClip_decorators = [zUI({ group: { name: 'Animation', priority: 10 }, values: 'layerclipids' })];
+            _loadingProgressLayerClip_decorators = [zUI({ group: { name: 'Animation', priority: 10 }, values: 'layerclipids' })];
+            __esDecorate(null, null, _onLoading_decorators, { kind: "field", name: "onLoading", static: false, private: false, access: { has: obj => "onLoading" in obj, get: obj => obj.onLoading, set: (obj, value) => { obj.onLoading = value; } }, metadata: _metadata }, _onLoading_initializers, _onLoading_extraInitializers);
+            __esDecorate(null, null, _onNotLoading_decorators, { kind: "field", name: "onNotLoading", static: false, private: false, access: { has: obj => "onNotLoading" in obj, get: obj => obj.onNotLoading, set: (obj, value) => { obj.onNotLoading = value; } }, metadata: _metadata }, _onNotLoading_initializers, _onNotLoading_extraInitializers);
+            __esDecorate(null, null, _notLoadingLayerClip_decorators, { kind: "field", name: "notLoadingLayerClip", static: false, private: false, access: { has: obj => "notLoadingLayerClip" in obj, get: obj => obj.notLoadingLayerClip, set: (obj, value) => { obj.notLoadingLayerClip = value; } }, metadata: _metadata }, _notLoadingLayerClip_initializers, _notLoadingLayerClip_extraInitializers);
+            __esDecorate(null, null, _loadingLayerClip_decorators, { kind: "field", name: "loadingLayerClip", static: false, private: false, access: { has: obj => "loadingLayerClip" in obj, get: obj => obj.loadingLayerClip, set: (obj, value) => { obj.loadingLayerClip = value; } }, metadata: _metadata }, _loadingLayerClip_initializers, _loadingLayerClip_extraInitializers);
+            __esDecorate(null, null, _loadingProgressLayerClip_decorators, { kind: "field", name: "loadingProgressLayerClip", static: false, private: false, access: { has: obj => "loadingProgressLayerClip" in obj, get: obj => obj.loadingProgressLayerClip, set: (obj, value) => { obj.loadingProgressLayerClip = value; } }, metadata: _metadata }, _loadingProgressLayerClip_initializers, _loadingProgressLayerClip_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            AnimatedLoader = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        onLoading = __runInitializers(this, _onLoading_initializers, new Event());
+        onNotLoading = (__runInitializers(this, _onLoading_extraInitializers), __runInitializers(this, _onNotLoading_initializers, new Event()));
+        /**
+         * A layer clip that will be played when there is no loading being performed
+         * @zui
+         * @zgroup Animation
+         * @zgrouppriority 10
+         * @zvalues layerclipids
+         */
+        notLoadingLayerClip = (__runInitializers(this, _onNotLoading_extraInitializers), __runInitializers(this, _notLoadingLayerClip_initializers, void 0));
+        /**
+         * A layer clip that will be played when there is loading being performed
+         * @zui
+         * @zgroup Animation
+         * @zgrouppriority 10
+         * @zvalues layerclipids
+         */
+        loadingLayerClip = (__runInitializers(this, _notLoadingLayerClip_extraInitializers), __runInitializers(this, _loadingLayerClip_initializers, void 0));
+        /**
+         * A timeline that will have it's current time set to the percentage of loading completion
+         * @zui
+         * @zgroup Animation
+         * @zgrouppriority 10
+         * @zvalues layerclipids
+         */
+        loadingProgressLayerClip = (__runInitializers(this, _loadingLayerClip_extraInitializers), __runInitializers(this, _loadingProgressLayerClip_initializers, void 0));
+        /**
+         * Creates a new AnimatedLoader component.
+         * @param contextManager - The current ContextManager
+         * @param constructorProps - The constructor properties.
+         */
+        constructor(contextManager, constructorProps) {
+            super(contextManager, constructorProps);
+            this.register(useIsLoaded(contextManager), this._updateVisibility);
+            this.register(useLoadPercent(contextManager), this._updatePercentage);
+        }
+        _updatePercentage = (__runInitializers(this, _loadingProgressLayerClip_extraInitializers), () => {
+            this._setLayerClipPercentage(this.loadingProgressLayerClip, useLoadPercent(this.contextManager).value);
+        });
+        _updateVisibility = v => {
+            if (v) {
+                this.onNotLoading.emit();
+                this._playLayerClip(this.notLoadingLayerClip);
+            }
+            else {
+                this.onLoading.emit();
+                this._playLayerClip(this.loadingLayerClip);
+            }
+        };
+        _playLayerClip(clip, fade = true) {
+            if (!clip)
+                return;
+            const zcomponent = this.getZComponentInstance();
+            const layerclip = zcomponent.animation.layerClipByID.get(clip);
+            if (!layerclip)
+                return;
+            layerclip.play(fade ? undefined : { fade: { time: 0 } });
+        }
+        _setLayerClipPercentage(clip, percentage, fade = true) {
+            if (!clip)
+                return;
+            const zcomponent = this.getZComponentInstance();
+            const layerclip = zcomponent.animation.layerClipByID.get(clip);
+            if (!layerclip)
+                return;
+            layerclip.seek((layerclip.length() * percentage) / 100);
+        }
+    };
+    return AnimatedLoader = _classThis;
+})();
+export { AnimatedLoader };