@genesislcap/foundation-layout 14.107.1-alpha-afbc4d7.0 → 14.107.1

package/dist/foundation-layout.api.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
     "toolPackage": "@microsoft/api-extractor",
-    "toolVersion": "7.38.0",
+    "toolVersion": "7.34.9",
     "schemaVersion": 1011,
     "oldestForwardsCompatibleVersion": 1001,
     "tsdocConfig": {

package/dist/foundation-layout.d.ts

@@ -213,512 +213,512 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * @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}.
      * @param disableCache - if set to true then the layout will give you a new instance of every item, even if it has a currently cached item to use. Using this will not stop you from saving and loading state via the {@link LayoutComponentWithState} interface. Defaults to false.
      * @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, handleMissingItem?: 'placeholder' | 'error', disableCache?: boolean): void;
-     /**
-      * @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 new items invokes the registration previously made explicitly via {@link FoundationLayout.registerItem | registerItem()} or implicitly via the html declarative API.
-      *
-      * The elements added onto the new pane are copies using `element.cloneNode()` of the original element references used during registration.
-      *
-      * @param config - {@link RegisteredElementConfig} configuration items for the new items(s). Pass an array of {@link RegisteredElementConfig} to add multiple items at once.
-      * @param placement - where and how to add the new items to the layout. For more info and defaults see {@link Placement}.
-      * @throws {@link LayoutRegistrationError} if you attempt to add an item before it has been registered
-          */
-      addItem(config: RegisteredElementConfig | RegisteredElementConfig[], placement?: Placement): void;
-      /**
-       * @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}.
-       * Use {@link FoundationLayout.layoutRequiredRegistrations} to see what components need to be registered for a certain config
-       * and then register them using this function before calling {@link FoundationLayout.loadLayout}.
-       *
-       * When registering an element it is moved by reference into the internals of the layout, so if you pass elements already in the DOM then they will disappear. If you want to avoid this you can pass copies using `element.cloneNode(true)`.
-       *
-       * @param registration - string of the registration ID
-       * @param elements - Elements[] containing the reference to the elements to register for later usage
-       * @throws {@link LayoutUsageError} if you attempt to add an item before the layout has been initialised.
-           * @throws {@link LayoutRegistrationError} if you attempt to use a `registration` name which is already in use (declarative html API and JavaScript API registrations use the same "pool" of registration names).
-               * @returns - string defining the name of the registered item with the layout system (config.id if set).
-               */
-           registerItem(registration: string, elements: Element[]): string;
-           /**
-            * Internal APIs
-            */
-           /**
-            * The `LifecycleMixin` can use the lifecycleUpdateToken to determine if it needs to gate
-            * lifecycle methods from running when other items have been added or deleted.
-            * This key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.
-            * This method should be called whenever we are about to perform an action which will cause a lifecycle update, should as adding or removing an item from the layout
-            */
-           private updateLifecycleToken;
-           /**
-            * Request to reload the layout using the private member config. Debounced using the time set
-            * in this.reloadBuffer
-            * @internal
-            */
-           requestLayoutReload(): void;
-           /**
-            * Adds a config item into the root config and returns a link to the new config in the tree
-            * @typeParam T - RowOrColumnItemConfig | StackItemConfig | ComponentItemConfig;
-            * @param item - T to add as the root element of the layout
-            * @returns T the reference to the added item in the whole item config
-            * @throws {@link LayoutUsageError} if you try and add an item when a root has already been set (this happens if you have multiple direct children of this html element which is an incorrect usage)
-                * @internal
-                */
-            addItemFromChild<T extends RootItemConfig>(item: T): T;
-            /**
-             * Registers a function with golden layout to create a pane
-             * @param elements - Elements[] to add to new new pane
-             * @param id - optional string which is used to register the new function with golden layout. Defaults to sequentially setting the IDs for default items
-             * @returns - string which is the registered ID
-             * @throws - {@link LayoutRegistrationError} if the id is already in use
-             * @internal
-             */
-            cacheElementsAndRegister({ elements, id }: RegistrationConfig): string;
-            /**
-             * Sets up the event listeners for the layout receive events
-             * @internal
-             */
-            private setupLayoutReceiveEvents;
-            /**
-             * Saves the stored layout config according to the Golden Layout provider.
-             * And caches the layout in local storage if {@link FoundationLayout.autoSaveKey} is set.
-             * @internal
-             * */
-            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
-             *
-             * Visual config can be overridden by the `dimensions-config` attribute.
-             *
-             * **This is the only function which should call this.layout.loadLayout() directly.**
-             * @internal
-             */
-            private loadGLConfigAndSetup;
-            /**
-             * Handles adding the drag event listeners onto the golden layout drag handles
-             * @remarks
-             * If we only add the event listeners once then once the user drags items around the layout and creates
-             * new drag handles, they will not have the event listeners attached. This function will add the event listeners
-             * but also ensure that old listeners are cleaned up. To be able to clean up the event we need a reference
-             * rather than an anonymous function so we store the bound function in a private variable.
-             * @internal
-             */
-            private attatchResizeEvents;
-            /**
-             * If the user has provided any custom buttons, register a callback with golden layout to add them to any new items
-             * @internal
-             */
-            private setupCustomButtons;
-            /**
-             * Return an array of each contained items in the layout.
-             * @internal
-             */
-            private getLayoutComponents;
-            /**
-             * Recursively remove the instance key from the config which will mean that when the config is loaded it will instantiate a new instance for every item, even if they're in the cache.
-             */
-            private removeConfigCacheInformation;
-           }
+     * @throws various errors if the layout string is malformed and cannot be parsed
+     */
+    loadLayout(layout: SerialisedLayout, handleMissingItem?: 'placeholder' | 'error', disableCache?: boolean): void;
+    /**
+     * @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 new items invokes the registration previously made explicitly via {@link FoundationLayout.registerItem | registerItem()} or implicitly via the html declarative API.
+     *
+     * The elements added onto the new pane are copies using `element.cloneNode()` of the original element references used during registration.
+     *
+     * @param config - {@link RegisteredElementConfig} configuration items for the new items(s). Pass an array of {@link RegisteredElementConfig} to add multiple items at once.
+     * @param placement - where and how to add the new items to the layout. For more info and defaults see {@link Placement}.
+     * @throws {@link LayoutRegistrationError} if you attempt to add an item before it has been registered
+     */
+    addItem(config: RegisteredElementConfig | RegisteredElementConfig[], placement?: Placement): void;
+    /**
+     * @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}.
+     * Use {@link FoundationLayout.layoutRequiredRegistrations} to see what components need to be registered for a certain config
+     * and then register them using this function before calling {@link FoundationLayout.loadLayout}.
+     *
+     * When registering an element it is moved by reference into the internals of the layout, so if you pass elements already in the DOM then they will disappear. If you want to avoid this you can pass copies using `element.cloneNode(true)`.
+     *
+     * @param registration - string of the registration ID
+     * @param elements - Elements[] containing the reference to the elements to register for later usage
+     * @throws {@link LayoutUsageError} if you attempt to add an item before the layout has been initialised.
+     * @throws {@link LayoutRegistrationError} if you attempt to use a `registration` name which is already in use (declarative html API and JavaScript API registrations use the same "pool" of registration names).
+     * @returns - string defining the name of the registered item with the layout system (config.id if set).
+     */
+    registerItem(registration: string, elements: Element[]): string;
+    /**
+     * Internal APIs
+     */
+    /**
+     * The `LifecycleMixin` can use the lifecycleUpdateToken to determine if it needs to gate
+     * lifecycle methods from running when other items have been added or deleted.
+     * This key is updated every time one of these actions are performed, so you can check if the key has changed and know you potentially need to gate some of your lifecycle functionality.
+     * This method should be called whenever we are about to perform an action which will cause a lifecycle update, should as adding or removing an item from the layout
+     */
+    private updateLifecycleToken;
+    /**
+     * Request to reload the layout using the private member config. Debounced using the time set
+     * in this.reloadBuffer
+     * @internal
+     */
+    requestLayoutReload(): void;
+    /**
+     * Adds a config item into the root config and returns a link to the new config in the tree
+     * @typeParam T - RowOrColumnItemConfig | StackItemConfig | ComponentItemConfig;
+     * @param item - T to add as the root element of the layout
+     * @returns T the reference to the added item in the whole item config
+     * @throws {@link LayoutUsageError} if you try and add an item when a root has already been set (this happens if you have multiple direct children of this html element which is an incorrect usage)
+     * @internal
+     */
+    addItemFromChild<T extends RootItemConfig>(item: T): T;
+    /**
+     * Registers a function with golden layout to create a pane
+     * @param elements - Elements[] to add to new new pane
+     * @param id - optional string which is used to register the new function with golden layout. Defaults to sequentially setting the IDs for default items
+     * @returns - string which is the registered ID
+     * @throws - {@link LayoutRegistrationError} if the id is already in use
+     * @internal
+     */
+    cacheElementsAndRegister({ elements, id }: RegistrationConfig): string;
+    /**
+     * Sets up the event listeners for the layout receive events
+     * @internal
+     */
+    private setupLayoutReceiveEvents;
+    /**
+     * Saves the stored layout config according to the Golden Layout provider.
+     * And caches the layout in local storage if {@link FoundationLayout.autoSaveKey} is set.
+     * @internal
+     * */
+    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
+     *
+     * Visual config can be overridden by the `dimensions-config` attribute.
+     *
+     * **This is the only function which should call this.layout.loadLayout() directly.**
+     * @internal
+     */
+    private loadGLConfigAndSetup;
+    /**
+     * Handles adding the drag event listeners onto the golden layout drag handles
+     * @remarks
+     * If we only add the event listeners once then once the user drags items around the layout and creates
+     * new drag handles, they will not have the event listeners attached. This function will add the event listeners
+     * but also ensure that old listeners are cleaned up. To be able to clean up the event we need a reference
+     * rather than an anonymous function so we store the bound function in a private variable.
+     * @internal
+     */
+    private attatchResizeEvents;
+    /**
+     * If the user has provided any custom buttons, register a callback with golden layout to add them to any new items
+     * @internal
+     */
+    private setupCustomButtons;
+    /**
+     * Return an array of each contained items in the layout.
+     * @internal
+     */
+    private getLayoutComponents;
+    /**
+     * Recursively remove the instance key from the config which will mean that when the config is loaded it will instantiate a new instance for every item, even if they're in the cache.
+     */
+    private removeConfigCacheInformation;
+}
 
