@genesislcap/foundation-layout 14.407.0-FUI-2491.1 → 14.407.0-workspaces.4

package/docs/api/foundation-layout.componentfactory.md

@@ -0,0 +1,46 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [ComponentFactory](./foundation-layout.componentfactory.md)
+
+## ComponentFactory type
+
+Factory function for creating component instances in the layout.
+
+**Signature:**
+
+```typescript
+export type ComponentFactory = (container: HTMLElement) => void | (() => void);
+```
+
+## Remarks
+
+This is the recommended approach for framework-rendered components (React, Angular, Vue, etc.) because it allows each layout instance to create a fresh component rather than cloning existing DOM elements (which loses event listeners and framework bindings).
+
+The factory function receives a container element and should render the component into it. Optionally, it can return a cleanup function that will be called when the component is removed from the layout.
+
+## Example 1
+
+React example:
+
+```typescript
+layout.registerItem('my-component', (container) => {
+  const root = createRoot(container);
+  root.render(<MyComponent />);
+  return () => root.unmount();
+});
+```
+
+## Example 2
+
+Angular example:
+
+```typescript
+layout.registerItem('my-component', (container) => {
+  const componentRef = createComponent(MyComponent, {
+    environmentInjector: this.injector,
+    hostElement: container
+  });
+  return () => componentRef.destroy();
+});
+```
+

package/docs/api/foundation-layout.custombutton.md

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [CustomButton](./foundation-layout.custombutton.md)
+
+## CustomButton type
+
+Definition of a custom button which will be added to all layout items.
+
+**Signature:**
+
+```typescript
+export type CustomButton = {
+    svg: string;
+    onClick: (button: HTMLElement, element: HTMLElement) => void;
+};
+```
+
+## Remarks
+
+`svg` - string of the SVG to use for the button. Needs to be in the format `data:image/svg+xml;base64,<<base64 encoded definition>>`<!-- -->. `onClick` - function which will be called when the button is clicked. The clicked button and the contained element associated with the clicked button will be passed to the function.
+

package/docs/api/foundation-layout.default_reload_buffer.md

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [DEFAULT\_RELOAD\_BUFFER](./foundation-layout.default_reload_buffer.md)
+
+## DEFAULT\_RELOAD\_BUFFER variable
+
+Default time in milliseconds for the layout to buffer calls to reloading the layout while the declarative API is loading.
+
+During the first load of the layout, a loading spinner will be shown.
+
+**Signature:**
+
+```typescript
+DEFAULT_RELOAD_BUFFER = 500
+```

package/docs/api/foundation-layout.foundationlayout.additem.md

@@ -0,0 +1,80 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [addItem](./foundation-layout.foundationlayout.additem.md)
+
+## FoundationLayout.addItem() method
+
+Dynamically add a new item to the layout. The user can move the new plane to whenever they want once it has been added.
+
+**Signature:**
+
+```typescript
+addItem(config: RegisteredElementConfig | RegisteredElementConfig[], placement?: Placement): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+config
+
+
+</td><td>
+
+[RegisteredElementConfig](./foundation-layout.registeredelementconfig.md) \| [RegisteredElementConfig](./foundation-layout.registeredelementconfig.md)<!-- -->\[\]
+
+
+</td><td>
+
+[RegisteredElementConfig](./foundation-layout.registeredelementconfig.md) configuration items for the new items(s). Pass an array of [RegisteredElementConfig](./foundation-layout.registeredelementconfig.md) to add multiple items at once.
+
+
+</td></tr>
+<tr><td>
+
+placement
+
+
+</td><td>
+
+[Placement](./foundation-layout.placement.md)
+
+
+</td><td>
+
+_(Optional)_ where and how to add the new items to the layout. For more info and defaults see [Placement](./foundation-layout.placement.md)<!-- -->.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
+
+## Exceptions
+
+[LayoutRegistrationError](./foundation-layout.layoutregistrationerror.md) if you attempt to add an item before it has been registered
+
+## Remarks
+
+Adding new items invokes the registration previously made explicitly via [registerItem()](./foundation-layout.foundationlayout.registeritem.md) 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.
+

package/docs/api/foundation-layout.foundationlayout.autosavekey.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [autoSaveKey](./foundation-layout.foundationlayout.autosavekey.md)
+
+## FoundationLayout.autoSaveKey property
+
+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`<!-- -->.
+
+**Signature:**
+
+```typescript
+autoSaveKey?: string;
+```

