@zcomponent/core 2.0.0-alpha.1 → 2.0.0-alpha.2

package/css/zcomponent.css

@@ -1,243 +1,242 @@
 .zcomponent-defaultloader {
-    position: fixed;
-    font-family: sans-serif;
-    color: white;
-    background-color: black;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-size: cover;
-    background-position: center center;
+	position: fixed;
+	font-family: sans-serif;
+	color: white;
+	background-color: black;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-size: cover;
+	background-position: center center;
 }
 
 #zcomponent-defaultloader-container {
-    text-align: center;
+	text-align: center;
 }
 
 #zcomponent-defaultloader-subtitle {
-    margin-bottom: 32px;
+	margin-bottom: 32px;
 }
 
 #zcomponent-defaultloader-progress {
-    position: relative;
-    width: 300px;
-    background-color: #333;
-    height: 12px;
-    border-radius: 6px;
-    margin: 0 auto;
+	position: relative;
+	width: 300px;
+	background-color: #333;
+	height: 12px;
+	border-radius: 6px;
+	margin: 0 auto;
 }
 
 #zcomponent-defaultloader-progress-percentage {
-    position: relative;
-    background-color: white;
-    height: 12px;
-    border-radius: 6px;
+	position: relative;
+	background-color: white;
+	height: 12px;
+	border-radius: 6px;
 }
 
 #zcomponent-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    overflow: hidden;
+	position: fixed;
+	top: 0;
+	left: 0;
+	pointer-events: none;
+	overflow: hidden;
 }
 
 #zcomponent-overlay > * {
-    pointer-events: auto;
-    position: absolute;
+	pointer-events: auto;
+	position: absolute;
 }
 
-
 .zcomponent-align {
-    position: absolute;
-    transform-origin: 0 0;
+	position: absolute;
+	transform-origin: 0 0;
 }
 
 .zcomponent-h-left {
-    left: 0px;
+	left: 0px;
 }
 
 .zcomponent-h-left-safe {
-    left: env(safe-area-inset-left, 0px);
+	left: env(safe-area-inset-left, 0px);
 }
 
 .zcomponent-h-center {
-    left: 50%;
+	left: 50%;
 }
 
 .zcomponent-h-right {
-    right: 0px;
+	right: 0px;
 }
 
 .zcomponent-h-right-safe {
-    right: env(safe-area-inset-right, 0px);
+	right: env(safe-area-inset-right, 0px);
 }
 
 .zcomponent-v-top {
-    top: 0px;
+	top: 0px;
 }
 
 .zcomponent-v-top-safe {
-    top: env(safe-area-inset-top, 0px);
+	top: env(safe-area-inset-top, 0px);
 }
 
 .zcomponent-v-center {
-    top: 50%;
+	top: 50%;
 }
 
 .zcomponent-v-bottom {
-    bottom: 0px;
+	bottom: 0px;
 }
 
 .zcomponent-v-bottom-safe {
-    bottom: env(safe-area-inset-bottom, 0px);
+	bottom: env(safe-area-inset-bottom, 0px);
 }
 
 :xr-overlay .zcomponent-v-top-safe {
-    top: 45px;
+	top: 45px;
 }
 
 .zcomponent-hc-v {
-    transform: translate(-50%, 0);
+	transform: translate(-50%, 0);
 }
 
 .zcomponent-h-vc {
-    transform: translate(0%, -50%);
+	transform: translate(0%, -50%);
 }
 
 .zcomponent-h-v {
-    transform: translate(0%, 0%);
+	transform: translate(0%, 0%);
 }
 
 .zcomponent-hc-vc {
-    transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
 }
 
 .zcomponent-textalert-container {
-    position: absolute;
-    bottom: 30px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    display: flex;
-    flex-direction: column;
-    justify-content: end;
-    align-items: center;
-    row-gap: 24px;
-    max-width: 80%;
+	position: absolute;
+	bottom: 30px;
+	left: 50%;
+	transform: translate(-50%, 0);
+	display: flex;
+	flex-direction: column;
+	justify-content: end;
+	align-items: center;
+	row-gap: 24px;
+	max-width: 80%;
 }
 
 .zcomponent-textalert {
-    transition: opacity 0.5s;
-    background-color: black;
-    border-radius: 10px;
-    padding: 20px;
-    color: white;
-    font-family: sans-serif;
-    opacity: 0;
-    text-align: center;
+	transition: opacity 0.5s;
+	background-color: black;
+	border-radius: 10px;
+	padding: 20px;
+	color: white;
+	font-family: sans-serif;
+	opacity: 0;
+	text-align: center;
 }
 
 .zcomponent-textalert-shown {
-    opacity: 1;
+	opacity: 1;
 }
 
 .zcomponent-cookieconsent {
-    z-index: 10000000;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.7);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+	z-index: 10000000;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.7);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 #zcomponent-cookieconsent-panel {
-    background: white;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    margin-top: auto;
-    max-width: 500px;
-    font-family: sans-serif;
-    padding: 24px;
-    margin-left: 24px;
-    margin-right: 24px;
-    max-height: 80%;
-    overflow: scroll;
+	background: white;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+	margin-top: auto;
+	max-width: 500px;
+	font-family: sans-serif;
+	padding: 24px;
+	margin-left: 24px;
+	margin-right: 24px;
+	max-height: 80%;
+	overflow: scroll;
 }
 
 #zcomponent-cookieconsent-panel > h1 {
