@genesislcap/foundation-layout 10.3.1 → 11.3.1

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

@@ -1,7 +1,7 @@
 import { ResolvedLayoutConfig } from '@genesis-community/golden-layout';
 import { componentType } from './';
 /**
- * @beta
+ * @public
  * Versioned layout config objects. `v` is the version and `c` contains the layout config.
  * @remarks
  * Versioning the layout config in this way allows changes to the config schema while
@@ -16,7 +16,7 @@ export type SerialisedLayout = {
     c: ResolvedLayoutConfig;
 };
 /**
- * @beta
+ * @public
  * The parameters that can be set on a new item when being added by the {@link FoundationLayout.addItem} API
  *
  * @remarks
@@ -33,7 +33,7 @@ export interface RegisteredElementConfig {
     size?: string;
 }
 /**
- * @beta
+ * @public
  * Where to add the new item into the layout when using the {@link FoundationLayout.addItem} API
  */
 export type Placement = {
@@ -47,7 +47,7 @@ export interface RegistrationConfig {
 /** @internal */
 export declare const layoutRegionValue: readonly ["horizontal", "vertical", "tabs"];
 /**
- * @beta
+ * @public
  * Union type describing the three different types of region splits.
  * Set on the `type` attribute on {@link FoundationLayoutRegion}.
  */
@@ -60,4 +60,8 @@ export interface LayoutComponent {
     cacheElementsAndRegister(config: RegistrationConfig): string;
     requestLayoutReload(): void;
 }
+/** @internal */
+export type AutosavedLayouts = {
+    [x: string]: string;
+};
 //# 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,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAEnC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;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;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC3C,CAAC;AAEF,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAEnC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;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;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC3C,CAAC;AAEF,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,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"}

package/dist/esm/index.federated.js

@@ -1,2 +1 @@
 import('./index');
-//# sourceMappingURL=index.federated.js.map

package/dist/esm/index.js

@@ -1,3 +1,2 @@
 export * from './main';
-export * from './utils';
-//# sourceMappingURL=index.js.map
+export { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, LayoutRegistrationError, LayoutUsageError, } from './utils';

package/dist/esm/main/index.js

@@ -2,5 +2,3 @@ export { FoundationLayoutItem } from './layout-item';
 export { FoundationLayoutRegion } from './layout-region';
 export { FoundationLayout, layoutStyles, layoutTemplate } from './layout-main';
 export * from './layout-components';
-export { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, } from '../utils';
-//# sourceMappingURL=index.js.map

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

@@ -1,6 +1,6 @@
+import { foundationLayoutItem } from './layout-item';
 import { foundationLayout } from './layout-main';
 import { foundationLayoutRegion } from './layout-region';
-import { foundationLayoutItem } from './layout-item';
 /**
  * Registration object to register the layout with your design system.
  *
@@ -13,7 +13,7 @@ import { foundationLayoutItem } from './layout-item';
  * @example
  * `<zero-layout></zero-layout>` if you are using the layout with the `zero` design-system.
  *
- * @beta
+ * @public
  */
 export const foundationLayoutComponents = {
     foundationLayout,
@@ -33,4 +33,3 @@ export const foundationLayoutComponents = {
         }
     },
 };
-//# sourceMappingURL=layout-components.js.map

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

@@ -1,10 +1,10 @@
 var _a;
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
-import { componentType, getParentLayoutComponent, wrapperTemplate, } from '../utils';
 import { FoundationElement } from '@microsoft/fast-foundation';
+import { componentType, getParentLayoutComponent, wrapperTemplate, } from '../utils';
 /**
- * @beta
+ * @public
  * `FoundationLayoutItem` is a custom element that represents an item in the layout.
  * @remarks
  * This element is used to wrap html elements and configure their layout settings as part of the layout system.
@@ -17,7 +17,7 @@ export class FoundationLayoutItem extends FoundationElement {
         /**
          * Boolean attribute controls whether the window can be closed in the GUI.
          * Defaults to `false`.
-         * @beta
+         * @public
          */
         this.closable = false;
         /** @internal */
@@ -83,4 +83,3 @@ export const foundationLayoutItem = FoundationLayoutItem.compose({
     baseName: 'layout-item',
     template: wrapperTemplate,
 });
-//# sourceMappingURL=layout-item.js.map

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

@@ -1,13 +1,15 @@
 var _a;
 import { __decorate } from "tslib";
+import { GoldenLayout, LayoutConfig, ResolvedLayoutConfig, } from '@genesis-community/golden-layout';
+import { Session } from '@genesislcap/foundation-comms';
+import { UUID } from '@genesislcap/foundation-utils';
 import { html, attr, observable, when, ref } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { logger } from '../utils/logger';
-import { GoldenLayout, LayoutConfig, ResolvedLayoutConfig, } from '@genesis-community/golden-layout';
-import { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, componentType, } from '../utils/';
-import { LayoutRegistrationError, LayoutUsageError } from '../utils/error';
-import { getMissingArrayItems } from '../utils/';
 import { globalDraggingStyles, glVisualConfig, layoutStyles } from '../styles';
+import { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, componentType, AUTOSAVE_KEY, } from '../utils/';
+import { getMissingArrayItems } from '../utils/';
+import { LayoutRegistrationError, LayoutUsageError } from '../utils/error';
+import { logger } from '../utils/logger';
 export { layoutStyles } from '../styles';
 /*
  * We only want to apply the global stylesheet required for golden layout
@@ -16,7 +18,7 @@ export { layoutStyles } from '../styles';
  */
 let appliedGlobalStyles = false;
 /**
- * @beta
+ * @public
  * Top level web component which is used to initialise a custom layout
  * @remarks
  * Can be used in a composition to customise the styles of the layout.
@@ -31,23 +33,29 @@ export class FoundationLayout extends FoundationElement {
         /**
          * Number describing how long to wait in ms before reloading the config when adding items
          * declaratively by the html API. Default 500 (ms).
-         * @beta
+         * @public
          */
         this.reloadBuffer = DEFAULT_RELOAD_BUFFER;
         this.reloadPending = false;
         this.registeredComponents = 0;
+        /**
+         * Function which is used to generate the placeholder text when a layout is loaded
+         * with a missing item.
+         * @public
+         */
+        this.missingItemPlaceholder = (missingItem) => `"${missingItem}" cannot be loaded as it isn't registered with the layout system`;
         /** @internal */
         this.hasFirstLoaded = false;
         /** @internal */
         this.usingDeclerativeAPI = false;
         /**
-         * @beta
+         * @public
          * Set to true when the user is currently dragging the panes inside of the layout
          */
         this.dragging = false;
         this.onDragStart = this.onDragStart.bind(this);
         this.onDragStop = this.onDragStop.bind(this);
-        this.cacheLayout = this.cacheLayout.bind(this);
+        this.cacheAndSaveLayout = this.cacheAndSaveLayout.bind(this);
         this.onItemRemoved = this.onItemRemoved.bind(this);
     }
     /** @internal */
