@genesislcap/foundation-layout 14.395.0 → 14.396.0

package/dist/dts/utils/popout-events.d.ts

@@ -0,0 +1,43 @@
+import { EventDetailMap } from '@genesislcap/foundation-events';
+import { PopoutGeometry } from './types';
+/**
+ * Events for layout popout communication
+ * @public
+ */
+export interface LayoutPopoutEvents extends EventDetailMap {
+    /**
+     * Emitted by a popout window when its geometry or component state changes
+     */
+    'popout-update': {
+        layoutKey: string;
+        geometry: PopoutGeometry;
+        state?: unknown;
+    };
+    /**
+     * Emitted by a popout window when it is closed
+     */
+    'popout-closed': {
+        layoutKey: string;
+    };
+    /**
+     * Emitted by a popout window when it opens to request state
+     */
+    'popout-handshake': {
+        layoutKey: string;
+    };
+    /**
+     * Emitted by the host to sync state to a popout window
+     */
+    'popout-sync': {
+        layoutKey: string;
+        geometry?: PopoutGeometry;
+        state?: unknown;
+    };
+}
+/**
+ * Name of the default broadcast channel used for layout popouts
+ * @public
+ */
+export declare const LAYOUT_POPOUT_CHANNEL_NAME = "f-layout-popout-channel";
+export { PopoutGeometry };
+//# sourceMappingURL=popout-events.d.ts.map

package/dist/dts/utils/popout-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popout-events.d.ts","sourceRoot":"","sources":["../../../src/utils/popout-events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC;;;GAGG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD;;OAEG;IACH,eAAe,EAAE;QACf,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,cAAc,CAAC;QACzB,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,eAAe,EAAE;QACf,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,kBAAkB,EAAE;QAClB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,aAAa,EAAE;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,cAAc,CAAC;QAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,0BAA0B,4BAA4B,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/dts/utils/types.d.ts

@@ -1,5 +1,24 @@
 import { ComponentContainer, ResolvedLayoutConfig } from '@genesis-community/golden-layout';
 import { componentType, instanceContainer } from './constants';
+/**
+ * Geometry details for a popout window
+ * @public
+ */
+export type PopoutGeometry = {
+    screenX: number;
+    screenY: number;
+    outerWidth: number;
+    outerHeight: number;
+    screenId?: string;
+};
+/**
+ * @beta
+ * State of a popped out window
+ */
+export type PopoutState = {
+    geometry: PopoutGeometry;
+    state?: unknown;
+};
 /**
  * Definition of a custom button which will be added to all layout items.
  * @remarks
@@ -25,6 +44,13 @@ export type CustomButton = {
 export type SerialisedLayout = {
     v: '1';
     c: ResolvedLayoutConfig;
+    /**
+     * Optional registry of popped out components and their window geometry.
+     * @beta
+     */
+    popouts?: {
+        [layoutKey: string]: PopoutState;
+    };
 };
 /**
  * Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.
@@ -200,4 +226,17 @@ export interface LayoutComponent {
 export type AutosavedLayouts = {
     [x: string]: string;
 };
+/** @beta */
+export 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;
+    };
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/dts/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDK;AACL,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC;;OAEG;IACH,eAAe,IAAI,CAAC,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;CACnC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,gBAAgB,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,gBAAgB;AAChB,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,OAAO,GAC1C,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrC,CAAC,iBAAiB,CAAC,CAAC,EAAE,iBAAiB,CAAC;CACzC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAE/E,gBAAgB;AAChB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,GAAG,CACA;IACE,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,GACD;IACE,OAAO,EAAE,gBAAgB,CAAC;CAC3B,CACJ,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAC7E;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC;IAChC,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAAC;IAC7D,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED,gBAAgB;AAChB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 export * from './main';
 export { LAYOUT_ICONS } from './styles';
