@genesislcap/foundation-layout 14.59.0 → 14.60.0

package/README.md

@@ -168,7 +168,7 @@ This API enables you to register an item at runtime, but it will not be displaye
 
 #### [Add Item](./docs/api/foundation-layout.foundationlayout.additem.md)
 
-Add an item that has previously been registered with the layout.
+Add an item or items that have previously been registered with the layout.
 
 #### [Layout Required Registrations](./docs/api/foundation-layout.foundationlayout.layoutrequiredregistrations.md)
 
@@ -846,6 +846,39 @@ The following example is invalid:
 ```
 This is because you cannot have multiple layout elements as the immediate child of the layout root. You will get a runtime error.
 
+### Multiple nested layouts
+
+The following example is invalid:
+
+```html
+<foundation-layout>
+		<foundation-layout-item title="Component 1">
+      <another-component></another-component>
+		</foundation-layout-item>
+		<foundation-layout-item title="Component 2">
+			<!-- Content -->
+		</foundation-layout-item>
+</foundation-layout>
+```
+Where the markup of `another-component` is something like:
+```html
+<!--other markup-->
+<foundation-layout>
+		<foundation-layout-item title="Component 1">
+			<!-- Content -->
+		</foundation-layout-item>
+		<foundation-layout-item title="Component 2">
+			<!-- Content -->
+		</foundation-layout-item>
+		<foundation-layout-item title="Component 3">
+			<!-- Content -->
+		</foundation-layout-item>
+</foundation-layout>
+<!--other markup-->
+```
+
+This is because you cannot have an instance of the layout nested inside of another layout instance. You could try adding multiple items at once using `.addItem([elem1,..,elemN])` instead.
+
 ### Nested item
 
 The following example is invalid:

package/dist/custom-elements.json

@@ -461,17 +461,17 @@
                 {
                   "name": "config",
                   "type": {
-                    "text": "RegisteredElementConfig"
+                    "text": "RegisteredElementConfig | RegisteredElementConfig[]"
                   },
-                  "description": "{@link RegisteredElementConfig}configuration items for the new pane\n   * "
+                  "description": "{@link RegisteredElementConfig}configuration items for the new items(s). Pass an array of {@link RegisteredElementConfig}to add multiple items at once.\n   * "
                 },
                 {
                   "name": "placement",
-                  "default": "{ area: 'right' }",
+                  "default": "defaultAddItemPlacement",
                   "type": {
                     "text": "Placement"
                   },
-                  "description": "where to add the new pane on the layout (defaults to the right hand side)"
+                  "description": "where and how to add the new items to the layout. For more info and defaults see {@link Placement}.\n   * "
                 }
               ],
               "privacy": "public"

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

@@ -139,15 +139,15 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * @public
      * Dynamically add a new item to the layout. The user can move the new plane to whenever they want once it has been added.
      * @remarks
-     * Adding a new item invokes the registration previously made explicitly via {@link FoundationLayout.registerItem | registerItem()} or implicitly via the html declerative API.
+     * 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 pane
-     * @param placement - where to add the new pane on the layout (defaults to the right hand side)
+     * @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, placement?: Placement): void;
+    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.

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

@@ -1 +1 @@
-{"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"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"}

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

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

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

@@ -1,4 +1,5 @@
 import { FoundationLayout, FoundationLayoutRegion } from '../main';
+import { LayoutRegionType } from './types';
 /**
  * Returns an array of values of the array a which are missing in b
  * An empty array is returned if every value of a is in b
@@ -7,4 +8,8 @@ import { FoundationLayout, FoundationLayoutRegion } from '../main';
 export declare function getMissingArrayItems<T>(a: T[], b: T[]): T[];
 /** @internal */
 export declare function getParentLayoutComponent(): FoundationLayout | FoundationLayoutRegion;
+/** @internal */
+export type GoldenLayoutRegions = 'row' | 'column' | 'stack';
+/** @internal */
+export declare const regionConveter: (x: LayoutRegionType) => GoldenLayoutRegions;
 //# sourceMappingURL=misc.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/utils/misc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAInE;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAE3D;AAED,gBAAgB;AAChB,wBAAgB,wBAAwB,IAAI,gBAAgB,GAAG,sBAAsB,CAYpF"}
+{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/utils/misc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAE3D;AAED,gBAAgB;AAChB,wBAAgB,wBAAwB,IAAI,gBAAgB,GAAG,sBAAsB,CAYpF;AAED,gBAAgB;AAChB,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC7D,gBAAgB;AAChB,eAAO,MAAM,cAAc,MAAO,gBAAgB,KAAG,mBAOpD,CAAC"}

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

@@ -34,10 +34,20 @@ export interface RegisteredElementConfig {
 }
 /**
  * @public
- * Where to add the new item into the layout when using the {@link FoundationLayout.addItem} API
+ * 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 type Placement = {
     area: 'top' | 'left' | 'bottom' | 'right';
+    multiple?: {
+        type: LayoutRegionType;
+        size?: string;
+    };
 };
 /** @internal */
 export interface RegistrationConfig {

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC3C,CAAC;AAEF,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAC7E;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC;IAChC,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAAC;IAC7D,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED,gBAAgB;AAChB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,oBAAoB,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,gBAAgB,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,6CAA8C,CAAC;AAC7E;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,gBAAgB;AAChB,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhE,gBAAgB;AAChB,MAAM,WAAW,eAAe;IAC9B,CAAC,aAAa,CAAC,EAAE,cAAc,CAAC;IAChC,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM,CAAC;IAC7D,mBAAmB,IAAI,IAAI,CAAC;CAC7B;AAED,gBAAgB;AAChB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB,CAAC"}

package/dist/esm/main/layout-main.js

@@ -6,7 +6,7 @@ import { layoutCacheDocument, UUID } from '@genesislcap/foundation-utils';
 import { html, attr, observable, when, ref } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { globalDraggingStyles, glVisualConfig, layoutStyles } from '../styles';
-import { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, componentType, AUTOSAVE_KEY, } from '../utils/';
+import { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, componentType, AUTOSAVE_KEY, regionConveter, } from '../utils/';
 import { getMissingArrayItems } from '../utils/';
 import { LayoutRegistrationError, LayoutUsageError } from '../utils/error';
 import { logger } from '../utils/logger';
@@ -17,6 +17,13 @@ export { layoutStyles } from '../styles';
  * layout that requires it
  */
 let appliedGlobalStyles = false;
+const defaultAddItemPlacement = {
+    area: 'right',
+    multiple: {
+        type: 'tabs',
+        size: '33%',
+    },
+};
 /**
  * @public
  * Top level web component which is used to initialise a custom layout
@@ -220,26 +227,36 @@ export class FoundationLayout extends FoundationElement {
      * @public
      * Dynamically add a new item to the layout. The user can move the new plane to whenever they want once it has been added.
      * @remarks
-     * Adding a new item invokes the registration previously made explicitly via {@link FoundationLayout.registerItem | registerItem()} or implicitly via the html declerative API.
+     * 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 pane
-     * @param placement - where to add the new pane on the layout (defaults to the right hand side)
+     * @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, placement = { area: 'right' }) {
-        const { registration, title, size, closable } = config;
-        if (!this.layout.getRegisteredComponentTypeNames().includes(registration)) {
-            throw new LayoutRegistrationError(`Cannot add item '${registration}' which is not registered with the layout system.`);
-        }
+    addItem(config, placement = defaultAddItemPlacement) {
+        var _b, _c;
+        const configArray = Array.isArray(config) ? config : [config];
+        const isSingleItem = configArray.length === 1;
+        const childItems = configArray.map((regConfig) => {
+            const { registration, title, size, closable } = regConfig;
+            if (!this.layout.getRegisteredComponentTypeNames().includes(registration)) {
+                throw new LayoutRegistrationError(`Cannot add item '${registration}' which is not registered with the layout system.`);
+            }
+            return {
+                type: 'component',
+                componentType: registration,
+                title: title !== null && title !== void 0 ? title : `Item ${registration}`,
+                reorderEnabled: true,
+                isClosable: closable || false,
+                size: !isSingleItem ? size : undefined,
+            };
+        });
         const itemConfig = {
-            type: 'component',
-            componentType: registration,
-            title: title !== null && title !== void 0 ? title : `Item ${registration}`,
-            reorderEnabled: true,
-            isClosable: closable || false,
-            size,
+            type: regionConveter(((_b = placement === null || placement === void 0 ? void 0 : placement.multiple) === null || _b === void 0 ? void 0 : _b.type) || 'tabs'),
+            content: childItems,
+            size: isSingleItem ? config[0].size : (_c = placement === null || placement === void 0 ? void 0 : placement.multiple) === null || _c === void 0 ? void 0 : _c.size,
         };
         /**
          * If no root is added (no items via declerative API) then

package/dist/esm/main/layout-region.js

@@ -2,17 +2,9 @@ var _a;
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { componentType, getParentLayoutComponent, layoutRegionValue, wrapperTemplate, } from '../utils';
+import { componentType, getParentLayoutComponent, layoutRegionValue, regionConveter, wrapperTemplate, } from '../utils';
 import { logger } from '../utils/logger';
 const defaultLayoutType = layoutRegionValue[0];
-const regionConveter = (x) => {
-    const t = {
-        horizontal: 'column',
-        vertical: 'row',
-        tabs: 'stack',
-    };
-    return t[x];
-};
 /**
  * @public
  * `FoundationLayoutRegion` is a custom element that represents a region in the layout.

package/dist/esm/utils/misc.js

@@ -22,3 +22,12 @@ export function getParentLayoutComponent() {
             throw new LayoutUsageError('Using layout region outside of layout root');
     }
 }
+/** @internal */
+export const regionConveter = (x) => {
+    const t = {
+        horizontal: 'column',
+        vertical: 'row',
+        tabs: 'stack',
+    };
+    return t[x];
+};

package/dist/foundation-layout.api.json

@@ -242,7 +242,7 @@
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-layout!FoundationLayout#addItem:member(1)",
-              "docComment": "/**\n * Dynamically add a new item to the layout. The user can move the new plane to whenever they want once it has been added.\n *\n * @remarks\n *\n * Adding a new item invokes the registration previously made explicitly via {@link FoundationLayout.registerItem | registerItem()} or implicitly via the html declerative API.\n *\n * The elements added onto the new pane are copies using `element.cloneNode()` of the original element references used during registration.\n *\n * @param config - {@link RegisteredElementConfig} configuration items for the new pane\n *\n * @param placement - where to add the new pane on the layout (defaults to the right hand side)\n *\n * @throws\n *\n * {@link LayoutRegistrationError} if you attempt to add an item before it has been registered\n *\n * @public\n */\n",
+              "docComment": "/**\n * Dynamically add a new item to the layout. The user can move the new plane to whenever they want once it has been added.\n *\n * @remarks\n *\n * Adding new items invokes the registration previously made explicitly via {@link FoundationLayout.registerItem | registerItem()} or implicitly via the html declarative API.\n *\n * The elements added onto the new pane are copies using `element.cloneNode()` of the original element references used during registration.\n *\n * @param config - {@link RegisteredElementConfig} configuration items for the new items(s). Pass an array of {@link RegisteredElementConfig} to add multiple items at once.\n *\n * @param placement - where and how to add the new items to the layout. For more info and defaults see {@link Placement}.\n *\n * @throws\n *\n * {@link LayoutRegistrationError} if you attempt to add an item before it has been registered\n *\n * @public\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -253,6 +253,19 @@
                   "text": "RegisteredElementConfig",
                   "canonicalReference": "@genesislcap/foundation-layout!RegisteredElementConfig:interface"
                 },
+                {
+                  "kind": "Content",
+                  "text": " | "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "RegisteredElementConfig",
+                  "canonicalReference": "@genesislcap/foundation-layout!RegisteredElementConfig:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "[]"
+                },
                 {
                   "kind": "Content",
                   "text": ", placement?: "
@@ -277,8 +290,8 @@
               ],
               "isStatic": false,
               "returnTypeTokenRange": {
-                "startIndex": 5,
-                "endIndex": 6
+                "startIndex": 8,
+                "endIndex": 9
               },
               "releaseTag": "Public",
               "isProtected": false,
@@ -288,15 +301,15 @@
                   "parameterName": "config",
                   "parameterTypeTokenRange": {
                     "startIndex": 1,
-                    "endIndex": 2
+                    "endIndex": 5
                   },
                   "isOptional": false
                 },
                 {
                   "parameterName": "placement",
                   "parameterTypeTokenRange": {
-                    "startIndex": 3,
-                    "endIndex": 4
+                    "startIndex": 6,
+                    "endIndex": 7
                   },
                   "isOptional": true
                 }
@@ -1527,7 +1540,7 @@
         {
           "kind": "TypeAlias",
           "canonicalReference": "@genesislcap/foundation-layout!Placement:type",
-          "docComment": "/**\n * Where to add the new item into the layout when using the {@link FoundationLayout.addItem} API\n *\n * @public\n */\n",
+          "docComment": "/**\n * Where to and how to add the new item(s) into the layout when using the {@link FoundationLayout.addItem} API.\n *\n * @remarks\n *\n * `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`.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -1535,7 +1548,16 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    area: 'top' | 'left' | 'bottom' | 'right';\n}"
+              "text": "{\n    area: 'top' | 'left' | 'bottom' | 'right';\n    multiple?: {\n        type: "
+            },
+            {
+              "kind": "Reference",
+              "text": "LayoutRegionType",
+              "canonicalReference": "@genesislcap/foundation-layout!LayoutRegionType:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n        size?: string;\n    };\n}"
             },
             {
               "kind": "Content",
@@ -1547,7 +1569,7 @@
           "name": "Placement",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 2
+            "endIndex": 4
           }
         },
         {

package/dist/foundation-layout.d.ts

@@ -162,15 +162,15 @@ export declare class FoundationLayout extends FoundationElement implements Layou
      * @public
      * Dynamically add a new item to the layout. The user can move the new plane to whenever they want once it has been added.
      * @remarks
-     * Adding a new item invokes the registration previously made explicitly via {@link FoundationLayout.registerItem | registerItem()} or implicitly via the html declerative API.
+     * 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 pane
-     * @param placement - where to add the new pane on the layout (defaults to the right hand side)
+     * @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, placement?: Placement): void;
+    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.
@@ -495,10 +495,20 @@ export declare class LayoutUsageError extends Error {
 
 /**
  * @public
- * Where to add the new item into the layout when using the {@link FoundationLayout.addItem} API
+ * 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;
+    };
 };
 
 /**

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

@@ -9,15 +9,15 @@ Dynamically add a new item to the layout. The user can move the new plane to whe
 **Signature:**
 
 ```typescript
