@genesislcap/foundation-layout 14.368.0 → 14.369.0

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

@@ -21,6 +21,8 @@ This element is used to wrap html elements and configure their layout settings a
 
 This is a simple component which is only used to define the layout splits; any JavaScript API interactions or custom styling is used via [FoundationLayout](./foundation-layout.foundationlayout.md)<!-- -->.
 
+The item can either use slotted content or a factory function registered via [registerFactory()](./foundation-layout.registerfactory.md)<!-- -->. When a factory is registered with the same name as the registration attribute, it takes precedence over slotted content.
+
 ## Properties
 
 <table><thead><tr><th>

package/docs/api/foundation-layout.foundationlayoutitem.registration.md

@@ -16,3 +16,21 @@ registration: string;
 
 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.
 
+When using the declarative API with framework components, register a factory function via [registerFactory()](./foundation-layout.registerfactory.md) using the same name as this registration attribute.
+
+## Example
+
+
+```typescript
+import { registerFactory } from '@genesislcap/foundation-layout';
+import { reactFactory } from './utils/react-layout-factory';
+
+// Register factory with the same name as the registration
+registerFactory('my-component', reactFactory(MyComponent));
+```
+Then in JSX/HTML:
+
+```tsx
+<rapid-layout-item registration="my-component" title="My Component" />
+```
+

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

@@ -0,0 +1,56 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [getFactory](./foundation-layout.getfactory.md)
+
+## getFactory() function
+
+Retrieves a factory function by its key.
+
+**Signature:**
+
+```typescript
+export declare function getFactory(key: string): ComponentFactory | undefined;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+key
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+The unique identifier for the factory.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+[ComponentFactory](./foundation-layout.componentfactory.md) \| undefined
+
+The factory function, or undefined if not found.
+

package/docs/api/foundation-layout.md

@@ -69,6 +69,54 @@ Top level web component which is used to initialise a custom layout
 
 
 
+</td></tr>
+</tbody></table>
+
+## Functions
+
+<table><thead><tr><th>
+
+Function
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[getFactory(key)](./foundation-layout.getfactory.md)
+
+
+</td><td>
+
+Retrieves a factory function by its key.
+
+
+</td></tr>
+<tr><td>
+
+[registerFactory(key, factory)](./foundation-layout.registerfactory.md)
+
+
+</td><td>
+
+Registers a factory function with a unique key. This allows framework components to be used in the declarative layout API without needing to pass function references through HTML attributes.
+
+
+</td></tr>
+<tr><td>
+
+[unregisterFactory(key)](./foundation-layout.unregisterfactory.md)
+
+
+</td><td>
+
+Removes a factory from the registry. This is useful for cleanup when a component is unmounted or no longer needed.
+
+
 </td></tr>
 </tbody></table>
 
@@ -233,6 +281,17 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[ComponentFactory](./foundation-layout.componentfactory.md)
+
+
+</td><td>
+
+Factory function for creating component instances in the layout.
+
+
+</td></tr>
+<tr><td>
+
 [CustomButton](./foundation-layout.custombutton.md)
 
 

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

@@ -0,0 +1,94 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [registerFactory](./foundation-layout.registerfactory.md)
+
+## registerFactory() function
+
+Registers a factory function with a unique key. This allows framework components to be used in the declarative layout API without needing to pass function references through HTML attributes.
+
+**Signature:**
+
+```typescript
+export declare function registerFactory(key: string, factory: ComponentFactory): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+key
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+Unique identifier for the factory. Should be descriptive and unique across the application.
+
+
+</td></tr>
+<tr><td>
+
+factory
+
+
+</td><td>
+
+[ComponentFactory](./foundation-layout.componentfactory.md)
+
+
+</td><td>
+
+The factory function that creates the component.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
+
+## Exceptions
+
+{<!-- -->Error<!-- -->} If a factory with the same key is already registered.
+
+## Example
+
+
+```typescript
+// React example
+import { registerFactory } from '@genesislcap/foundation-layout';
+import { reactFactory } from './utils/react-layout-factory';
+import { MyComponent } from './components/MyComponent';
+
+registerFactory('my-component', reactFactory(MyComponent, { someProp: 'value' }));
+```
+Then in your JSX:
+
+```tsx
+<rapid-layout-item
+  registration="my-item"
+  title="My Component"
+/>
+```
+

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

