@genesislcap/foundation-layout 14.394.0 → 14.396.0

package/dist/foundation-layout.api.json

@@ -845,15 +845,20 @@
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-layout!FoundationLayout#popoutConfig:member",
-              "docComment": "/**\n * Controls whether popout functionality is enabled on the layout. Defaults to disabled. Set this attribute to any string to enable popout functionality. If this string is of format `number;number` then this will be interpreted as the width and height of the popout window.\n *\n * @beta\n */\n",
+              "docComment": "/**\n * Controls whether popout functionality is enabled on the layout. Defaults to disabled. Pass an empty object `{}` to use default configurations, or a {@link LayoutPopoutConfig} object to further customise.\n *\n * @beta\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
                   "text": "popoutConfig: "
                 },
+                {
+                  "kind": "Reference",
+                  "text": "LayoutPopoutConfig",
+                  "canonicalReference": "@genesislcap/foundation-layout!LayoutPopoutConfig:type"
+                },
                 {
                   "kind": "Content",
-                  "text": "string | undefined"
+                  "text": " | undefined"
                 },
                 {
                   "kind": "Content",
@@ -866,7 +871,7 @@
               "name": "popoutConfig",
               "propertyTypeTokenRange": {
                 "startIndex": 1,
-                "endIndex": 2
+                "endIndex": 3
               },
               "isStatic": false,
               "isProtected": false,
@@ -1721,6 +1726,33 @@
             "endIndex": 0
           }
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@genesislcap/foundation-layout!LAYOUT_POPOUT_CONTROL_KEY:var",
+          "docComment": "/**\n * Key to be used for controlling popout behaviour\n *\n * @beta\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "LAYOUT_POPOUT_CONTROL_KEY = "
+            },
+            {
+              "kind": "Content",
+              "text": "\"f-layout-key\""
+            }
+          ],
+          "fileUrlPath": "src/utils/constants.ts",
+          "initializerTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "isReadonly": true,
+          "releaseTag": "Beta",
+          "name": "LAYOUT_POPOUT_CONTROL_KEY",
+          "variableTypeTokenRange": {
+            "startIndex": 0,
+            "endIndex": 0
+          }
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@genesislcap/foundation-layout!LayoutComponentWithState:interface",
@@ -1848,6 +1880,32 @@
             "endIndex": 2
           }
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@genesislcap/foundation-layout!LayoutPopoutConfig:type",
+          "docComment": "/**\n * @beta\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type LayoutPopoutConfig = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    channelName?: string;\n    loadAutomatically?: boolean;\n    popoutDimension?: {\n        width: number;\n        height: number;\n    };\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/utils/types.ts",
+          "releaseTag": "Beta",
+          "name": "LayoutPopoutConfig",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@genesislcap/foundation-layout!LayoutReceiveEvents:var",
@@ -2399,7 +2457,16 @@
             },
             {
               "kind": "Content",
-              "text": ";\n}"
+              "text": ";\n    popouts?: {\n        [layoutKey: string]: "
+            },
+            {
+              "kind": "Reference",
+              "text": "PopoutState",
+              "canonicalReference": "@genesislcap/foundation-layout!~PopoutState:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n    };\n}"
             },
             {
               "kind": "Content",
@@ -2411,7 +2478,7 @@
           "name": "SerialisedLayout",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 4
+            "endIndex": 6
           }
         },
         {

package/dist/foundation-layout.d.ts

@@ -1,5 +1,6 @@
 import type { Container } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
+import { FASTElement } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { LayoutConfig } from '@genesis-community/golden-layout';
@@ -170,13 +171,16 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * has changed and know you potentially need to gate some of your lifecycle functionality.
      */
     lifecycleUpdateToken: string | undefined;
+    /** @internal */
+    popupMode: boolean;
+    /** @internal */
+    popoutController: FoundationLayoutPopoutController;
     /**
      * Controls whether popout functionality is enabled on the layout. Defaults to disabled.
-     * Set this attribute to any string to enable popout functionality. If this string is of format `number;number` then this will be interpreted as the width and height of the popout window.
+     * Pass an empty object `{}` to use default configurations, or a {@link LayoutPopoutConfig} object to further customise.
      * @beta
      */
-    popoutConfig: string | undefined;
-    private popupMode;
+    popoutConfig: LayoutPopoutConfig | undefined;
     /** @internal */
     constructor();
     /** @internal */
@@ -247,6 +251,7 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * If you set the `LAYOUT_POPOUT_CONTAINER_CLASS` on an element which is a DOM parent of the layout,
      * then if the layout goes into popout mode then it will place itself as the only child for the popout container you set.
      * It is likely you'll want to attach this class to your design system provider.
+     *
      * @beta
      */
     tryActivatePopoutMode(): boolean;
@@ -583,6 +588,53 @@ export declare class FoundationLayout extends FoundationElement implements Layou
                cacheElementsAndRegister(config: RegistrationConfig): string;
            }
 
