@genesislcap/foundation-layout 14.368.0 → 14.370.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +177 -9
- package/dist/dts/index.d.ts +2 -1
- package/dist/dts/index.d.ts.map +1 -1
- package/dist/dts/main/layout-item.d.ts +20 -0
- package/dist/dts/main/layout-item.d.ts.map +1 -1
- package/dist/dts/main/layout-main.d.ts +40 -8
- package/dist/dts/main/layout-main.d.ts.map +1 -1
- package/dist/dts/styles/constants.d.ts +1 -1
- package/dist/dts/styles/constants.d.ts.map +1 -1
- package/dist/dts/styles/layout.styles.d.ts.map +1 -1
- package/dist/dts/utils/constants.d.ts +2 -0
- package/dist/dts/utils/constants.d.ts.map +1 -1
- package/dist/dts/utils/factory-registry.d.ts +63 -0
- package/dist/dts/utils/factory-registry.d.ts.map +1 -0
- package/dist/dts/utils/index.d.ts +1 -0
- package/dist/dts/utils/index.d.ts.map +1 -1
- package/dist/dts/utils/types.d.ts +44 -3
- package/dist/dts/utils/types.d.ts.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/main/layout-item.js +26 -4
- package/dist/esm/main/layout-main.js +187 -47
- package/dist/esm/styles/constants.js +4 -3
- package/dist/esm/styles/layout.styles.js +15 -10
- package/dist/esm/utils/constants.js +11 -0
- package/dist/esm/utils/factory-registry.js +88 -0
- package/dist/esm/utils/index.js +1 -0
- package/dist/foundation-layout.api.json +206 -9
- package/dist/foundation-layout.d.ts +160 -9
- package/docs/FRAMEWORK_COMPONENTS.md +568 -0
- package/docs/api/foundation-layout.componentfactory.md +46 -0
- package/docs/api/foundation-layout.foundationlayout.md +2 -2
- package/docs/api/foundation-layout.foundationlayout.registeritem.md +31 -7
- package/docs/api/foundation-layout.foundationlayoutitem.md +2 -0
- package/docs/api/foundation-layout.foundationlayoutitem.registration.md +18 -0
- package/docs/api/foundation-layout.getfactory.md +56 -0
- package/docs/api/foundation-layout.md +59 -0
- package/docs/api/foundation-layout.registerfactory.md +94 -0
- package/docs/api/foundation-layout.unregisterfactory.md +63 -0
- package/docs/api-report.md.api.md +22 -7
- package/package.json +13 -12
|
@@ -184,6 +184,41 @@
|
|
|
184
184
|
"name": "",
|
|
185
185
|
"preserveMemberOrder": false,
|
|
186
186
|
"members": [
|
|
187
|
+
{
|
|
188
|
+
"kind": "TypeAlias",
|
|
189
|
+
"canonicalReference": "@genesislcap/foundation-layout!ComponentFactory:type",
|
|
190
|
+
"docComment": "/**\n * Factory function for creating component instances in the layout.\n *\n * @remarks\n *\n * 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).\n *\n * 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.\n *\n * @param container - The HTMLElement container where the component should be rendered\n *\n * @returns Optional cleanup function to be called when the component is removed\n *\n * @example\n *\n * React example:\n * ```typescript\n * layout.registerItem('my-component', (container) => {\n * const root = createRoot(container);\n * root.render(<MyComponent />);\n * return () => root.unmount();\n * });\n * ```\n *\n * @example\n *\n * Angular example:\n * ```typescript\n * layout.registerItem('my-component', (container) => {\n * const componentRef = createComponent(MyComponent, {\n * environmentInjector: this.injector,\n * hostElement: container\n * });\n * return () => componentRef.destroy();\n * });\n * ```\n *\n * @public\n */\n",
|
|
191
|
+
"excerptTokens": [
|
|
192
|
+
{
|
|
193
|
+
"kind": "Content",
|
|
194
|
+
"text": "export type ComponentFactory = "
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"kind": "Content",
|
|
198
|
+
"text": "(container: "
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"kind": "Reference",
|
|
202
|
+
"text": "HTMLElement",
|
|
203
|
+
"canonicalReference": "!HTMLElement:interface"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"kind": "Content",
|
|
207
|
+
"text": ") => void | (() => void)"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "Content",
|
|
211
|
+
"text": ";"
|
|
212
|
+
}
|
|
213
|
+
],
|
|
214
|
+
"fileUrlPath": "src/utils/types.ts",
|
|
215
|
+
"releaseTag": "Public",
|
|
216
|
+
"name": "ComponentFactory",
|
|
217
|
+
"typeTokenRange": {
|
|
218
|
+
"startIndex": 1,
|
|
219
|
+
"endIndex": 4
|
|
220
|
+
}
|
|
221
|
+
},
|
|
187
222
|
{
|
|
188
223
|
"kind": "TypeAlias",
|
|
189
224
|
"canonicalReference": "@genesislcap/foundation-layout!CustomButton:type",
|
|
@@ -871,7 +906,7 @@
|
|
|
871
906
|
{
|
|
872
907
|
"kind": "Method",
|
|
873
908
|
"canonicalReference": "@genesislcap/foundation-layout!FoundationLayout#registerItem:member(1)",
|
|
874
|
-
"docComment": "/**\n * Register a collection of `Element` and associate them with an `ID` with the layout system for later use.\n *\n * @remarks\n *\n * You
|
|
909
|
+
"docComment": "/**\n * Register a collection of `Element` or a factory function and associate them with an `ID` with the layout system for later use.\n *\n * @remarks\n *\n * You can register either an array of elements or a factory function.\n *\n * **Element registration**: 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)`.\n *\n * **Factory registration**: 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 will be called each time a new instance of the component is needed. It 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.\n *\n * @param registration - string of the registration ID\n *\n * @param elementsOrFactory - Either Elements[] containing the reference to the elements to register, or a ComponentFactory function\n *\n * @returns - string defining the name of the registered item with the layout system (config.id if set).\n *\n * @throws\n *\n * {@link LayoutUsageError} if you attempt to add an item before the layout has been initialised.\n *\n * @throws\n *\n * {@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).\n *\n * @example\n *\n * Element registration:\n * ```typescript\n * const div = document.createElement('div');\n * div.innerHTML = '<h1>Hello</h1>';\n * layout.registerItem('my-element', [div]);\n * ```\n *\n * @example\n *\n * Factory registration (React):\n * ```typescript\n * layout.registerItem('text-field', (container) => {\n * const root = createRoot(container);\n * root.render(<TextFieldComponent />);\n * return () => root.unmount();\n * });\n * ```\n *\n * @public\n */\n",
|
|
875
910
|
"excerptTokens": [
|
|
876
911
|
{
|
|
877
912
|
"kind": "Content",
|
|
@@ -883,7 +918,7 @@
|
|
|
883
918
|
},
|
|
884
919
|
{
|
|
885
920
|
"kind": "Content",
|
|
886
|
-
"text": ",
|
|
921
|
+
"text": ", elementsOrFactory: "
|
|
887
922
|
},
|
|
888
923
|
{
|
|
889
924
|
"kind": "Reference",
|
|
@@ -892,7 +927,12 @@
|
|
|
892
927
|
},
|
|
893
928
|
{
|
|
894
929
|
"kind": "Content",
|
|
895
|
-
"text": "[]"
|
|
930
|
+
"text": "[] | "
|
|
931
|
+
},
|
|
932
|
+
{
|
|
933
|
+
"kind": "Reference",
|
|
934
|
+
"text": "ComponentFactory",
|
|
935
|
+
"canonicalReference": "@genesislcap/foundation-layout!ComponentFactory:type"
|
|
896
936
|
},
|
|
897
937
|
{
|
|
898
938
|
"kind": "Content",
|
|
@@ -909,8 +949,8 @@
|
|
|
909
949
|
],
|
|
910
950
|
"isStatic": false,
|
|
911
951
|
"returnTypeTokenRange": {
|
|
912
|
-
"startIndex":
|
|
913
|
-
"endIndex":
|
|
952
|
+
"startIndex": 7,
|
|
953
|
+
"endIndex": 8
|
|
914
954
|
},
|
|
915
955
|
"releaseTag": "Public",
|
|
916
956
|
"isProtected": false,
|
|
@@ -925,10 +965,10 @@
|
|
|
925
965
|
"isOptional": false
|
|
926
966
|
},
|
|
927
967
|
{
|
|
928
|
-
"parameterName": "
|
|
968
|
+
"parameterName": "elementsOrFactory",
|
|
929
969
|
"parameterTypeTokenRange": {
|
|
930
970
|
"startIndex": 3,
|
|
931
|
-
"endIndex":
|
|
971
|
+
"endIndex": 6
|
|
932
972
|
},
|
|
933
973
|
"isOptional": false
|
|
934
974
|
}
|
|
@@ -1311,7 +1351,7 @@
|
|
|
1311
1351
|
{
|
|
1312
1352
|
"kind": "Class",
|
|
1313
1353
|
"canonicalReference": "@genesislcap/foundation-layout!FoundationLayoutItem:class",
|
|
1314
|
-
"docComment": "/**\n * `FoundationLayoutItem` is a custom element that represents an item in the layout.\n *\n * @remarks\n *\n * This element is used to wrap html elements and configure their layout settings as part of the layout system.\n *\n * 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}.\n *\n * @tagname\n *\n * %%prefix%%-layout-item\n *\n * @public\n */\n",
|
|
1354
|
+
"docComment": "/**\n * `FoundationLayoutItem` is a custom element that represents an item in the layout.\n *\n * @remarks\n *\n * This element is used to wrap html elements and configure their layout settings as part of the layout system.\n *\n * 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}.\n *\n * The item can either use slotted content or a factory function registered via {@link registerFactory}. When a factory is registered with the same name as the registration attribute, it takes precedence over slotted content.\n *\n * @tagname\n *\n * %%prefix%%-layout-item\n *\n * @public\n */\n",
|
|
1315
1355
|
"excerptTokens": [
|
|
1316
1356
|
{
|
|
1317
1357
|
"kind": "Content",
|
|
@@ -1375,7 +1415,7 @@
|
|
|
1375
1415
|
{
|
|
1376
1416
|
"kind": "Property",
|
|
1377
1417
|
"canonicalReference": "@genesislcap/foundation-layout!FoundationLayoutItem#registration:member",
|
|
1378
|
-
"docComment": "/**\n * Sets the registration name for the item, which can be used later to add the item via the JavaScript API using {@link FoundationLayout.addItem}.\n *\n * @remarks\n *\n * 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.\n *\n * @public\n */\n",
|
|
1418
|
+
"docComment": "/**\n * Sets the registration name for the item, which can be used later to add the item via the JavaScript API using {@link FoundationLayout.addItem}.\n *\n * @remarks\n *\n * 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.\n *\n * When using the declarative API with framework components, register a factory function via {@link registerFactory} using the same name as this registration attribute.\n *\n * @example\n * ```typescript\n * import { registerFactory } from '@genesislcap/foundation-layout';\n * import { reactFactory } from './utils/react-layout-factory';\n *\n * // Register factory with the same name as the registration\n * registerFactory('my-component', reactFactory(MyComponent));\n * ```\n *\n * Then in JSX/HTML:\n * ```tsx\n * <rapid-layout-item registration=\"my-component\" title=\"My Component\" />\n * ```\n *\n * @public\n */\n",
|
|
1379
1419
|
"excerptTokens": [
|
|
1380
1420
|
{
|
|
1381
1421
|
"kind": "Content",
|
|
@@ -1581,6 +1621,56 @@
|
|
|
1581
1621
|
}
|
|
1582
1622
|
]
|
|
1583
1623
|
},
|
|
1624
|
+
{
|
|
1625
|
+
"kind": "Function",
|
|
1626
|
+
"canonicalReference": "@genesislcap/foundation-layout!getFactory:function(1)",
|
|
1627
|
+
"docComment": "/**\n * Retrieves a factory function by its key.\n *\n * @param key - The unique identifier for the factory.\n *\n * @returns The factory function, or undefined if not found.\n *\n * @public\n */\n",
|
|
1628
|
+
"excerptTokens": [
|
|
1629
|
+
{
|
|
1630
|
+
"kind": "Content",
|
|
1631
|
+
"text": "export declare function getFactory(key: "
|
|
1632
|
+
},
|
|
1633
|
+
{
|
|
1634
|
+
"kind": "Content",
|
|
1635
|
+
"text": "string"
|
|
1636
|
+
},
|
|
1637
|
+
{
|
|
1638
|
+
"kind": "Content",
|
|
1639
|
+
"text": "): "
|
|
1640
|
+
},
|
|
1641
|
+
{
|
|
1642
|
+
"kind": "Reference",
|
|
1643
|
+
"text": "ComponentFactory",
|
|
1644
|
+
"canonicalReference": "@genesislcap/foundation-layout!ComponentFactory:type"
|
|
1645
|
+
},
|
|
1646
|
+
{
|
|
1647
|
+
"kind": "Content",
|
|
1648
|
+
"text": " | undefined"
|
|
1649
|
+
},
|
|
1650
|
+
{
|
|
1651
|
+
"kind": "Content",
|
|
1652
|
+
"text": ";"
|
|
1653
|
+
}
|
|
1654
|
+
],
|
|
1655
|
+
"fileUrlPath": "src/utils/factory-registry.ts",
|
|
1656
|
+
"returnTypeTokenRange": {
|
|
1657
|
+
"startIndex": 3,
|
|
1658
|
+
"endIndex": 5
|
|
1659
|
+
},
|
|
1660
|
+
"releaseTag": "Public",
|
|
1661
|
+
"overloadIndex": 1,
|
|
1662
|
+
"parameters": [
|
|
1663
|
+
{
|
|
1664
|
+
"parameterName": "key",
|
|
1665
|
+
"parameterTypeTokenRange": {
|
|
1666
|
+
"startIndex": 1,
|
|
1667
|
+
"endIndex": 2
|
|
1668
|
+
},
|
|
1669
|
+
"isOptional": false
|
|
1670
|
+
}
|
|
1671
|
+
],
|
|
1672
|
+
"name": "getFactory"
|
|
1673
|
+
},
|
|
1584
1674
|
{
|
|
1585
1675
|
"kind": "Variable",
|
|
1586
1676
|
"canonicalReference": "@genesislcap/foundation-layout!LAYOUT_ICONS:var",
|
|
@@ -2227,6 +2317,68 @@
|
|
|
2227
2317
|
],
|
|
2228
2318
|
"extendsTokenRanges": []
|
|
2229
2319
|
},
|
|
2320
|
+
{
|
|
2321
|
+
"kind": "Function",
|
|
2322
|
+
"canonicalReference": "@genesislcap/foundation-layout!registerFactory:function(1)",
|
|
2323
|
+
"docComment": "/**\n * 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.\n *\n * @param key - Unique identifier for the factory. Should be descriptive and unique across the application.\n *\n * @param factory - The factory function that creates the component.\n *\n * @throws\n *\n * {Error} If a factory with the same key is already registered.\n *\n * @example\n * ```typescript\n * // React example\n * import { registerFactory } from '@genesislcap/foundation-layout';\n * import { reactFactory } from './utils/react-layout-factory';\n * import { MyComponent } from './components/MyComponent';\n *\n * registerFactory('my-component', reactFactory(MyComponent, { someProp: 'value' }));\n * ```\n *\n * Then in your JSX:\n * ```tsx\n * <rapid-layout-item\n * registration=\"my-item\"\n * title=\"My Component\"\n * />\n * ```\n *\n * @public\n */\n",
|
|
2324
|
+
"excerptTokens": [
|
|
2325
|
+
{
|
|
2326
|
+
"kind": "Content",
|
|
2327
|
+
"text": "export declare function registerFactory(key: "
|
|
2328
|
+
},
|
|
2329
|
+
{
|
|
2330
|
+
"kind": "Content",
|
|
2331
|
+
"text": "string"
|
|
2332
|
+
},
|
|
2333
|
+
{
|
|
2334
|
+
"kind": "Content",
|
|
2335
|
+
"text": ", factory: "
|
|
2336
|
+
},
|
|
2337
|
+
{
|
|
2338
|
+
"kind": "Reference",
|
|
2339
|
+
"text": "ComponentFactory",
|
|
2340
|
+
"canonicalReference": "@genesislcap/foundation-layout!ComponentFactory:type"
|
|
2341
|
+
},
|
|
2342
|
+
{
|
|
2343
|
+
"kind": "Content",
|
|
2344
|
+
"text": "): "
|
|
2345
|
+
},
|
|
2346
|
+
{
|
|
2347
|
+
"kind": "Content",
|
|
2348
|
+
"text": "void"
|
|
2349
|
+
},
|
|
2350
|
+
{
|
|
2351
|
+
"kind": "Content",
|
|
2352
|
+
"text": ";"
|
|
2353
|
+
}
|
|
2354
|
+
],
|
|
2355
|
+
"fileUrlPath": "src/utils/factory-registry.ts",
|
|
2356
|
+
"returnTypeTokenRange": {
|
|
2357
|
+
"startIndex": 5,
|
|
2358
|
+
"endIndex": 6
|
|
2359
|
+
},
|
|
2360
|
+
"releaseTag": "Public",
|
|
2361
|
+
"overloadIndex": 1,
|
|
2362
|
+
"parameters": [
|
|
2363
|
+
{
|
|
2364
|
+
"parameterName": "key",
|
|
2365
|
+
"parameterTypeTokenRange": {
|
|
2366
|
+
"startIndex": 1,
|
|
2367
|
+
"endIndex": 2
|
|
2368
|
+
},
|
|
2369
|
+
"isOptional": false
|
|
2370
|
+
},
|
|
2371
|
+
{
|
|
2372
|
+
"parameterName": "factory",
|
|
2373
|
+
"parameterTypeTokenRange": {
|
|
2374
|
+
"startIndex": 3,
|
|
2375
|
+
"endIndex": 4
|
|
2376
|
+
},
|
|
2377
|
+
"isOptional": false
|
|
2378
|
+
}
|
|
2379
|
+
],
|
|
2380
|
+
"name": "registerFactory"
|
|
2381
|
+
},
|
|
2230
2382
|
{
|
|
2231
2383
|
"kind": "TypeAlias",
|
|
2232
2384
|
"canonicalReference": "@genesislcap/foundation-layout!SerialisedLayout:type",
|
|
@@ -2261,6 +2413,51 @@
|
|
|
2261
2413
|
"startIndex": 1,
|
|
2262
2414
|
"endIndex": 4
|
|
2263
2415
|
}
|
|
2416
|
+
},
|
|
2417
|
+
{
|
|
2418
|
+
"kind": "Function",
|
|
2419
|
+
"canonicalReference": "@genesislcap/foundation-layout!unregisterFactory:function(1)",
|
|
2420
|
+
"docComment": "/**\n * Removes a factory from the registry. This is useful for cleanup when a component is unmounted or no longer needed.\n *\n * @param key - The unique identifier for the factory to remove.\n *\n * @returns True if the factory was found and removed, false otherwise.\n *\n * @example\n * ```typescript\n * unregisterFactory('my-component');\n * ```\n *\n * @public\n */\n",
|
|
2421
|
+
"excerptTokens": [
|
|
2422
|
+
{
|
|
2423
|
+
"kind": "Content",
|
|
2424
|
+
"text": "export declare function unregisterFactory(key: "
|
|
2425
|
+
},
|
|
2426
|
+
{
|
|
2427
|
+
"kind": "Content",
|
|
2428
|
+
"text": "string"
|
|
2429
|
+
},
|
|
2430
|
+
{
|
|
2431
|
+
"kind": "Content",
|
|
2432
|
+
"text": "): "
|
|
2433
|
+
},
|
|
2434
|
+
{
|
|
2435
|
+
"kind": "Content",
|
|
2436
|
+
"text": "boolean"
|
|
2437
|
+
},
|
|
2438
|
+
{
|
|
2439
|
+
"kind": "Content",
|
|
2440
|
+
"text": ";"
|
|
2441
|
+
}
|
|
2442
|
+
],
|
|
2443
|
+
"fileUrlPath": "src/utils/factory-registry.ts",
|
|
2444
|
+
"returnTypeTokenRange": {
|
|
2445
|
+
"startIndex": 3,
|
|
2446
|
+
"endIndex": 4
|
|
2447
|
+
},
|
|
2448
|
+
"releaseTag": "Public",
|
|
2449
|
+
"overloadIndex": 1,
|
|
2450
|
+
"parameters": [
|
|
2451
|
+
{
|
|
2452
|
+
"parameterName": "key",
|
|
2453
|
+
"parameterTypeTokenRange": {
|
|
2454
|
+
"startIndex": 1,
|
|
2455
|
+
"endIndex": 2
|
|
2456
|
+
},
|
|
2457
|
+
"isOptional": false
|
|
2458
|
+
}
|
|
2459
|
+
],
|
|
2460
|
+
"name": "unregisterFactory"
|
|
2264
2461
|
}
|
|
2265
2462
|
]
|
|
2266
2463
|
}
|
|
@@ -8,6 +8,45 @@ import { ResolvedLayoutConfig } from '@genesis-community/golden-layout';
|
|
|
8
8
|
import { RootItemConfig } from '@genesis-community/golden-layout';
|
|
9
9
|
import { ViewTemplate } from '@microsoft/fast-element';
|
|
10
10
|
|
|
11
|
+
/**
|
|
12
|
+
* @public
|
|
13
|
+
* Factory function for creating component instances in the layout.
|
|
14
|
+
* @remarks
|
|
15
|
+
* This is the recommended approach for framework-rendered components (React, Angular, Vue, etc.)
|
|
16
|
+
* because it allows each layout instance to create a fresh component rather than cloning existing
|
|
17
|
+
* DOM elements (which loses event listeners and framework bindings).
|
|
18
|
+
*
|
|
19
|
+
* The factory function receives a container element and should render the component into it.
|
|
20
|
+
* Optionally, it can return a cleanup function that will be called when the component is removed
|
|
21
|
+
* from the layout.
|
|
22
|
+
*
|
|
23
|
+
* @param container - The HTMLElement container where the component should be rendered
|
|
24
|
+
* @returns Optional cleanup function to be called when the component is removed
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* React example:
|
|
28
|
+
* ```typescript
|
|
29
|
+
* layout.registerItem('my-component', (container) => {
|
|
30
|
+
* const root = createRoot(container);
|
|
31
|
+
* root.render(<MyComponent />);
|
|
32
|
+
* return () => root.unmount();
|
|
33
|
+
* });
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* Angular example:
|
|
38
|
+
* ```typescript
|
|
39
|
+
* layout.registerItem('my-component', (container) => {
|
|
40
|
+
* const componentRef = createComponent(MyComponent, {
|
|
41
|
+
* environmentInjector: this.injector,
|
|
42
|
+
* hostElement: container
|
|
43
|
+
* });
|
|
44
|
+
* return () => componentRef.destroy();
|
|
45
|
+
* });
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export declare type ComponentFactory = (container: HTMLElement) => void | (() => void);
|
|
49
|
+
|
|
11
50
|
/**
|
|
12
51
|
* Used to key what type of LayoutComponent an object is
|
|
13
52
|
* @internal
|
|
@@ -162,6 +201,10 @@ export declare class FoundationLayout extends FoundationElement implements Layou
|
|
|
162
201
|
private onPreItemMaximised;
|
|
163
202
|
/** @internal */
|
|
164
203
|
private onPreItemMinimised;
|
|
204
|
+
/** @internal */
|
|
205
|
+
private customTokensMap;
|
|
206
|
+
/** @internal */
|
|
207
|
+
customTokensMapChanged(): void;
|
|
165
208
|
/**
|
|
166
209
|
* JS API, public
|
|
167
210
|
*/
|
|
@@ -276,21 +319,48 @@ export declare class FoundationLayout extends FoundationElement implements Layou
|
|
|
276
319
|
removeItems(registration: string, force?: boolean): number;
|
|
277
320
|
/**
|
|
278
321
|
* @public
|
|
279
|
-
* Register a collection of `Element` and associate them with an `ID` with the layout system for later use.
|
|
322
|
+
* Register a collection of `Element` or a factory function and associate them with an `ID` with the layout system for later use.
|
|
280
323
|
* @remarks
|
|
281
|
-
* You
|
|
324
|
+
* You can register either an array of elements or a factory function.
|
|
325
|
+
*
|
|
326
|
+
* **Element registration**: Use this to register elements that you later want to load when using {@link FoundationLayout.loadLayout}.
|
|
282
327
|
* Use {@link FoundationLayout.layoutRequiredRegistrations} to see what components need to be registered for a certain config
|
|
283
328
|
* and then register them using this function before calling {@link FoundationLayout.loadLayout}.
|
|
329
|
+
* 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.
|
|
330
|
+
* If you want to avoid this you can pass copies using `element.cloneNode(true)`.
|
|
284
331
|
*
|
|
285
|
-
*
|
|
332
|
+
* **Factory registration**: This is the recommended approach for framework-rendered components (React, Angular, Vue, etc.)
|
|
333
|
+
* because it allows each layout instance to create a fresh component rather than cloning existing
|
|
334
|
+
* DOM elements (which loses event listeners and framework bindings).
|
|
335
|
+
* The factory function will be called each time a new instance of the component is needed. It receives
|
|
336
|
+
* a container element and should render the component into it. Optionally, it can return a cleanup
|
|
337
|
+
* function that will be called when the component is removed from the layout.
|
|
286
338
|
*
|
|
287
339
|
* @param registration - string of the registration ID
|
|
288
|
-
* @param
|
|
340
|
+
* @param elementsOrFactory - Either Elements[] containing the reference to the elements to register, or a ComponentFactory function
|
|
289
341
|
* @throws {@link LayoutUsageError} if you attempt to add an item before the layout has been initialised.
|
|
290
342
|
* @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).
|
|
291
343
|
* @returns - string defining the name of the registered item with the layout system (config.id if set).
|
|
344
|
+
*
|
|
345
|
+
* @example
|
|
346
|
+
* Element registration:
|
|
347
|
+
* ```typescript
|
|
348
|
+
* const div = document.createElement('div');
|
|
349
|
+
* div.innerHTML = '<h1>Hello</h1>';
|
|
350
|
+
* layout.registerItem('my-element', [div]);
|
|
351
|
+
* ```
|
|
352
|
+
*
|
|
353
|
+
* @example
|
|
354
|
+
* Factory registration (React):
|
|
355
|
+
* ```typescript
|
|
356
|
+
* layout.registerItem('text-field', (container) => {
|
|
357
|
+
* const root = createRoot(container);
|
|
358
|
+
* root.render(<TextFieldComponent />);
|
|
359
|
+
* return () => root.unmount();
|
|
360
|
+
* });
|
|
361
|
+
* ```
|
|
292
362
|
*/
|
|
293
|
-
registerItem(registration: string,
|
|
363
|
+
registerItem(registration: string, elementsOrFactory: Element[] | ComponentFactory): string;
|
|
294
364
|
/**
|
|
295
365
|
* Internal APIs
|
|
296
366
|
*/
|
|
@@ -319,12 +389,13 @@ export declare class FoundationLayout extends FoundationElement implements Layou
|
|
|
319
389
|
/**
|
|
320
390
|
* Registers a function with golden layout to create a pane
|
|
321
391
|
* @param elements - Elements[] to add to new new pane
|
|
392
|
+
* @param factory - ComponentFactory function to create component instances
|
|
322
393
|
* @param id - optional string which is used to register the new function with golden layout. Defaults to sequentially setting the IDs for default items
|
|
323
394
|
* @returns - string which is the registered ID
|
|
324
395
|
* @throws - {@link LayoutRegistrationError} if the id is already in use
|
|
325
396
|
* @internal
|
|
326
397
|
*/
|
|
327
|
-
cacheElementsAndRegister(
|
|
398
|
+
cacheElementsAndRegister(config: RegistrationConfig): string;
|
|
328
399
|
/**
|
|
329
400
|
* Sets up the event listeners for the layout receive events
|
|
330
401
|
* @internal
|
|
@@ -443,6 +514,9 @@ export declare class FoundationLayout extends FoundationElement implements Layou
|
|
|
443
514
|
* This element is used to wrap html elements and configure their layout settings as part of the layout system.
|
|
444
515
|
*
|
|
445
516
|
* 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}.
|
|
517
|
+
*
|
|
518
|
+
* The item can either use slotted content or a factory function registered via {@link registerFactory}.
|
|
519
|
+
* When a factory is registered with the same name as the registration attribute, it takes precedence over slotted content.
|
|
446
520
|
* @tagname %%prefix%%-layout-item
|
|
447
521
|
*/
|
|
448
522
|
export declare class FoundationLayoutItem extends FoundationElement implements LayoutComponent {
|
|
@@ -471,6 +545,23 @@ export declare class FoundationLayout extends FoundationElement implements Layou
|
|
|
471
545
|
* Using a duplicate registration name is a runtime error.
|
|
472
546
|
* This registration name defaults to the number of the window it is.
|
|
473
547
|
* It is highly recommended if you are using the JavaScript API that you set a registration name here manually.
|
|
548
|
+
*
|
|
549
|
+
* When using the declarative API with framework components, register a factory function via {@link registerFactory}
|
|
550
|
+
* using the same name as this registration attribute.
|
|
551
|
+
*
|
|
552
|
+
* @example
|
|
553
|
+
* ```typescript
|
|
554
|
+
* import { registerFactory } from '@genesislcap/foundation-layout';
|
|
555
|
+
* import { reactFactory } from './utils/react-layout-factory';
|
|
556
|
+
*
|
|
557
|
+
* // Register factory with the same name as the registration
|
|
558
|
+
* registerFactory('my-component', reactFactory(MyComponent));
|
|
559
|
+
* ```
|
|
560
|
+
*
|
|
561
|
+
* Then in JSX/HTML:
|
|
562
|
+
* ```tsx
|
|
563
|
+
* <rapid-layout-item registration="my-component" title="My Component" />
|
|
564
|
+
* ```
|
|
474
565
|
* @public
|
|
475
566
|
*/
|
|
476
567
|
registration: string;
|
|
@@ -539,6 +630,16 @@ export declare class FoundationLayout extends FoundationElement implements Layou
|
|
|
539
630
|
cacheElementsAndRegister(config: RegistrationConfig): string;
|
|
540
631
|
}
|
|
541
632
|
|
|
633
|
+
/**
|
|
634
|
+
* Retrieves a factory function by its key.
|
|
635
|
+
*
|
|
636
|
+
* @param key - The unique identifier for the factory.
|
|
637
|
+
* @returns The factory function, or undefined if not found.
|
|
638
|
+
*
|
|
639
|
+
* @public
|
|
640
|
+
*/
|
|
641
|
+
export declare function getFactory(key: string): ComponentFactory | undefined;
|
|
642
|
+
|
|
542
643
|
/**
|
|
543
644
|
* A collection of SVG icons in base64 format.
|
|
544
645
|
* @remarks
|
|
@@ -764,11 +865,45 @@ export declare class FoundationLayout extends FoundationElement implements Layou
|
|
|
764
865
|
showMaximiseButton?: boolean;
|
|
765
866
|
}
|
|
766
867
|
|
|
868
|
+
/**
|
|
869
|
+
* Registers a factory function with a unique key.
|
|
870
|
+
* This allows framework components to be used in the declarative layout API
|
|
871
|
+
* without needing to pass function references through HTML attributes.
|
|
872
|
+
*
|
|
873
|
+
* @param key - Unique identifier for the factory. Should be descriptive and unique across the application.
|
|
874
|
+
* @param factory - The factory function that creates the component.
|
|
875
|
+
* @throws {Error} If a factory with the same key is already registered.
|
|
876
|
+
*
|
|
877
|
+
* @example
|
|
878
|
+
* ```typescript
|
|
879
|
+
* // React example
|
|
880
|
+
* import { registerFactory } from '@genesislcap/foundation-layout';
|
|
881
|
+
* import { reactFactory } from './utils/react-layout-factory';
|
|
882
|
+
* import { MyComponent } from './components/MyComponent';
|
|
883
|
+
*
|
|
884
|
+
* registerFactory('my-component', reactFactory(MyComponent, { someProp: 'value' }));
|
|
885
|
+
* ```
|
|
886
|
+
*
|
|
887
|
+
* Then in your JSX:
|
|
888
|
+
* ```tsx
|
|
889
|
+
* <rapid-layout-item
|
|
890
|
+
* registration="my-item"
|
|
891
|
+
* title="My Component"
|
|
892
|
+
* />
|
|
893
|
+
* ```
|
|
894
|
+
*
|
|
895
|
+
* @public
|
|
896
|
+
*/
|
|
897
|
+
export declare function registerFactory(key: string, factory: ComponentFactory): void;
|
|
898
|
+
|
|
767
899
|
/** @internal */
|
|
768
|
-
export declare
|
|
769
|
-
elements: Element[];
|
|
900
|
+
export declare type RegistrationConfig = {
|
|
770
901
|
id?: string;
|
|
771
|
-
}
|
|
902
|
+
} & ({
|
|
903
|
+
elements: Element[];
|
|
904
|
+
} | {
|
|
905
|
+
factory: ComponentFactory;
|
|
906
|
+
});
|
|
772
907
|
|
|
773
908
|
/**
|
|
774
909
|
* @public
|
|
@@ -786,4 +921,20 @@ export declare class FoundationLayout extends FoundationElement implements Layou
|
|
|
786
921
|
c: ResolvedLayoutConfig;
|
|
787
922
|
};
|
|
788
923
|
|
|
924
|
+
/**
|
|
925
|
+
* Removes a factory from the registry.
|
|
926
|
+
* This is useful for cleanup when a component is unmounted or no longer needed.
|
|
927
|
+
*
|
|
928
|
+
* @param key - The unique identifier for the factory to remove.
|
|
929
|
+
* @returns True if the factory was found and removed, false otherwise.
|
|
930
|
+
*
|
|
931
|
+
* @example
|
|
932
|
+
* ```typescript
|
|
933
|
+
* unregisterFactory('my-component');
|
|
934
|
+
* ```
|
|
935
|
+
*
|
|
936
|
+
* @public
|
|
937
|
+
*/
|
|
938
|
+
export declare function unregisterFactory(key: string): boolean;
|
|
939
|
+
|
|
789
940
|
export { }
|