@@ -0,0 +1,63 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [unregisterFactory](./foundation-layout.unregisterfactory.md)
+
+## unregisterFactory() function
+
+Removes a factory from the registry. This is useful for cleanup when a component is unmounted or no longer needed.
+
+**Signature:**
+
+```typescript
+export declare function unregisterFactory(key: string): boolean;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+key
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+The unique identifier for the factory to remove.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+boolean
+
+True if the factory was found and removed, false otherwise.
+
+## Example
+
+
+```typescript
+unregisterFactory('my-component');
+```
+

package/docs/api-report.md.api.md

@@ -14,6 +14,9 @@ import { ResolvedLayoutConfig } from '@genesis-community/golden-layout';
 import { RootItemConfig } from '@genesis-community/golden-layout';
 import { ViewTemplate } from '@microsoft/fast-element';
 
+// @public
+export type ComponentFactory = (container: HTMLElement) => void | (() => void);
+
 // @public
 export type CustomButton = {
     svg: string;
@@ -36,7 +39,7 @@ export class FoundationLayout extends FoundationElement implements LayoutCompone
     addItemFromChild<T extends RootItemConfig>(item: T): T;
     autoSaveKey?: string;
     // @internal
-    cacheElementsAndRegister({ elements, id }: RegistrationConfig): string;
+    cacheElementsAndRegister(config: RegistrationConfig): string;
     class: "FoundationLayoutMain";
     clearAutosaveAndRevertToDefault(): boolean;
     // @internal (undocumented)
@@ -57,7 +60,7 @@ export class FoundationLayout extends FoundationElement implements LayoutCompone
     // @beta
     popoutConfig: string | undefined;
     registeredItems(): string[];
-    registerItem(registration: string, elements: Element[]): string;
+    registerItem(registration: string, elementsOrFactory: Element[] | ComponentFactory): string;
     reloadBuffer: number;
     removeItems(registration: string, force?: boolean): number;
     // @internal
@@ -129,6 +132,9 @@ export class FoundationLayoutRegion extends FoundationElement implements LayoutC
     type: LayoutRegionType;
 }
 
+// @public
+export function getFactory(key: string): ComponentFactory | undefined;
+
 // @public
 export const LAYOUT_ICONS: {
     readonly renameSVG: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI0NTAiIGhlaWdodD0iNDUwIiB2aWV3Qm94PSIwIDAgNDUwIDQ1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMTguNjEgMCAwIDE4LjYxIDIyMi44MSAyMjIuODEpIiBpZD0iT3V0bGluZSIgID48cGF0aCBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtZGFzaG9mZnNldDogMDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDQ7IGZpbGw6IHJnYigxMTEsMTI2LDEzNSk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiICB0cmFuc2Zvcm09IiB0cmFuc2xhdGUoLTExLjk2LCAtMTIuMDQpIiBkPSJNIDIyLjg1MyAxLjE0OCBhIDMuNjI2IDMuNjI2IDAgMCAwIC01LjEyNCAwIEwgMS40NjUgMTcuNDEyIEEgNC45NjggNC45NjggMCAwIDAgMCAyMC45NDcgViAyMyBhIDEgMSAwIDAgMCAxIDEgSCAzLjA1MyBhIDQuOTY2IDQuOTY2IDAgMCAwIDMuNTM1IC0xLjQ2NCBMIDIyLjg1MyA2LjI3MSBBIDMuNjI2IDMuNjI2IDAgMCAwIDIyLjg1MyAxLjE0OCBaIE0gNS4xNzQgMjEuMTIyIEEgMy4wMjIgMy4wMjIgMCAwIDEgMy4wNTMgMjIgSCAyIFYgMjAuOTQ3IGEgMi45OCAyLjk4IDAgMCAxIDAuODc5IC0yLjEyMSBMIDE1LjIyMiA2LjQ4MyBsIDIuMyAyLjMgWiBNIDIxLjQzOCA0Ljg1NyBMIDE4LjkzMiA3LjM2NCBsIC0yLjMgLTIuMjk1IGwgMi41MDcgLTIuNTA3IGEgMS42MjMgMS42MjMgMCAxIDEgMi4yOTUgMi4zIFoiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz48L2c+PC9zdmc+Cg==";
@@ -215,15 +221,19 @@ export interface RegisteredElementConfig {
     title?: string;
 }
 
+// @public
+export function registerFactory(key: string, factory: ComponentFactory): void;
+
 // Warning: (ae-internal-missing-underscore) The name "RegistrationConfig" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export interface RegistrationConfig {
-    // (undocumented)
-    elements: Element[];
-    // (undocumented)
+export type RegistrationConfig = {
     id?: string;
-}
+} & ({
+    elements: Element[];
+} | {
+    factory: ComponentFactory;
+});
 
 // @public
 export type SerialisedLayout = {
@@ -231,6 +241,9 @@ export type SerialisedLayout = {
     c: ResolvedLayoutConfig;
 };
 
+// @public
+export function unregisterFactory(key: string): boolean;
+
 // (No @packageDocumentation comment for this package)
 
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-layout",
   "description": "Genesis Foundation UI App Layout",
-  "version": "14.368.0",
+  "version": "14.369.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-layout.d.ts",
@@ -36,19 +36,19 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.368.0",
-    "@genesislcap/genx": "14.368.0",
-    "@genesislcap/rollup-builder": "14.368.0",
-    "@genesislcap/ts-builder": "14.368.0",
-    "@genesislcap/uvu-playwright-builder": "14.368.0",
-    "@genesislcap/vite-builder": "14.368.0",
-    "@genesislcap/webpack-builder": "14.368.0"
+    "@genesislcap/foundation-testing": "14.369.0",
+    "@genesislcap/genx": "14.369.0",
+    "@genesislcap/rollup-builder": "14.369.0",
+    "@genesislcap/ts-builder": "14.369.0",
+    "@genesislcap/uvu-playwright-builder": "14.369.0",
+    "@genesislcap/vite-builder": "14.369.0",
+    "@genesislcap/webpack-builder": "14.369.0"
   },
   "dependencies": {
     "@genesis-community/golden-layout": "^2.11.0",
-    "@genesislcap/foundation-comms": "14.368.0",
-    "@genesislcap/foundation-logger": "14.368.0",
-    "@genesislcap/foundation-utils": "14.368.0",
+    "@genesislcap/foundation-comms": "14.369.0",
+    "@genesislcap/foundation-logger": "14.369.0",
+    "@genesislcap/foundation-utils": "14.369.0",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
     "@microsoft/fast-foundation": "2.49.6"
@@ -62,5 +62,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "698eab45797054e3c04d32edb44aecadcbb0095e"
+  "gitHead": "f733a868a4f3e947a51564b5f3fcc592804bd917"
 }