@@ -82,20 +90,28 @@ export class FoundationLayout extends FoundationElement {
     /** @internal */
     onDragStop() {
         this.dragging = false;
+        this.cacheAndSaveLayout();
     }
     /** @internal */
     onItemAdded() {
         this.$emit(LayoutEmitEvents.itemAdded);
+        this.cacheAndSaveLayout();
     }
     /** @internal */
     onItemRemoved() {
         this.$emit(LayoutEmitEvents.itemRemoved);
+        this.cacheAndSaveLayout();
+    }
+    /** @internal */
+    onItemResized() {
+        this.$emit(LayoutEmitEvents.itemResized);
+        this.cacheAndSaveLayout();
     }
     /**
      * JS API, public
      */
     /**
-     * @beta
+     * @public
      * Gets all of the required registration function names for a set of config
      * @remarks
      * You can use this with {@link FoundationLayout.registeredItems | registeredItems} to work out what items you need to register with {@link FoundationLayout.registerItem | registerItem()}
@@ -118,7 +134,7 @@ export class FoundationLayout extends FoundationElement {
         return names.sort();
     }
     /**
-     * @beta
+     * @public
      * Gets all of the currently registered names
      * @remarks
      * You can use this with {@link FoundationLayout.layoutRequiredRegistrations | layoutRequiredRegistrations} to work out what items you need to register with {@link FoundationLayout.registerItem | registerItem()}
@@ -130,7 +146,7 @@ export class FoundationLayout extends FoundationElement {
         return this.layout.getRegisteredComponentTypeNames();
     }
     /**
-     * @beta
+     * @public
      * Gets a minified string containing the config describing the current layout of the layout object to later restore in {@link FoundationLayout.loadLayout | function}
      * @returns - latest version of {@link SerialisedLayout} describing the layout
      */
@@ -138,29 +154,57 @@ export class FoundationLayout extends FoundationElement {
         return { v: '1', c: ResolvedLayoutConfig.minifyConfig(this.layout.saveLayout()) };
     }
     /**
-     * @beta
+     * Try to load a layout from local storage, or return false. Only required if manually calling {@link FoundationLayout.registerItem}
+     * @remarks
+     * Attempt to load an autosaved layout from local storage, keyed on the `auto-save-key` attribute.
+     * If `auto-save-key` attribute is not set or there is no autosaved layout yet, this will return false. Else, true.
+     *
+     * This function is automatically called when loading the layout via the declarative API so if you're not registering components via
+     * the JavaScript API then you don't need to call this function. If you *are* calling {@link FoundationLayout.registerItem} then you should call this function immediately afterwards.
+     *
+     * Will load the layout with `handleMissingItem = 'placeholder` so placeholder text will be shown for any missing items.
+     * @returns boolean - true if a layout was loaded, false if not
+     * @public
+     */
+    tryLoadLayoutFromLocalStorage() {
+        if (!this.autoSaveKey)
+            return false;
+        const existingLayouts = JSON.parse(this.session.getLocalStorageItem(AUTOSAVE_KEY) || '{}');
+        if (!(this.autoSaveKey in existingLayouts))
+            return false;
+        const layout = JSON.parse(existingLayouts[this.autoSaveKey]);
+        this.loadLayout(layout, 'placeholder');
+        return true;
+    }
+    /**
+     * @public
      * Restores a layout described in the config from {@link FoundationLayout.getLayout | getLayout()}
      *
      * @remarks
-     * In order to restore a layout you must have registered all of the required panes with the layout system before restoring it. If you are just setting the layout using the declarative API then all of the same components will be registered. <br/ >If you have added any elements using {@link FoundationLayout.registerItem} then you must ensure all of the same items have been added again. To make tracking what items are registered easier it is recommended in this case you explicitly name your registrations using the `id` parameter available on the {@link RegisteredElementConfig} and `foundation-layout-item` APIs. <br/> You can use {@link FoundationLayout.layoutRequiredRegistrations} to check which items are registered in a current layout in order to dynamically add any missing items before you can restore the layout
+     * In order to restore a layout you must have registered all of the required panes with the layout system before restoring it. If you are just setting the layout using the declarative API then all of the same components will be registered. If you have added any elements using {@link FoundationLayout.registerItem} then you must ensure all of the same items have been added again. To make tracking what items are registered easier it is recommended in this case you explicitly name your registrations using the `id` parameter available on the {@link RegisteredElementConfig} and `foundation-layout-item` APIs. You can use {@link FoundationLayout.layoutRequiredRegistrations} to check which items are registered in a current layout in order to dynamically add any missing items before you can restore the layout
      *
      * @param layout - any version of {@link SerialisedLayout} object describing the layout
-     * @throws {@link LayoutUsageError} if you attempt to load a layout with registered items that are not currently registered with the layout system
+     * @param handleMissingItem - what to do if the layout contains items that are not currently registered with the layout system. Defaults to 'error' which will throw an error. If set to 'placeholder' then any missing items will be replaced with a placeholder element. You can control the text of the placeholder element with {@link FoundationLayout.missingItemPlaceholder}.
+     * @throws {@link LayoutUsageError} if you attempt to load a layout with registered items that are not currently registered with the layout system, and handleMissingItem is set to 'error' (default).
      * @throws various errors if the layout string is malformed and cannot be parsed
      */
-    loadLayout(layout) {
+    loadLayout(layout, handleMissingItem = 'error') {
         const alreadyRegistered = this.registeredItems();
         const wantedRegistered = FoundationLayout.layoutRequiredRegistrations(layout);
         const missingRegisteredItems = getMissingArrayItems(wantedRegistered, alreadyRegistered);
-        if (missingRegisteredItems.length !== 0) {
+        if (missingRegisteredItems.length !== 0 && handleMissingItem === 'error') {
             throw new LayoutUsageError(`Trying to load layout with extra components. The component(s) not currently loaded are "${[
                 ...new Set(missingRegisteredItems),
             ]}"`);
         }
-        this.layout.loadLayout(Object.assign(Object.assign({}, LayoutConfig.fromResolved(ResolvedLayoutConfig.unminifyConfig(layout.c))), glVisualConfig));
+        const layoutConfig = LayoutConfig.fromResolved(ResolvedLayoutConfig.unminifyConfig(layout.c));
+        if (missingRegisteredItems.length !== 0 && handleMissingItem === 'placeholder') {
+            this.registerPlaceholdersAndSetClosable(layoutConfig, missingRegisteredItems);
+        }
+        this.loadGLConfigAndSetup(layoutConfig);
     }
     /**
-     * @beta
+     * @public
      * Dynamically add a new item to the layout. The user can move the new plane to whenever they want once it has been added.
      * @remarks
      * Adding a new item invokes the registration previously made explicitly via {@link FoundationLayout.registerItem | registerItem()} or implicitly via the html declerative API.
@@ -189,25 +233,29 @@ export class FoundationLayout extends FoundationElement {
          * this new item is the root so set it and return
          */
         if (typeof this.layoutConfig.root === 'undefined') {
-            this.layoutConfig = Object.assign({ root: itemConfig }, glVisualConfig);
-            this.layout.loadLayout(this.layoutConfig);
+            this.layoutConfig = {
+                root: itemConfig,
+            };
+            this.loadGLConfigAndSetup(this.layoutConfig);
             this.onItemAdded();
             return;
         }
         // Else we add the item relative to existing items
-        this.cacheLayout();
+        this.cacheAndSaveLayout();
         const { area } = placement;
-        this.layoutConfig = Object.assign({ root: {
+        this.layoutConfig = {
+            root: {
                 type: area === 'top' || area === 'bottom' ? 'column' : 'row',
                 content: area === 'right' || area === 'bottom'
                     ? [this.layoutConfig.root, itemConfig]
                     : [itemConfig, this.layoutConfig.root],
-            } }, glVisualConfig);
-        this.layout.loadLayout(this.layoutConfig);
+            },
+        };
+        this.loadGLConfigAndSetup(this.layoutConfig);
         this.onItemAdded();
     }
     /**
-     * @beta
+     * @public
      * Register a collection of `Element` and associate them with an `ID` with the layout system for later use.
      * @remarks
      * You would use this to register elements that you later want to load when using {@link FoundationLayout.loadLayout}.
@@ -244,11 +292,12 @@ export class FoundationLayout extends FoundationElement {
             return;
         this.reloadPending = true;
         setTimeout(() => {
-            this.layout.loadLayout(this.layoutConfig);
             this.reloadPending = false;
+            this.loadGLConfigAndSetup(this.layoutConfig);
             if (!this.hasFirstLoaded) {
                 this.$emit(LayoutEmitEvents.firstLoaded);
                 this.hasFirstLoaded = true;
+                this.tryLoadLayoutFromLocalStorage();
             }
         }, this.reloadBuffer);
     }
@@ -265,7 +314,9 @@ export class FoundationLayout extends FoundationElement {
             throw new LayoutUsageError('Cannot have multiple layout items as direct descendants of the layout root. You need to put the layout items within a layout region.');
         }
         this.usingDeclerativeAPI = true;
-        this.layoutConfig = Object.assign({ root: item }, glVisualConfig);
+        this.layoutConfig = {
+            root: item,
+        };
         return this.layoutConfig.root;
     }
     /**
@@ -281,7 +332,6 @@ export class FoundationLayout extends FoundationElement {
         if (this.layout.getRegisteredComponentTypeNames().includes(reg)) {
             throw new LayoutRegistrationError(`Cannot register item with already registered name: '${reg}'`);
         }
-        const setupEvents = this.setupLayoutReceiveEvents.bind(this);
         /**
          * What we need the registration function to do:
          * "Consume" the registered elements initially, so we don't have duplicate items from the declarative API
@@ -292,18 +342,16 @@ export class FoundationLayout extends FoundationElement {
          * This has the effect of allowing us to create multiple instances of the same registered item, and each
          * created instance is separate allowing it to implement its own serialise and cache of data.
          */
-        const registrationFunction = (function () {
+        const registrationFunction = (() => {
             // Use appendChild to consume the elements and save them in the master copy
             const masterCopy = document.createDocumentFragment();
             elements.forEach((e) => masterCopy.appendChild(e));
-            let instanceCount = 0;
             const instances = new Map();
             return (container, state) => {
                 var _b;
-                // If this is a new instance then assign it an instanceCount
+                // If this is a new instance then assign it uuid instance
                 if (!(state === null || state === void 0 ? void 0 : state['instance'])) {
-                    instanceCount += 1;
-                    state['instance'] = instanceCount;
+                    state['instance'] = this.uuid.createId();
                 }
                 container.state['instance'] = state['instance'];
                 container.state['originalTitle'] = (_b = state['originalTitle']) !== null && _b !== void 0 ? _b : container.title;
@@ -317,7 +365,7 @@ export class FoundationLayout extends FoundationElement {
                 }
                 // get the instance from the map and append it to the container
                 instances.get(state['instance']).forEach((e) => container.element.appendChild(e));
-                setupEvents(container, state);
+                this.setupLayoutReceiveEvents(container, state);
             };
         })();
         this.layout.registerComponentFactoryFunction(reg, registrationFunction);
@@ -339,17 +387,79 @@ export class FoundationLayout extends FoundationElement {
     }
     /**
      * Saves the stored layout config according to the Golden Layout provider.
-     * Needs to be called when the layout is updated outside of using addItemFromChild.
+     * And caches the layout in local storage if {@link FoundationLayout.autoSaveKey} is set.
      * @internal
      * */
-    cacheLayout() {
+    cacheAndSaveLayout() {
         this.layoutConfig = LayoutConfig.fromResolved(this.layout.saveLayout());
+        if (this.autoSaveKey) {
+            const existingLayouts = JSON.parse(this.session.getLocalStorageItem(AUTOSAVE_KEY) || '{}');
+            existingLayouts[this.autoSaveKey] = JSON.stringify(this.getLayout());
+            this.session.setLocalStorageItem(AUTOSAVE_KEY, JSON.stringify(existingLayouts));
+        }
+    }
+    /**
+     * Used when we are trying to load a layout with missing registrations and we want to add placeholder items
+     * @remarks
+     * This function will register the items with placeholder text, and set them to be closeable if they were not already
+     * As config is passed by reference it is updated directly
+     * @param config - The layout config to update
+     * @param missingRegisteredItems - The items which were missing from the registrations
+     * @internal
+     */
+    registerPlaceholdersAndSetClosable(config, missingRegisteredItems) {
+        const placeholderElement = document.createElement('p');
+        placeholderElement.style.textAlign = 'center';
+        placeholderElement.style.position = 'relative';
+        placeholderElement.style.top = '50%';
+        const recurseSetClosable = (node) => {
+            var _b;
+            if (node.type === 'component' &&
+                missingRegisteredItems.includes(node.componentType.toString())) {
+                const nodeName = node.componentType.toString();
+                node.isClosable = true;
+                const placeholderCopy = placeholderElement.cloneNode();
+                placeholderCopy.textContent = this.missingItemPlaceholder(nodeName);
+                this.registerItem(nodeName, [placeholderCopy]);
+            }
+            (_b = node.content) === null || _b === void 0 ? void 0 : _b.forEach(recurseSetClosable);
+        };
+        recurseSetClosable(config.root);
+    }
+    /**
+     * Loads the provided config into Golden Layout and does other setup
+     * @remarks
+     * Loads the config into Golden Layout, and then sets up the event listeners for the layout
+     * When loading the layout the visual configuration is loaded
+     * Event listeners are added to the drag handles to emulate resizing events
+     *
+     * **This is the only function which should call this.layout.loadLayout() directly.**
+     * @internal
+     */
+    loadGLConfigAndSetup(config) {
+        this.layout.loadLayout(Object.assign(Object.assign({}, config), glVisualConfig));
+        const onItemResized = this.onItemResized.bind(this);
+        this.shadowRoot
+            .querySelectorAll('div.lm_drag_handle')
+            .forEach((h) => h.addEventListener('click', () => onItemResized()));
     }
 }
 _a = componentType;
 __decorate([
     attr({ attribute: 'reload-buffer' })
 ], FoundationLayout.prototype, "reloadBuffer", void 0);
+__decorate([
+    UUID
+], FoundationLayout.prototype, "uuid", void 0);
+__decorate([
+    Session
+], FoundationLayout.prototype, "session", void 0);
+__decorate([
+    attr({ attribute: 'auto-save-key' })
+], FoundationLayout.prototype, "autoSaveKey", void 0);
+__decorate([
+    observable
+], FoundationLayout.prototype, "missingItemPlaceholder", void 0);
 __decorate([
     observable
 ], FoundationLayout.prototype, "hasFirstLoaded", void 0);
@@ -366,7 +476,7 @@ const loadingTemplate = html `
  * `ViewTemplate` which defines the html for {@link FoundationLayout}.
  * @remarks
  * Can be used in a composition to customise the styles of the layout.
- * @beta
+ * @public
  */
 export const layoutTemplate = html `
   <template>
@@ -388,4 +498,3 @@ export const foundationLayout = FoundationLayout.compose({
     styles: layoutStyles,
     template: layoutTemplate,
 });
-//# sourceMappingURL=layout-main.js.map

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

@@ -1,9 +1,9 @@
 var _a;
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
-import { logger } from '../utils/logger';
-import { componentType, getParentLayoutComponent, layoutRegionValue, wrapperTemplate, } from '../utils';
 import { FoundationElement } from '@microsoft/fast-foundation';
+import { componentType, getParentLayoutComponent, layoutRegionValue, wrapperTemplate, } from '../utils';
+import { logger } from '../utils/logger';
 const defaultLayoutType = layoutRegionValue[0];
 const regionConveter = (x) => {
     const t = {
@@ -14,7 +14,7 @@ const regionConveter = (x) => {
     return t[x];
 };
 /**
- * @beta
+ * @public
  * `FoundationLayoutRegion` is a custom element that represents a region in the layout.
  * @remarks
  * This element is used to create a region in the layout. It can be used to create a horizontal or vertical split, or a tabbed region.
@@ -95,4 +95,3 @@ export const foundationLayoutRegion = FoundationLayoutRegion.compose({
     baseName: 'layout-region',
     template: wrapperTemplate,
 });
-//# sourceMappingURL=layout-region.js.map

package/dist/esm/styles/constants.js

@@ -13,4 +13,3 @@ export const maximisSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d
 export const minimiseSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMCA0NjRDMCA0NTUuMiA3LjE2NCA0NDggMTYgNDQ4SDQ5NkM1MDQuOCA0NDggNTEyIDQ1NS4yIDUxMiA0NjRDNTEyIDQ3Mi44IDUwNC44IDQ4MCA0OTYgNDgwSDE2QzcuMTY0IDQ4MCAwIDQ3Mi44IDAgNDY0eiIgZmlsbD0iIzg3OWJhNiIvPjwvc3ZnPg==';
 export const closeSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMzE1LjMgNDExLjNjLTYuMjUzIDYuMjUzLTE2LjM3IDYuMjUzLTIyLjYzIDBMMTYwIDI3OC42bC0xMzIuNyAxMzIuN2MtNi4yNTMgNi4yNTMtMTYuMzcgNi4yNTMtMjIuNjMgMGMtNi4yNTMtNi4yNTMtNi4yNTMtMTYuMzcgMC0yMi42M0wxMzcuNCAyNTZMNC42OSAxMjMuM2MtNi4yNTMtNi4yNTMtNi4yNTMtMTYuMzcgMC0yMi42M2M2LjI1My02LjI1MyAxNi4zNy02LjI1MyAyMi42MyAwTDE2MCAyMzMuNGwxMzIuNy0xMzIuN2M2LjI1My02LjI1MyAxNi4zNy02LjI1MyAyMi42MyAwYzYuMjUzIDYuMjUzIDYuMjUzIDE2LjM3IDAgMjIuNjNMMTgyLjYgMjU2bDEzMi43IDEzMi43QzMyMS42IDM5NC45IDMyMS42IDQwNS4xIDMxNS4zIDQxMS4zeiIgZmlsbD0iIzg3OWJhNiIvPjwvc3ZnPg==';
 export const tabDropdownSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNC4yNTEgMTgxLjFDNy4zOTIgMTc3LjcgMTEuNjkgMTc1LjEgMTYgMTc1LjFjMy44OTEgMCA3Ljc4MSAxLjQwNiAxMC44NiA0LjI1bDE5Ny4xIDE4MS4xbDE5Ny4xLTE4MS4xYzYuNS02IDE2LjY0LTUuNjI1IDIyLjYxIC45MDYyYzYgNi41IDUuNTk0IDE2LjU5LS44OTA2IDIyLjU5bC0yMDggMTkyYy02LjE1NiA1LjY4OC0xNS41NiA1LjY4OC0yMS43MiAwbC0yMDgtMTkyQy0xLjM0MyAxOTcuNy0xLjc0OSAxODcuNiA0LjI1MSAxODEuMXoiIGZpbGw9IiM4NzliYTYiLz48L3N2Zz4=';
-//# sourceMappingURL=constants.js.map

package/dist/esm/styles/dragging.styles.js

@@ -113,4 +113,3 @@ export const globalDraggingStyles = `
     z-index: 20;
   }
 `;
-//# sourceMappingURL=dragging.styles.js.map

package/dist/esm/styles/index.js

@@ -1,4 +1,3 @@
 export * from './constants';
 export * from './dragging.styles';
 export * from './layout.styles';
-//# sourceMappingURL=index.js.map

package/dist/esm/styles/layout.styles.js

@@ -90,7 +90,7 @@ const loadingSpinnerStyles = css `
  * `ElementStyles` which defines the css for {@link FoundationLayout}.
  * @remarks
  * Can be used in a composition to customise the styles of the layout.
- * @beta
+ * @public
  */
 export const layoutStyles = css `
   ${containerStyles}
@@ -527,4 +527,3 @@ export const layoutStyles = css `
     z-index: 20;
   } /*# sourceMappingURL=goldenlayout-base.css.map */
 `;
-//# sourceMappingURL=layout.styles.js.map

package/dist/esm/utils/constants.js

@@ -8,7 +8,11 @@ export const componentType = Symbol('component-type');
  * the layout while the declarative API is loading.
  *
  * During the first load of the layout, a loading spinner will be shown.
- * @beta
+ * @public
  */
 export const DEFAULT_RELOAD_BUFFER = 500;
-//# sourceMappingURL=constants.js.map
+/**
+ * Key to cache autosaved layouts in local storage
+ * @internal
+ */
+export const AUTOSAVE_KEY = 'foundation-layout-autosave';

package/dist/esm/utils/error.js

@@ -1,5 +1,5 @@
 /**
- * @beta
+ * @public
  */
 export class LayoutUsageError extends Error {
     constructor(message) {
@@ -7,11 +7,10 @@ export class LayoutUsageError extends Error {
     }
 }
 /**
- * @beta
+ * @public
  */
 export class LayoutRegistrationError extends Error {
     constructor(message) {
         super(message);
     }
 }
-//# sourceMappingURL=error.js.map

package/dist/esm/utils/events.js

@@ -7,20 +7,22 @@
  * 'itemAdded' - emitted when an item is added to the layout'
  * <br/>
  * 'itemRemoved' - emitted when an item is removed from the layout'
- * @beta
+ * <br/>
+ * 'itemResized' - emitted when the user drags the divider to resize elements
+ * @public
  */
 export const LayoutEmitEvents = {
     firstLoaded: 'first-loaded',
     itemAdded: 'item-added',
     itemRemoved: 'item-removed',
+    itemResized: 'item-resized',
 };
 /**
  * Defines events that the layout system listens for
  *
  * 'changeTitle' - emit this from a contained item to update the title of the window that contains it.
- * @beta
+ * @public
  */
 export const LayoutReceiveEvents = {
     changeTitle: 'change-title',
 };
-//# sourceMappingURL=events.js.map

package/dist/esm/utils/index.js

@@ -4,4 +4,4 @@ export * from './events';
 export * from './misc';
 export * from './templates';
 export * from './types';
-//# sourceMappingURL=index.js.map
+export * from './error';

package/dist/esm/utils/logger.js

@@ -1,3 +1,2 @@
 import { createLogger } from '@genesislcap/foundation-utils';
 export const logger = createLogger('foundation-layout');
-//# sourceMappingURL=logger.js.map

package/dist/esm/utils/misc.js

@@ -21,4 +21,3 @@ export function getParentLayoutComponent() {
             throw new LayoutUsageError('Using layout region outside of layout root');
     }
 }
-//# sourceMappingURL=misc.js.map

package/dist/esm/utils/templates.js

@@ -8,4 +8,3 @@ export const wrapperTemplate = html `
     <slot class="target"></slot>
   </template>
 `;
-//# sourceMappingURL=templates.js.map

package/dist/esm/utils/types.js

@@ -1,4 +1,3 @@
 import { componentType } from './';
 /** @internal */
 export const layoutRegionValue = ['horizontal', 'vertical', 'tabs'];
-//# sourceMappingURL=types.js.map