@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/components/SnapshotUI.d.ts

@@ -1,12 +1,12 @@
-import { Observable } from '..';
 import { ImageFormat } from '../behaviors/TakeSnapshot';
 import { Component, ConstructorProps } from '../component';
 import { ContextManager } from '../context';
 import { Event } from '../event';
+import { ValueOf } from '../types';
 export interface SnapshotUIConstructorProps extends ConstructorProps {
     /**
-     * @zprop
-     * @zdefault true
+     *
+     * @default true
      */
     allowShare: boolean;
 }
@@ -17,52 +17,47 @@ export interface SnapshotUIConstructorProps extends ConstructorProps {
  * It includes observable properties to customize snapshot format, quality, file name, and sharing text or title.
  * Events are emitted for save and share actions.
  * @zcomponent
- * @zgroup Social Sharing
  * @zicon photo_camera
+ * @zgroup Social Sharing
  */
 export declare class SnapshotUI extends Component {
     private captureButton;
     private socialShareBehaviours;
     private style;
     private shareDiv;
-    /** @zui */
     readonly onSave: Event<[]>;
-    /** @zui */
     readonly onShare: Event<[]>;
-    /** @zprop
-     * @zdefault true
+    /**
+     * @default true
      */
-    readonly visible: Observable<boolean, never>;
+    visible: boolean;
     /**
      * The format of the image to capture.
-     * @zprop
-     * @zdefault jpeg
+     * @default "jpeg"
      */
-    readonly format: Observable<ImageFormat, never>;
+    format: ValueOf<typeof ImageFormat>;
     /**
      * The quality of the image to capture.
-     * @zprop
-     * @zdefault 0.92
+     * @default 0.92
+     * @zui
+     * @ztype proportion
      */
-    readonly quality: Observable<number, never>;
+    quality: number;
     /**
      * The name of the file to download.
-     * @zprop
-     * @zdefault canvas
+     * @default "canvas"
      */
-    readonly fileName: Observable<string, never>;
+    fileName: string;
     /**
      * The text to share.
-     * @zprop
-     * @zdefault ''
+     * @default ""
      */
-    readonly text: Observable<string, never>;
+    text: string;
     /**
      * The title to share.
-     * @zprop
-     * @zdefault ''
+     * @default ""
      */
-    readonly title: Observable<string, never>;
+    title: string;
     /**
      * Creates a new SnapshotUI component.
      * @param contextManager - The current ContextManager

package/lib/components/SnapshotUI.js

@@ -1,7 +1,41 @@
-import { CanvasContext, Observable, registerLoadable, useOverlay } from '..';
-import { TakeSnapshot, ImageFormat } from '../behaviors/TakeSnapshot';
+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 { CanvasContext, registerLoadable, useOverlay, zComponent, zObserve, zUI } from '..';
 import { DownloadSnapshot } from '../behaviors/DownloadSnapshot';
 import { ShareSnapshot } from '../behaviors/ShareSnapshot';
+import { ImageFormat, TakeSnapshot } from '../behaviors/TakeSnapshot';
 import { Component } from '../component';
 import { SnapshotContext } from '../contexts/snapshotContext';
 import { Event } from '../event';
@@ -16,123 +50,184 @@ const share_src = new URL('../../assets/share.png', import.meta.url).href;
  * It includes observable properties to customize snapshot format, quality, file name, and sharing text or title.
  * Events are emitted for save and share actions.
  * @zcomponent
- * @zgroup Social Sharing
  * @zicon photo_camera
+ * @zgroup Social Sharing
  */
-export class SnapshotUI extends Component {
-    /**
-     * Creates a new SnapshotUI component.
-     * @param contextManager - The current ContextManager
-     * @param props - The constructor properties.
-     */
-    constructor(contextManager, props) {
-        super(contextManager, props);
-        this.style = document.createElement('link');
-        /** @zui */
-        this.onSave = new Event();
-        /** @zui */
-        this.onShare = new Event();
-        /** @zprop
-         * @zdefault true
+let SnapshotUI = (() => {
+    let _classDecorators = [zComponent({ icon: 'photo_camera', group: 'Social Sharing' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    let _onSave_decorators;
+    let _onSave_initializers = [];
+    let _onSave_extraInitializers = [];
+    let _onShare_decorators;
+    let _onShare_initializers = [];
+    let _onShare_extraInitializers = [];
+    let _visible_decorators;
+    let _visible_initializers = [];
+    let _visible_extraInitializers = [];
+    let _format_decorators;
+    let _format_initializers = [];
+    let _format_extraInitializers = [];
+    let _quality_decorators;
+    let _quality_initializers = [];
+    let _quality_extraInitializers = [];
+    let _fileName_decorators;
+    let _fileName_initializers = [];
+    let _fileName_extraInitializers = [];
+    let _text_decorators;
+    let _text_initializers = [];
+    let _text_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    var SnapshotUI = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _onSave_decorators = [zUI()];
+            _onShare_decorators = [zUI()];
+            _visible_decorators = [zUI(), zObserve((v, instance) => {
+                    if (v) {
+                        instance.captureButton.show();
+                    }
+                    else {
+                        instance.captureButton.hide();
+                    }
+                })];
+            _format_decorators = [zObserve((v, instance) => {
+                    const ssctx = instance.contextManager.get(SnapshotContext);
+                    ssctx.fileType.value = v === ImageFormat.PNG ? 'image/png' : 'image/jpeg';
+                }), zUI()];
+            _quality_decorators = [zObserve((v, instance) => {
+                    const ssctx = instance.contextManager.get(SnapshotContext);
+                    ssctx.quality.value = v;
+                }), zUI({ type: 'proportion' })];
+            _fileName_decorators = [zObserve((v, instance) => {
+                    const ssctx = instance.contextManager.get(SnapshotContext);
+                    ssctx.fileName.value = v;
+                }), zUI()];
+            _text_decorators = [zUI(), zObserve((v, instance) => {
+                    const ssctx = instance.contextManager.get(SnapshotContext);
+                    ssctx.text.value;
+                })];
+            _title_decorators = [zObserve((v, instance) => {
+                    const ssctx = instance.contextManager.get(SnapshotContext);
+                    ssctx.title.value;
+                }), zUI()];
+            __esDecorate(null, null, _onSave_decorators, { kind: "field", name: "onSave", static: false, private: false, access: { has: obj => "onSave" in obj, get: obj => obj.onSave, set: (obj, value) => { obj.onSave = value; } }, metadata: _metadata }, _onSave_initializers, _onSave_extraInitializers);
+            __esDecorate(null, null, _onShare_decorators, { kind: "field", name: "onShare", static: false, private: false, access: { has: obj => "onShare" in obj, get: obj => obj.onShare, set: (obj, value) => { obj.onShare = value; } }, metadata: _metadata }, _onShare_initializers, _onShare_extraInitializers);
+            __esDecorate(null, null, _visible_decorators, { kind: "field", name: "visible", static: false, private: false, access: { has: obj => "visible" in obj, get: obj => obj.visible, set: (obj, value) => { obj.visible = value; } }, metadata: _metadata }, _visible_initializers, _visible_extraInitializers);
+            __esDecorate(null, null, _format_decorators, { kind: "field", name: "format", static: false, private: false, access: { has: obj => "format" in obj, get: obj => obj.format, set: (obj, value) => { obj.format = value; } }, metadata: _metadata }, _format_initializers, _format_extraInitializers);
+            __esDecorate(null, null, _quality_decorators, { kind: "field", name: "quality", static: false, private: false, access: { has: obj => "quality" in obj, get: obj => obj.quality, set: (obj, value) => { obj.quality = value; } }, metadata: _metadata }, _quality_initializers, _quality_extraInitializers);
+            __esDecorate(null, null, _fileName_decorators, { kind: "field", name: "fileName", static: false, private: false, access: { has: obj => "fileName" in obj, get: obj => obj.fileName, set: (obj, value) => { obj.fileName = value; } }, metadata: _metadata }, _fileName_initializers, _fileName_extraInitializers);
+            __esDecorate(null, null, _text_decorators, { kind: "field", name: "text", static: false, private: false, access: { has: obj => "text" in obj, get: obj => obj.text, set: (obj, value) => { obj.text = value; } }, metadata: _metadata }, _text_initializers, _text_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, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SnapshotUI = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        captureButton;
+        socialShareBehaviours;
+        style = document.createElement('link');
+        shareDiv;
+        onSave = __runInitializers(this, _onSave_initializers, new Event());
+        onShare = (__runInitializers(this, _onSave_extraInitializers), __runInitializers(this, _onShare_initializers, new Event()));
+        /**
+         * @default true
          */
-        this.visible = new Observable(true, visible => {
-            if (visible) {
-                this.captureButton.show();
-            }
-            else {
-                this.captureButton.hide();
-            }
-        });
+        visible = (__runInitializers(this, _onShare_extraInitializers), __runInitializers(this, _visible_initializers, true));
         /**
          * The format of the image to capture.
-         * @zprop
-         * @zdefault jpeg
+         * @default "jpeg"
          */
-        this.format = new Observable(ImageFormat.JPEG, format => {
-            const ssctx = this.contextManager.get(SnapshotContext);
-            ssctx.fileType.value = format === ImageFormat.PNG ? 'image/png' : 'image/jpeg';
-        });
+        format = (__runInitializers(this, _visible_extraInitializers), __runInitializers(this, _format_initializers, ImageFormat.JPEG));
         /**
          * The quality of the image to capture.
-         * @zprop
-         * @zdefault 0.92
+         * @default 0.92
+         * @zui
+         * @ztype proportion
          */
-        this.quality = new Observable(0.92, quality => {
-            const ssctx = this.contextManager.get(SnapshotContext);
-            ssctx.quality.value = quality;
-        });
+        quality = (__runInitializers(this, _format_extraInitializers), __runInitializers(this, _quality_initializers, 0.92));
         /**
          * The name of the file to download.
-         * @zprop
-         * @zdefault canvas
+         * @default "canvas"
          */
-        this.fileName = new Observable('canvas', fileName => {
-            const ssctx = this.contextManager.get(SnapshotContext);
-            ssctx.fileName.value = fileName;
-        });
+        fileName = (__runInitializers(this, _quality_extraInitializers), __runInitializers(this, _fileName_initializers, 'canvas'));
         /**
          * The text to share.
-         * @zprop
-         * @zdefault ''
+         * @default ""
          */
-        this.text = new Observable('', text => {
-            const ssctx = this.contextManager.get(SnapshotContext);
-            ssctx.text.value = text;
-        });
+        text = (__runInitializers(this, _fileName_extraInitializers), __runInitializers(this, _text_initializers, ''));
         /**
          * The title to share.
-         * @zprop
-         * @zdefault ''
+         * @default ""
          */
-        this.title = new Observable('', title => {
-            const ssctx = this.contextManager.get(SnapshotContext);
-            ssctx.title.value = title;
-        });
-        const showSupported = this.contextManager.get(SnapshotContext).shareAPISupported.value;
-        const showShare = (props.allowShare ?? true) && showSupported;
-        this.socialShareBehaviours = new SocialShareBehaviors(contextManager, this, {
-            allowShare: showShare,
-        });
-        this.socialShareBehaviours.onSave.addListener(() => {
-            this.onSave.emit();
-        });
-        this.socialShareBehaviours.onShare?.addListener(() => {
-            this.onShare.emit();
-        });
-        const overlay = useOverlay(this.contextManager).value;
-        this.shareDiv = new ShareDivElement(showShare, async () => {
-            try {
-                this.socialShareBehaviours.share();
-            }
-            catch (err) {
-                console.error('Error sharing:', err);
-            }
-        }, overlay);
-        this.captureButton = new CaptureButtonElement(this.contextManager);
-        registerLoadable(this.contextManager, new Promise(resolve => (this.style.onload = resolve)));
-        this.style.rel = 'stylesheet';
-        this.style.type = 'text/css';
-        this.style.href = style_src;
-        document.head.appendChild(this.style);
-        this.captureButton.onClick.addListener(() => {
-            this.socialShareBehaviours.capture();
-            this.shareDiv.show();
-        });
-        this.shareDiv.onDownload.addListener(() => {
-            this.socialShareBehaviours.download();
-        });
-        this.shareDiv.onClose.addListener(() => {
-            this.captureButton.show();
-        });
-    }
-    dispose() {
-        if (this.style.parentNode)
-            this.style.parentNode.removeChild(this.style);
-        this.socialShareBehaviours.dispose();
-        return super.dispose();
-    }
-}
+        title = (__runInitializers(this, _text_extraInitializers), __runInitializers(this, _title_initializers, ''));
+        /**
+         * Creates a new SnapshotUI component.
+         * @param contextManager - The current ContextManager
+         * @param props - The constructor properties.
+         */
+        constructor(contextManager, props) {
+            super(contextManager, props);
+            __runInitializers(this, _title_extraInitializers);
+            const showSupported = this.contextManager.get(SnapshotContext).shareAPISupported.value;
+            const showShare = (props.allowShare ?? true) && showSupported;
+            this.socialShareBehaviours = new SocialShareBehaviors(contextManager, this, {
+                allowShare: showShare,
+            });
+            this.socialShareBehaviours.onSave.addListener(() => {
+                this.onSave.emit();
+            });
+            this.socialShareBehaviours.onShare?.addListener(() => {
+                this.onShare.emit();
+            });
+            const overlay = useOverlay(this.contextManager).value;
+            this.shareDiv = new ShareDivElement(showShare, async () => {
+                try {
+                    this.socialShareBehaviours.share();
+                }
+                catch (err) {
+                    console.error('Error sharing:', err);
+                }
+            }, overlay);
+            this.captureButton = new CaptureButtonElement(this.contextManager);
+            registerLoadable(this, new Promise(resolve => {
+                this.style.onload = resolve;
+            }));
+            this.style.rel = 'stylesheet';
+            this.style.type = 'text/css';
+            this.style.href = style_src;
+            document.head.appendChild(this.style);
+            this.captureButton.onClick.addListener(() => {
+                this.socialShareBehaviours.capture();
+                this.shareDiv.show();
+            });
+            this.shareDiv.onDownload.addListener(() => {
+                this.socialShareBehaviours.download();
+            });
+            this.shareDiv.onClose.addListener(() => {
+                this.captureButton.show();
+            });
+        }
+        dispose() {
+            if (this.style.parentNode)
+                this.style.parentNode.removeChild(this.style);
+            this.socialShareBehaviours.dispose();
+            return super.dispose();
+        }
+    };
+    return SnapshotUI = _classThis;
+})();
+export { SnapshotUI };
 class SocialShareBehaviors {
+    capture_b;
+    download_b;
+    share_b;
     /**
      * Creates a new SocialShareBehaviors component.
      * @param contextManager - The current ContextManager
@@ -170,13 +265,15 @@ class SocialShareBehaviors {
     }
 }
 class CaptureButtonElement {
+    contextManager;
+    button;
+    clickEvent = new Event();
     /**
      * Creates a new CaptureButtonElement component.
      * @param contextManager - The current ContextManager
      */
     constructor(contextManager) {
         this.contextManager = contextManager;
-        this.clickEvent = new Event();
         const template = `
       <div id="zee-photo-button" class="zee-photo-button">
           <div id="zee-social-share-circle" class="zee-social-share-circle"></div>
@@ -247,6 +344,10 @@ class CaptureButtonElement {
     }
 }
 class ShareDivElement {
+    shareFunction;
+    onDownload = new Event();
+    // public onShare = new Event();
+    onClose = new Event();
     /**
      * Creates a new ShareDivElement component.
      * @param withShareButton - Whether to include a share button.
@@ -254,10 +355,6 @@ class ShareDivElement {
      */
     constructor(withShareButton, shareFunction, rootDom = document.body) {
         this.shareFunction = shareFunction;
-        this.rootDom = rootDom;
-        this.onDownload = new Event();
-        // public onShare = new Event();
-        this.onClose = new Event();
         const template = `
      <div id="social-share-div" class="social-share-div">
             <img id="zee-social-share-img" class="zee-social-share-img">

package/lib/context.d.ts

@@ -40,7 +40,10 @@ type ConstructorWithOnlyOptional<T> = RequiredKeys<ConstructorProps<T>> extends
  * This type creates a tuple consisting of a constructor type and its corresponding properties.
  * @typeParam T - The type of the context constructor.
  */
-type ConstructorWithProps<T extends ContextConstructor = ContextConstructor> = [T, ConstructorParameters<T>[1]];
+type ConstructorWithProps<T extends ContextConstructor = ContextConstructor> = [
+    T,
+    ConstructorParameters<T>[1]
+];
 /**
  * Type representing instances of a list of constructors with properties.
  *
@@ -61,6 +64,9 @@ export declare class Context<ConstructorPropsType extends {
 } = {}> {
     contextManager: ContextManager;
     constructorProps: ConstructorPropsType;
+    /**
+     * @default false
+     */
     disposed: boolean;
     /**
      * Creates an instance of Context.
@@ -68,7 +74,7 @@ export declare class Context<ConstructorPropsType extends {
      * @param constructorProps - The constructor properties.
      */
     constructor(contextManager: ContextManager, constructorProps: ConstructorPropsType);
-    dispose(): never;
+    dispose(): typeof Context.callSuperDispose & never;
     private static callSuperDispose;
 }
 /**
@@ -79,6 +85,9 @@ export declare class Context<ConstructorPropsType extends {
  * The `ContextManager` is also used to create components, behaviors, and other objects that require a context.
  */
 export declare class ContextManager {
+    /**
+     * @default {}
+     */
     private _byKey;
     private _root;
     /**
@@ -136,15 +145,24 @@ export declare class ContextManager {
      * @param props - Optional properties to initialize the context.
      * @returns A tuple containing the forked `ContextManager` and the newly added context instance.
      */
-    fork<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: ConstructorWithOnlyOptional<T>): [ContextManager, InstanceType<T>];
-    fork<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: T, props: ConstructorParameters<T>[1]): [ContextManager, InstanceType<T>];
+    fork<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: ConstructorWithOnlyOptional<T>): [
+        ContextManager,
+        InstanceType<T>
+    ];
+    fork<T extends new (contextManager: ContextManager, props: {}) => any>(ctx: T, props: ConstructorParameters<T>[1]): [
+        ContextManager,
+        InstanceType<T>
+    ];
     /**
      * Factory function for creating new instances of a given context type, along with associated properties.
      *
      * @typeParam T - An array type representing a combination of a constructor and its corresponding properties.
      * @returns An array where each element is a tuple, with the first element being the context manager and the second being the instance created by the constructor.
      */