-           /**
-            * Registration object to register the layout with your design system.
-            *
-            * @remarks
-            * Registers the three layout component types with the design system.
-            * You require to use the prefix of the design system with each tag.
-            * If you wish to alternate the styles of the layout you only need to compose your own custom
-            * version of {@link FoundationLayout} as this contains the styles for the entire layout.
-            *
-            * @example
-            * `<zero-layout></zero-layout>` if you are using the layout with the `zero` design-system.
-            *
-            * @public
-            */
-           export declare const foundationLayoutComponents: {
-               foundationLayout: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-               baseName: string;
-               styles: ElementStyles;
-               template: ViewTemplate<FoundationLayout, any>;
-               }>) => FoundationElementRegistry<    {
-               baseName: string;
-               styles: ElementStyles;
-               template: ViewTemplate<FoundationLayout, any>;
-               }, FoundationLayout>;
-               foundationLayoutRegion: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-               baseName: string;
-               template: ViewTemplate<any, any>;
-               }>) => FoundationElementRegistry<    {
-               baseName: string;
-               template: ViewTemplate<any, any>;
-               }, FoundationLayoutRegion>;
-               foundationLayoutItem: (overrideDefinition?: OverrideFoundationElementDefinition<    {
-               baseName: string;
-               template: ViewTemplate<any, any>;
-               }>) => FoundationElementRegistry<    {
-               baseName: string;
-               template: ViewTemplate<any, any>;
-               }, FoundationLayoutItem>;
-               register(container?: Container, ...rest: any[]): void;
-           };
+/**
+ * Registration object to register the layout with your design system.
+ *
+ * @remarks
+ * Registers the three layout component types with the design system.
+ * You require to use the prefix of the design system with each tag.
+ * If you wish to alternate the styles of the layout you only need to compose your own custom
+ * version of {@link FoundationLayout} as this contains the styles for the entire layout.
+ *
+ * @example
+ * `<zero-layout></zero-layout>` if you are using the layout with the `zero` design-system.
+ *
+ * @public
+ */
+export declare const foundationLayoutComponents: {
+    foundationLayout: (overrideDefinition?: OverrideFoundationElementDefinition<    {
+    baseName: string;
+    styles: ElementStyles;
+    template: ViewTemplate<FoundationLayout, any>;
+    }>) => FoundationElementRegistry<    {
+    baseName: string;
+    styles: ElementStyles;
+    template: ViewTemplate<FoundationLayout, any>;
+    }, FoundationLayout>;
+    foundationLayoutRegion: (overrideDefinition?: OverrideFoundationElementDefinition<    {
+    baseName: string;
+    template: ViewTemplate<any, any>;
+    }>) => FoundationElementRegistry<    {
+    baseName: string;
+    template: ViewTemplate<any, any>;
+    }, FoundationLayoutRegion>;
+    foundationLayoutItem: (overrideDefinition?: OverrideFoundationElementDefinition<    {
+    baseName: string;
+    template: ViewTemplate<any, any>;
+    }>) => FoundationElementRegistry<    {
+    baseName: string;
+    template: ViewTemplate<any, any>;
+    }, FoundationLayoutItem>;
+    register(container?: Container, ...rest: any[]): void;
+};
 
