@zcomponent/core 1.6.1-beta → 1.7.0-beta

package/css/socialshare.css

@@ -56,6 +56,7 @@
 	border-radius: 100%;
 	background-color: #ffffff;
 	opacity: 0;
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 }
 
 .zee-social-share-ring {
@@ -67,6 +68,7 @@
 	border-radius: 100%;
 	border: 0.5em solid #ffffff;
 	opacity: 0.8;
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 }
 
 .zee-photo-button .zee-social-share-circle .zee-photo-button .zee-social-share-ring {

package/lib/components/SnapshotUI.d.ts

@@ -17,6 +17,10 @@ export declare class SnapshotUI extends Component {
     onSave: Event<[]>;
     /** @zui */
     onShare: Event<[]>;
+    /** @zprop
+     * @zdefault true
+     */
+    visible: Observable<boolean, never>;
     /**
      * The format of the image to capture.
      * @zprop

package/lib/components/SnapshotUI.js

@@ -22,6 +22,17 @@ export class SnapshotUI extends Component {
         this.onSave = new Event();
         /** @zui */
         this.onShare = new Event();
+        /** @zprop
+         * @zdefault true
+         */
+        this.visible = new Observable(true, visible => {
+            if (visible) {
+                this.captureButton.show();
+            }
+            else {
+                this.captureButton.hide();
+            }
+        });
         /**
          * The format of the image to capture.
          * @zprop
@@ -223,7 +234,7 @@ class ShareDivElement {
                 <button id="zee-save-button" class="zee-social-share-button">
                     <img src="${download_src}">
                 </button>
-                ${withShareButton ? `<zee-social-share-button id="zee-share-button" class="button"><img src="${share_src}"></zee-social-share-button>` : ''}
+                ${withShareButton ? `<button id="zee-share-button" class="zee-social-share-button"><img src="${share_src}"></button>` : ''}
             </div>
             <div id="zee-social-share-close-wrapper">
                 <button id="zee-close-button" class="zee-social-share-button">

package/lib/types.d.ts

@@ -79,7 +79,10 @@ export declare enum TypeHint {
     'color-css' = "color-css",
     'text-multiline' = "text-multiline",
     'angle-degrees' = "angle-degrees",
-    'angle-radians' = "angle-radians"
+    'angle-radians' = "angle-radians",
+    'time-seconds' = "time-seconds",
+    'time-milliseconds' = "time-milliseconds",
+    'time-hertz' = "time-hertz"
 }
 export declare enum ValuesType {
     'files' = "files",

package/lib/types.js

@@ -28,6 +28,9 @@ export var TypeHint;
     TypeHint["text-multiline"] = "text-multiline";
     TypeHint["angle-degrees"] = "angle-degrees";
     TypeHint["angle-radians"] = "angle-radians";
+    TypeHint["time-seconds"] = "time-seconds";
+    TypeHint["time-milliseconds"] = "time-milliseconds";
+    TypeHint["time-hertz"] = "time-hertz";
 })(TypeHint || (TypeHint = {}));
 export var ValuesType;
 (function (ValuesType) {

package/lib/zcomponent.d.ts

@@ -70,5 +70,26 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     private _setEntityPropPath;
     _getNodeById(id: string): Component | undefined;
     resolveStreamID(id: string): Stream | undefined;
+    /**
+     * Traverses the component tree starting from the current component,
+     * moving down the tree using either Breadth-First Search (BFS) or Depth-First Search (DFS),
+     * and invokes the given callback function on each component.
+     *
+     * Breadth-first chosen for traversal can be specifying `true` for the second parameter
+     *
+     * Example usage:
+     * ```
+     * component.traverse((comp) => {
+     *   // Your logic here, e.g.
+     *   console.log(comp.name);
+     * }, true);
+     * ```
+     *
+     * @param callback A function that will be called for each component in the traversal. The current component is passed as a parameter to the callback.
+     * @param breadthFirst If traversal should be breadth-first. Defaults to `false` (depth-first).
+     */
+    traverse(callback: (comp: Component<any>) => void, breadthFirst?: boolean): void;
+    private _traverseBFS;
+    private _traverseDFS;
     dispose(): never;
 }

package/lib/zcomponent.js

@@ -28,7 +28,7 @@ export class ZComponent extends Component {
         this.entityByID = new Map();
         this.entityByLabel = new Map();
         this.nodeByLabel = new Map();
-        this.constructed = new Promise(resolve => this._constructedResolve = resolve);
+        this.constructed = new Promise(resolve => (this._constructedResolve = resolve));
         this.isConstructed = false;
         this.animation = new Animation(false);
         /**
@@ -54,9 +54,7 @@ export class ZComponent extends Component {
             populateAnimationStructureFromData(this, this.animation, this._opts.data.animation);
         const rootConstructor = this._constructorForNode(this._opts.data.root);
         if (rootConstructor) {
-            this.constructChildren([
-                [rootConstructor, {}]
-            ], contextManagerForChildren);
+            this.constructChildren([[rootConstructor, {}]], contextManagerForChildren);
         }
         this._inflateBehaviors();
         this._initializeComponentProps();
@@ -104,7 +102,7 @@ export class ZComponent extends Component {
                     ...(that._opts.data.entityConstructorProps?.[nodeId] ?? {}),
                     ...(that._opts.constructorPropReplacement?.[nodeId] ?? {}),
                     ...(that._constructorPropOverridesByEntityID.get(nodeId) ?? {}),
-                    children
+                    children,
                 };
                 setCurrentZComponentConstruction(that);
                 super(contextManager, constructorProps);
@@ -244,7 +242,7 @@ export class ZComponent extends Component {
                     new constructor(ctx, impl);
             }
             catch (err) {
-                const nodeName = this._opts.data.nodes[nodeID]?.label ?? "Unknown node";
+                const nodeName = this._opts.data.nodes[nodeID]?.label ?? 'Unknown node';
                 const behaviorType = this._opts.data.behaviors[behaviorID]?.type;
                 console.log('An error occurred when constructing behavior of type:', behaviorType, 'for node:', nodeName, err);
             }
@@ -392,6 +390,51 @@ export class ZComponent extends Component {
         }
         return obj;
     }
+    /**
+     * Traverses the component tree starting from the current component,
+     * moving down the tree using either Breadth-First Search (BFS) or Depth-First Search (DFS),
+     * and invokes the given callback function on each component.
+     *
+     * Breadth-first chosen for traversal can be specifying `true` for the second parameter
+     *
+     * Example usage:
+     * ```
+     * component.traverse((comp) => {
+     *   // Your logic here, e.g.
+     *   console.log(comp.name);
+     * }, true);
+     * ```
+     *
+     * @param callback A function that will be called for each component in the traversal. The current component is passed as a parameter to the callback.
+     * @param breadthFirst If traversal should be breadth-first. Defaults to `false` (depth-first).
+     */
+    traverse(callback, breadthFirst = false) {
+        if (breadthFirst) {
+            this._traverseBFS(callback);
+        }
+        else {
+            this._traverseDFS(callback);
+        }
+    }
+    _traverseBFS(callback) {
+        const queue = [this];
+        while (queue.length > 0) {
+            const currentComponent = queue.shift();
+            if (currentComponent) {
+                callback(currentComponent);
+                queue.push(...currentComponent.children);
+            }
+        }
+    }
+    _traverseDFS(callback) {
+        const dfs = (comp) => {
+            if (comp) {
+                callback(comp);
+                comp.children.forEach(dfs);
+            }
+        };
+        dfs(this);
+    }
     dispose() {
         this.animation.dispose();
         for (const entity of this.entityByID.values()) {

package/package.json

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