-    forkMultiple<T extends ConstructorWithProps[]>(...ctx: T): [ContextManager, InstancesOfConstructorsWithProps<T>];
+    forkMultiple<T extends ConstructorWithProps[]>(...ctx: T): [
+        ContextManager,
+        InstancesOfConstructorsWithProps<T>
+    ];
     /**
      * Creates a new forked `ContextManager` instance with a shallow copy of the current context.
      *

package/lib/context.js

@@ -6,6 +6,12 @@ let _nextContextKey = 1;
  * @typeParam ConstructorPropsType - The type of the constructor properties, defaulting to an empty object.
  */
 export class Context {
+    contextManager;
+    constructorProps;
+    /**
+     * @default false
+     */
+    disposed = false;
     /**
      * Creates an instance of Context.
      * @param contextManager The current ContextManager
@@ -14,14 +20,13 @@ export class Context {
     constructor(contextManager, constructorProps) {
         this.contextManager = contextManager;
         this.constructorProps = constructorProps;
-        this.disposed = false;
     }
     dispose() {
         this.disposed = true;
         return undefined;
     }
+    static callSuperDispose = Symbol('Calling super.dispose() is mandatory');
 }
-Context.callSuperDispose = Symbol('Calling super.dispose() is mandatory');
 const keysByType = new Map();
 /**
  * Class for managing contexts.
@@ -31,10 +36,11 @@ const keysByType = new Map();
  * The `ContextManager` is also used to create components, behaviors, and other objects that require a context.
  */
 export class ContextManager {
-    constructor() {
-        this._byKey = {};
-        this._root = this;
-    }
+    /**
+     * @default {}
+     */
+    _byKey = {};
+    _root = this;
     static create(ctx, props) {
         const ret = new ContextManager();
         ret.add(ctx, props ?? {});

package/lib/contexts/analyticscontext.d.ts

@@ -1,15 +1,25 @@
-import { ContextManager, Context } from '../context';
+import { Context, ContextManager } from '../context';
+import type { Entity } from '../entity';
 import { Event } from '../event';
 /** @zcontext */
 export declare class AnalyticsContext extends Context {
     readonly onEvent: Event<[string, any]>;
-    /** @zprop */
+    /**
+     * @zui
+     */
     logEvent(name: string, params?: any): void;
 }
 /**
  * Logs an analytics event.
  */
 export declare function logEvent(mgr: ContextManager, name: string, params?: any): void;
+/**
+ * A decorator that logs an analytics event when the decorated function is called.
+ *
+ * @param name the name of the event to log
+ * @param params any additional parameters to pass ot the analytics provider
+ */
+export declare function zLogEvent<EntityType extends Entity>(name: string, params?: any): (originalMethod: (...args: any) => any, context: ClassMethodDecoratorContext<EntityType, (this: EntityType, ...args: any[]) => any>) => void;
 /**
  * Returns the analytics onEvent event.
  */