-           /**
-            * @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.
-            *
-            * This is a simple component which is only used to define the layout splits; any JavaScript API interactions or custom styling is used via {@link FoundationLayout}.
-            * @tagname %%prefix%%-layout-item
-            */
-           export declare class FoundationLayoutItem extends FoundationElement implements LayoutComponent {
-               /**
-                * Sets the title of the item which is displayed on the tab.
-                * @remarks
-                * Defaults to `Item ` + {@link FoundationLayoutItem.registration}
-                * @public
-                */
-               title: string;
-               /**
-                * Boolean attribute controls whether the window can be closed in the GUI.
-                * Defaults to `false`.
-                * @public
-                */
-               closable: boolean;
-               /**
-                * optional string describing the size of the new item (see the written documentation for more info)
-                * @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}.
-                * @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.
-                * @public
-                */
-               registration: string;
-               /** @internal */
-               [componentType]: "item";
-               /** @internal */
-               private slottedElements;
-               /** @internal */
-               connectedCallback(): void;
-               /** @internal */
-               private getParentLayoutComponent;
-               /** @internal */
-               requestLayoutReload(): void;
-               /** @internal */
-               cacheElementsAndRegister(config: RegistrationConfig): string;
-           }
+/**
+ * @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.
+ *
+ * This is a simple component which is only used to define the layout splits; any JavaScript API interactions or custom styling is used via {@link FoundationLayout}.
+ * @tagname %%prefix%%-layout-item
+ */
+export declare class FoundationLayoutItem extends FoundationElement implements LayoutComponent {
+    /**
+     * Sets the title of the item which is displayed on the tab.
+     * @remarks
+     * Defaults to `Item ` + {@link FoundationLayoutItem.registration}
+     * @public
+     */
+    title: string;
+    /**
+     * Boolean attribute controls whether the window can be closed in the GUI.
+     * Defaults to `false`.
+     * @public
+     */
+    closable: boolean;
+    /**
+     * optional string describing the size of the new item (see the written documentation for more info)
+     * @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}.
+     * @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.
+     * @public
+     */
+    registration: string;
+    /** @internal */
+    [componentType]: "item";
+    /** @internal */
+    private slottedElements;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    private getParentLayoutComponent;
+    /** @internal */
+    requestLayoutReload(): void;
+    /** @internal */
+    cacheElementsAndRegister(config: RegistrationConfig): string;
+}
 
-           /**
-            * @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.
-            *
-            * This is a simple component which is only used to define the layout splits; any JavaScript API interactions or custom styling is used via {@link FoundationLayout}.
-            * @tagname %%prefix%%-layout-region
-            */
-           export declare class FoundationLayoutRegion extends FoundationElement implements LayoutComponent {
-               /**
-                * optional string describing the size of the new item (see the written documentation for more info)
-                * @public
-                */
-               size: string;
-               /**
-                * Defines the {@link LayoutRegionType | type} of the region.
-                * Defaults to `horizontal`.
-                * @public
-                */
-               type: LayoutRegionType;
-               /** @internal */
-               [componentType]: LayoutRegionType;
-               /**
-                * Reference to the config in the whole layout config for this
-                * specific region.
-                * @internal
-                */
-               private layoutConfig;
-               /** @internal */
-               connectedCallback(): void;
-               /**
-                * Gets the layout config for this region using {@link FoundationLayoutRegion.constructLayoutConfig} and adds it into the main config tree via the parents. It saves a reference to the this config so a child can add its config in later.
-                * @internal
-                */
-               private setupLayoutRegion;
-               /**
-                * Creates a golden layout config for this object.
-                * @internal
-                */
-               private constructLayoutConfig;
-               /** @internal */
-               private getParentLayoutComponent;
-               /** @internal */
-               addItemFromChild<T extends RootItemConfig>(item: T): T;
-               /** @internal */
-               requestLayoutReload(): void;
-               /** @internal */
-               cacheElementsAndRegister(config: RegistrationConfig): string;
-           }
+/**
+ * @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.
+ *
+ * This is a simple component which is only used to define the layout splits; any JavaScript API interactions or custom styling is used via {@link FoundationLayout}.
+ * @tagname %%prefix%%-layout-region
+ */
+export declare class FoundationLayoutRegion extends FoundationElement implements LayoutComponent {
+    /**
+     * optional string describing the size of the new item (see the written documentation for more info)
+     * @public
+     */
+    size: string;
+    /**
+     * Defines the {@link LayoutRegionType | type} of the region.
+     * Defaults to `horizontal`.
+     * @public
+     */
+    type: LayoutRegionType;
+    /** @internal */
+    [componentType]: LayoutRegionType;
+    /**
+     * Reference to the config in the whole layout config for this
+     * specific region.
+     * @internal
+     */
+    private layoutConfig;
+    /** @internal */
+    connectedCallback(): void;
+    /**
+     * Gets the layout config for this region using {@link FoundationLayoutRegion.constructLayoutConfig} and adds it into the main config tree via the parents. It saves a reference to the this config so a child can add its config in later.
+     * @internal
+     */
+    private setupLayoutRegion;
+    /**
+     * Creates a golden layout config for this object.
+     * @internal
+     */
+    private constructLayoutConfig;
+    /** @internal */
+    private getParentLayoutComponent;
+    /** @internal */
+    addItemFromChild<T extends RootItemConfig>(item: T): T;
+    /** @internal */
+    requestLayoutReload(): void;
+    /** @internal */
+    cacheElementsAndRegister(config: RegistrationConfig): string;
+}
 