+           declare class FoundationLayoutPopoutController extends FASTElement {
+               channelName: string;
+               /**
+                * Reference to the parent layout to retrieve component state
+                * @internal
+                */
+               parentLayout: LayoutComponent & {
+                   getLayoutComponents(): any[][];
+               };
+               private layoutKey;
+               private channel;
+               private pollInterval;
+               private unloadHandler;
+               private lastUpdate;
+               private popoutRegistry;
+               connectedCallback(): void;
+               disconnectedCallback(): void;
+               private setupChannel;
+               private setupListener;
+               private applyStateToParent;
+               private setupUnloadListener;
+               private teardownUnloadListener;
+               private emitAutosave;
+               private startPolling;
+               private stopPolling;
+               private getGeometry;
+               private getComponentState;
+               private broadcastUpdate;
+               /**
+                * Opens a component in a popout window.
+                * @param registration - The registration ID of the component to pop out.
+                * @param popoutState - Optional state (geometry and component state) to use for the new window.
+                * @param uuid - UUID generator from parent layout
+                */
+               openPopout(registration: string, popoutState?: PopoutState, uuid?: any): Promise<Window>;
+               getRegistry(): {
+                   [layoutKey: string]: PopoutState;
+               };
+               /**
+                * Restores popouts from a registry
+                */
+               restorePopouts(registry: {
+                   [layoutKey: string]: PopoutState;
+               }, uuid: any): Promise<void>;
+               closeAllPopouts(): void;
+           }
+
            /**
             * @public
             * `FoundationLayoutRegion` is a custom element that represents a region in the layout.
@@ -674,6 +726,12 @@ export declare class FoundationLayout extends FoundationElement implements Layou
             */
            export declare const LAYOUT_POPOUT_CONTAINER_CLASS = "f-layout-popout";
 
+           /**
+            * Key to be used for controlling popout behaviour
+            * @beta
+            */
+           export declare const LAYOUT_POPOUT_CONTROL_KEY = "f-layout-key";
+
            /** @internal */
            declare interface LayoutComponent {
                [componentType]: ComponentTypes;
@@ -765,6 +823,20 @@ export declare class FoundationLayout extends FoundationElement implements Layou
                readonly itemResized: "item-resized";
            };
 