package/docs/api/foundation-layout.foundationlayout.class.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [class](./foundation-layout.foundationlayout.class.md)
+
+## FoundationLayout.class property
+
+Identifier constant token.
+
+**Signature:**
+
+```typescript
+class: "FoundationLayoutMain";
+```
+
+## Remarks
+
+Used for the `LifecycleMixin` to identify it is part of the layout system.
+

package/docs/api/foundation-layout.foundationlayout.clearautosaveandreverttodefault.md

@@ -0,0 +1,25 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [clearAutosaveAndRevertToDefault](./foundation-layout.foundationlayout.clearautosaveandreverttodefault.md)
+
+## FoundationLayout.clearAutosaveAndRevertToDefault() method
+
+Clears the autosaved layout from local storage and reverts to the default layout
+
+**Signature:**
+
+```typescript
+clearAutosaveAndRevertToDefault(): boolean;
+```
+**Returns:**
+
+boolean
+
+boolean - true if the autosave was cleared and layout reverted, false if no action was taken
+
+## Remarks
+
+This method will remove the autosaved layout associated with the current `auto-save-key` from local storage and reload the layout using the original configuration that was defined declaratively or set initially. The layout will be reloaded with fresh instances (cache disabled).
+
+If no `auto-save-key` is set or if the layout is in popup mode, this method returns false without doing anything.
+

package/docs/api/foundation-layout.foundationlayout.custombuttons.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [customButtons](./foundation-layout.foundationlayout.custombuttons.md)
+
+## FoundationLayout.customButtons property
+
+Set custom button definition on this property to add them to the layout header controls
+
+**Signature:**
+
+```typescript
+customButtons: CustomButton[];
+```
+
+## Remarks
+
+To see more information see [CustomButton](./foundation-layout.custombutton.md)<!-- -->.
+

package/docs/api/foundation-layout.foundationlayout.dimensionsconfig.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [dimensionsConfig](./foundation-layout.foundationlayout.dimensionsconfig.md)
+
+## FoundationLayout.dimensionsConfig property
+
+Apply dimensions config to the layout, such as setting the size of the drag handles.
+
+**Signature:**
+
+```typescript
+dimensionsConfig?: LayoutConfig.Dimensions;
+```

package/docs/api/foundation-layout.foundationlayout.dragging.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [dragging](./foundation-layout.foundationlayout.dragging.md)
+
+## FoundationLayout.dragging property
+
+Set to true when the user is currently dragging the panes inside of the layout
+
+**Signature:**
+
+```typescript
+dragging: boolean;
+```

package/docs/api/foundation-layout.foundationlayout.getlayout.md

@@ -0,0 +1,23 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [getLayout](./foundation-layout.foundationlayout.getlayout.md)
+
+## FoundationLayout.getLayout() method
+
+Gets a minified string containing the config describing the current layout of the layout object to later restore in [function](./foundation-layout.foundationlayout.loadlayout.md)
+
+**Signature:**
+
+```typescript
+getLayout(): SerialisedLayout;
+```
+**Returns:**
+
+[SerialisedLayout](./foundation-layout.serialisedlayout.md)
+
+- latest version of [SerialisedLayout](./foundation-layout.serialisedlayout.md) describing the layout
+
+## Remarks
+
+Includes any state for a contained component exposed by the [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md) interface.
+

package/docs/api/foundation-layout.foundationlayout.hasfirstloaded.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [hasFirstLoaded](./foundation-layout.foundationlayout.hasfirstloaded.md)
+
+## FoundationLayout.hasFirstLoaded property
+
+Boolean signifies whether the layout has loaded for the first time or not.
+
+**Signature:**
+
+```typescript
+hasFirstLoaded: boolean;
+```
+
+## Remarks
+
+When using the declarative API this is set to true when the layout loads after the first timeout of `reload-buffer`<!-- -->. If using the JavaScript API this occurs after the first call to [addItem()](./foundation-layout.foundationlayout.additem.md)<!-- -->.
+
+When using the `LifecycleMixin`<!-- -->, the mixin can be used to gate lifecycle methods from running before the items are inside of the layout.
+