-           /**
-            * A collection of SVG icons in base64 format.
-            * @remarks
-            * These icons are used by the layout manager for the UI buttons. You can use these as examples for your own custom icons when creating a custom button.
-            * @example
-            * ```
-            * export const layoutCustomButtons: CustomButton[] = [
-            *   { svg: LAYOUT_ICONS.renameSVG, onClick: (button: HTMLElement, elem: HTMLElement) => {} },
-            * ];
-            * ```
-            *
-            * @public
-            */
-           export declare const LAYOUT_ICONS: {
-               readonly renameSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI0NTAiIGhlaWdodD0iNDUwIiB2aWV3Qm94PSIwIDAgNDUwIDQ1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMTguNjEgMCAwIDE4LjYxIDIyMi44MSAyMjIuODEpIiBpZD0iT3V0bGluZSIgID48cGF0aCBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtZGFzaG9mZnNldDogMDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDQ7IGZpbGw6IHJnYigxMTEsMTI2LDEzNSk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiICB0cmFuc2Zvcm09IiB0cmFuc2xhdGUoLTExLjk2LCAtMTIuMDQpIiBkPSJNIDIyLjg1MyAxLjE0OCBhIDMuNjI2IDMuNjI2IDAgMCAwIC01LjEyNCAwIEwgMS40NjUgMTcuNDEyIEEgNC45NjggNC45NjggMCAwIDAgMCAyMC45NDcgViAyMyBhIDEgMSAwIDAgMCAxIDEgSCAzLjA1MyBhIDQuOTY2IDQuOTY2IDAgMCAwIDMuNTM1IC0xLjQ2NCBMIDIyLjg1MyA2LjI3MSBBIDMuNjI2IDMuNjI2IDAgMCAwIDIyLjg1MyAxLjE0OCBaIE0gNS4xNzQgMjEuMTIyIEEgMy4wMjIgMy4wMjIgMCAwIDEgMy4wNTMgMjIgSCAyIFYgMjAuOTQ3IGEgMi45OCAyLjk4IDAgMCAxIDAuODc5IC0yLjEyMSBMIDE1LjIyMiA2LjQ4MyBsIDIuMyAyLjMgWiBNIDIxLjQzOCA0Ljg1NyBMIDE4LjkzMiA3LjM2NCBsIC0yLjMgLTIuMjk1IGwgMi41MDcgLTIuNTA3IGEgMS42MjMgMS42MjMgMCAxIDEgMi4yOTUgMi4zIFoiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz48L2c+PC9zdmc+Cg==";
-               readonly maximiseSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMTQ0IDMyaC0xMjhDNy4xNTYgMzIgMCAzOS4xNiAwIDQ4djEyOEMwIDE4NC44IDcuMTU2IDE5MiAxNiAxOTJTMzIgMTg0LjggMzIgMTc2VjY0aDExMkMxNTIuOCA2NCAxNjAgNTYuODQgMTYwIDQ4UzE1Mi44IDMyIDE0NCAzMnpNMTQ0IDQ0OEgzMnYtMTEyQzMyIDMyNy4yIDI0Ljg0IDMyMCAxNiAzMjBTMCAzMjcuMiAwIDMzNnYxMjhDMCA0NzIuOCA3LjE1NiA0ODAgMTYgNDgwaDEyOEMxNTIuOCA0ODAgMTYwIDQ3Mi44IDE2MCA0NjRTMTUyLjggNDQ4IDE0NCA0NDh6TTQzMiAzMjBjLTguODQ0IDAtMTYgNy4xNTYtMTYgMTZWNDQ4aC0xMTJjLTguODQ0IDAtMTYgNy4xNTYtMTYgMTZzNy4xNTYgMTYgMTYgMTZoMTI4YzguODQ0IDAgMTYtNy4xNTYgMTYtMTZ2LTEyOEM0NDggMzI3LjIgNDQwLjggMzIwIDQzMiAzMjB6TTQzMiAzMmgtMTI4QzI5NS4yIDMyIDI4OCAzOS4xNiAyODggNDhTMjk1LjIgNjQgMzA0IDY0SDQxNnYxMTJDNDE2IDE4NC44IDQyMy4yIDE5MiA0MzIgMTkyUzQ0OCAxODQuOCA0NDggMTc2di0xMjhDNDQ4IDM5LjE2IDQ0MC44IDMyIDQzMiAzMnoiIGZpbGw9IiM4NzliYTYiLz48L3N2Zz4=";
-               readonly minimiseSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMCA0NjRDMCA0NTUuMiA3LjE2NCA0NDggMTYgNDQ4SDQ5NkM1MDQuOCA0NDggNTEyIDQ1NS4yIDUxMiA0NjRDNTEyIDQ3Mi44IDUwNC44IDQ4MCA0OTYgNDgwSDE2QzcuMTY0IDQ4MCAwIDQ3Mi44IDAgNDY0eiIgZmlsbD0iIzg3OWJhNiIvPjwvc3ZnPg==";
-               readonly closeSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMzE1LjMgNDExLjNjLTYuMjUzIDYuMjUzLTE2LjM3IDYuMjUzLTIyLjYzIDBMMTYwIDI3OC42bC0xMzIuNyAxMzIuN2MtNi4yNTMgNi4yNTMtMTYuMzcgNi4yNTMtMjIuNjMgMGMtNi4yNTMtNi4yNTMtNi4yNTMtMTYuMzcgMC0yMi42M0wxMzcuNCAyNTZMNC42OSAxMjMuM2MtNi4yNTMtNi4yNTMtNi4yNTMtMTYuMzcgMC0yMi42M2M2LjI1My02LjI1MyAxNi4zNy02LjI1MyAyMi42MyAwTDE2MCAyMzMuNGwxMzIuNy0xMzIuN2M2LjI1My02LjI1MyAxNi4zNy02LjI1MyAyMi42MyAwYzYuMjUzIDYuMjUzIDYuMjUzIDE2LjM3IDAgMjIuNjNMMTgyLjYgMjU2bDEzMi43IDEzMi43QzMyMS42IDM5NC45IDMyMS42IDQwNS4xIDMxNS4zIDQxMS4zeiIgZmlsbD0iIzg3OWJhNiIvPjwvc3ZnPg==";
-               readonly tabDropdownSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNC4yNTEgMTgxLjFDNy4zOTIgMTc3LjcgMTEuNjkgMTc1LjEgMTYgMTc1LjFjMy44OTEgMCA3Ljc4MSAxLjQwNiAxMC44NiA0LjI1bDE5Ny4xIDE4MS4xbDE5Ny4xLTE4MS4xYzYuNS02IDE2LjY0LTUuNjI1IDIyLjYxIC45MDYyYzYgNi41IDUuNTk0IDE2LjU5LS44OTA2IDIyLjU5bC0yMDggMTkyYy02LjE1NiA1LjY4OC0xNS41NiA1LjY4OC0yMS43MiAwbC0yMDgtMTkyQy0xLjM0MyAxOTcuNy0xLjc0OSAxODcuNiA0LjI1MSAxODEuMXoiIGZpbGw9IiM4NzliYTYiLz48L3N2Zz4=";
-           };
+/**
+ * A collection of SVG icons in base64 format.
+ * @remarks
+ * These icons are used by the layout manager for the UI buttons. You can use these as examples for your own custom icons when creating a custom button.
+ * @example
+ * ```
+ * export const layoutCustomButtons: CustomButton[] = [
+ *   { svg: LAYOUT_ICONS.renameSVG, onClick: (button: HTMLElement, elem: HTMLElement) => {} },
+ * ];
+ * ```
+ *
+ * @public
+ */
+export declare const LAYOUT_ICONS: {
+    readonly renameSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI0NTAiIGhlaWdodD0iNDUwIiB2aWV3Qm94PSIwIDAgNDUwIDQ1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMTguNjEgMCAwIDE4LjYxIDIyMi44MSAyMjIuODEpIiBpZD0iT3V0bGluZSIgID48cGF0aCBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtZGFzaG9mZnNldDogMDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDQ7IGZpbGw6IHJnYigxMTEsMTI2LDEzNSk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiICB0cmFuc2Zvcm09IiB0cmFuc2xhdGUoLTExLjk2LCAtMTIuMDQpIiBkPSJNIDIyLjg1MyAxLjE0OCBhIDMuNjI2IDMuNjI2IDAgMCAwIC01LjEyNCAwIEwgMS40NjUgMTcuNDEyIEEgNC45NjggNC45NjggMCAwIDAgMCAyMC45NDcgViAyMyBhIDEgMSAwIDAgMCAxIDEgSCAzLjA1MyBhIDQuOTY2IDQuOTY2IDAgMCAwIDMuNTM1IC0xLjQ2NCBMIDIyLjg1MyA2LjI3MSBBIDMuNjI2IDMuNjI2IDAgMCAwIDIyLjg1MyAxLjE0OCBaIE0gNS4xNzQgMjEuMTIyIEEgMy4wMjIgMy4wMjIgMCAwIDEgMy4wNTMgMjIgSCAyIFYgMjAuOTQ3IGEgMi45OCAyLjk4IDAgMCAxIDAuODc5IC0yLjEyMSBMIDE1LjIyMiA2LjQ4MyBsIDIuMyAyLjMgWiBNIDIxLjQzOCA0Ljg1NyBMIDE4LjkzMiA3LjM2NCBsIC0yLjMgLTIuMjk1IGwgMi41MDcgLTIuNTA3IGEgMS42MjMgMS42MjMgMCAxIDEgMi4yOTUgMi4zIFoiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz48L2c+PC9zdmc+Cg==";
+    readonly maximiseSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMTQ0IDMyaC0xMjhDNy4xNTYgMzIgMCAzOS4xNiAwIDQ4djEyOEMwIDE4NC44IDcuMTU2IDE5MiAxNiAxOTJTMzIgMTg0LjggMzIgMTc2VjY0aDExMkMxNTIuOCA2NCAxNjAgNTYuODQgMTYwIDQ4UzE1Mi44IDMyIDE0NCAzMnpNMTQ0IDQ0OEgzMnYtMTEyQzMyIDMyNy4yIDI0Ljg0IDMyMCAxNiAzMjBTMCAzMjcuMiAwIDMzNnYxMjhDMCA0NzIuOCA3LjE1NiA0ODAgMTYgNDgwaDEyOEMxNTIuOCA0ODAgMTYwIDQ3Mi44IDE2MCA0NjRTMTUyLjggNDQ4IDE0NCA0NDh6TTQzMiAzMjBjLTguODQ0IDAtMTYgNy4xNTYtMTYgMTZWNDQ4aC0xMTJjLTguODQ0IDAtMTYgNy4xNTYtMTYgMTZzNy4xNTYgMTYgMTYgMTZoMTI4YzguODQ0IDAgMTYtNy4xNTYgMTYtMTZ2LTEyOEM0NDggMzI3LjIgNDQwLjggMzIwIDQzMiAzMjB6TTQzMiAzMmgtMTI4QzI5NS4yIDMyIDI4OCAzOS4xNiAyODggNDhTMjk1LjIgNjQgMzA0IDY0SDQxNnYxMTJDNDE2IDE4NC44IDQyMy4yIDE5MiA0MzIgMTkyUzQ0OCAxODQuOCA0NDggMTc2di0xMjhDNDQ4IDM5LjE2IDQ0MC44IDMyIDQzMiAzMnoiIGZpbGw9IiM4NzliYTYiLz48L3N2Zz4=";
+    readonly minimiseSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMCA0NjRDMCA0NTUuMiA3LjE2NCA0NDggMTYgNDQ4SDQ5NkM1MDQuOCA0NDggNTEyIDQ1NS4yIDUxMiA0NjRDNTEyIDQ3Mi44IDUwNC44IDQ4MCA0OTYgNDgwSDE2QzcuMTY0IDQ4MCAwIDQ3Mi44IDAgNDY0eiIgZmlsbD0iIzg3OWJhNiIvPjwvc3ZnPg==";
+    readonly closeSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMzE1LjMgNDExLjNjLTYuMjUzIDYuMjUzLTE2LjM3IDYuMjUzLTIyLjYzIDBMMTYwIDI3OC42bC0xMzIuNyAxMzIuN2MtNi4yNTMgNi4yNTMtMTYuMzcgNi4yNTMtMjIuNjMgMGMtNi4yNTMtNi4yNTMtNi4yNTMtMTYuMzcgMC0yMi42M0wxMzcuNCAyNTZMNC42OSAxMjMuM2MtNi4yNTMtNi4yNTMtNi4yNTMtMTYuMzcgMC0yMi42M2M2LjI1My02LjI1MyAxNi4zNy02LjI1MyAyMi42MyAwTDE2MCAyMzMuNGwxMzIuNy0xMzIuN2M2LjI1My02LjI1MyAxNi4zNy02LjI1MyAyMi42MyAwYzYuMjUzIDYuMjUzIDYuMjUzIDE2LjM3IDAgMjIuNjNMMTgyLjYgMjU2bDEzMi43IDEzMi43QzMyMS42IDM5NC45IDMyMS42IDQwNS4xIDMxNS4zIDQxMS4zeiIgZmlsbD0iIzg3OWJhNiIvPjwvc3ZnPg==";
+    readonly tabDropdownSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNC4yNTEgMTgxLjFDNy4zOTIgMTc3LjcgMTEuNjkgMTc1LjEgMTYgMTc1LjFjMy44OTEgMCA3Ljc4MSAxLjQwNiAxMC44NiA0LjI1bDE5Ny4xIDE4MS4xbDE5Ny4xLTE4MS4xYzYuNS02IDE2LjY0LTUuNjI1IDIyLjYxIC45MDYyYzYgNi41IDUuNTk0IDE2LjU5LS44OTA2IDIyLjU5bC0yMDggMTkyYy02LjE1NiA1LjY4OC0xNS41NiA1LjY4OC0yMS43MiAwbC0yMDgtMTkyQy0xLjM0MyAxOTcuNy0xLjc0OSAxODcuNiA0LjI1MSAxODEuMXoiIGZpbGw9IiM4NzliYTYiLz48L3N2Zz4=";
+};
 