-addItem(config: RegisteredElementConfig, placement?: Placement): void;
+addItem(config: RegisteredElementConfig | RegisteredElementConfig[], placement?: Placement): void;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  config | [RegisteredElementConfig](./foundation-layout.registeredelementconfig.md) | [RegisteredElementConfig](./foundation-layout.registeredelementconfig.md) configuration items for the new pane |
-|  placement | [Placement](./foundation-layout.placement.md) | _(Optional)_ where to add the new pane on the layout (defaults to the right hand side) |
+|  config | [RegisteredElementConfig](./foundation-layout.registeredelementconfig.md) \| [RegisteredElementConfig](./foundation-layout.registeredelementconfig.md)<!-- -->\[\] | [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. |
+|  placement | [Placement](./foundation-layout.placement.md) | _(Optional)_ where and how to add the new items to the layout. For more info and defaults see [Placement](./foundation-layout.placement.md)<!-- -->. |
 
 **Returns:**
 
@@ -29,7 +29,7 @@ void
 
 ## Remarks
 
-Adding a new item invokes the registration previously made explicitly via [registerItem()](./foundation-layout.foundationlayout.registeritem.md) or implicitly via the html declerative API.
+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.md

@@ -37,6 +37,6 @@
 |  --- | --- |
 |  [LayoutReceiveEventsDetail](./foundation-layout.layoutreceiveeventsdetail.md) | <p>Defines the shape of the detail that the layout listens works with for events it listens on</p><p>'changeTitle' - <code>title</code> is the string you want to set. For <code>mode</code>: <code>replace</code> will set the title to be <code>title</code>, <code>suffix</code> will append <code>title</code> to the end of the existing title.</p> |
 |  [LayoutRegionType](./foundation-layout.layoutregiontype.md) | Union type describing the three different types of region splits. Set on the <code>type</code> attribute on [FoundationLayoutRegion](./foundation-layout.foundationlayoutregion.md)<!-- -->. |
-|  [Placement](./foundation-layout.placement.md) | Where to add the new item into the layout when using the [FoundationLayout.addItem()](./foundation-layout.foundationlayout.additem.md) API |
+|  [Placement](./foundation-layout.placement.md) | Where to and how to add the new item(s) into the layout when using the [FoundationLayout.addItem()](./foundation-layout.foundationlayout.additem.md) API. |
 |  [SerialisedLayout](./foundation-layout.serialisedlayout.md) | Versioned layout config objects. <code>v</code> is the version and <code>c</code> contains the layout config. |
 

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

@@ -4,12 +4,22 @@
 
 ## Placement type
 
-Where to add the new item into the layout when using the [FoundationLayout.addItem()](./foundation-layout.foundationlayout.additem.md) API
+Where to and how to add the new item(s) into the layout when using the [FoundationLayout.addItem()](./foundation-layout.foundationlayout.additem.md) API.
 
 **Signature:**
 
 ```typescript
 export type Placement = {
     area: 'top' | 'left' | 'bottom' | 'right';
+    multiple?: {
+        type: LayoutRegionType;
+        size?: string;
+    };
 };
 ```
+**References:** [LayoutRegionType](./foundation-layout.layoutregiontype.md)
+
+## 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`<!-- -->.
+

package/docs/api-report.md

@@ -24,7 +24,7 @@ export class FoundationLayout extends FoundationElement implements LayoutCompone
     [componentType]: "root";
     // @internal
     constructor();
-    addItem(config: RegisteredElementConfig, placement?: Placement): void;
+    addItem(config: RegisteredElementConfig | RegisteredElementConfig[], placement?: Placement): void;
     // @internal
     addItemFromChild<T extends RootItemConfig>(item: T): T;
     autoSaveKey?: string;
@@ -157,6 +157,10 @@ export class LayoutUsageError extends Error {
 // @public
 export type Placement = {
     area: 'top' | 'left' | 'bottom' | 'right';
+    multiple?: {
+        type: LayoutRegionType;
+        size?: string;
+    };
 };
 
 // @public

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-layout",
   "description": "Genesis Foundation UI App Layout",
-  "version": "14.59.0",
+  "version": "14.60.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-layout.d.ts",
@@ -24,14 +24,14 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.59.0",
-    "@genesislcap/genx": "14.59.0",
+    "@genesislcap/foundation-testing": "14.60.0",
+    "@genesislcap/genx": "14.60.0",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
     "@genesis-community/golden-layout": "^2.9.3",
-    "@genesislcap/foundation-comms": "14.59.0",
-    "@genesislcap/foundation-utils": "14.59.0",
+    "@genesislcap/foundation-comms": "14.60.0",
+    "@genesislcap/foundation-utils": "14.60.0",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
     "@microsoft/fast-foundation": "^2.33.2",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "9e694bb994fa48b71b0c6301a3ad72f54671d117"
+  "gitHead": "78e4c99a7097525e11e99ef7f058d5c464fa30ab"
 }