@genesislcap/foundation-ui 14.141.0 → 14.141.2

package/dist/custom-elements.json

@@ -826,6 +826,219 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/_config/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./tokens"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./values"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionStyles",
+          "declaration": {
+            "name": "foundationAccordionStyles",
+            "module": "src/accordion/accordion.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<Accordion>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionTemplate",
+          "declaration": {
+            "name": "foundationAccordionTemplate",
+            "module": "src/accordion/accordion.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Accordion",
+          "superclass": {
+            "name": "FASTAccordion",
+            "package": "@microsoft/fast-foundation"
+          },
+          "tagName": "%%prefix%%-accordion",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordionShadowOptions",
+          "type": {
+            "text": "ShadowRootInit"
+          },
+          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultAccordionConfig",
+          "type": {
+            "text": "object"
+          },
+          "default": "{}"
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordion",
+          "description": "The Foundation Accordion",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Accordion",
+          "declaration": {
+            "name": "Accordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordionShadowOptions",
+          "declaration": {
+            "name": "foundationAccordionShadowOptions",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultAccordionConfig",
+          "declaration": {
+            "name": "defaultAccordionConfig",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordion",
+          "declaration": {
+            "name": "foundationAccordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.template"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/accordion-item/accordion-item.styles.ts",
@@ -1220,219 +1433,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/_config/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./tokens"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./values"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionStyles",
-          "declaration": {
-            "name": "foundationAccordionStyles",
-            "module": "src/accordion/accordion.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<Accordion>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionTemplate",
-          "declaration": {
-            "name": "foundationAccordionTemplate",
-            "module": "src/accordion/accordion.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Accordion",
-          "superclass": {
-            "name": "FASTAccordion",
-            "package": "@microsoft/fast-foundation"
-          },
-          "tagName": "%%prefix%%-accordion",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordionShadowOptions",
-          "type": {
-            "text": "ShadowRootInit"
-          },
-          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "defaultAccordionConfig",
-          "type": {
-            "text": "object"
-          },
-          "default": "{}"
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordion",
-          "description": "The Foundation Accordion",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Accordion",
-          "declaration": {
-            "name": "Accordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordionShadowOptions",
-          "declaration": {
-            "name": "foundationAccordionShadowOptions",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "defaultAccordionConfig",
-          "declaration": {
-            "name": "defaultAccordionConfig",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordion",
-          "declaration": {
-            "name": "foundationAccordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion.template"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/actions-menu/actions-menu.styles.ts",
@@ -23083,6 +23083,14 @@
               },
               "default": "''"
             },
+            {
+              "kind": "field",
+              "name": "autoPosition",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
             {
               "kind": "field",
               "name": "all",
@@ -23249,7 +23257,8 @@
               "name": "position",
               "type": {
                 "text": "Position"
-              }
+              },
+              "description": "Controls the positioning of the multiselect dropdown. Accepts the following values:\n- Position.ABOVE: Forces the dropdown to always open above the input field.\n- Position.BELOW: Forces the dropdown to always open below the input field."
             },
             {
               "kind": "field",
@@ -23283,19 +23292,21 @@
             },
             {
               "kind": "method",
-              "name": "optionsChanged"
+              "name": "toggle"
             },
             {
               "kind": "method",
-              "name": "selectedOptionsChanged"
+              "name": "optionsChanged"
             },
             {
               "kind": "method",
-              "name": "toggle"
+              "name": "selectedOptionsChanged"
             },
             {
               "kind": "method",
-              "name": "setDropdownPosition"
+              "name": "setDropdownPosition",
+              "privacy": "private",
+              "description": "Sets the dropdown position based on the current configuration."
             },
             {
               "kind": "method",
@@ -23548,6 +23559,14 @@
               "default": "''",
               "fieldName": "name"
             },
+            {
+              "name": "auto-position",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "autoPosition"
+            },
             {
               "type": {
                 "text": "boolean"

package/dist/dts/multiselect/multiselect-consts.d.ts

@@ -1,6 +1,5 @@
 export declare enum Position {
     BELOW = "below",
-    ABOVE = "above",
-    DYNAMIC = "dynamic"
+    ABOVE = "above"
 }
 //# sourceMappingURL=multiselect-consts.d.ts.map

package/dist/dts/multiselect/multiselect-consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect-consts.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect-consts.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAO,YAAY;CACpB"}
+{"version":3,"file":"multiselect-consts.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect-consts.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB"}

package/dist/dts/multiselect/multiselect.d.ts

@@ -13,6 +13,7 @@ export type MultiselectOption = {
  */
 export declare class Multiselect extends FoundationElement {
     name: string;
+    autoPosition: boolean;
     all: boolean;
     allSelected: boolean;
     search: boolean;
@@ -33,6 +34,11 @@ export declare class Multiselect extends FoundationElement {
     selectedOptions: string[];
     filteredAvailableOptions: MultiselectOption[];
     scrollContainer: HTMLElement;
+    /**
+     * Controls the positioning of the multiselect dropdown. Accepts the following values:
+     * - Position.ABOVE: Forces the dropdown to always open above the input field.
+     * - Position.BELOW: Forces the dropdown to always open below the input field.
+     */
     position: Position;
     onAllSelectedCallback: (allSelected: boolean) => void;
     private initialisedOptions;
@@ -40,10 +46,18 @@ export declare class Multiselect extends FoundationElement {
     optionsElement: HTMLElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    toggle(): void;
     optionsChanged(): void;
     selectedOptionsChanged(): void;
-    toggle(): void;
-    setDropdownPosition(): void;
+    /**
+     * Sets the dropdown position based on the current configuration.
+     * @remarks
+     * If `autoPosition` is `true`, this method calculates the available space above and below the input field in the viewport and positions the dropdown accordingly.
+     * This ensures the dropdown is always visible to the user. If `autoPosition` is `false`, the dropdown position is locked to either 'above' or 'below', as specified by the `position` attribute.
+     * This method is intended for internal use by the component and is marked as private.
+     * @private
+     */
+    private setDropdownPosition;
     optionGetter(option: MultiselectOption): string;
     getItemLabel(option: MultiselectOption): any;
     isOptionDisabled(option: MultiselectOption): boolean;

package/dist/dts/multiselect/multiselect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAO9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMhD,eAAO,MAAM,kCAAkC,EAAE,cAA0B,CAAC;AAE5E,eAAO,MAAM,wBAAwB,IAAK,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GACzB;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD,MAAM,CAAC;AAEX;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IAC1C,IAAI,SAAM;IACW,GAAG,UAAQ;IACX,WAAW,UAAS;IACpB,MAAM,UAAQ;IACd,QAAQ,UAAS;IACjB,KAAK,UAAS;IACnC,QAAQ,EAAE,MAAM,CAAiB;IACvC,eAAe,CAAC,QAAQ,KAAA,EAAE,QAAQ,EAAE,MAAM;IAG1C,qBAAqB,MAAC;IACV,mBAAmB,EAAE,IAAI,EAAE,CAAC;IAC5B,iBAAiB,EAAE,qBAAqB,EAAE,CAAC;IAC3C,cAAc,MAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IACtC,OAAO,CAAC,YAAY,CAAiD;IACzD,IAAI,UAAS;IACzB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO;IAYhC,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAElC,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/B,wBAAwB,EAAE,iBAAiB,EAAE,CAAqB;IAElE,eAAe,EAAE,WAAW,CAAC;IAE7B,QAAQ,EAAE,QAAQ,CAAkB;IAEpC,qBAAqB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAElE,OAAO,CAAC,kBAAkB,CAAkB;IAE5C,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC;IAE5B,iBAAiB;IAOjB,oBAAoB;IAKpB,cAAc;IAQd,sBAAsB;IAOtB,MAAM;IAON,mBAAmB;IAanB,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAOtC,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAetC,gBAAgB,CAAC,MAAM,EAAE,iBAAiB;IAQ1C,IACI,eAAe,WAyBlB;IAED,IACI,cAAc,WAEjB;IAED,IACI,aAAa,YAIhB;IAED,IACI,oBAAoB,YAEvB;IAED,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,GAAG,OAAO;IAI9D,iBAAiB,CAAC,gBAAgB,EAAE,iBAAiB;IAarD,sBAAsB;IAItB,iBAAiB;IAajB,YAAY;IAUZ,SAAS;IAST,cAAc;IAkBd,aAAa,CAAC,KAAK,EAAE,KAAK;IAK1B,OAAO,CAAC,kBAAkB;CAK3B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;sBAMhC,CAAC"}
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAO9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMhD,eAAO,MAAM,kCAAkC,EAAE,cAA0B,CAAC;AAE5E,eAAO,MAAM,wBAAwB,IAAK,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GACzB;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD,MAAM,CAAC;AAEX;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IAC1C,IAAI,SAAM;IACuC,YAAY,EAAE,OAAO,CAAQ;IACzD,GAAG,UAAQ;IACX,WAAW,UAAS;IACpB,MAAM,UAAQ;IACd,QAAQ,UAAS;IACjB,KAAK,UAAS;IACnC,QAAQ,EAAE,MAAM,CAAiB;IACvC,eAAe,CAAC,QAAQ,KAAA,EAAE,QAAQ,EAAE,MAAM;IAG1C,qBAAqB,MAAC;IACV,mBAAmB,EAAE,IAAI,EAAE,CAAC;IAC5B,iBAAiB,EAAE,qBAAqB,EAAE,CAAC;IAC3C,cAAc,MAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IACtC,OAAO,CAAC,YAAY,CAAiD;IACzD,IAAI,UAAS;IACzB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO;IAYhC,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClC,eAAe,EAAE,MAAM,EAAE,CAAM;IAC/B,wBAAwB,EAAE,iBAAiB,EAAE,CAAqB;IAClE,eAAe,EAAE,WAAW,CAAC;IAEzC;;;;OAIG;IACS,QAAQ,EAAE,QAAQ,CAAkB;IAEpC,qBAAqB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAElE,OAAO,CAAC,kBAAkB,CAAkB;IAE5C,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC;IAE5B,iBAAiB;IAOjB,oBAAoB;IAKpB,MAAM;IAON,cAAc;IAQd,sBAAsB;IAOtB;;;;;;;OAOG;IACH,OAAO,CAAC,mBAAmB;IAqC3B,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAOtC,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAetC,gBAAgB,CAAC,MAAM,EAAE,iBAAiB;IAQ1C,IACI,eAAe,WAyBlB;IAED,IACI,cAAc,WAEjB;IAED,IACI,aAAa,YAIhB;IAED,IACI,oBAAoB,YAEvB;IAED,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,GAAG,OAAO;IAI9D,iBAAiB,CAAC,gBAAgB,EAAE,iBAAiB;IAarD,sBAAsB;IAItB,iBAAiB;IAajB,YAAY;IAUZ,SAAS;IAST,cAAc;IAkBd,aAAa,CAAC,KAAK,EAAE,KAAK;IAK1B,OAAO,CAAC,kBAAkB;CAK3B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;sBAMhC,CAAC"}

package/dist/esm/multiselect/multiselect-consts.js

@@ -2,5 +2,4 @@ export var Position;
 (function (Position) {
     Position["BELOW"] = "below";
     Position["ABOVE"] = "above";
-    Position["DYNAMIC"] = "dynamic";
 })(Position || (Position = {}));

package/dist/esm/multiselect/multiselect.js

@@ -5,7 +5,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
 import debounce from 'lodash.debounce';
 import { dataserverCriteriaBuilder, logger, requestServerCriteriaBuilder, wasClickOutsideElement, } from '../utils';
 import { Position } from './multiselect-consts';
-import { multiselectStyles as styles, maxheight } from './multiselect.styles';
+import { multiselectStyles as styles } from './multiselect.styles';
 import { multiselectTemplate as template } from './multiselect.template';
 const DEBOUNCE_TIME = 500;
 export const foundationMultiselectShadowOptions = undefined;
@@ -17,6 +17,7 @@ export class Multiselect extends FoundationElement {
     constructor() {
         super(...arguments);
         this.name = '';
+        this.autoPosition = true;
         this.all = true;
         this.allSelected = false;
         this.search = true;
@@ -28,6 +29,11 @@ export class Multiselect extends FoundationElement {
         this.options = [];
         this.selectedOptions = [];
         this.filteredAvailableOptions = [...this.options];
+        /**
+         * Controls the positioning of the multiselect dropdown. Accepts the following values:
+         * - Position.ABOVE: Forces the dropdown to always open above the input field.
+         * - Position.BELOW: Forces the dropdown to always open below the input field.
+         */
         this.position = Position.BELOW;
         this.initialisedOptions = false;
     }
@@ -58,6 +64,12 @@ export class Multiselect extends FoundationElement {
         super.disconnectedCallback();
         document.removeEventListener('mousedown', this.clickOutside);
     }
+    toggle() {
+        if (!this.open) {
+            this.setDropdownPosition();
+        }
+        this.open = !this.open;
+    }
     optionsChanged() {
         if (this.allSelected && !this.initialisedOptions) {
             this.selectedOptions = this.options.map((option) => this.optionGetter(option));
@@ -70,22 +82,45 @@ export class Multiselect extends FoundationElement {
             return;
         }
     }
-    toggle() {
-        if (!this.open && this.position === Position.DYNAMIC) {
-            this.setDropdownPosition();
-        }
-        this.open = !this.open;
-    }
+    /**
+     * Sets the dropdown position based on the current configuration.
+     * @remarks
+     * If `autoPosition` is `true`, this method calculates the available space above and below the input field in the viewport and positions the dropdown accordingly.
+     * This ensures the dropdown is always visible to the user. If `autoPosition` is `false`, the dropdown position is locked to either 'above' or 'below', as specified by the `position` attribute.
+     * This method is intended for internal use by the component and is marked as private.
+     * @private
+     */
     setDropdownPosition() {
-        var _a, _b;
-        const remainingSpace = (this.scrollContainer || this.parentElement).clientHeight -
-            (this.offsetTop - (this.scrollContainer || this.parentElement).scrollTop);
-        const totalHeight = maxheight + this.offsetHeight;
-        if (remainingSpace < totalHeight) {
-            (_a = this.optionsElement) === null || _a === void 0 ? void 0 : _a.classList.add('position-above');
+        let calculatedPosition = this.position;
+        if (this.autoPosition) {
+            let container = this.assignedSlot ? this.assignedSlot.parentElement : this.parentElement;
+            while (container && !container.classList.contains('content-wrapper')) {
+                container = container.parentElement;
+            }
+            if (!container) {
+                const multiselectRect = this.getBoundingClientRect();
+                const viewportHeight = window.innerHeight;
+                const spaceAbove = multiselectRect.top;
+                const spaceBelow = viewportHeight - multiselectRect.bottom;
+                calculatedPosition =
+                    spaceBelow < multiselectRect.height && spaceAbove > spaceBelow
+                        ? Position.ABOVE
+                        : Position.BELOW;
+            }
+            else {
+                const containerRect = container.getBoundingClientRect();
+                const thisRect = this.getBoundingClientRect();
+                const midPoint = containerRect.top + containerRect.height / 2;
+                calculatedPosition = thisRect.top < midPoint ? Position.BELOW : Position.ABOVE;
+            }
         }
-        else {
-            (_b = this.optionsElement) === null || _b === void 0 ? void 0 : _b.classList.remove('position-above');
+        if (calculatedPosition === Position.ABOVE) {
+            this.optionsElement.classList.add('position-above');
+            this.optionsElement.classList.remove('position-below');
+        }
+        else if (calculatedPosition === Position.BELOW) {
+            this.optionsElement.classList.add('position-below');
+            this.optionsElement.classList.remove('position-above');
         }
     }
     optionGetter(option) {
@@ -221,6 +256,9 @@ export class Multiselect extends FoundationElement {
 __decorate([
     attr
 ], Multiselect.prototype, "name", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'auto-position' })
+], Multiselect.prototype, "autoPosition", void 0);
 __decorate([
     attr({ mode: 'boolean' })
 ], Multiselect.prototype, "all", void 0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.141.0",
+  "version": "14.141.2",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -74,8 +74,8 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.141.0",
-    "@genesislcap/genx": "14.141.0",
+    "@genesislcap/foundation-testing": "14.141.2",
+    "@genesislcap/genx": "14.141.2",
     "copyfiles": "^2.4.1",
     "rimraf": "^3.0.2",
     "rxjs": "^7.5.4"
@@ -86,12 +86,12 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^4.0.0",
-    "@genesislcap/foundation-comms": "14.141.0",
-    "@genesislcap/foundation-criteria": "14.141.0",
-    "@genesislcap/foundation-errors": "14.141.0",
-    "@genesislcap/foundation-logger": "14.141.0",
-    "@genesislcap/foundation-notifications": "14.141.0",
-    "@genesislcap/foundation-utils": "14.141.0",
+    "@genesislcap/foundation-comms": "14.141.2",
+    "@genesislcap/foundation-criteria": "14.141.2",
+    "@genesislcap/foundation-errors": "14.141.2",
+    "@genesislcap/foundation-logger": "14.141.2",
+    "@genesislcap/foundation-notifications": "14.141.2",
+    "@genesislcap/foundation-utils": "14.141.2",
     "@microsoft/fast-colors": "^5.3.1",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.12.0",
@@ -113,5 +113,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "0a56f4af76d0b6852dfb0fd6a01f721db3a1e867"
+  "gitHead": "51b9d2cd8291ce37769cbbb5135f19b8a726f642"
 }