-           /** @internal */
-           declare interface LayoutComponent {
-               [componentType]: ComponentTypes;
-               cacheElementsAndRegister(config: RegistrationConfig): string;
-               requestLayoutReload(): void;
-           }
+/** @internal */
+declare interface LayoutComponent {
+    [componentType]: ComponentTypes;
+    cacheElementsAndRegister(config: RegistrationConfig): string;
+    requestLayoutReload(): void;
+}
 
-           /**
-            * 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.
-            * @typeParam T - the type of the state object you wish to serialise with the component.
-            * @remarks
-            * When the layout is saved either via the autosave functionality or manually calling {@link FoundationLayout.getLayout}, all contained components will be requested to provide state if they wish.
-            *
-            * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is loaded with {@link FoundationLayout.loadLayout} (or via autoloading). The state will be applied to the component via `applyState`, this may be before or after the component has been placed on the DOM, so you'll need to handle either scenario. The state is `null` when the instance is first created.
-            *
-            * See the written documentation for some error scenarios to consider about when implementing this interface.
-            *
-            * @example
-            * ```
-            * type ComponentState = {
-            *   foo: string;
-            * }
-            * \@customElement({ name: 'my-component' })
-            * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
-            *   \@observable foo: string;
-            *   private fooCache: ComponentState | null;
-            *
-            *   getCurrentState(): ComponentState {
-            *     if (!this.foo) return null;
-            *     return {
-            *       foo: this.foo;
-            *     }
-            *   }
-            *
-            *   applyState(state: ComponentState | null) {
-            *     this.fooCache = state;
-            *   }
-            *
-            *   connectedCallback() {
-            *     // do other required setup
-            *     if (this.fooCache) {
-            *       this.foo = this.fooCache.foo;
-            *     }
-            *   }
-            * }
-            * ```
-            *
-            * @example
-            * If you are using the autosave functionality you should inform the layout system when you update the state of a component, otherwise the state will only be updated when the user performs an action such as resizing an item. Use the {@link LayoutReceiveEvents} `autosave` event.
-            * ```
-            * // Same component as above
-            * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
-            *  // can use xChanged pattern as `foo` was declared observable
-            *  fooChanged() {
-            *    this.$emit(LayoutReceiveEvents.autosave);
-            *  }
-            * }
-            * ```
-            * @public
-            * */
-           export declare interface LayoutComponentWithState<T> {
-               /**
-                * Provide the state you wish to save. It is recommended if the component which implements this interface has not fully initialised at the point this is called that you return `null` as the state, following the pattern of `null` being set as the initial state.
-                */
-               getCurrentState(): T;
-               /**
-                * Handle any state that has been saved previously for this instance of this component. It is not deterministic to know whether this is called before the component is appended to the DOM.
-                */
-               applyState(state: T | null): void;
-           }
+/**
+ * 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.
+ * @typeParam T - the type of the state object you wish to serialise with the component.
+ * @remarks
+ * When the layout is saved either via the autosave functionality or manually calling {@link FoundationLayout.getLayout}, all contained components will be requested to provide state if they wish.
+ *
+ * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is loaded with {@link FoundationLayout.loadLayout} (or via autoloading). The state will be applied to the component via `applyState`, this may be before or after the component has been placed on the DOM, so you'll need to handle either scenario. The state is `null` when the instance is first created.
+ *
+ * See the written documentation for some error scenarios to consider about when implementing this interface.
+ *
+ * @example
+ * ```
+ * type ComponentState = {
+ *   foo: string;
+ * }
+ * \@customElement({ name: 'my-component' })
+ * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
+ *   \@observable foo: string;
+ *   private fooCache: ComponentState | null;
+ *
+ *   getCurrentState(): ComponentState {
+ *     if (!this.foo) return null;
+ *     return {
+ *       foo: this.foo;
+ *     }
+ *   }
+ *
+ *   applyState(state: ComponentState | null) {
+ *     this.fooCache = state;
+ *   }
+ *
+ *   connectedCallback() {
+ *     // do other required setup
+ *     if (this.fooCache) {
+ *       this.foo = this.fooCache.foo;
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * If you are using the autosave functionality you should inform the layout system when you update the state of a component, otherwise the state will only be updated when the user performs an action such as resizing an item. Use the {@link LayoutReceiveEvents} `autosave` event.
+ * ```
+ * // Same component as above
+ * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
+ *  // can use xChanged pattern as `foo` was declared observable
+ *  fooChanged() {
+ *    this.$emit(LayoutReceiveEvents.autosave);
+ *  }
+ * }
+ * ```
+ * @public
+ * */
+export declare interface LayoutComponentWithState<T> {
+    /**
+     * Provide the state you wish to save. It is recommended if the component which implements this interface has not fully initialised at the point this is called that you return `null` as the state, following the pattern of `null` being set as the initial state.
+     */
+    getCurrentState(): T;
+    /**
+     * Handle any state that has been saved previously for this instance of this component. It is not deterministic to know whether this is called before the component is appended to the DOM.
+     */
+    applyState(state: T | null): void;
+}
 
