@zcomponent/core 1.14.3 → 1.16.0-beta

package/lib/components/DefaultCookieConsent.js

@@ -1,8 +1,8 @@
-import { Component } from "../component";
-import { ConsentStatus, CookieConsentContext, CookieType, Status, useCookieConsentFunctional, useCookieConsentMarketing, useCookieConsentPerformance, useMarketingVendors, usePerformanceVendors } from "../contexts/cookieconsentcontext";
-import { isDesignTime } from "../contexts/environmentcontext";
-import { constructed, started } from "../contexts/loadcontext";
-import { Observable } from "../observable";
+import { Component } from '../component';
+import { ConsentStatus, CookieConsentContext, CookieType, Status, useCookieConsentFunctional, useCookieConsentMarketing, useCookieConsentPerformance, useMarketingVendors, usePerformanceVendors, } from '../contexts/cookieconsentcontext';
+import { isDesignTime } from '../contexts/environmentcontext';
+import { constructed, started } from '../contexts/loadcontext';
+import { Observable } from '../observable';
 const html = `
 <div id='zcomponent-cookieconsent-panel'>
 	<h1 id='zcomponent-cookieconsent-title'></h1>
@@ -11,11 +11,21 @@ const html = `
 </div>
 `;
 /**
+ * The CookieConsent component is responsible for displaying a cookie consent banner to the user.
+ *
+ * This banner informs the user about the use of cookies on the website and asks for their consent.
+ * The component handles the logic for displaying the banner, receiving the user's consent, and storing this consent.
+ * It also provides methods to check if the user has already given their consent.
  * @zcomponent
  * @zgroup Cookie Consent
  * @zicon cookie
  */
 export class DefaultCookieConsent extends Component {
+    /**
+     * Creates an instance of DefaultCookieConsent.
+     * @param contextManager - The current ContextManager
+     * @param constructorProps - The properties of the component
+     */
     constructor(contextManager, constructorProps) {
         super(contextManager, constructorProps);
         this.constructorProps = constructorProps;
@@ -25,112 +35,112 @@ export class DefaultCookieConsent extends Component {
          * @zgrouppriority 20
          * @zdefault "This website uses cookies to store information on your computer."
          */
-        this.title = new Observable("This website uses cookies to store information on your computer.");
+        this.title = new Observable('This website uses cookies to store information on your computer.');
         /**
          * @zprop
          * @zgroup Consent Screen
          * @zgrouppriority 20
          * @zdefault "Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used."
          */
-        this.description = new Observable("Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used.");
+        this.description = new Observable('Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used.');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Privacy Policy"
          */
-        this.privacyPolicyText = new Observable("Privacy Policy");
+        this.privacyPolicyText = new Observable('Privacy Policy');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault ""
          */
-        this.privacyPolicyURL = new Observable("");
+        this.privacyPolicyURL = new Observable('');
         /**
          * @zprop
          * @zgroup Consent Screen
          * @zgrouppriority 20
          * @zdefault "I Accept Cookies"
          */
-        this.acceptButton = new Observable("I Accept Cookies");
+        this.acceptButton = new Observable('I Accept Cookies');
         /**
          * @zprop
          * @zgroup Consent Screen
          * @zgrouppriority 20
          * @zdefault "Settings"
          */
-        this.settingsButton = new Observable("Settings");
+        this.settingsButton = new Observable('Settings');
         /**
          * @zprop
          * @zgroup Consent Screen
          * @zgrouppriority 20
          * @zdefault "Save"
          */
-        this.saveButton = new Observable("Save");
+        this.saveButton = new Observable('Save');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Essential"
          */
-        this.essentialTitle = new Observable("Essential");
+        this.essentialTitle = new Observable('Essential');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Cookies that are necessary to provide the service."
          */
-        this.essentialDescription = new Observable("Cookies that are necessary to provide the service.");
+        this.essentialDescription = new Observable('Cookies that are necessary to provide the service.');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Functional"
          */
-        this.functionalTitle = new Observable("Functional");
+        this.functionalTitle = new Observable('Functional');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Cookies that provide you with useful functionality, such as saving your preferences."
          */
-        this.functionalDescription = new Observable("Cookies that provide you with useful functionality, such as saving your preferences.");
+        this.functionalDescription = new Observable('Cookies that provide you with useful functionality, such as saving your preferences.');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Performance"
          */
-        this.performanceTitle = new Observable("Performance");
+        this.performanceTitle = new Observable('Performance');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Cookies that help us measure and understand how the site is being used."
          */
-        this.performanceDescription = new Observable("Cookies that help us measure and understand how the site is being used.");
+        this.performanceDescription = new Observable('Cookies that help us measure and understand how the site is being used.');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Marketing"
          */
-        this.marketingTitle = new Observable("Marketing");
+        this.marketingTitle = new Observable('Marketing');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Cookies that help us market our site and services."
          */
-        this.marketingDescription = new Observable("Cookies that help us market our site and services.");
+        this.marketingDescription = new Observable('Cookies that help us market our site and services.');
         /**
          * @zprop
          * @zgroup Settings
          * @zgrouppriority 10
          * @zdefault "Required"
          */
-        this.required = new Observable("Required");
+        this.required = new Observable('Required');
         this._dom = document.createElement('div');
         this._functional = document.createElement('input');
         this._performance = document.createElement('input');
@@ -156,14 +166,20 @@ export class DefaultCookieConsent extends Component {
         if (!panel)
             return;
         const title = this._dom.querySelector('#zcomponent-cookieconsent-title');
-        this.title.addListener(v => { if (title)
-            title.textContent = v; }, undefined, true);
+        this.title.addListener(v => {
+            if (title)
+                title.textContent = v;
+        }, undefined, true);
         const description = this._dom.querySelector('#zcomponent-cookieconsent-description');
-        this.description.addListener(v => { if (description)
-            description.textContent = v; }, undefined, true);
+        this.description.addListener(v => {
+            if (description)
+                description.textContent = v;
+        }, undefined, true);
         const privacyPolicy = this._dom.querySelector('#zcomponent-cookieconsent-privacypolicy');
-        this.privacyPolicyText.addListener(val => { if (privacyPolicy && privacyPolicy instanceof HTMLAnchorElement)
-            privacyPolicy.innerText = val; }, undefined, true);
+        this.privacyPolicyText.addListener(val => {
+            if (privacyPolicy && privacyPolicy instanceof HTMLAnchorElement)
+                privacyPolicy.innerText = val;
+        }, undefined, true);
         this.privacyPolicyURL.addListener(val => {
             if (!privacyPolicy || !(privacyPolicy instanceof HTMLAnchorElement))
                 return;
@@ -173,8 +189,10 @@ export class DefaultCookieConsent extends Component {
         if (isSettings) {
             const requiredDOM = document.createElement('span');
             requiredDOM.innerText = 'Required';
-            this.required.addListener(v => { if (requiredDOM)
-                requiredDOM.textContent = v; }, undefined, true);
+            this.required.addListener(v => {
+                if (requiredDOM)
+                    requiredDOM.textContent = v;
+            }, undefined, true);
             requiredDOM.style.float = 'right';
             panel.appendChild(this._createEntry(this.essentialTitle, this.essentialDescription, [], requiredDOM));
             panel.appendChild(this._createEntry(this.functionalTitle, this.functionalDescription, [], this._functional));
@@ -185,8 +203,10 @@ export class DefaultCookieConsent extends Component {
             this._marketing.checked = useCookieConsentMarketing(this.contextManager).value === ConsentStatus.granted;
             const saveButton = document.createElement('button');
             saveButton.id = 'zcomponent-cookieconsent-save';
-            this.saveButton.addListener(v => { if (saveButton)
-                saveButton.textContent = v; }, undefined, true);
+            this.saveButton.addListener(v => {
+                if (saveButton)
+                    saveButton.textContent = v;
+            }, undefined, true);
             panel.appendChild(saveButton);
             if (!isDesignTime(this.contextManager)) {
                 saveButton.addEventListener('click', () => this._save());
@@ -195,13 +215,17 @@ export class DefaultCookieConsent extends Component {
         }
         const acceptButton = document.createElement('button');
         acceptButton.id = 'zcomponent-cookieconsent-accept';
-        this.acceptButton.addListener(v => { if (acceptButton)
-            acceptButton.textContent = v; }, undefined, true);
+        this.acceptButton.addListener(v => {
+            if (acceptButton)
+                acceptButton.textContent = v;
+        }, undefined, true);
         panel.appendChild(acceptButton);
         const settingsButton = document.createElement('button');
         settingsButton.id = 'zcomponent-cookieconsent-settings';
-        this.settingsButton.addListener(v => { if (settingsButton)
-            settingsButton.textContent = v; }, undefined, true);
+        this.settingsButton.addListener(v => {
+            if (settingsButton)
+                settingsButton.textContent = v;
+        }, undefined, true);
         settingsButton.addEventListener('click', () => {
             console.log('Settings click');
             this._loadDOM(true);
@@ -224,10 +248,10 @@ export class DefaultCookieConsent extends Component {
         container.classList.add('zcomponent-cookieconsent-type');
         container.appendChild(elm);
         const header = document.createElement('h3');
-        title.addListener(val => header.innerText = val, undefined, true);
+        title.addListener(val => (header.innerText = val), undefined, true);
         container.appendChild(header);
         const descriptionDom = document.createElement('div');
-        description.addListener(val => descriptionDom.innerText = val, undefined, true);
+        description.addListener(val => (descriptionDom.innerText = val), undefined, true);
         container.appendChild(descriptionDom);
         if (vendors.length === 0)
             return container;
@@ -242,7 +266,7 @@ export class DefaultCookieConsent extends Component {
             li.append(document.createElement('br'));
             if (vendor.privacyPolicyUrl?.length > 0) {
                 const privacy = document.createElement('a');
-                this.privacyPolicyText.addListener(val => privacy.innerText = val, undefined, true);
+                this.privacyPolicyText.addListener(val => (privacy.innerText = val), undefined, true);
                 privacy.href = vendor.privacyPolicyUrl;
                 privacy.rel = 'noreferrer noopener';
                 privacy.target = '_blank';

package/lib/components/DefaultLoader.d.ts

@@ -1,4 +1,4 @@
-import { Component, Observable, ContextManager } from "..";
+import { Component, Observable, ContextManager } from '..';
 export interface DefaultLoaderConstructorProps {
     /** @zprop
      * @zgroup Appearance
@@ -17,10 +17,10 @@ export interface DefaultLoaderConstructorProps {
 export declare class DefaultLoader extends Component {
     element: HTMLDivElement;
     /** @zprop
-    * @zdefault false
-    * @zgroup Design Time
-    * @zgrouppriority 30
-    */
+     * @zdefault false
+     * @zgroup Design Time
+     * @zgrouppriority 30
+     */
     readonly preview: Observable<boolean, never>;
     /** @zprop
      * @zgroup Text
@@ -47,13 +47,18 @@ export declare class DefaultLoader extends Component {
      */
     readonly textColor: Observable<string>;
     /** @zprop
-    * @zdefault 1000
-    * @zgroup Appearance
-    * @zgrouppriority 10
-    */
+     * @zdefault 1000
+     * @zgroup Appearance
+     * @zgrouppriority 10
+     */
     readonly zIndex: Observable<number>;
     private _percentageElement;
     private _attached;
+    /**
+     * Creates a new DefaultLoader component.
+     * @param contextManager - The current ContextManager
+     * @param constructorProps - The constructor properties.
+     */
     constructor(contextManager: ContextManager, constructorProps: DefaultLoaderConstructorProps);
     private _updatePercentage;
     private _updateVisibility;

package/lib/components/DefaultLoader.js

@@ -1,4 +1,4 @@
-import { Component, useCanvas, Observable, isDesignTime, useIsLoaded, useLoadPercent } from "..";
+import { Component, useCanvas, Observable, isDesignTime, useIsLoaded, useLoadPercent } from '..';
 /**
  * The DefaultLoader shows a customizable loading bar while the assets of your experience are being downloaded and parsed by the browser.
  *
@@ -7,19 +7,24 @@ import { Component, useCanvas, Observable, isDesignTime, useIsLoaded, useLoadPer
  * @zgroup Advanced
  */
 export class DefaultLoader extends Component {
+    /**
+     * Creates a new DefaultLoader component.
+     * @param contextManager - The current ContextManager
+     * @param constructorProps - The constructor properties.
+     */
     constructor(contextManager, constructorProps) {
         super(contextManager, constructorProps);
         this.element = document.createElement('div');
         /** @zprop
-        * @zdefault false
-        * @zgroup Design Time
-        * @zgrouppriority 30
-        */
+         * @zdefault false
+         * @zgroup Design Time
+         * @zgrouppriority 30
+         */
         this.preview = new Observable(false);
         this._attached = false;
         this._updatePercentage = () => {
-            const p = (isDesignTime(this.contextManager) && this.preview.value) ? 30 : useLoadPercent(this.contextManager).value;
-            this._percentageElement.style.width = p.toString() + "%";
+            const p = isDesignTime(this.contextManager) && this.preview.value ? 30 : useLoadPercent(this.contextManager).value;
+            this._percentageElement.style.width = p.toString() + '%';
         };
         this._updateVisibility = () => {
             let shouldBeAttached = false;
@@ -40,25 +45,25 @@ export class DefaultLoader extends Component {
             if (this.disposed)
                 return;
             const rect = useCanvas(this.contextManager).getBoundingClientRect();
-            this.element.style.left = rect.left.toString() + "px";
-            this.element.style.top = rect.top.toString() + "px";
-            this.element.style.width = rect.width.toString() + "px";
-            this.element.style.height = rect.height.toString() + "px";
+            this.element.style.left = rect.left.toString() + 'px';
+            this.element.style.top = rect.top.toString() + 'px';
+            this.element.style.width = rect.width.toString() + 'px';
+            this.element.style.height = rect.height.toString() + 'px';
             requestAnimationFrame(this._update);
         };
         this.element.innerHTML = loaderHTML;
-        this.element.className = "zcomponent-defaultloader";
+        this.element.className = 'zcomponent-defaultloader';
         if (constructorProps.backgroundImage) {
             this.element.style.backgroundImage = `url(${constructorProps.backgroundImage})`;
         }
-        const titleElement = this.element.querySelector("#zcomponent-defaultloader-title") || document.createElement("h1");
-        const subtitleElement = this.element.querySelector("#zcomponent-defaultloader-subtitle") || document.createElement("h1");
-        this._percentageElement = this.element.querySelector("#zcomponent-defaultloader-progress-percentage") || document.createElement("div");
-        this.title = new Observable('', t => titleElement.innerText = t);
-        this.subtitle = new Observable('', t => subtitleElement.innerText = t);
-        this.textColor = new Observable('#ffffff', t => this.element.style.color = t);
-        this.backgroundColor = new Observable('#000000', t => this.element.style.backgroundColor = t);
-        this.zIndex = new Observable(1000, t => this.element.style.zIndex = t.toString());
+        const titleElement = this.element.querySelector('#zcomponent-defaultloader-title') || document.createElement('h1');
+        const subtitleElement = this.element.querySelector('#zcomponent-defaultloader-subtitle') || document.createElement('h1');
+        this._percentageElement = this.element.querySelector('#zcomponent-defaultloader-progress-percentage') || document.createElement('div');
+        this.title = new Observable('', t => (titleElement.innerText = t));
+        this.subtitle = new Observable('', t => (subtitleElement.innerText = t));
+        this.textColor = new Observable('#ffffff', t => (this.element.style.color = t));
+        this.backgroundColor = new Observable('#000000', t => (this.element.style.backgroundColor = t));
+        this.zIndex = new Observable(1000, t => (this.element.style.zIndex = t.toString()));
         this.register(this.preview, this._updatePercentage);
         this.register(this.preview, this._updateVisibility);
         this.register(useIsLoaded(contextManager), this._updateVisibility);

package/lib/components/Gamepad.d.ts

@@ -1,7 +1,7 @@
-import { Component } from "../component";
-import { ContextManager } from "../context";
-import { Event } from "../event";
-import { Observable } from "../observable";
+import { Component } from '../component';
+import { ContextManager } from '../context';
+import { Event } from '../event';
+import { Observable } from '../observable';
 export interface GamepadButtonEvent {
     button: number;
     gamepad: number;
@@ -10,6 +10,9 @@ export interface GamepadButtonEvent {
     value: number;
 }
 /**
+ * Manages gamepad interactions, facilitating the tracking and handling of button press events for a specific controller.
+ *
+ * It offers a comprehensive set of events for individual gamepad buttons, allowing for detailed and responsive input handling in a gaming context.
  * @zcomponent
  * @zicon sports_esports
  */
@@ -63,6 +66,11 @@ export declare class Gamepad extends Component {
      */
     readonly analogPressedThreshold: Observable<number, never>;
     private _downLastFrame;
+    /**
+     * Creates a new Gamepad component.
+     * @param contextManager - The current ContextManager
+     * @param props - The constructor properties.
+     */
     constructor(contextManager: ContextManager, props: any);
     private _updateRegistration;
     private _update;

package/lib/components/Gamepad.js

@@ -1,14 +1,22 @@
-import { Component } from "../component";
-import { useOnBeforeRender } from "../contexts/canvascontext";
-import { isEditTime, EnvironmentContext } from "../contexts/environmentcontext";
-import { GamepadContext } from "../contexts/gamepadcontext";
-import { Event } from "../event";
-import { Observable } from "../observable";
+import { Component } from '../component';
+import { useOnBeforeRender } from '../contexts/canvascontext';
+import { isEditTime, EnvironmentContext } from '../contexts/environmentcontext';
+import { GamepadContext } from '../contexts/gamepadcontext';
+import { Event } from '../event';
+import { Observable } from '../observable';
 /**
+ * Manages gamepad interactions, facilitating the tracking and handling of button press events for a specific controller.
+ *
+ * It offers a comprehensive set of events for individual gamepad buttons, allowing for detailed and responsive input handling in a gaming context.
  * @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 */
@@ -102,7 +110,7 @@ export class Gamepad extends Component {
                             gamepad: gamepad.index,
                             pressed: button.pressed,
                             touched: button.touched,
-                            value: button.value
+                            value: button.value,
                         });
                     if (!downThisFrame && downLastFrame.has(i))
                         upEvents.push({
@@ -110,7 +118,7 @@ export class Gamepad extends Component {
                             gamepad: gamepad.index,
                             pressed: button.pressed,
                             touched: button.touched,
-                            value: button.value
+                            value: button.value,
                         });
                     if (downThisFrame)
                         downLastFrame.add(i);

package/lib/components/LongLoad.d.ts

@@ -1,4 +1,4 @@
-import { Component, ContextManager, Event } from "..";
+import { Component, ContextManager, Event } from '..';
 export interface LongLoadConstructorProps {
     /**
      * The number of loading processes to simulate
@@ -45,5 +45,11 @@ export interface LongLoadConstructorProps {
 export declare class LongLoad extends Component<any, LongLoadConstructorProps> {
     /** @zui */
     readonly onLoad: Event<[]>;
+    /**
+     * Creates an instance of LongLoad.
+     * @param contextManager - The current ContextManager
+     * @param props - The constructor properties.
+     * @returns - A new LongLoad instance.
+     */
     constructor(contextManager: ContextManager, props: LongLoadConstructorProps);
 }

package/lib/components/LongLoad.js

@@ -1,4 +1,4 @@
-import { Component, Event, isDevelopmentBuild, registerLoadable } from "..";
+import { Component, Event, isDevelopmentBuild, registerLoadable } from '..';
 /**
  * Simulates long random loading times to facilitate development and debugging of loading processes.
  *
@@ -7,6 +7,12 @@ import { Component, Event, isDevelopmentBuild, registerLoadable } from "..";
  * @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 */

package/lib/components/SnapshotUI.d.ts

@@ -4,6 +4,11 @@ import { Component, ConstructorProps } from '../component';
 import { ContextManager } from '../context';
 import { Event } from '../event';
 /**
+ * Provides a user interface for capturing, downloading, and sharing snapshots of a canvas element.
+ *
+ * This component integrates snapshot capture and social sharing functionalities.
+ * 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
@@ -51,6 +56,11 @@ export declare class SnapshotUI extends Component {
      * @zdefault ''
      */
     readonly title: Observable<string, never>;
+    /**
+     * Creates a new SnapshotUI component.
+     * @param contextManager - The current ContextManager
+     * @param props - The constructor properties.
+     */
     constructor(contextManager: ContextManager, props: ConstructorProps);
     dispose(): never;
 }

package/lib/components/SnapshotUI.js

@@ -10,11 +10,21 @@ const back_src = new URL('../../assets/back.png', import.meta.url).href;
 const download_src = new URL('../../assets/download.png', import.meta.url).href;
 const share_src = new URL('../../assets/share.png', import.meta.url).href;
 /**
+ * Provides a user interface for capturing, downloading, and sharing snapshots of a canvas element.
+ *
+ * This component integrates snapshot capture and social sharing functionalities.
+ * 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
  */
 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');
@@ -119,6 +129,11 @@ export class SnapshotUI extends Component {
     }
 }
 class SocialShareBehaviors {
+    /**
+     * Creates a new SocialShareBehaviors component.
+     * @param contextManager - The current ContextManager
+     * @param parent - The parent component.
+     */
     constructor(contextManager, parent) {
         this.capture_b = new TakeSnapshot(contextManager, parent, { event: 'social-share', runAtEditTime: false });
         this.download_b = new DownloadSnapshot(contextManager, parent, { event: 'social-share', runAtEditTime: false });
@@ -149,6 +164,10 @@ class SocialShareBehaviors {
     }
 }
 class CaptureButtonElement {
+    /**
+     * Creates a new CaptureButtonElement component.
+     * @param contextManager - The current ContextManager
+     */
     constructor(contextManager) {
         this.contextManager = contextManager;
         this.clickEvent = new Event();
@@ -222,6 +241,11 @@ class CaptureButtonElement {
     }
 }
 class ShareDivElement {
+    /**
+     * Creates a new ShareDivElement component.
+     * @param withShareButton - Whether to include a share button.
+     * @param shareFunction - The function to call when the share button is clicked.
+     */
     constructor(withShareButton, shareFunction) {
         this.shareFunction = shareFunction;
         this.onDownload = new Event();