-export { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, LayoutRegistrationError, LayoutUsageError, LAYOUT_POPOUT_CONTAINER_CLASS, } from './utils';
+export { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, LayoutRegistrationError, LayoutUsageError, LAYOUT_POPOUT_CONTAINER_CLASS, LAYOUT_POPOUT_CONTROL_KEY, } from './utils';
 export { registerFactory, getFactory, unregisterFactory } from './utils/factory-registry';

package/dist/esm/main/layout-main.js

@@ -11,7 +11,9 @@ import { AUTOSAVE_KEY, componentType, DEFAULT_RELOAD_BUFFER, getMissingArrayItem
 import { LayoutRegistrationError, LayoutUsageError } from '../utils/error';
 import { getFactory } from '../utils/factory-registry';
 import { logger } from '../utils/logger';
+import { FoundationLayoutPopoutController } from './layout-popout-controller';
 export { layoutStyles } from '../styles';
+FoundationLayoutPopoutController;
 /*
  * We only want to apply the global stylesheet required for golden layout
  * to work once, and only apply it if we actually use an instance of the
@@ -101,13 +103,14 @@ export class FoundationLayout extends FoundationElement {
          * has changed and know you potentially need to gate some of your lifecycle functionality.
          */
         this.lifecycleUpdateToken = undefined;
+        /** @internal */
+        this.popupMode = false;
         /**
          * 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
          */
         this.popoutConfig = undefined;
-        this.popupMode = false;
         /** @internal */
         _FoundationLayout__boundDragListener.set(this, undefined);
         /** @internal */
@@ -256,6 +259,7 @@ export class FoundationLayout extends FoundationElement {
      * @returns - latest version of {@link SerialisedLayout} describing the layout
      */
     getLayout() {
+        var _b, _c;
         const componentCollection = this.getLayoutComponents();
         componentCollection.forEach((items) => {
             if (!items.length)
@@ -276,7 +280,11 @@ export class FoundationLayout extends FoundationElement {
                 orderedStates,
             });
         });
-        return { v: '1', c: ResolvedLayoutConfig.minifyConfig(this.layout.saveLayout()) };
+        return {
+            v: '1',
+            c: ResolvedLayoutConfig.minifyConfig(this.layout.saveLayout()),
+            popouts: (_c = (_b = this.popoutController) === null || _b === void 0 ? void 0 : _b.getRegistry()) !== null && _c !== void 0 ? _c : {},
+        };
     }
     /**
      * If in a popout window from the dynamic layout, this function will run the flow to put the component in popout mode.
@@ -287,13 +295,14 @@ export class FoundationLayout extends FoundationElement {
      * 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() {
         if (!this.popupMode)
             return false;
         const popoutComponentRegistration = new URLSearchParams(window.location.search).get(LAYOUT_POPOUT_CONTROL_KEY);
-        const popoutConfig = {
+        const glPopoutConfig = {
             root: {
                 type: 'component',
                 componentType: popoutComponentRegistration,
@@ -303,7 +312,7 @@ export class FoundationLayout extends FoundationElement {
                 hasHeaders: false,
             },
         };
-        this.loadGLConfigAndSetup(popoutConfig);
+        this.loadGLConfigAndSetup(glPopoutConfig);
         const tryFindNewLayoutDOMLocation = (e) => {
             if (e.classList.contains(LAYOUT_POPOUT_CONTAINER_CLASS))
                 return e;
@@ -397,6 +406,7 @@ export class FoundationLayout extends FoundationElement {
      * @throws various errors if the layout string is malformed and cannot be parsed
      */
     loadLayout(layout, handleMissingItem = 'error', disableCache = false) {
+        var _b;
         const alreadyRegistered = this.registeredItems();
         const wantedRegistered = FoundationLayout.layoutRequiredRegistrations(layout);
         const missingRegisteredItems = getMissingArrayItems(wantedRegistered, alreadyRegistered);
@@ -408,6 +418,9 @@ export class FoundationLayout extends FoundationElement {
         const layoutConfig = LayoutConfig.fromResolved(ResolvedLayoutConfig.unminifyConfig(layout.c));
         if (disableCache)
             this.removeConfigCacheInformation(layoutConfig);
+        if (!this.popupMode && this.popoutController) {
+            this.popoutController.restorePopouts((_b = layout.popouts) !== null && _b !== void 0 ? _b : {}, this.uuid);
+        }
         if (missingRegisteredItems.length !== 0 && handleMissingItem === 'placeholder') {
             this.registerPlaceholdersAndSetClosable(layoutConfig, missingRegisteredItems);
         }
@@ -639,12 +652,14 @@ export class FoundationLayout extends FoundationElement {
             return;
         this.reloadPending = true;
         setTimeout(() => {
+            var _b;
             this.reloadPending = false;
             if (!this.hasFirstLoaded) {
                 this.hasFirstLoaded = true;
                 // Store the default layout config before attempting to load from storage
                 this.defaultLayoutConfig = JSON.parse(JSON.stringify(this.layoutConfig));
-                const res = this.tryLoadLayoutFromLocalStorage() || this.tryActivatePopoutMode();
+                const res = this.tryLoadLayoutFromLocalStorage() ||
+                    (((_b = this.popoutConfig) === null || _b === void 0 ? void 0 : _b.loadAutomatically) !== false && this.tryActivatePopoutMode());
                 if (!res) {
                     this.loadGLConfigAndSetup(this.layoutConfig);
                 }
@@ -973,23 +988,25 @@ export class FoundationLayout extends FoundationElement {
         if (!this.popoutConfig)
             return;
         logger.warn('Layout pop-out mode is enabled, this is an experimental feature and may change in future versions');
-        const popoutWindowPixelConfig = (popoutConfig) => {
-            const matcher = /(\d+);(\d+)/;
-            const mMatches = popoutConfig.match(matcher);
-            if (!mMatches)
-                return '';
-            const [, width, height] = mMatches;
-            return `,width=${width},height=${height}`;
-        };
+        const configWithDefaults = Object.assign(Object.assign({}, this.popoutConfig), { loadAutomatically: true, popoutDimension: Object.assign(Object.assign({}, this.popoutConfig.popoutDimension), { width: 960, height: 720 }) });
         this.customButtons.push({
             svg: LAYOUT_ICONS.popoutSVG,
             onClick: (_, elem) => {
-                const registration = elem.firstChild[instanceContainer].registration;
-                const url = new URL(window.location.toString());
-                const itemParams = new URLSearchParams();
-                itemParams.append(LAYOUT_POPOUT_CONTROL_KEY, registration);
-                url.search = itemParams.toString();
-                window.open(url, undefined, 'popup' + popoutWindowPixelConfig(this.popoutConfig));
+                var _b, _c;
+                const instance = elem.firstChild[instanceContainer];
+                const registration = instance.registration;
+                const component = elem.firstChild;
+                const state = (_b = component === null || component === void 0 ? void 0 : component.getCurrentState) === null || _b === void 0 ? void 0 : _b.call(component);
+                // Use default dimensions from config
+                const defaultGeometry = {
+                    screenX: undefined,
+                    screenY: undefined,
+                    outerWidth: configWithDefaults.popoutDimension.width,
+                    outerHeight: configWithDefaults.popoutDimension.height,
+                };
+                // Add to controller registry immediately so it tracks it
+                (_c = this.popoutController) === null || _c === void 0 ? void 0 : _c.openPopout(registration, { geometry: defaultGeometry, state }, this.uuid);
+                this.cacheAndSaveLayout();
             },
         });
         this.popupMode = window.location.search.includes(LAYOUT_POPOUT_CONTROL_KEY);
@@ -1021,7 +1038,10 @@ __decorate([
     observable
 ], FoundationLayout.prototype, "dragging", void 0);
 __decorate([
-    attr({ attribute: 'popout-config' })
+    observable
+], FoundationLayout.prototype, "popupMode", void 0);
+__decorate([
+    observable
 ], FoundationLayout.prototype, "popoutConfig", void 0);
 __decorate([
     observable
@@ -1037,6 +1057,13 @@ const loadingTemplate = html `
  */
 export const layoutTemplate = html `
   <template>
+    ${when((x) => Boolean(x.popoutConfig), html `
+        <foundation-layout-popout-controller
+          ${ref('popoutController')}
+          :parentLayout="${(x) => x}"
+          channel-name="${(x) => { var _b; return (_b = x.popoutConfig) === null || _b === void 0 ? void 0 : _b.channelName; }}"
+        ></foundation-layout-popout-controller>
+      `)}
     ${when((x) => !x.hasFirstLoaded && x.usingDeclerativeAPI, loadingTemplate)}
     <div class="layout-container" ${ref('layoutElement')}></div>
   </template>

package/dist/esm/main/layout-popout-controller.js

@@ -0,0 +1,289 @@
+import { __awaiter, __decorate } from "tslib";
+import { createTypedBroadcastChannel, } from '@genesislcap/foundation-broadcast-channel';
+import { attr, customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { LAYOUT_POPOUT_CONTROL_KEY, LayoutReceiveEvents, POPOUT_GEOMETRY_BROADCAST_INTERVAL, } from '../utils';
+import { LAYOUT_POPOUT_CHANNEL_NAME } from '../utils/popout-events';
+let FoundationLayoutPopoutController = class FoundationLayoutPopoutController extends FASTElement {
+    constructor() {
+        super(...arguments);
+        // Internal registry to track both geometry and active window references
+        this.popoutRegistry = new Map();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.layoutKey = new URLSearchParams(window.location.search).get(LAYOUT_POPOUT_CONTROL_KEY);
+        this.setupChannel();
+        this.setupUnloadListener();
+        if (this.layoutKey) {
+            this.startPolling();
+            this.channel.postMessage('popout-handshake', { layoutKey: this.layoutKey });
+        }
+        else {
+            this.setupListener();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.channel) {
+            this.channel.close();
+        }
+        this.stopPolling();
+        this.teardownUnloadListener();
+        if (!this.layoutKey) {
+            this.closeAllPopouts();
+        }
+    }
+    setupChannel() {
+        const name = this.channelName || LAYOUT_POPOUT_CHANNEL_NAME;
+        this.channel = createTypedBroadcastChannel(name);
+        if (this.layoutKey) {
+            this.channel.onmessage = (ev) => {
+                if (this.channel.isMessageType('popout-sync', ev)) {
+                    const { layoutKey, state } = ev.data.detail;
+                    if (layoutKey === this.layoutKey && state !== undefined) {
+                        this.applyStateToParent(state);
+                    }
+                }
+            };
+        }
+    }
+    setupListener() {
+        if (!this.channel)
+            return;
+        this.channel.onmessage = (ev) => {
+            if (this.channel.isMessageType('popout-update', ev)) {
+                const { layoutKey, geometry, state } = ev.data
+                    .detail;
+                const current = this.popoutRegistry.get(layoutKey);
+                this.popoutRegistry.set(layoutKey, Object.assign(Object.assign({}, current), { geometry, state }));
+                this.emitAutosave();
+            }
+            else if (this.channel.isMessageType('popout-closed', ev)) {
+                const { layoutKey } = ev.data.detail;
+                this.popoutRegistry.delete(layoutKey);
+                this.emitAutosave();
+            }
+            else if (this.channel.isMessageType('popout-handshake', ev)) {
+                const { layoutKey } = ev.data.detail;
+                const current = this.popoutRegistry.get(layoutKey);
+                if (current) {
+                    this.channel.postMessage('popout-sync', {
+                        layoutKey,
+                        geometry: current.geometry,
+                        state: current.state,
+                    });
+                }
+            }
+        };
+    }
+    applyStateToParent(state) {
+        if (!this.parentLayout)
+            return;
+        const components = this.parentLayout.getLayoutComponents();
+        for (const group of components) {
+            for (const item of group) {
+                if (item && typeof item.applyState === 'function') {
+                    item.applyState(state);
+                }
+            }
+        }
+    }
+    setupUnloadListener() {
+        this.unloadHandler = () => {
+            if (this.layoutKey) {
+                if (this.channel) {
+                    this.channel.postMessage('popout-closed', { layoutKey: this.layoutKey });
+                }
+            }
+            else {
+                this.closeAllPopouts();
+            }
+        };
+        window.addEventListener('beforeunload', this.unloadHandler);
+    }
+    teardownUnloadListener() {
+        if (this.unloadHandler) {
+            window.removeEventListener('beforeunload', this.unloadHandler);
+            this.unloadHandler = null;
+        }
+    }
+    emitAutosave() {
+        this.$emit(LayoutReceiveEvents.autosave, undefined, {
+            bubbles: true,
+            composed: true,
+        });
+    }
+    startPolling() {
+        this.pollInterval = setInterval(() => __awaiter(this, void 0, void 0, function* () {
+            const geometry = yield this.getGeometry();
+            const state = this.getComponentState();
+            const update = { geometry, state };
+            const updateString = JSON.stringify(update);
+            if (updateString !== this.lastUpdate) {
+                this.broadcastUpdate(geometry, state);
+                this.lastUpdate = updateString;
+            }
+        }), POPOUT_GEOMETRY_BROADCAST_INTERVAL);
+    }
+    stopPolling() {
+        if (this.pollInterval) {
+            clearInterval(this.pollInterval);
+        }
+    }
+    getGeometry() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const screenId = yield (() => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                if ('getScreenDetails' in window) {
+                    try {
+                        const details = yield window.getScreenDetails();
+                        return (_a = details.currentScreen) === null || _a === void 0 ? void 0 : _a.label;
+                    }
+                    catch (e) {
+                        return undefined;
+                    }
+                }
+                return undefined;
+            }))();
+            return {
+                screenX: window.screenX,
+                screenY: window.screenY,
+                outerWidth: window.outerWidth,
+                outerHeight: window.outerHeight,
+                screenId,
+            };
+        });
+    }
+    getComponentState() {
+        if (!this.parentLayout)
+            return undefined;
+        const components = this.parentLayout.getLayoutComponents();
+        // In a popout window, we expect exactly one component
+        for (const group of components) {
+            for (const item of group) {
+                if (item && typeof item.getCurrentState === 'function') {
+                    return item.getCurrentState();
+                }
+            }
+        }
+        return undefined;
+    }
+    broadcastUpdate(geometry, state) {
+        if (!this.channel || !this.layoutKey)
+            return;
+        this.channel.postMessage('popout-update', {
+            layoutKey: this.layoutKey,
+            geometry,
+            state,
+        });
+    }
+    /**
+     * 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, popoutState, uuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const url = new URL(window.location.toString());
+            const itemParams = new URLSearchParams();
+            itemParams.append(LAYOUT_POPOUT_CONTROL_KEY, registration);
+            url.search = itemParams.toString();
+            let features = 'popup';
+            const geometry = popoutState === null || popoutState === void 0 ? void 0 : popoutState.geometry;
+            let targetLeft = geometry === null || geometry === void 0 ? void 0 : geometry.screenX;
+            let targetTop = geometry === null || geometry === void 0 ? void 0 : geometry.screenY;
+            if ((geometry === null || geometry === void 0 ? void 0 : geometry.screenId) && 'getScreenDetails' in window) {
+                try {
+                    const details = yield window.getScreenDetails();
+                    const targetScreen = details.screens.find((s) => s.label === geometry.screenId);
+                    if (targetScreen) {
+                        const isWithin = targetLeft >= targetScreen.availLeft &&
+                            targetLeft < targetScreen.availLeft + targetScreen.availWidth &&
+                            targetTop >= targetScreen.availTop &&
+                            targetTop < targetScreen.availTop + targetScreen.availHeight;
+                        if (!isWithin) {
+                            targetLeft = targetScreen.availLeft;
+                            targetTop = targetScreen.availTop;
+                        }
+                    }
+                    else {
+                        targetLeft = undefined;
+                        targetTop = undefined;
+                    }
+                }
+                catch (e) {
+                    // Fallback
+                }
+            }
+            if (geometry) {
+                features += `,width=${geometry.outerWidth},height=${geometry.outerHeight}`;
+                if (targetLeft !== undefined)
+                    features += `,left=${targetLeft}`;
+                if (targetTop !== undefined)
+                    features += `,top=${targetTop}`;
+            }
+            else {
+                features += ',width=800,height=600';
+            }
+            const win = window.open(url, `popout-${registration}-${(uuid === null || uuid === void 0 ? void 0 : uuid.createId()) || Date.now()}`, features);
+            if (!win) {
+                console.warn(`Popout window for ${registration} was blocked.`);
+                return null;
+            }
+            this.popoutRegistry.set(registration, {
+                geometry: geometry || {},
+                state: popoutState === null || popoutState === void 0 ? void 0 : popoutState.state,
+                window: win,
+            });
+            return win;
+        });
+    }
+    getRegistry() {
+        const output = {};
+        for (const [key, val] of this.popoutRegistry.entries()) {
+            output[key] = { geometry: val.geometry, state: val.state };
+        }
+        return output;
+    }
+    /**
+     * Restores popouts from a registry
+     */
+    restorePopouts(registry, uuid) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.closeAllPopouts();
+            for (const [key, val] of Object.entries(registry)) {
+                this.popoutRegistry.set(key, { geometry: val.geometry, state: val.state });
+            }
+            const keys = Array.from(this.popoutRegistry.keys());
+            if (keys.length === 0)
+                return;
+            yield Promise.all(keys.map((key) => {
+                const state = this.popoutRegistry.get(key);
+                return this.openPopout(key, state, uuid);
+            }));
+        });
+    }
+    closeAllPopouts() {
+        for (const val of this.popoutRegistry.values()) {
+            if (val.window && !val.window.closed) {
+                val.window.close();
+            }
+        }
+        this.popoutRegistry.clear();
+    }
+};
+__decorate([
+    attr({ attribute: 'channel-name' })
+], FoundationLayoutPopoutController.prototype, "channelName", void 0);
+__decorate([
+    observable
+], FoundationLayoutPopoutController.prototype, "parentLayout", void 0);
+FoundationLayoutPopoutController = __decorate([
+    customElement({
+        name: 'foundation-layout-popout-controller',
+        template: null,
+        styles: null,
+    })
+], FoundationLayoutPopoutController);
+export { FoundationLayoutPopoutController };

package/dist/esm/utils/constants.js

@@ -25,9 +25,15 @@ export const DEFAULT_RELOAD_BUFFER = 500;
 export const AUTOSAVE_KEY = 'foundation-layout-autosave';
 /**
  * Key to be used for controlling popout behaviour
- * @internal
+ * @beta
  */
 export const LAYOUT_POPOUT_CONTROL_KEY = 'f-layout-key';
+/**
+ * How often a popout window should check to broadcast its
+ * geometry
+ * @interal
+ */
+export const POPOUT_GEOMETRY_BROADCAST_INTERVAL = 1000;
 /**
  * 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

package/dist/esm/utils/index.js

@@ -4,5 +4,6 @@ export * from './events';
 export * from './factory-registry';
 export * from './misc';
 export * from './templates';
+export * from './popout-events';
 export * from './types';
 export * from './error';

package/dist/esm/utils/popout-events.js

@@ -0,0 +1,5 @@
+/**
+ * Name of the default broadcast channel used for layout popouts
+ * @public
+ */
+export const LAYOUT_POPOUT_CHANNEL_NAME = 'f-layout-popout-channel';