-           /**
-            * Defines events that the layout system emits
-            *
-            * 'firstLoaded' - emitted when the layout has finished loading the first time
-            * using the declarative API after {@link DEFAULT_RELOAD_BUFFER} ms.
-            * <br/>
-            * 'itemAdded' - emitted when an item is added to the layout'
-            * <br/>
-            * 'itemRemoved' - emitted when an item is removed from the layout'
-            * <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 emits
+ *
+ * 'firstLoaded' - emitted when the layout has finished loading the first time
+ * using the declarative API after {@link DEFAULT_RELOAD_BUFFER} ms.
+ * <br/>
+ * 'itemAdded' - emitted when an item is added to the layout'
+ * <br/>
+ * 'itemRemoved' - emitted when an item is removed from the layout'
+ * <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.
-            * 'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See {@link LayoutComponentWithState}.
-            * @public
-            */
-           export declare const LayoutReceiveEvents: {
-               readonly changeTitle: "change-title";
-               readonly autosave: "autosave";
-           };
+/**
+ * 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.
+ * 'autosave' - emit this from a contained item to hint to the layout system that it should autosave the layout. A contained item should do this if it has just changed some state it would like to persist. See {@link LayoutComponentWithState}.
+ * @public
+ */
+export declare const LayoutReceiveEvents: {
+    readonly changeTitle: "change-title";
+    readonly autosave: "autosave";
+};
 
