@genesislcap/foundation-layout 10.3.1-alpha-08364b6.0 → 11.3.0

package/README.md

@@ -9,35 +9,31 @@
 
 The following example shows the usage of the declarative API with `zero-charts` and the output that it produces.
 ```html
-<foundation-layout>
+<foundation-layout ${ref('analyticsLayout')}>
 	<foundation-layout-region>
-		<foundation-layout-item closable title="Pie">
-			<zero-charts
-				type="rose"
-				:config=${(x) => x.roseConfig}
-				:data=${(x) => x.roseData}
-			></zero-charts>
-		</foundation-layout-item>
+		<foundation-layout-region type="horizontal">
+			<foundation-layout-item title="Static Data Bar" registration="bar" closable>
+				<foundation-g2plot-chart
+					type="bar"
+					:config=${(x) => x.barConfig}
+					:data=${(x) => x.barData}
+				></foundation-g2plot-chart>
+			</foundation-layout-item>
 		<foundation-layout-region type="vertical">
-			<foundation-layout-item title="Positions Area Chart">
-				<zero-charts type="area" :config=${(x) => x.areaConfig}>
-					<charts-datasource
-						resourceName="ALL_POSITIONS"
-						server-fields="INSTRUMENT_NAME QUANTITY"
-						charts-fields="type value"
-						isSnapshot="true"
-					></charts-datasource>
-				</zero-charts>
+			<foundation-layout-item title="Static Data Stock" registration="stock" closable>
+				<foundation-g2plot-chart
+					type="stock"
+					:config=${(x) => x.stockConfiguration}
+					:data=${(x) => x.stockData}
+				></foundation-g2plot-chart>
 			</foundation-layout-item>
-			<foundation-layout-item title="Positions Column Chart">
-				<zero-charts type="column" :config=${(x) => x.columnConfig}>
-					<charts-datasource
-						resourceName="ALL_POSITIONS"
-						server-fields="INSTRUMENT_NAME QUANTITY"
-						charts-fields="type value"
-						isSnapshot="true"
-					></charts-datasource>
-				</zero-charts>
+			<foundation-layout-item title="Static Data Rose" registration="rose" closable>
+				<foundation-g2plot-chart
+					type="rose"
+					:config=${(x) => x.roseConfig}
+					:data=${(x) => x.roseData}
+					:legendParser=${(x) => x.roseLegendParser()}
+				></foundation-g2plot-chart>
 			</foundation-layout-item>
 		</foundation-layout-region>
 	</foundation-layout-region>
@@ -52,7 +48,7 @@ The following example shows the usage of the declarative API with `zero-charts`
 
 To enable this module in your application, follow the steps below.
 
-1. Add `@genesislcap/foundation-layout` as a dependency in your **package.json** file. Whenever you change the dependencies of your project, ensure you run the `$ npm run bootstrap` command again.
+1. Add `@genesislcap/foundation-layout` as a dependency in your **package.json** file. Whenever you change the dependencies of your project, ensure you run the `$ npm run bootstrap` command again. You can find more information in the [package.json basics](https://learn.genesis.global/secure/web/basics/package-json-basics/) page.
 
 ```javascript
 {
@@ -96,6 +92,8 @@ Top level web component, which is used to initialise a custom layout
 is 500ms. In this case, the layout is only reloaded if the child elements of the layout region are manipulated
 once every 500ms. This is to stop the layout being reloaded over and over for every single item during initialisation.
 The higher the value is, the more performant the component is - but the first load will appear to take longer.
+- **auto-save-key** : optional string which if set, will enable autosaving the layout under this key in local
+storage. See [here](#autosaving-layout) for more.
 
 ::tip
 This only applies for usage with the declarative HTML API. When the layout first loads after this amount of time,
@@ -186,7 +184,8 @@ Use this function over `.layoutRequiredRegistrations(layout: SerialisedLayout)`
 
 ### Serialising layout
 
-The JavaScript API can be used to save and load layout states. This only describes the state of the dynamic layout itself. It is the responsibility of any components contained within their layout to serialise their own state, if required.
+The JavaScript API can be used to manually save and load layout states. This only describes the state of the dynamic layout itself. It is the responsibility of any components contained within their layout to serialise their own state, if required.
+To enable autosaving the layout see [here](#autosaving-layout).
 
 #### [Get Layout](./docs/api/foundation-layout.foundationlayout.getlayout.md)
 
@@ -210,6 +209,31 @@ this.$emit(eventType, eventDetail)
 ```
 Each event requires a certain detail to process the event - see [the map of events to their required details](./docs/api/foundation-layout.layoutreceiveeventsdetail.md).
 
+## Autosaving layout
+
+There is opt-in functionality provided in the layout to autosave the layout in local storage as the user interacts with it. Set the `auto-save-key` attribute to a unique string on the root element to enable the feature, and this is the key in which the layout will be saved into. As the user performs the following actions: adding an item, removing an item, resizing items using the divider, and dragging items around the layout - the layout will be saved for later recall in local storage.
+
+When you have enabled autosave you are still able to use the manual [serialising commands](#serialising-layout).
+
+### Reloading the layout
+
+The provided function [tryLoadLayoutFromLocalStorage()](./docs/api/foundation-layout.foundationlayout.tryloadlayoutfromlocalstorage.md) is used to rehydrate the layout from local storage, if `auto-save-key` is enabled.
+If you are using the declarative API then this function is automatically called for you.
+
+If you are manually registering items (too) using the JavaScript API you must manually call this function, immediately after you have finishing registering all of the items. For an example [see here](#contained-example).
+
+### Layout placeholder
+
+If the layout is auto-loaded with items that are missing from the registration, then a placeholder item is displayed instead. Additionally, the close option is added to the pane. This accounts for you removing an item from a layout that a user has autosaved in their config.
+
+You can change the text of the placeholder using the observable binding `:missingItemPlaceholder`. This is a function which takes a string (the missing registration name) and returns the string to use as the placeholder. A default is set, but you can override it. See the override implementation [in this example](#contained-example).
+
+### Invalidating the cache
+
+As explained in the previous section, a placeholder item is added if an item is no longer registered for the auto-loaded layout. This accounts for removing an item. However, there is the reverse issue: If you are only using the declarative API and you add a new item, if the user already has an autosaved layout then that will be loaded which will effectively hide the new item you've added.
+
+In this case you must invalidate the autosaved layout cache. The cleanest and easiest implementation for you is to add a hash onto the end of your `auto-save-key` which will start a new autosave for this table (and reload the default which will contain your new layout item).
+
 ## Contained elements
 
 This section concerns the behaviour of elements inside the layout. If you are using simple elements or Genesis-supplied elements this section is less of a concern, but if you are building complex custom components yourself, you will need this information.
@@ -585,7 +609,11 @@ export const template = html<ContainedExample>`
       <foundation-button @click=${(x) => x.addItem('3')}>Test 3</foundation-button>
     </div>
     <div style="display: block; position: relative; grid-row-start: 2; grid-row-end: 12;">
-      <foundation-layout ${ref('containedExampleLayout')}></foundation-layout>
+      <foundation-layout
+        auto-save-key="layout-preview-contained-example"
+        :missingItemPlaceholder=${(x) => x.missingItemOverride()}
+        ${ref('containedExampleLayout')}
+      ></foundation-layout>
     </div>
   </div>
 `;
@@ -620,6 +648,7 @@ export class ContainedExample extends FASTElement {
     this.containedExampleLayout.registerItem('1', [h1, p1]);
     this.containedExampleLayout.registerItem('2', [h2, p2]);
     this.containedExampleLayout.registerItem('3', [h3, p3]);
+    this.containedExampleLayout.tryLoadLayoutFromLocalStorage();
   }
 
   addItem(registration: string) {
@@ -629,6 +658,8 @@ export class ContainedExample extends FASTElement {
       closable: true,
     });
   }
+
+  missingItemOverride = () => (missingItem: string) => `Missing Item: ${missingItem}`;
 }
 ```
 
@@ -723,6 +754,10 @@ layout.registerItem(test, [element]);
 Only items _missing_ from the `requiredRegistrations` is an issue. If there are items in the `currentRegistrations` that are not in `requiredRegistrations`, this is *not* an issue - because these will simply be unused registrations.
 :::
 
+:::warning
+If you are calling `registerItem` manually and are using the autosave feature, [see here](#reloading-the-layout).
+:::
+
 ## Incorrect examples
 
 The following section contains examples of incorrect usage, which are useful for troubleshooting.
@@ -909,8 +944,41 @@ You can then use the custom component in the layout:
 </foundation-layout>
 ```
 
+### New layout item not displaying
+Say you have the following layout, [the simple example](#simple-example), with autosave enabled.
+```html
+<foundation-layout auto-save-key="simple-example">
+  <foundation-layout-region type="horizontal">
+    <foundation-layout-item title="Component 1">
+      <!-- Content -->
+    </foundation-layout-item>
+    <foundation-layout-item title="Component 2">
+      <!-- Content -->
+    </foundation-layout-item>
+  </foundation-layout-region>
+</foundation-layout>
+```
+
+The user of your layout will move things around and this will cache the layout. Say you then update the layout to add an item.
+```html
+<foundation-layout auto-save-key="simple-example">
+  <foundation-layout-region type="horizontal">
+    <foundation-layout-item title="Component 1">
+      <!-- Content -->
+    </foundation-layout-item>
+    <foundation-layout-item title="Component 2">
+      <!-- Content -->
+    </foundation-layout-item>
+    <foundation-layout-item title="Component 3">
+      <!-- Content -->
+    </foundation-layout-item>
+  </foundation-layout-region>
+</foundation-layout>
+```
 
+You and the user will only see the first two items like before. This is because the cached layout is being loaded, which does not contain the
+new item. To fix this you must [invalidate the cache](#invalidating-the-cache).
 
 ## License
 
-Note: this project provides front end dependencies and uses licensed components listed in the next section, thus licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
+Note: this project provides front end dependencies and uses licensed components listed in the next section, thus licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.

package/dist/dts/index.d.ts

@@ -1,3 +1,3 @@
 export * from './main';
-export * from './utils';
+export { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, LayoutReceiveEventsDetail, LayoutRegionType, LayoutRegistrationError, LayoutUsageError, Placement, RegisteredElementConfig, RegistrationConfig, SerialisedLayout, } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,yBAAyB,EACzB,gBAAgB,EAChB,uBAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,SAAS,CAAC"}

package/dist/dts/main/index.d.ts

@@ -2,5 +2,4 @@ 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, LayoutRegionType, Placement, RegisteredElementConfig, RegistrationConfig, SerialisedLayout, } from '../utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/main/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/main/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/E,cAAc,qBAAqB,CAAC;AACpC,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/main/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/E,cAAc,qBAAqB,CAAC"}

package/dist/dts/main/layout-components.d.ts

@@ -11,7 +11,7 @@ import type { Container } from '@microsoft/fast-foundation';
  * @example
  * `<zero-layout></zero-layout>` if you are using the layout with the `zero` design-system.
  *
- * @beta
+ * @public
  */
 export declare const foundationLayoutComponents: {
     foundationLayout: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{

package/dist/dts/main/layout-item.d.ts

@@ -1,7 +1,7 @@
-import { componentType, LayoutComponent, RegistrationConfig } from '../utils';
 import { FoundationElement } from '@microsoft/fast-foundation';
+import { componentType, LayoutComponent, RegistrationConfig } 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.
@@ -13,28 +13,28 @@ export declare class FoundationLayoutItem extends FoundationElement implements L
      * Sets the title of the item which is displayed on the tab.
      * @remarks
      * Defaults to `Item ` + {@link FoundationLayoutItem.registration}
-     * @beta
+     * @public
      */
     title: string;
     /**
      * Boolean attribute controls whether the window can be closed in the GUI.
      * Defaults to `false`.
-     * @beta
+     * @public
      */
     closable: boolean;
     /**
      * optional string describing the size of the new item (see the written documentation for more info)
-     * @beta
+     * @public
      */
     size: string;
     /**
-     * Sets the registration name for the item, which can be used later to add the item via the JavaScript API using {@link FoundationLayout.addItem()}.
+     * Sets the registration name for the item, which can be used later to add the item via the JavaScript API using {@link FoundationLayout.addItem}.
      * @remarks
      * Items added via the JavaScript API and HTML API share the same pool of registration names.
      * Using a duplicate registration name is a runtime error.
      * This registration name defaults to the number of the window it is.
      * It is highly recommended if you are using the JavaScript API that you set a registration name here manually.
-     * @beta
+     * @public
      */
     registration: string;
     /** @internal */

package/dist/dts/main/layout-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-item.d.ts","sourceRoot":"","sources":["../../../src/main/layout-item.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,aAAa,EAEb,eAAe,EACf,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D;;;;;;;GAOG;AACH,qBAAa,oBAAqB,SAAQ,iBAAkB,YAAW,eAAe;IACpF;;;;;OAKG;IACG,KAAK,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD;;;OAGG;IACG,IAAI,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACG,YAAY,EAAE,MAAM,CAAC;IAE3B,gBAAgB;IAChB,CAAC,aAAa,CAAC,SAAmB;IAElC,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAAY;IAEnC,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAyBzB,gBAAgB;IAChB,OAAO,CAAC,wBAAwB;IAIhC,gBAAgB;IAChB,mBAAmB,IAAI,IAAI;IAI3B,gBAAgB;IAChB,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM;CAG7D;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB;;;;;;+BAG/B,CAAC"}
+{"version":3,"file":"layout-item.d.ts","sourceRoot":"","sources":["../../../src/main/layout-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EACL,aAAa,EAEb,eAAe,EACf,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAIlB;;;;;;;GAOG;AACH,qBAAa,oBAAqB,SAAQ,iBAAkB,YAAW,eAAe;IACpF;;;;;OAKG;IACG,KAAK,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD;;;OAGG;IACG,IAAI,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACG,YAAY,EAAE,MAAM,CAAC;IAE3B,gBAAgB;IAChB,CAAC,aAAa,CAAC,SAAmB;IAElC,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAAY;IAEnC,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAyBzB,gBAAgB;IAChB,OAAO,CAAC,wBAAwB;IAIhC,gBAAgB;IAChB,mBAAmB,IAAI,IAAI;IAI3B,gBAAgB;IAChB,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM;CAG7D;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB;;;;;;+BAG/B,CAAC"}

package/dist/dts/main/layout-main.d.ts

@@ -1,9 +1,9 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { RootItemConfig } from '@genesis-community/golden-layout';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { LayoutComponent, Placement, RegisteredElementConfig, RegistrationConfig, SerialisedLayout, componentType } from '../utils/';
 export { layoutStyles } from '../styles';
 /**
- * @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.
@@ -18,17 +18,34 @@ export declare class FoundationLayout extends FoundationElement implements Layou
     /**
      * 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
      */
     reloadBuffer: number;
     private reloadPending;
     private registeredComponents;
     /** @internal */
+    private uuid;
+    /** @internal */
+    private session;
+    /**
+     * Attribute which if set will auto save and load the layout as the user changes it.
+     * Omit this attribute to disable this feature.
+     * Set attribute using `auto-save-key`.
+     * @public
+     */
+    autoSaveKey?: string;
+    /**
+     * Function which is used to generate the placeholder text when a layout is loaded
+     * with a missing item.
+     * @public
+     */
+    missingItemPlaceholder: (missingItem: string) => string;
+    /** @internal */
     hasFirstLoaded: boolean;
     /** @internal */
     usingDeclerativeAPI: boolean;
     /**
-     * @beta
+     * @public
      * Set to true when the user is currently dragging the panes inside of the layout
      */
     dragging: boolean;
@@ -46,11 +63,13 @@ export declare class FoundationLayout extends FoundationElement implements Layou
     private onItemAdded;
     /** @internal */
     private onItemRemoved;
+    /** @internal */
+    private onItemResized;
     /**
      * 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()}
@@ -62,7 +81,7 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      */
     static layoutRequiredRegistrations(layout: SerialisedLayout): string[];
     /**
-     * @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()}
@@ -72,25 +91,40 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      */
     registeredItems(): string[];
     /**
-     * @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
      */
     getLayout(): SerialisedLayout;
     /**
-     * @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(): boolean;
+    /**
+     * @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: SerialisedLayout): void;
+    loadLayout(layout: SerialisedLayout, handleMissingItem?: 'placeholder' | 'error'): void;
     /**
-     * @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.
@@ -103,7 +137,7 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      */
     addItem(config: RegisteredElementConfig, placement?: Placement): void;
     /**
-     * @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}.
@@ -153,16 +187,37 @@ export declare class FoundationLayout extends FoundationElement implements Layou
     private setupLayoutReceiveEvents;
     /**
      * 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
      * */
-    private cacheLayout;
+    private cacheAndSaveLayout;
+    /**
+     * 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
+     */
+    private registerPlaceholdersAndSetClosable;
+    /**
+     * 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
+     */
+    private loadGLConfigAndSetup;
 }
 /**
  * `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 declare const layoutTemplate: import("@microsoft/fast-element").ViewTemplate<FoundationLayout, any>;
 /**

package/dist/dts/main/layout-main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAOL,cAAc,EACf,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAEL,eAAe,EAGf,SAAS,EACT,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EAEd,MAAM,WAAW,CAAC;AAKnB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AASzC;;;;;GAKG;AACH,qBAAa,gBAAiB,SAAQ,iBAAkB,YAAW,eAAe;IAChF,OAAO,CAAC,MAAM,CAAe;IAC7B,gBAAgB;IAChB,aAAa,EAAE,WAAW,CAAC;IAC3B,OAAO,CAAC,YAAY,CAAqC;IAEzD,gBAAgB;IAChB,CAAC,aAAa,CAAC,SAAmB;IAElC;;;;OAIG;IACmC,YAAY,EAAE,MAAM,CAAyB;IACnF,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,oBAAoB,CAAK;IAEjC,gBAAgB;IACJ,cAAc,UAAS;IACnC,gBAAgB;IACJ,mBAAmB,UAAS;IAExC;;;OAGG;IACS,QAAQ,EAAE,OAAO,CAAS;IAEtC,gBAAgB;;IAShB,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAoBzB,gBAAgB;IAChB,oBAAoB,IAAI,IAAI;IAO5B,gBAAgB;IAChB,OAAO,CAAC,WAAW;IAInB,gBAAgB;IAChB,OAAO,CAAC,UAAU;IAIlB,gBAAgB;IAChB,OAAO,CAAC,WAAW;IAInB,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAIrB;;OAEG;IAEH;;;;;;;;;;OAUG;IACH,MAAM,CAAC,2BAA2B,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM,EAAE;IActE;;;;;;;;OAQG;IACH,eAAe,IAAI,MAAM,EAAE;IAI3B;;;;OAIG;IACH,SAAS,IAAI,gBAAgB;IAI7B;;;;;;;;;;OAUG;IACH,UAAU,CAAC,MAAM,EAAE,gBAAgB;IAiBnC;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,MAAM,EAAE,uBAAuB,EAAE,SAAS,GAAE,SAA6B;IAmDjF;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,MAAM;IAW/D;;OAEG;IAEH;;;;OAIG;IACH,mBAAmB,IAAI,IAAI;IAc3B;;;;;;;OAOG;IACH,gBAAgB,CAAC,CAAC,SAAS,cAAc,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC;IAgBtD;;;;;;;OAOG;IACH,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,kBAAkB,GAAG,MAAM;IA6DtE;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IAehC;;;;SAIK;IACL,OAAO,CAAC,WAAW;CAGpB;AAMD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,uEAK1B,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;2BAI3B,CAAC"}
+{"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,cAAc,EACf,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAEL,eAAe,EAGf,SAAS,EACT,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EAId,MAAM,WAAW,CAAC;AAKnB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AASzC;;;;;GAKG;AACH,qBAAa,gBAAiB,SAAQ,iBAAkB,YAAW,eAAe;IAChF,OAAO,CAAC,MAAM,CAAe;IAC7B,gBAAgB;IAChB,aAAa,EAAE,WAAW,CAAC;IAC3B,OAAO,CAAC,YAAY,CAAqC;IAEzD,gBAAgB;IAChB,CAAC,aAAa,CAAC,SAAmB;IAElC;;;;OAIG;IACmC,YAAY,EAAE,MAAM,CAAyB;IACnF,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,oBAAoB,CAAK;IAEjC,gBAAgB;IACV,OAAO,CAAC,IAAI,CAAO;IAEzB,gBAAgB;IACP,OAAO,CAAC,OAAO,CAAU;IAClC;;;;;OAKG;IACmC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC3D;;;;OAIG;IACS,sBAAsB,gBAAiB,MAAM,YAC2B;IAEpF,gBAAgB;IACJ,cAAc,UAAS;IACnC,gBAAgB;IACJ,mBAAmB,UAAS;IAExC;;;OAGG;IACS,QAAQ,EAAE,OAAO,CAAS;IAEtC,gBAAgB;;IAShB,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAoBzB,gBAAgB;IAChB,oBAAoB,IAAI,IAAI;IAO5B,gBAAgB;IAChB,OAAO,CAAC,WAAW;IAInB,gBAAgB;IAChB,OAAO,CAAC,UAAU;IAKlB,gBAAgB;IAChB,OAAO,CAAC,WAAW;IAKnB,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAKrB,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAKrB;;OAEG;IAEH;;;;;;;;;;OAUG;IACH,MAAM,CAAC,2BAA2B,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM,EAAE;IActE;;;;;;;;OAQG;IACH,eAAe,IAAI,MAAM,EAAE;IAI3B;;;;OAIG;IACH,SAAS,IAAI,gBAAgB;IAI7B;;;;;;;;;;;;OAYG;IACH,6BAA6B,IAAI,OAAO;IAcxC;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,MAAM,EAAE,gBAAgB,EAAE,iBAAiB,GAAE,aAAa,GAAG,OAAiB;IAqBzF;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,MAAM,EAAE,uBAAuB,EAAE,SAAS,GAAE,SAA6B;IAiDjF;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,MAAM;IAW/D;;OAEG;IAEH;;;;OAIG;IACH,mBAAmB,IAAI,IAAI;IAe3B;;;;;;;OAOG;IACH,gBAAgB,CAAC,CAAC,SAAS,cAAc,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC;IAetD;;;;;;;OAOG;IACH,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,kBAAkB,GAAG,MAAM;IAyDtE;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IAehC;;;;SAIK;IACL,OAAO,CAAC,kBAAkB;IAY1B;;;;;;;;OAQG;IACH,OAAO,CAAC,kCAAkC;IA4B1C;;;;;;;;;OASG;IACH,OAAO,CAAC,oBAAoB;CAQ7B;AAMD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,uEAK1B,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;2BAI3B,CAAC"}

package/dist/dts/main/layout-region.d.ts

@@ -1,8 +1,8 @@
 import { RootItemConfig } from '@genesis-community/golden-layout';
-import { componentType, LayoutComponent, LayoutRegionType, RegistrationConfig } from '../utils';
 import { FoundationElement } from '@microsoft/fast-foundation';
+import { componentType, LayoutComponent, LayoutRegionType, RegistrationConfig } from '../utils';
 /**
- * @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.
@@ -12,13 +12,13 @@ import { FoundationElement } from '@microsoft/fast-foundation';
 export declare class FoundationLayoutRegion extends FoundationElement implements LayoutComponent {
     /**
      * optional string describing the size of the new item (see the written documentation for more info)
-     * @beta
+     * @public
      */
     size: string;
     /**
      * Defines the {@link LayoutRegionType | type} of the region.
      * Defaults to `horizontal`.
-     * @beta
+     * @public
      */
     type: LayoutRegionType;
     /** @internal */

package/dist/dts/main/layout-region.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-region.d.ts","sourceRoot":"","sources":["../../../src/main/layout-region.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,cAAc,EACf,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EACL,aAAa,EAEb,eAAe,EACf,gBAAgB,EAEhB,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAc/D;;;;;;;GAOG;AACH,qBAAa,sBAAuB,SAAQ,iBAAkB,YAAW,eAAe;IACtF;;;OAGG;IACG,IAAI,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACG,IAAI,EAAE,gBAAgB,CAAC;IAE7B,gBAAgB;IAChB,CAAC,aAAa,CAAC,EAAE,gBAAgB,CAAgB;IAEjD;;;;OAIG;IACH,OAAO,CAAC,YAAY,CAA0C;IAE9D,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAUzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAS7B,gBAAgB;IAChB,OAAO,CAAC,wBAAwB;IAIhC,gBAAgB;IAChB,gBAAgB,CAAC,CAAC,SAAS,cAAc,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC;IAKtD,gBAAgB;IAChB,mBAAmB,IAAI,IAAI;IAI3B,gBAAgB;IAChB,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM;CAG7D;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;iCAGjC,CAAC"}
+{"version":3,"file":"layout-region.d.ts","sourceRoot":"","sources":["../../../src/main/layout-region.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,cAAc,EACf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EACL,aAAa,EAEb,eAAe,EACf,gBAAgB,EAEhB,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAiBlB;;;;;;;GAOG;AACH,qBAAa,sBAAuB,SAAQ,iBAAkB,YAAW,eAAe;IACtF;;;OAGG;IACG,IAAI,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACG,IAAI,EAAE,gBAAgB,CAAC;IAE7B,gBAAgB;IAChB,CAAC,aAAa,CAAC,EAAE,gBAAgB,CAAgB;IAEjD;;;;OAIG;IACH,OAAO,CAAC,YAAY,CAA0C;IAE9D,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAUzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAS7B,gBAAgB;IAChB,OAAO,CAAC,wBAAwB;IAIhC,gBAAgB;IAChB,gBAAgB,CAAC,CAAC,SAAS,cAAc,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC;IAKtD,gBAAgB;IAChB,mBAAmB,IAAI,IAAI;IAI3B,gBAAgB;IAChB,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM;CAG7D;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;iCAGjC,CAAC"}

package/dist/dts/styles/layout.styles.d.ts

@@ -2,7 +2,7 @@
  * `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 declare const layoutStyles: import("@microsoft/fast-element").ElementStyles;
 //# sourceMappingURL=layout.styles.d.ts.map

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

@@ -8,7 +8,12 @@ export declare const componentType: unique symbol;
  * the layout while the declarative API is loading.
  *
  * During the first load of the layout, a loading spinner will be shown.
- * @beta
+ * @public
  */
 export declare const DEFAULT_RELOAD_BUFFER = 500;
+/**
+ * Key to cache autosaved layouts in local storage
+ * @internal
+ */
+export declare const AUTOSAVE_KEY = "foundation-layout-autosave";
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,aAAa,eAA2B,CAAC;AAEtD;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,aAAa,eAA2B,CAAC;AAEtD;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,YAAY,+BAA+B,CAAC"}

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

@@ -1,11 +1,11 @@
 /**
- * @beta
+ * @public
  */
 export declare class LayoutUsageError extends Error {
     constructor(message: string);
 }
 /**
- * @beta
+ * @public
  */
 export declare class LayoutRegistrationError extends Error {
     constructor(message: string);

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

@@ -7,18 +7,21 @@
  * '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 declare const LayoutEmitEvents: {
     readonly firstLoaded: "first-loaded";
     readonly itemAdded: "item-added";
     readonly itemRemoved: "item-removed";
+    readonly 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 declare const LayoutReceiveEvents: {
     readonly changeTitle: "change-title";
@@ -27,7 +30,7 @@ export declare const LayoutReceiveEvents: {
  * Defines the shape of the detail that the layout listens works with for events it listens on
  *
  * 'changeTitle' - `title` is the string you want to set. For `mode`: `replace` will set the title to be `title`, `suffix` will append `title` to the end of the existing title.
- * @beta
+ * @public
  */
 export type LayoutReceiveEventsDetail = {
     changeTitle: {

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

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/utils/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;CAEtB,CAAC;AAEX;;;;;GAKG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAA;KAAE,CAAC;CAC5D,CAAC"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/utils/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;CAEtB,CAAC;AAEX;;;;;GAKG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAA;KAAE,CAAC;CAC5D,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/utils/logger.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,MAAM,gDAAoC,CAAC"}
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/utils/logger.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,gDAAoC,CAAC"}