-    font-size: 24px;
+	font-size: 24px;
 }
 
 #zcomponent-cookieconsent-panel button {
-    padding: 12px 24px;
-    background: none;
-    border: 2px solid black;
-    border-radius: 4px;
-    color: black;
+	padding: 12px 24px;
+	background: none;
+	border: 2px solid black;
+	border-radius: 4px;
+	color: black;
 }
 
 #zcomponent-cookieconsent-panel button {
-    padding: 12px 24px;
-    background: none;
-    border: 2px solid black;
-    border-radius: 4px;
-    color: black;
-    display: block;
-    outline: none;
+	padding: 12px 24px;
+	background: none;
+	border: 2px solid black;
+	border-radius: 4px;
+	color: black;
+	display: block;
+	outline: none;
 }
 
 #zcomponent-cookieconsent-panel #zcomponent-cookieconsent-settings {
-    padding: 0;
-    border: 0;
-    background: none;
-    font-weight: bold;
-    text-decoration: underline;
-    padding-top: 12px;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-weight: bold;
+	text-decoration: underline;
+	padding-top: 12px;
 }
 
 .zcomponent-cookieconsent-type {
-    position: relative;
+	position: relative;
 }
 
 .zcomponent-cookieconsent-type input {
-    float: right;
-    /* top: 0px; */
-    /* right: 0px; */
-    width: 32px;
-    height: 32px;
+	float: right;
+	/* top: 0px; */
+	/* right: 0px; */
+	width: 32px;
+	height: 32px;
 }
 
 #zcomponent-cookieconsent-panel h3 {
-    margin-bottom: 6px;
+	margin-bottom: 6px;
 }
 
 #zcomponent-cookieconsent-panel h5 {
-    margin-bottom: 6px;
+	margin-bottom: 6px;
 }
 
 #zcomponent-cookieconsent-panel #zcomponent-cookieconsent-save {
-    padding-top: 12px;
+	padding-top: 12px;
 }
 
 #zcomponent-cookieconsent-panel ul {
-    list-style-type: none;
+	list-style-type: none;
 }
 
 #zcomponent-cookieconsent-privacypolicy {
-    padding-bottom: 12px;
+	padding-bottom: 12px;
 }
 
 :root {
-    --safe-area-inset-left: env(safe-area-inset-left, 0px);
-    --safe-area-inset-right: env(safe-area-inset-right, 0px);
-    --safe-area-inset-top: env(safe-area-inset-top, 0px);
-    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+	--safe-area-inset-left: env(safe-area-inset-left, 0px);
+	--safe-area-inset-right: env(safe-area-inset-right, 0px);
+	--safe-area-inset-top: env(safe-area-inset-top, 0px);
+	--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 :xr-overlay {
-    --safe-area-inset-top: 45px;
-}
+	--safe-area-inset-top: 45px;
+}

package/index.js

@@ -1,4 +1 @@
-/* eslint-disable n/no-unsupported-features/es-syntax */
-/* eslint-disable n/no-missing-import */
-
 export * from './lib';

package/lib/actionbehavior.d.ts