-           /**
-            * 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.
-            * 'autosave' - no other parameters.
-            * @public
-            */
-           export declare type LayoutReceiveEventsDetail = {
-               changeTitle: {
-                   title: string;
-                   mode: 'replace' | 'suffix';
-               };
-               autosave: void;
-           };
+/**
+ * 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.
+ * 'autosave' - no other parameters.
+ * @public
+ */
+export declare type LayoutReceiveEventsDetail = {
+    changeTitle: {
+        title: string;
+        mode: 'replace' | 'suffix';
+    };
+    autosave: void;
+};
 
-           /**
-            * @public
-            * Union type describing the three different types of region splits.
-            * Set on the `type` attribute on {@link FoundationLayoutRegion}.
-            */
-           export declare type LayoutRegionType = (typeof layoutRegionValue)[number];
+/**
+ * @public
+ * Union type describing the three different types of region splits.
+ * Set on the `type` attribute on {@link FoundationLayoutRegion}.
+ */
+export declare type LayoutRegionType = (typeof layoutRegionValue)[number];
 
-           /** @internal */
-           declare const layoutRegionValue: readonly ["horizontal", "vertical", "tabs"];
+/** @internal */
+declare const layoutRegionValue: readonly ["horizontal", "vertical", "tabs"];
 
-           /**
-            * @public
-            */
-           export declare class LayoutRegistrationError extends Error {
-               constructor(message: string);
-           }
+/**
+ * @public
+ */
+export declare class LayoutRegistrationError extends Error {
+    constructor(message: string);
+}
 
-           /**
-            * `ElementStyles` which defines the css for {@link FoundationLayout}.
-            * @remarks
-            * Can be used in a composition to customise the styles of the layout.
-            * @public
-            */
-           export declare const layoutStyles: ElementStyles;
+/**
+ * `ElementStyles` which defines the css for {@link FoundationLayout}.
+ * @remarks
+ * Can be used in a composition to customise the styles of the layout.
+ * @public
+ */
+export declare const layoutStyles: ElementStyles;
 
-           /**
-            * `ViewTemplate` which defines the html for {@link FoundationLayout}.
-            * @remarks
-            * Can be used in a composition to customise the styles of the layout.
-            * @public
-            */
-           export declare const layoutTemplate: ViewTemplate<FoundationLayout, any>;
+/**
+ * `ViewTemplate` which defines the html for {@link FoundationLayout}.
+ * @remarks
+ * Can be used in a composition to customise the styles of the layout.
+ * @public
+ */
+export declare const layoutTemplate: ViewTemplate<FoundationLayout, any>;
 