+           /** @beta */
+           export declare type LayoutPopoutConfig = {
+               /**
+                * The name of the broadcast channel to use for communication between the main window and popout windows.
+                * Defaults to 'f-layout-popout-channel'.
+                */
+               channelName?: string;
+               loadAutomatically?: boolean;
+               popoutDimension?: {
+                   width: number;
+                   height: number;
+               };
+           };
+
            /**
             * Defines events that the layout system listens for
             *
@@ -850,6 +922,27 @@ export declare class FoundationLayout extends FoundationElement implements Layou
                };
            };
 
+           /**
+            * Geometry details for a popout window
+            * @public
+            */
+           declare type PopoutGeometry = {
+               screenX: number;
+               screenY: number;
+               outerWidth: number;
+               outerHeight: number;
+               screenId?: string;
+           };
+
+           /**
+            * @beta
+            * State of a popped out window
+            */
+           declare type PopoutState = {
+               geometry: PopoutGeometry;
+               state?: unknown;
+           };
+
            /**
             * @public
             * The parameters that can be set on a new item when being added by the {@link FoundationLayout.addItem} API
@@ -923,6 +1016,13 @@ export declare class FoundationLayout extends FoundationElement implements Layou
            export declare type SerialisedLayout = {
                v: '1';
                c: ResolvedLayoutConfig;
+               /**
+                * Optional registry of popped out components and their window geometry.
+                * @beta
+                */
+               popouts?: {
+                   [layoutKey: string]: PopoutState;
+               };
            };
 
            /**

package/docs/api/foundation-layout.foundationlayout.md

@@ -206,12 +206,12 @@ Function which is used to generate the placeholder text when a layout is loaded
 
 </td><td>
 
-string \| undefined
+[LayoutPopoutConfig](./foundation-layout.layoutpopoutconfig.md) \| undefined
 
 
 </td><td>
 
-**_(BETA)_** Controls whether popout functionality is enabled on the layout. Defaults to disabled. Set this attribute to any string to enable popout functionality. If this string is of format `number;number` then this will be interpreted as the width and height of the popout window.
+**_(BETA)_** Controls whether popout functionality is enabled on the layout. Defaults to disabled. Pass an empty object `{}` to use default configurations, or a [LayoutPopoutConfig](./foundation-layout.layoutpopoutconfig.md) object to further customise.
 
 
 </td></tr>

package/docs/api/foundation-layout.foundationlayout.popoutconfig.md

@@ -7,10 +7,10 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-Controls whether popout functionality is enabled on the layout. Defaults to disabled. Set this attribute to any string to enable popout functionality. If this string is of format `number;number` then this will be interpreted as the width and height of the popout window.
+Controls whether popout functionality is enabled on the layout. Defaults to disabled. Pass an empty object `{}` to use default configurations, or a [LayoutPopoutConfig](./foundation-layout.layoutpopoutconfig.md) object to further customise.
 
 **Signature:**
 
 ```typescript
-popoutConfig: string | undefined;
+popoutConfig: LayoutPopoutConfig | undefined;
 ```

package/docs/api/foundation-layout.layout_popout_control_key.md

@@ -0,0 +1,16 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [LAYOUT\_POPOUT\_CONTROL\_KEY](./foundation-layout.layout_popout_control_key.md)
+
+## LAYOUT\_POPOUT\_CONTROL\_KEY variable
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Key to be used for controlling popout behaviour
+
+**Signature:**
+
+```typescript
+LAYOUT_POPOUT_CONTROL_KEY = "f-layout-key"
+```

package/docs/api/foundation-layout.layoutpopoutconfig.md

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [LayoutPopoutConfig](./foundation-layout.layoutpopoutconfig.md)
+
+## LayoutPopoutConfig type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+
+**Signature:**
+
+```typescript
+export type LayoutPopoutConfig = {
+    channelName?: string;
+    loadAutomatically?: boolean;
+    popoutDimension?: {
+        width: number;
+        height: number;
+    };
+};
+```

package/docs/api/foundation-layout.md

@@ -215,6 +215,17 @@ A collection of SVG icons in base64 format.
 **_(BETA)_** Put this classname on an element which is a DOM parent of the layout, and if the layout goes into popout mode then it will place itself as the only child for the popout container you set.
 
 
+</td></tr>
+<tr><td>
+
+[LAYOUT\_POPOUT\_CONTROL\_KEY](./foundation-layout.layout_popout_control_key.md)
+
+
+</td><td>
+
+**_(BETA)_** Key to be used for controlling popout behaviour
+
+
 </td></tr>
 <tr><td>
 
@@ -300,6 +311,17 @@ Factory function for creating component instances in the layout.
 Definition of a custom button which will be added to all layout items.
 
 
+</td></tr>
+<tr><td>
+
+[LayoutPopoutConfig](./foundation-layout.layoutpopoutconfig.md)
+
+
+</td><td>
+
+**_(BETA)_**
+
+
 </td></tr>
 <tr><td>
 

package/docs/api/foundation-layout.serialisedlayout.md

@@ -12,6 +12,9 @@ Versioned layout config objects. `v` is the version and `c` contains the layout
 export type SerialisedLayout = {
     v: '1';
     c: ResolvedLayoutConfig;
+    popouts?: {
+        [layoutKey: string]: PopoutState;
+    };
 };
 ```
 

package/docs/api-report.md.api.md

@@ -6,6 +6,7 @@
 
 import type { Container } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
+import { FASTElement } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { LayoutConfig } from '@genesis-community/golden-layout';
@@ -60,7 +61,13 @@ export class FoundationLayout extends FoundationElement implements LayoutCompone
     loadLayout(layout: SerialisedLayout, handleMissingItem?: 'placeholder' | 'error', disableCache?: boolean): void;
     missingItemPlaceholder: (missingItem: string) => string;
     // @beta
-    popoutConfig: string | undefined;
+    popoutConfig: LayoutPopoutConfig | undefined;
+    // Warning: (ae-forgotten-export) The symbol "FoundationLayoutPopoutController" needs to be exported by the entry point index.d.ts
+    //
+    // @internal (undocumented)
+    popoutController: FoundationLayoutPopoutController;
+    // @internal (undocumented)
+    popupMode: boolean;
     registeredItems(): string[];
     registerItem(registration: string, elementsOrFactory: Element[] | ComponentFactory): string;
     reloadBuffer: number;
@@ -150,6 +157,9 @@ export const LAYOUT_ICONS: {
 // @beta
 export const LAYOUT_POPOUT_CONTAINER_CLASS = "f-layout-popout";
 
+// @beta
+export const LAYOUT_POPOUT_CONTROL_KEY = "f-layout-key";
+
 // @public
 export interface LayoutComponentWithState<T> {
     applyState(state: T | null): void;
@@ -164,6 +174,16 @@ export const LayoutEmitEvents: {
     readonly itemResized: "item-resized";
 };
 
+// @beta (undocumented)
+export type LayoutPopoutConfig = {
+    channelName?: string;
+    loadAutomatically?: boolean;
+    popoutDimension?: {
+        width: number;
+        height: number;
+    };
+};
+
 // @public
 export const LayoutReceiveEvents: {
     readonly changeTitle: "change-title";
@@ -241,11 +261,18 @@ export type RegistrationConfig = {
 export type SerialisedLayout = {
     v: '1';
     c: ResolvedLayoutConfig;
+    popouts?: {
+        [layoutKey: string]: PopoutState;
+    };
 };
 
 // @public
 export function unregisterFactory(key: string): boolean;
 
+// Warnings were encountered during analysis:
+//
+// src/utils/types.ts:56:5 - (ae-forgotten-export) The symbol "PopoutState" needs to be exported by the entry point index.d.ts
+
 // (No @packageDocumentation comment for this package)
 
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-layout",
   "description": "Genesis Foundation UI App Layout",
-  "version": "14.394.0",
+  "version": "14.396.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-layout.d.ts",
@@ -38,20 +38,22 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.394.0",
-    "@genesislcap/genx": "14.394.0",
-    "@genesislcap/rollup-builder": "14.394.0",
-    "@genesislcap/ts-builder": "14.394.0",
-    "@genesislcap/uvu-playwright-builder": "14.394.0",
-    "@genesislcap/vite-builder": "14.394.0",
-    "@genesislcap/webpack-builder": "14.394.0"
+    "@genesislcap/foundation-testing": "14.396.0",
+    "@genesislcap/genx": "14.396.0",
+    "@genesislcap/rollup-builder": "14.396.0",
+    "@genesislcap/ts-builder": "14.396.0",
+    "@genesislcap/uvu-playwright-builder": "14.396.0",
+    "@genesislcap/vite-builder": "14.396.0",
+    "@genesislcap/webpack-builder": "14.396.0"
   },
   "dependencies": {
     "@genesis-community/golden-layout": "^2.11.0",
-    "@genesislcap/foundation-comms": "14.394.0",
-    "@genesislcap/foundation-logger": "14.394.0",
-    "@genesislcap/foundation-ui": "14.394.0",
-    "@genesislcap/foundation-utils": "14.394.0",
+    "@genesislcap/foundation-broadcast-channel": "14.396.0",
+    "@genesislcap/foundation-comms": "14.396.0",
+    "@genesislcap/foundation-events": "14.396.0",
+    "@genesislcap/foundation-logger": "14.396.0",
+    "@genesislcap/foundation-ui": "14.396.0",
+    "@genesislcap/foundation-utils": "14.396.0",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
     "@microsoft/fast-foundation": "2.50.0"
@@ -65,5 +67,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "cad53566d55381e553fcb586a23e121d38b8cd59"
+  "gitHead": "43e0fd00aa30590bdcad05ddb3d8aca0d493d020"
 }