@genesislcap/foundation-layout 14.393.2 → 14.393.3-FUI-2471.2

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,9 +251,12 @@ 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.
+     *
+     * @param autoloading - If true, this respects the {@link LayoutPopoutConfig.loadAutomatically} property.
+     * You might want to set this to false and call it manually if you're manually registering components to the layout in order to avoid race conditions.
      * @beta
      */
-    tryActivatePopoutMode(): boolean;
+    tryActivatePopoutMode(autoloading?: boolean): boolean;
     /**
      * Try to load a layout from local storage, or return false. Only required if manually calling {@link FoundationLayout.registerItem}
      * @remarks
@@ -583,6 +590,44 @@ export declare class FoundationLayout extends FoundationElement implements Layou
                cacheElementsAndRegister(config: RegistrationConfig): string;
            }
 
+           declare class FoundationLayoutPopoutController extends FASTElement {
+               channelName: string;
+               private layoutKey;
+               private channel;
+               private pollInterval;
+               private unloadHandler;
+               private lastGeometry;
+               private popoutRegistry;
+               connectedCallback(): void;
+               disconnectedCallback(): void;
+               private setupChannel;
+               private setupListener;
+               private setupUnloadListener;
+               private teardownUnloadListener;
+               private emitAutosave;
+               private startPolling;
+               private stopPolling;
+               private getGeometry;
+               private broadcastGeometry;
+               /**
+                * Opens a component in a popout window.
+                * @param registration - The registration ID of the component to pop out.
+                * @param geometry - Optional geometry to use for the new window.
+                * @param uuid - UUID generator from parent layout
+                */
+               openPopout(registration: string, geometry?: any, 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 +719,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 +816,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 +915,26 @@ 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;
+           };
+
            /**
             * @public
             * The parameters that can be set on a new item when being added by the {@link FoundationLayout.addItem} API
@@ -923,6 +1008,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>
@@ -370,7 +370,7 @@ Removes all instances of a specified registered item from the layout.
 </td></tr>
 <tr><td>
 
-[tryActivatePopoutMode()](./foundation-layout.foundationlayout.tryactivatepopoutmode.md)
+[tryActivatePopoutMode(autoloading)](./foundation-layout.foundationlayout.tryactivatepopoutmode.md)
 
 
 </td><td>

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.foundationlayout.tryactivatepopoutmode.md

@@ -12,8 +12,45 @@ If in a popout window from the dynamic layout, this function will run the flow t
 **Signature:**
 
 ```typescript
-tryActivatePopoutMode(): boolean;
+tryActivatePopoutMode(autoloading?: boolean): boolean;
 ```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+autoloading
+
+
+</td><td>
+
+boolean
+
+
+</td><td>
+
+_(Optional)_ If true, this respects the  property. You might want to set this to false and call it manually if you're manually registering components to the layout in order to avoid race conditions.
+
+
+</td></tr>
+</tbody></table>
+
 **Returns:**
 
 boolean

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;
@@ -68,7 +75,7 @@ export class FoundationLayout extends FoundationElement implements LayoutCompone
     // @internal
     requestLayoutReload(): void;
     // @beta
-    tryActivatePopoutMode(): boolean;
+    tryActivatePopoutMode(autoloading?: boolean): boolean;
     tryLoadLayoutFromLocalStorage(): boolean;
     // @internal (undocumented)
     usingDeclerativeAPI: boolean;
@@ -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:36: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.393.2",
+  "version": "14.393.3-FUI-2471.2",
   "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.393.2",
-    "@genesislcap/genx": "14.393.2",
-    "@genesislcap/rollup-builder": "14.393.2",
-    "@genesislcap/ts-builder": "14.393.2",
-    "@genesislcap/uvu-playwright-builder": "14.393.2",
-    "@genesislcap/vite-builder": "14.393.2",
-    "@genesislcap/webpack-builder": "14.393.2"
+    "@genesislcap/foundation-testing": "14.393.3-FUI-2471.2",
+    "@genesislcap/genx": "14.393.3-FUI-2471.2",
+    "@genesislcap/rollup-builder": "14.393.3-FUI-2471.2",
+    "@genesislcap/ts-builder": "14.393.3-FUI-2471.2",
+    "@genesislcap/uvu-playwright-builder": "14.393.3-FUI-2471.2",
+    "@genesislcap/vite-builder": "14.393.3-FUI-2471.2",
+    "@genesislcap/webpack-builder": "14.393.3-FUI-2471.2"
   },
   "dependencies": {
     "@genesis-community/golden-layout": "^2.11.0",
-    "@genesislcap/foundation-comms": "14.393.2",
-    "@genesislcap/foundation-logger": "14.393.2",
-    "@genesislcap/foundation-ui": "14.393.2",
-    "@genesislcap/foundation-utils": "14.393.2",
+    "@genesislcap/foundation-broadcast-channel": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-comms": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-events": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-logger": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-ui": "14.393.3-FUI-2471.2",
+    "@genesislcap/foundation-utils": "14.393.3-FUI-2471.2",
     "@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": "2448f444f9684f2fd2209843677ccaa342af1234"
+  "gitHead": "8d5276ff6ff9d909b67f0095a7cc2df458d1e8eb"
 }