-           /**
-            * @public
-            */
-           export declare class LayoutUsageError extends Error {
-               constructor(message: string);
-           }
+/**
+ * @public
+ */
+export declare class LayoutUsageError extends Error {
+    constructor(message: string);
+}
 
-           /**
-            * @public
-            * Where to and how to add the new item(s) into the layout when using the {@link FoundationLayout.addItem} API.
-            * @remarks
-            * `area` dictates what part of the layout the new item(s) will be added to.
-            * `multiple` is optional and is defaulted to `type=horizontal` and `size=50%` if not defined. `multiple` config only affects the placement if multiple items are specified to be added.
-            * `multiple.type` sets the group type of the new items, whether they are horizontal, vertical, or in tabs.
-            * `multiple.size` - optional string describing the size of the new item (see the written documentation for more info).
-            * `multiple.size` specifies the size of the new group to be added and then the `size` config of the new items are the sizes relative to this new multiple group. If you only specify one new item then the `size` of that will be used as the size and will override `multiple.size`.
-            */
-           export declare type Placement = {
-               area: 'top' | 'left' | 'bottom' | 'right';
-               multiple?: {
-                   type: LayoutRegionType;
-                   size?: string;
-               };
-           };
+/**
+ * @public
+ * Where to and how to add the new item(s) into the layout when using the {@link FoundationLayout.addItem} API.
+ * @remarks
+ * `area` dictates what part of the layout the new item(s) will be added to.
+ * `multiple` is optional and is defaulted to `type=horizontal` and `size=50%` if not defined. `multiple` config only affects the placement if multiple items are specified to be added.
+ * `multiple.type` sets the group type of the new items, whether they are horizontal, vertical, or in tabs.
+ * `multiple.size` - optional string describing the size of the new item (see the written documentation for more info).
+ * `multiple.size` specifies the size of the new group to be added and then the `size` config of the new items are the sizes relative to this new multiple group. If you only specify one new item then the `size` of that will be used as the size and will override `multiple.size`.
+ */
+export declare type Placement = {
+    area: 'top' | 'left' | 'bottom' | 'right';
+    multiple?: {
+        type: LayoutRegionType;
+        size?: string;
+    };
+};
 
-           /**
-            * @public
-            * The parameters that can be set on a new item when being added by the {@link FoundationLayout.addItem} API
-            *
-            * @remarks
-            * `elements` - array of Elements that are the content of the new item
-            * `title` - optional string which is used as the new title of the tab (defaults to be the registered name)
-            * `closable` - optional boolean which allows the item to be closed with the X button if set and true
-            * `size` - optional string describing the size of the new item (see the written documentation for more info)
-            * `registration` - optional string configuring the registration ID of the new item (defaults to sequential IDs)
-            */
-           export declare interface RegisteredElementConfig {
-               registration: string;
-               title?: string;
-               closable?: boolean;
-               size?: string;
-           }
+/**
+ * @public
+ * The parameters that can be set on a new item when being added by the {@link FoundationLayout.addItem} API
+ *
+ * @remarks
+ * `elements` - array of Elements that are the content of the new item
+ * `title` - optional string which is used as the new title of the tab (defaults to be the registered name)
+ * `closable` - optional boolean which allows the item to be closed with the X button if set and true
+ * `size` - optional string describing the size of the new item (see the written documentation for more info)
+ * `registration` - optional string configuring the registration ID of the new item (defaults to sequential IDs)
+ */
+export declare interface RegisteredElementConfig {
+    registration: string;
+    title?: string;
+    closable?: boolean;
+    size?: string;
+}
 
-           /** @internal */
-           export declare interface RegistrationConfig {
-               elements: Element[];
-               id?: string;
-           }
+/** @internal */
+export declare interface RegistrationConfig {
+    elements: Element[];
+    id?: string;
+}
 
-           /**
-            * @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
-            * remaining backwards compatible with any existing client/user configurations. When loading an
-            * older version of the configurations the version can be used to lookup and apply transformer functions
-            * to get the newest version of the config from it.
-            *
-            * As more versions of configurations are added this type will have extra union types as part of SerialisedLayout.
-            */
-           export declare type SerialisedLayout = {
-               v: '1';
-               c: ResolvedLayoutConfig;
-           };
+/**
+ * @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
+ * remaining backwards compatible with any existing client/user configurations. When loading an
+ * older version of the configurations the version can be used to lookup and apply transformer functions
+ * to get the newest version of the config from it.
+ *
+ * As more versions of configurations are added this type will have extra union types as part of SerialisedLayout.
+ */
+export declare type SerialisedLayout = {
+    v: '1';
+    c: ResolvedLayoutConfig;
+};
 
-           export { }
+export { }

package/dist/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.38.0"
+      "packageVersion": "7.34.9"
     }
   ]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-layout",
   "description": "Genesis Foundation UI App Layout",
-  "version": "14.107.1-alpha-afbc4d7.0",
+  "version": "14.107.1",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-layout.d.ts",
@@ -27,19 +27,19 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.107.1-alpha-afbc4d7.0",
-    "@genesislcap/genx": "14.107.1-alpha-afbc4d7.0",
+    "@genesislcap/foundation-testing": "14.107.1",
+    "@genesislcap/genx": "14.107.1",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
     "@genesis-community/golden-layout": "^2.11.0",
-    "@genesislcap/foundation-comms": "14.107.1-alpha-afbc4d7.0",
-    "@genesislcap/foundation-logger": "14.107.1-alpha-afbc4d7.0",
-    "@genesislcap/foundation-utils": "14.107.1-alpha-afbc4d7.0",
+    "@genesislcap/foundation-comms": "14.107.1",
+    "@genesislcap/foundation-logger": "14.107.1",
+    "@genesislcap/foundation-utils": "14.107.1",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
     "@microsoft/fast-foundation": "^2.33.2",
-    "tslib": "^2.6.2"
+    "tslib": "^2.3.1"
   },
   "repository": {
     "type": "git",
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "bb64624e9bb6cea2cad088305e8c82d088f20da4"
+  "gitHead": "afc294d9a52a1eac3286416444bfd29c18910490"
 }