package/docs/api/foundation-layout.foundationlayout.layoutrequiredregistrations.md

@@ -0,0 +1,64 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [layoutRequiredRegistrations](./foundation-layout.foundationlayout.layoutrequiredregistrations.md)
+
+## FoundationLayout.layoutRequiredRegistrations() method
+
+Gets all of the required element registry function names for a set of config
+
+**Signature:**
+
+```typescript
+static layoutRequiredRegistrations(layout: SerialisedLayout): string[];
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+layout
+
+
+</td><td>
+
+[SerialisedLayout](./foundation-layout.serialisedlayout.md)
+
+
+</td><td>
+
+any version of [SerialisedLayout](./foundation-layout.serialisedlayout.md) object describing the layout
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+string\[\]
+
+string\[\] - an item for each registered element in the config. These must all be added before [function](./foundation-layout.foundationlayout.loadlayout.md)
+
+## Exceptions
+
+- various errors if the layout parameter cannot be parsed
+
+## Remarks
+
+You can use this with [registeredItems](./foundation-layout.foundationlayout.registereditems.md) to work out what items you need to register with [registerItem()](./foundation-layout.foundationlayout.registeritem.md) before loading the layout with [loadLayout()](./foundation-layout.foundationlayout.loadlayout.md)
+

package/docs/api/foundation-layout.foundationlayout.lifecycleupdatetoken.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [lifecycleUpdateToken](./foundation-layout.foundationlayout.lifecycleupdatetoken.md)
+
+## FoundationLayout.lifecycleUpdateToken property
+
+Used to calculate whether a layout item should run its lifecycle methods or not
+
+**Signature:**
+
+```typescript
+lifecycleUpdateToken: string | undefined;
+```
+
+## Remarks
+
+When using the `LifecycleMixin`<!-- -->, the mixin can be used 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.
+

package/docs/api/foundation-layout.foundationlayout.loadlayout.md

@@ -0,0 +1,96 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [FoundationLayout](./foundation-layout.foundationlayout.md) &gt; [loadLayout](./foundation-layout.foundationlayout.loadlayout.md)
+
+## FoundationLayout.loadLayout() method
+
+Restores a layout described in the config from [getLayout()](./foundation-layout.foundationlayout.getlayout.md)
+
+**Signature:**
+
+```typescript
+loadLayout(layout: SerialisedLayout, handleMissingItem?: 'placeholder' | 'error', disableCache?: boolean): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+layout
+
+
+</td><td>
+
+[SerialisedLayout](./foundation-layout.serialisedlayout.md)
+
+
+</td><td>
+
+any version of [SerialisedLayout](./foundation-layout.serialisedlayout.md) object describing the layout
+
+
+</td></tr>
+<tr><td>
+
+handleMissingItem
+
+
+</td><td>
+
+'placeholder' \| 'error'
+
+
+</td><td>
+
+_(Optional)_ 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 [FoundationLayout.missingItemPlaceholder](./foundation-layout.foundationlayout.missingitemplaceholder.md)<!-- -->.
+
+
+</td></tr>
+<tr><td>
+
+disableCache
+
+
+</td><td>
+
+boolean
+
+
+</td><td>
+
+_(Optional)_ 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 [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md) interface. Defaults to false.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
+
+## Exceptions
+
+[LayoutUsageError](./foundation-layout.layoutusageerror.md) 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).
+
+various errors if the layout string is malformed and cannot be parsed
+
+## 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. If you have added any elements using [FoundationLayout.registerItem()](./foundation-layout.foundationlayout.registeritem.md) 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 [RegisteredElementConfig](./foundation-layout.registeredelementconfig.md) and `foundation-layout-item` APIs. You can use [FoundationLayout.layoutRequiredRegistrations()](./foundation-layout.foundationlayout.layoutrequiredregistrations.md) to check which items are registered in a current layout in order to dynamically add any missing items before you can restore the layout
+