@zcomponent/core 0.0.2 → 0.0.5

package/css/zcomponent.css

@@ -32,4 +32,16 @@
     background-color: white;
     height: 12px;
     border-radius: 6px;
+}
+
+#zcomponent-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+#zcomponent-overlay > * {
+    pointer-events: auto;
 }

package/lib/behaviors/LaunchURL.d.ts

@@ -1,5 +1,9 @@
 import { ActionBehavior } from "../actionbehavior";
 /**
+ * Navigates the user to the provided URL.
+ *
+ * **Important Note**: Safari on iOS will not open URLs in new tabs for pointer events except `onPointerUp`.
+ *
  * @zbehavior
  * @zgroup Actions
  */
@@ -12,6 +16,7 @@ export declare class LaunchURL extends ActionBehavior {
     /**
      * If true, the URL will be opened in a new tab (using target '_blank')
      * @zprop
+     * @zdefault true
      */
     openInNew: boolean;
     perform(): void;

package/lib/behaviors/LaunchURL.js

@@ -1,5 +1,9 @@
 import { ActionBehavior } from "../actionbehavior";
 /**
+ * Navigates the user to the provided URL.
+ *
+ * **Important Note**: Safari on iOS will not open URLs in new tabs for pointer events except `onPointerUp`.
+ *
  * @zbehavior
  * @zgroup Actions
  */

package/lib/behaviors/LogAnalyticsEvent.d.ts

@@ -1,5 +1,9 @@
 import { ActionBehavior } from "../actionbehavior";
 /**
+ * Logs an event through the currently configured analytics provider(s).
+ *
+ * Note: you must have added an analytics provider to the Hierarchy in one of your components for this behavior to have any effect.
+ *
  * @zbehavior
  * @zgroup Actions
  */

package/lib/behaviors/LogAnalyticsEvent.js

@@ -1,6 +1,10 @@
 import { ActionBehavior } from "../actionbehavior";
 import { logEvent } from "../contexts/analyticscontext";
 /**
+ * Logs an event through the currently configured analytics provider(s).
+ *
+ * Note: you must have added an analytics provider to the Hierarchy in one of your components for this behavior to have any effect.
+ *
  * @zbehavior
  * @zgroup Actions
  */

package/lib/behaviors/PlaySound.d.ts

@@ -9,6 +9,8 @@ export interface PlaySoundProps extends ActionBehaviorConstructorProps {
     source: string;
 }
 /**
+ * Plays a sound
+ *
  * @zbehavior
  * @zgroup Actions
  */

package/lib/behaviors/PlaySound.js

@@ -2,6 +2,8 @@ import { ActionBehavior, } from "../actionbehavior";
 import { registerBehaviorRunAtDesignTime } from "../behavior";
 import { registerLoadable } from "../contexts/loadcontext";
 /**
+ * Plays a sound
+ *
  * @zbehavior
  * @zgroup Actions
  */
@@ -12,7 +14,10 @@ export class PlaySound extends ActionBehavior {
         this._elm.preload = 'auto';
         registerLoadable(contextManager, new Promise((resolve, reject) => {
             this._elm.addEventListener('canplaythrough', () => resolve());
-            this._elm.addEventListener('error', reject);
+            this._elm.addEventListener('error', err => {
+                console.error('Unable to create PlaySound', err);
+                reject(err);
+            });
         }));
         this._elm.src = props.source;
     }

package/lib/components/DefaultLoader.d.ts

@@ -23,7 +23,7 @@ export declare class DefaultLoader extends Component<DefaultLoaderConstructorPro
     * @zgroup Design Time
     * @zgrouppriority 30
     */
-    preview: Observable<boolean>;
+    preview: Observable<boolean, never>;
     /** @zprop
      * @zgroup Text
      * @zgrouppriority 20

package/lib/components/LongLoad.d.ts

@@ -0,0 +1,45 @@
+import { Component, ConstructorProps, ContextManager } from "..";
+export interface LongLoadConstructorProps extends ConstructorProps {
+    /**
+     * The number of loading processes to simulate
+     * @zprop
+     * @zgroup LongLoad
+     * @zgrouppriority 10
+     * @zdefault 10
+     */
+    numberOfLoads: number;
+    /**
+     * The shortest time (in milliseconds) that a given load should take
+     * @zprop
+     * @zgroup LongLoad
+     * @zgrouppriority 10
+     * @zdefault 500
+     */
+    minimumLoadTime: number;
+    /**
+     * The shortest time (in milliseconds) that a given load should take
+     * @zprop
+     * @zgroup LongLoad
+     * @zgrouppriority 10
+     * @zdefault 5000
+     */
+    maximumLoadTime: number;
+    /**
+     * If the long loading process should occur in production builds (in addition to development builds)
+     * @zprop
+     * @zgroup LongLoad
+     * @zgrouppriority 10
+     * @zdefault 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<LongLoadConstructorProps> {
+    constructor(props: LongLoadConstructorProps, contextManager: ContextManager);
+}

package/lib/components/LongLoad.js

@@ -0,0 +1,28 @@
+import { Component, isDevelopmentBuild, registerLoadable } from "..";
+/**
+ * Simulates long random loading times to facilitate development and debugging of loading processes.
+ *
+ * @zcomponent
+ * @zicon settings
+ * @zgroup Advanced
+ */
+export class LongLoad extends Component {
+    constructor(props, contextManager) {
+        super(props, contextManager);
+        if (!props.runInProduction && !isDevelopmentBuild(contextManager))
+            return;
+        const minimumLoadTime = props.minimumLoadTime ?? 500;
+        const maximumLoadTime = props.maximumLoadTime ?? 5000;
+        for (let i = 0; i < (props.numberOfLoads ?? 10); i++) {
+            registerLoadable(contextManager, new Promise(resolve => {
+                if (this.disposed)
+                    return;
+                setTimeout(() => {
+                    if (this.disposed)
+                        return;
+                    resolve();
+                }, minimumLoadTime + Math.random() * (maximumLoadTime - minimumLoadTime));
+            }));
+        }
+    }
+}

package/lib/contexts/canvascontext.d.ts

@@ -7,9 +7,15 @@ export interface CanvasContext {
     onAfterRender: Event<[number]>;
     size: Observable<[number, number]>;
     dispose: () => void;
+    overlayDefault: HTMLDivElement;
+    overlay: Observable<HTMLDivElement>;
 }
-export declare const CanvasContext: import("../context").ContextTypeWithDefault<CanvasContext, [canvas?: HTMLCanvasElement | undefined]>;
+export interface CanvasContextOptions {
+    overlay: HTMLDivElement;
+}
+export declare const CanvasContext: import("../context").ContextTypeWithDefault<CanvasContext, [canvas?: HTMLCanvasElement | undefined, options?: CanvasContextOptions | undefined]>;
 export declare function useCanvas(mgr: ContextManager): HTMLCanvasElement;
-export declare function useCanvasSize(mgr: ContextManager): Observable<[number, number]>;
+export declare function useOverlay(mgr: ContextManager): Observable<HTMLDivElement, never>;
+export declare function useCanvasSize(mgr: ContextManager): Observable<[number, number], never>;
 export declare function useOnBeforeRender(mgr: ContextManager): Event<[number]>;
 export declare function useOnAfterRender(mgr: ContextManager): Event<[number]>;

package/lib/contexts/canvascontext.js

@@ -1,7 +1,7 @@
 import { defineContextType } from '../context';
 import { Event } from '../event';
 import { Observable } from '../observable';
-export const CanvasContext = defineContextType((ctx, canvas) => {
+export const CanvasContext = defineContextType((ctx, canvas, options) => {
     if (!canvas) {
         canvas = document.createElement("canvas");
         canvas.style.position = "fixed";
@@ -12,6 +12,11 @@ export const CanvasContext = defineContextType((ctx, canvas) => {
         canvas.style.touchAction = "none";
         document.body.append(canvas);
     }
+    const overlayDefault = options?.overlay ?? document.createElement('div');
+    overlayDefault.id = 'zcomponent-overlay';
+    if (!options?.overlay) {
+        document.body.append(overlayDefault);
+    }
     const size = new Observable([canvas.clientWidth, canvas.clientHeight]);
     const resizeObserver = new ResizeObserver(entries => {
         for (const entry of entries) {
@@ -21,12 +26,29 @@ export const CanvasContext = defineContextType((ctx, canvas) => {
         }
     });
     resizeObserver.observe(canvas);
+    const onBeforeRender = new Event();
+    let lastRect;
+    onBeforeRender.bindfn(() => {
+        const rect = canvas.getBoundingClientRect();
+        if (lastRect && lastRect.top === rect.top && lastRect.left === rect.left && lastRect.width === rect.width && lastRect.height === rect.height)
+            return;
+        overlayDefault.style.top = rect.top.toString() + 'px';
+        overlayDefault.style.left = rect.left.toString() + 'px';
+        overlayDefault.style.width = rect.width.toString() + 'px';
+        overlayDefault.style.height = rect.height.toString() + 'px';
+        lastRect = rect;
+    });
+    const onAfterRender = new Event();
     return {
         canvas,
-        onBeforeRender: new Event(),
-        onAfterRender: new Event(),
+        onBeforeRender,
+        onAfterRender,
         size,
+        overlayDefault,
+        overlay: new Observable(overlayDefault, undefined, false),
         dispose: () => {
+            onBeforeRender.clear();
+            onAfterRender.clear();
             resizeObserver.disconnect();
         }
     };
@@ -34,6 +56,9 @@ export const CanvasContext = defineContextType((ctx, canvas) => {
 export function useCanvas(mgr) {
     return mgr.get(CanvasContext).canvas;
 }
+export function useOverlay(mgr) {
+    return mgr.get(CanvasContext).overlay;
+}
 export function useCanvasSize(mgr) {
     return mgr.get(CanvasContext).size;
 }

package/lib/contexts/cookieconsentcontext.d.ts

@@ -27,12 +27,12 @@ export interface CookieConsentContext {
     showSettings: Observable<(() => void) | undefined>;
 }
 export declare const CookieConsentContext: import("../context").ContextTypeWithDefault<CookieConsentContext, []>;
-export declare function useCookieConsentFunctional(mgr: ContextManager): Observable<ConsentStatus>;
-export declare function useCookieConsentPerformance(mgr: ContextManager): Observable<ConsentStatus>;
-export declare function useCookieConsentMarketing(mgr: ContextManager): Observable<ConsentStatus>;
-export declare function useCookieConsentStatus(mgr: ContextManager): Observable<Status>;
+export declare function useCookieConsentFunctional(mgr: ContextManager): Observable<ConsentStatus, never>;
+export declare function useCookieConsentPerformance(mgr: ContextManager): Observable<ConsentStatus, never>;
+export declare function useCookieConsentMarketing(mgr: ContextManager): Observable<ConsentStatus, never>;
+export declare function useCookieConsentStatus(mgr: ContextManager): Observable<Status, never>;
 export declare function registerPerformanceVendor(mgr: ContextManager, vendor: Vendor): void;
 export declare function registerMarketingVendor(mgr: ContextManager, vendor: Vendor): void;
 export declare function usePerformanceVendors(mgr: ContextManager): Vendor[];
 export declare function useMarketingVendors(mgr: ContextManager): Vendor[];
-export declare function useShowCookieSettings(mgr: ContextManager): Observable<(() => void) | undefined>;
+export declare function useShowCookieSettings(mgr: ContextManager): Observable<(() => void) | undefined, never>;

package/lib/contexts/environmentcontext.d.ts

@@ -7,3 +7,4 @@ export interface EnvirontmentContext {
 export declare const EnvironmentContext: import("../context").ContextTypeWithDefault<EnvirontmentContext, []>;
 export declare function isDesignTime(ctx: ContextManager): boolean;
 export declare function isEditTime(ctx: ContextManager): boolean;
+export declare function isDevelopmentBuild(ctx: ContextManager): boolean;

package/lib/contexts/environmentcontext.js

@@ -12,3 +12,6 @@ export function isDesignTime(ctx) {
 export function isEditTime(ctx) {
     return ctx.get(EnvironmentContext).editTime.value;
 }
+export function isDevelopmentBuild(ctx) {
+    return (typeof process !== 'undefined' && process?.env?.NODE_ENV === 'development');
+}

package/lib/contexts/loadcontext.d.ts

@@ -11,13 +11,13 @@ export interface LoadContext {
     startWhenLoaded: () => void;
 }
 export declare const LoadContext: import("../context").ContextTypeWithDefault<LoadContext, []>;
-export declare function useIsLoaded(mgr: ContextManager): Observable<boolean>;
+export declare function useIsLoaded(mgr: ContextManager): Observable<boolean, never>;
 export declare function isLoaded(mgr: ContextManager): boolean;
-export declare function useIsStarted(mgr: ContextManager): Observable<boolean>;
+export declare function useIsStarted(mgr: ContextManager): Observable<boolean, never>;
 export declare function isStarted(mgr: ContextManager): boolean;
-export declare function useIsConstructed(mgr: ContextManager): Observable<boolean>;
+export declare function useIsConstructed(mgr: ContextManager): Observable<boolean, never>;
 export declare function isConstructed(mgr: ContextManager): boolean;
-export declare function useLoadPercent(mgr: ContextManager): Observable<number>;
+export declare function useLoadPercent(mgr: ContextManager): Observable<number, never>;
 export declare function registerLoadable(mgr: ContextManager, p: Promise<any>): void;
 export declare function start(mgr: ContextManager): void;
 export declare function startWhenLoaded(mgr: ContextManager): void;

package/lib/event.d.ts

@@ -1,6 +1,6 @@
 import { Observable } from "./observable";
 export declare class Event<Args extends Array<any> = []> {
-    hasBindings: Observable<boolean>;
+    hasBindings: Observable<boolean, never>;
     private _funcs;
     private _emitting;
     private _toUnbind;

package/lib/observable.d.ts

@@ -1,4 +1,5 @@
-export declare class Observable<T> {
+declare type Resolved<T, M> = [T] extends [never] ? M : T;
+export declare class Observable<T = never, M extends any[] | [] | never = never> {
     private _default;
     private _deep;
     private _proxies;
@@ -6,11 +7,13 @@ export declare class Observable<T> {
     private _nextToken;
     private _handlersByToken;
     private _tokenByHandler;
-    constructor(_default: T, withHandler?: ((v: T) => void), _deep?: boolean);
-    get value(): T;
+    constructor(def: M, withHandler?: ((v: M) => void), deep?: boolean);
+    constructor(def: T, withHandler?: ((v: T) => void), deep?: boolean);
+    get value(): Resolved<T, M>;
     private _wrap;
-    set value(v: T | undefined);
-    withValue(fn: (v: T) => void): number;
-    removeWithValue(fnOrToken: number | ((v: T) => void)): void;
+    set value(v: Resolved<T, M> | undefined);
+    withValue(fn: (v: Resolved<T, M>) => void): number;
+    removeWithValue(fnOrToken: number | ((v: Resolved<T, M>) => void)): void;
     private _emitValue;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",