@@ -4,13 +4,13 @@ import { ContextManager } from './context';
 export interface ActionBehaviorConstructorProps {
     /**
      * The event to listen to in the node that this behavior is attached to. It should be the full name of the event, e.g. "onClick".
-     * @zprop
+     *
      * @zvalues events
      */
     event: string;
     /**
-     * @zprop
-     * @zdefault false
+     *
+     * @default false
      */
     runAtEditTime: boolean;
 }

package/lib/actionbehavior.js

@@ -5,6 +5,7 @@ import { Event } from './event';
  * Base class for all behaviors that perform an action in response to an event.
  */
 export class ActionBehavior extends Behavior {
+    constructorProps;
     /**
      * Creates an instance of ActionBehavior.
      * @param contextManager The current ContextManager
@@ -14,26 +15,26 @@ export class ActionBehavior extends Behavior {
     constructor(contextManager, instance, constructorProps) {
         super(contextManager, instance);
         this.constructorProps = constructorProps;
-        this._updateRegistration = () => {
-            const evt = this.instance[this.constructorProps.event];
-            if (evt instanceof Event) {
-                this.unregister(evt, this._perform);
-                if (this.enabledResolved.value && (!isEditTime(this.contextManager) || this.constructorProps.runAtEditTime === true)) {
-                    this.register(evt, this._perform);
-                }
-            }
-        };
-        this._perform = (...args) => {
-            if (!this.enabledResolved.value)
-                return;
-            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, { bindWhenDisabled: true });
-        this.register(this.enabledResolved, this._updateRegistration, { bindWhenDisabled: true });
+        this.observe(this, 'enabledResolved', this._updateRegistration, { bindWhenDisabled: true });
     }
+    _updateRegistration = () => {
+        const evt = this.instance[this.constructorProps.event];
+        if (evt instanceof Event) {
+            this.unregister(evt, this._perform);
+            if (this.enabledResolved && (!isEditTime(this.contextManager) || this.constructorProps.runAtEditTime === true)) {
+                this.register(evt, this._perform);
+            }
+        }
+    };
+    _perform = (...args) => {
+        if (!this.enabledResolved)
+            return;
+        this.perform(...args);
+        const e = args[0];
+        if (e && typeof e === 'object' && typeof e['stopPropagation'] === 'function') {
+            e['stopPropagation'].call(e);
+        }
+    };
 }

package/lib/animation/animation.d.ts

@@ -1,11 +1,11 @@
-import { Layer } from './layer';
-import { Observable } from '../observable';
 import { Event } from '../event';
-import { LayerClip } from './layerclip';
-import { Clip } from './clips/clip';
+import { Observable } from '../observable';
 import { AnimationState } from './animationstate';
-import { Track } from './tracks/track';
 import { Bezier } from './bezier';
+import { Clip } from './clips/clip';
+import { Layer } from './layer';
+import { LayerClip } from './layerclip';
+import { Track } from './tracks/track';
 /** @internal */
 export declare enum AnimationEvents {
     onLayerClipNotActive = "onLayerClipNotActive",
@@ -22,6 +22,7 @@ export declare class Animation {
     private _initialize;
     /**
      * @internal
+     * @default true
      */
     _FIX_SERIALIZE: boolean;
     /**
@@ -63,6 +64,9 @@ export declare class Animation {
      * Observable indicating whether there are any layers.
      */
     hasLayers: Observable<boolean, never>;
+    /**
+     * @default []
+     */
     private _layers;
     private _spotlightLayer?;
     /**
@@ -71,7 +75,10 @@ export declare class Animation {
     timeSource: (() => number) | undefined;
     private _entityPaths;
     private _defaultValuesByPath;
-    /** @internal */
+    /**
+     * @internal
+     * @default []
+     */
     _pendingEvents: {
         evt: AnimationEvents;
         args: any[];

package/lib/animation/animation.js

@@ -1,5 +1,5 @@
-import { Observable } from '../observable';
 import { Event } from '../event';
+import { Observable } from '../observable';
 import { LayerClip } from './layerclip';
 /** @internal */
 export var AnimationEvents;
@@ -15,54 +15,67 @@ export var AnimationEvents;
  * Ensures proper initialization, disposal, and entity property influence, and emits events based on animation progression.
  */
 export class Animation {
+    _initialize;
+    /**
+     * @internal
+     * @default true
+     */
+    _FIX_SERIALIZE = true;
+    /**
+     * Collection of layers indexed by ID.
+     */
+    layers = Object.create(null);
+    /**
+     *  Collection of clips indexed by ID.
+     */
+    clips = Object.create(null);
+    curves = Object.create(null);
+    onTick = new Event();
+    onLayerClipNotActive = new Event();
+    onLayerClipActive = new Event();
+    onLayerClipState = new Event();
+    /**
+     * Map for quick access to animation elements by ID.
+     */
+    clipByID = new Map();
+    /**
+     * Map for quick access to animation elements by ID.
+     */
+    layerByID = new Map();
+    /**
+     * Map for quick access to animation elements by ID.
+     */
+    layerClipByID = new Map();
+    /**
+     * Map for quick access to animation elements by ID.
+     */
+    trackByID = new Map();
+    /**
+     * Observable indicating whether there are any layers.
+     */
+    hasLayers = new Observable(false);
+    /**
+     * @default []
+     */
+    _layers = [];
+    _spotlightLayer;
+    /**
+     * Source of time for the animation.
+     */
+    timeSource;
+    _entityPaths = new Map();
+    _defaultValuesByPath = new Map();
+    /**
+     * @internal
+     * @default []
+     */
+    _pendingEvents = [];
     /**
      * Creates an instance of Animation.
      * @param _initialize Whether to initialize the animation. Defaults to true.
      */
     constructor(_initialize = true) {
         this._initialize = _initialize;
-        /**
-         * @internal
-         */
-        this._FIX_SERIALIZE = true;
-        /**
-         * Collection of layers indexed by ID.
-         */
-        this.layers = Object.create(null);
-        /**
-         *  Collection of clips indexed by ID.
-         */
-        this.clips = Object.create(null);
-        this.curves = Object.create(null);
-        this.onTick = new Event();
-        this.onLayerClipNotActive = new Event();
-        this.onLayerClipActive = new Event();
-        this.onLayerClipState = new Event();
-        /**
-         * Map for quick access to animation elements by ID.
-         */
-        this.clipByID = new Map();
-        /**
-         * Map for quick access to animation elements by ID.
-         */
-        this.layerByID = new Map();
-        /**
-         * Map for quick access to animation elements by ID.
-         */
-        this.layerClipByID = new Map();
-        /**
-         * Map for quick access to animation elements by ID.
-         */
-        this.trackByID = new Map();
-        /**
-         * Observable indicating whether there are any layers.
-         */
-        this.hasLayers = new Observable(false);
-        this._layers = [];
-        this._entityPaths = new Map();
-        this._defaultValuesByPath = new Map();
-        /** @internal */
-        this._pendingEvents = [];
     }
     /**
      * Serializes the current state of the animation.

package/lib/animation/bezier.d.ts

@@ -4,7 +4,13 @@ export type Easing = keyof typeof predefinedCurve | null | Bezier;
  * Cass to generate and evaluate multiple Bezier curve segments based on provided control points.
  */
 export declare class Bezier {
+    /**
+     * @default []
+     */
     private _curves;
+    /**
+     * @default []
+     */
     private _curveEvaluator;
     /**
      * Creates an instance of Bezier.

package/lib/animation/bezier.js

@@ -53,13 +53,19 @@ function BezierFactory(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
  * Cass to generate and evaluate multiple Bezier curve segments based on provided control points.
  */
 export class Bezier {
+    /**
+     * @default []
+     */
+    _curves = [];
+    /**
+     * @default []
+     */
+    _curveEvaluator = [];
     /**
      * Creates an instance of Bezier.
      * @param curves An array of control points for each Bezier curve segment.
      */
     constructor(curves) {
-        this._curves = [];
-        this._curveEvaluator = [];
         this.updateCurves(curves);
     }
     /**

package/lib/animation/clips/clip.d.ts

@@ -28,11 +28,23 @@ export declare class Clip {
      *  Optional default parameters for fading animation properties.
      */
     defaultFadeParameters?: Partial<Data.FadeParameters>;
-    /** @internal */
+    /**
+     * @internal
+     * @default []
+     */
     _streamTracks: (StreamTrack | ClipTrack | FunctionTrack)[];
+    /**
+     * @default []
+     */
     private _influencedPaths;
     private _tracksByPath;
+    /**
+     * @default false
+     */
     private _tracksByPathDirty;
+    /**
+     * @default []
+     */
     private _tracks;
     /**
      * Creates an instance of Clip.