@genesislcap/foundation-ui 14.154.2 → 14.154.3-alpha-005efd0.0

package/dist/dts/base-components.d.ts

@@ -23,6 +23,17 @@ export declare const baseComponents: {
     foundationButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./button").Button>;
     foundationCalendar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CalendarOptions>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CalendarOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     foundationCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./card").Card>;
+    foundationCategorizedMultiselect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+        baseName: string;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./categorized-multiselect").CategorizedMultiselect, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        shadowOptions: ShadowRootInit;
+    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+        baseName: string;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./categorized-multiselect").CategorizedMultiselect, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        shadowOptions: ShadowRootInit;
+    }, typeof import("./categorized-multiselect").CategorizedMultiselect>;
     foundationCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CheckboxOptions>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CheckboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     foundationCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").ComboboxOptions>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").ComboboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     foundationConnectionIndicator: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./connection-indicator").ConnectionIndicator>;

package/dist/dts/base-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AA4E5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA2EJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}
+{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AA6E5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA4EJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}

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

@@ -0,0 +1,74 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { Position } from '../multiselect';
+export declare const foundationCategorizedMultiselectShadowOptions: ShadowRootInit;
+export declare const defaultCategorizedMultiselectConfig: {};
+export type CategorizedMultiselectOption = {
+    type: string;
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type CategorizedMultiselectFilteredOption = {
+    type: string;
+    options: Omit<CategorizedMultiselectOption, 'type'>;
+};
+/**
+ * @tagname %%prefix%%-categorized-multiselect
+ */
+export declare class CategorizedMultiselect extends FoundationElement {
+    name: string;
+    autoPosition: boolean;
+    search: boolean;
+    disabled: boolean;
+    defaultSlottedNodes: Node[];
+    valueFormatter: any;
+    filterSearchValue: string;
+    private clickOutside;
+    open: boolean;
+    openChanged(previous: boolean, open: boolean): void;
+    options: CategorizedMultiselectOption[];
+    selectedOptions: string[];
+    filteredAvailableOptions: CategorizedMultiselectFilteredOption[];
+    /**
+     * 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;
+    optionsElement: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    toggle(): void;
+    sortFilteredOptions(options?: CategorizedMultiselectOption[]): CategorizedMultiselectFilteredOption[];
+    optionsChanged(): 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: CategorizedMultiselectOption): string;
+    getItemLabel(option: CategorizedMultiselectOption): any;
+    isOptionDisabled(option: CategorizedMultiselectOption): boolean;
+    get getPlaceholder(): string;
+    isOptionSelected(normalizedOption: CategorizedMultiselectOption): boolean;
+    selectCheckboxOne(normalizedOption: CategorizedMultiselectOption): void;
+    setFilter(): void;
+    changeHandler(event: Event): void;
+    private handleClickOutside;
+}
+export declare const foundationCategorizedMultiselect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<CategorizedMultiselect, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    shadowOptions: ShadowRootInit;
+}>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<CategorizedMultiselect, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    shadowOptions: ShadowRootInit;
+}, typeof CategorizedMultiselect>;
+//# sourceMappingURL=categorized-multiselect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"categorized-multiselect.d.ts","sourceRoot":"","sources":["../../../src/categorized-multiselect/categorized-multiselect.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK1C,eAAO,MAAM,6CAA6C,EAAE,cAA0B,CAAC;AAEvF,eAAO,MAAM,mCAAmC,IAAK,CAAC;AAEtD,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oCAAoC,GAAG;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,IAAI,CAAC,4BAA4B,EAAE,MAAM,CAAC,CAAC;CACrD,CAAC;AAEF;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,iBAAiB;IACrD,IAAI,SAAM;IACuC,YAAY,EAAE,OAAO,CAAQ;IACzD,MAAM,UAAQ;IACd,QAAQ,UAAS;IAEhC,mBAAmB,EAAE,IAAI,EAAE,CAAC;IAC5B,cAAc,MAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IACtC,OAAO,CAAC,YAAY,CAAiD;IACzD,IAAI,UAAS;IACzB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO;IAUhC,OAAO,EAAE,4BAA4B,EAAE,CAAM;IAC7C,eAAe,EAAE,MAAM,EAAE,CAAM;IAC/B,wBAAwB,EAAE,oCAAoC,EAAE,CAAC;IAE7E;;;;OAIG;IACS,QAAQ,EAAE,QAAQ,CAAkB;IAEhD,cAAc,EAAE,WAAW,CAAC;IAE5B,iBAAiB;IAOjB,oBAAoB;IAKpB,MAAM;IAON,mBAAmB,CAAC,OAAO,CAAC,EAAE,4BAA4B,EAAE;IAoB5D,cAAc;IAId;;;;;;;OAOG;IACH,OAAO,CAAC,mBAAmB;IAqC3B,YAAY,CAAC,MAAM,EAAE,4BAA4B;IAIjD,YAAY,CAAC,MAAM,EAAE,4BAA4B;IAWjD,gBAAgB,CAAC,MAAM,EAAE,4BAA4B;IAQrD,IACI,cAAc,WAEjB;IAED,gBAAgB,CAAC,gBAAgB,EAAE,4BAA4B,GAAG,OAAO;IAIzE,iBAAiB,CAAC,gBAAgB,EAAE,4BAA4B;IAahE,SAAS;IAeT,aAAa,CAAC,KAAK,EAAE,KAAK;IAK1B,OAAO,CAAC,kBAAkB;CAK3B;AAED,eAAO,MAAM,gCAAgC;;;;;;;;;;iCAM3C,CAAC"}

package/dist/dts/categorized-multiselect/categorized-multiselect.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const optionsMaxheight = 450;
+export declare const categorizedMultiselectStyles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=categorized-multiselect.styles.d.ts.map

package/dist/dts/categorized-multiselect/categorized-multiselect.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"categorized-multiselect.styles.d.ts","sourceRoot":"","sources":["../../../src/categorized-multiselect/categorized-multiselect.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,eAAO,MAAM,4BAA4B,iDA6IxC,CAAC"}

package/dist/dts/categorized-multiselect/categorized-multiselect.template.d.ts

@@ -0,0 +1,4 @@
+import { CategorizedMultiselect } from './categorized-multiselect';
+export declare const getPrefixedCategorizedMultiselect: (prefix?: string) => import("@microsoft/fast-element").ViewTemplate<CategorizedMultiselect, any>;
+export declare const categorizedMultiselectTemplate: import("@microsoft/fast-element").ViewTemplate<CategorizedMultiselect, any>;
+//# sourceMappingURL=categorized-multiselect.template.d.ts.map

package/dist/dts/categorized-multiselect/categorized-multiselect.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"categorized-multiselect.template.d.ts","sourceRoot":"","sources":["../../../src/categorized-multiselect/categorized-multiselect.template.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,eAAO,MAAM,iCAAiC,YACpC,MAAM,gFAyDf,CAAC;AAEF,eAAO,MAAM,8BAA8B,6EAE1C,CAAC"}

package/dist/dts/categorized-multiselect/index.d.ts

@@ -0,0 +1,4 @@
+export * from './categorized-multiselect';
+export * from './categorized-multiselect.styles';
+export * from './categorized-multiselect.template';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/categorized-multiselect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/categorized-multiselect/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}

package/dist/dts/index.d.ts

@@ -17,6 +17,7 @@ export * from './breadcrumb';
 export * from './button';
 export * from './calendar';
 export * from './card';
+export * from './categorized-multiselect';
 export * from './checkbox';
 export * from './combobox';
 export * from './connection-indicator';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,CAAC;AAExE,eAAO,MAAM,8BAA8B,yDAAuD,CAAC;AAEnG,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,CAAC;AAExE,eAAO,MAAM,8BAA8B,yDAAuD,CAAC;AAEnG,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC"}

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

@@ -1,3 +1,4 @@
+export * from './multiselect-consts';
 export * from './multiselect';
 export * from './multiselect.styles';
 export * from './multiselect.template';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/multiselect/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/multiselect/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC"}

package/dist/esm/base-components.js

@@ -12,6 +12,7 @@ import { foundationBreadcrumbItem } from './breadcrumb-item';
 import { foundationButton } from './button';
 import { foundationCalendar } from './calendar';
 import { foundationCard } from './card';
+import { foundationCategorizedMultiselect } from './categorized-multiselect';
 import { foundationCheckbox } from './checkbox';
 import { foundationCombobox } from './combobox';
 import { foundationConnectionIndicator } from './connection-indicator';
@@ -87,6 +88,7 @@ export const baseComponents = {
     foundationButton,
     foundationCalendar,
     foundationCard,
+    foundationCategorizedMultiselect,
     foundationCheckbox,
     foundationCombobox,
     foundationConnectionIndicator,

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

@@ -0,0 +1,221 @@
+import { __decorate } from "tslib";
+import { attr, observable, volatile } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { Position } from '../multiselect';
+import { wasClickOutsideElement } from '../utils';
+import { categorizedMultiselectStyles as styles } from './categorized-multiselect.styles';
+import { categorizedMultiselectTemplate as template } from './categorized-multiselect.template';
+export const foundationCategorizedMultiselectShadowOptions = undefined;
+export const defaultCategorizedMultiselectConfig = {};
+/**
+ * @tagname %%prefix%%-categorized-multiselect
+ */
+export class CategorizedMultiselect extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.autoPosition = true;
+        this.search = true;
+        this.disabled = false;
+        this.clickOutside = (e) => this.handleClickOutside(e);
+        this.open = false;
+        this.options = [];
+        this.selectedOptions = [];
+        /**
+         * 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;
+    }
+    openChanged(previous, open) {
+        var _a, _b;
+        if (open) {
+            document.addEventListener('mousedown', this.clickOutside);
+            (_a = this.optionsElement) === null || _a === void 0 ? void 0 : _a.classList.add('visible');
+        }
+        else {
+            document.removeEventListener('mousedown', this.clickOutside);
+            (_b = this.optionsElement) === null || _b === void 0 ? void 0 : _b.classList.remove('visible');
+        }
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        if (this.position === Position.ABOVE) {
+            (_a = this.optionsElement) === null || _a === void 0 ? void 0 : _a.classList.add('position-above');
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.clickOutside);
+    }
+    toggle() {
+        if (!this.open) {
+            this.setDropdownPosition();
+        }
+        this.open = !this.open;
+    }
+    sortFilteredOptions(options) {
+        const sortedData = (options !== null && options !== void 0 ? options : this.options).reduce((acc, curr) => {
+            const type = curr.type || 'Other';
+            if (!acc[type]) {
+                acc[type] = {
+                    type: type,
+                    options: [curr],
+                };
+            }
+            else {
+                acc[type].options.push(curr);
+            }
+            return acc;
+        }, {});
+        const result = Object.values(sortedData);
+        return result;
+    }
+    optionsChanged() {
+        this.filteredAvailableOptions = this.sortFilteredOptions();
+    }
+    /**
+     * 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() {
+        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;
+            }
+        }
+        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) {
+        return option.value;
+    }
+    getItemLabel(option) {
+        let value;
+        if (!option) {
+            return '';
+        }
+        else {
+            value = option.label || option.value || '';
+        }
+        return this.valueFormatter ? this.valueFormatter(value) : value;
+    }
+    isOptionDisabled(option) {
+        if (!option || typeof option === 'string') {
+            return false;
+        }
+        return option.disabled || false;
+    }
+    get getPlaceholder() {
+        return `Search ${this.name}`.trim().concat('...');
+    }
+    isOptionSelected(normalizedOption) {
+        return this.selectedOptions.includes(this.optionGetter(normalizedOption));
+    }
+    selectCheckboxOne(normalizedOption) {
+        const option = this.optionGetter(normalizedOption);
+        const isIncluded = this.selectedOptions.includes(option);
+        if (!isIncluded) {
+            this.selectedOptions = [...this.selectedOptions, option];
+        }
+        else {
+            this.selectedOptions = [...this.selectedOptions];
+            this.selectedOptions.splice(this.selectedOptions.indexOf(option), 1);
+        }
+        this.$emit('selectionChange', this.selectedOptions);
+    }
+    setFilter() {
+        const filteredOptions = this.options.filter((option) => {
+            var _a;
+            const optionType = option.type;
+            const optionValue = (_a = option.label) !== null && _a !== void 0 ? _a : option.value;
+            if (optionType === null || optionType === void 0 ? void 0 : optionType.toLowerCase().includes(this.filterSearchValue.toLowerCase())) {
+                return option;
+            }
+            if (optionValue.toLowerCase().includes(this.filterSearchValue.toLowerCase())) {
+                return option;
+            }
+        });
+        this.filteredAvailableOptions = this.sortFilteredOptions(filteredOptions);
+    }
+    changeHandler(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    handleClickOutside(event) {
+        if (wasClickOutsideElement(event, this)) {
+            this.open = false;
+        }
+    }
+}
+__decorate([
+    attr
+], CategorizedMultiselect.prototype, "name", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'auto-position' })
+], CategorizedMultiselect.prototype, "autoPosition", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], CategorizedMultiselect.prototype, "search", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], CategorizedMultiselect.prototype, "disabled", void 0);
+__decorate([
+    observable
+], CategorizedMultiselect.prototype, "defaultSlottedNodes", void 0);
+__decorate([
+    observable
+], CategorizedMultiselect.prototype, "valueFormatter", void 0);
+__decorate([
+    observable
+], CategorizedMultiselect.prototype, "filterSearchValue", void 0);
+__decorate([
+    observable
+], CategorizedMultiselect.prototype, "open", void 0);
+__decorate([
+    observable
+], CategorizedMultiselect.prototype, "options", void 0);
+__decorate([
+    observable
+], CategorizedMultiselect.prototype, "selectedOptions", void 0);
+__decorate([
+    observable
+], CategorizedMultiselect.prototype, "filteredAvailableOptions", void 0);
+__decorate([
+    observable
+], CategorizedMultiselect.prototype, "position", void 0);
+__decorate([
+    volatile
+], CategorizedMultiselect.prototype, "getPlaceholder", null);
+export const foundationCategorizedMultiselect = CategorizedMultiselect.compose(Object.assign({ baseName: 'categorized-multiselect', template,
+    styles, shadowOptions: foundationCategorizedMultiselectShadowOptions }, defaultCategorizedMultiselectConfig));

package/dist/esm/categorized-multiselect/categorized-multiselect.styles.js

@@ -0,0 +1,144 @@
+import { css } from '@microsoft/fast-element';
+export const optionsMaxheight = 450;
+export const categorizedMultiselectStyles = css `
+  .root {
+    position: relative;
+    width: 100%;
+    min-width: 250px;
+    max-width: 1000px;
+  }
+
+  .control-button {
+    display: flex;
+    justify-content: center;
+    min-width: 31px;
+    width: 31px;
+    height: 31px;
+    margin-left: calc(var(--design-unit) * 2px);
+    color: var(--neutral-foreground-hint);
+  }
+
+  .control {
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    width: 100%;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  .label {
+    display: block;
+    cursor: pointer;
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+    font-style: normal;
+    font-weight: 700;
+    margin: calc(var(--design-unit) * 2px) 0;
+  }
+
+  .label-hidden {
+    display: none;
+  }
+
+  .control:hover .control-button,
+  .control:hover .label {
+    color: var(--neutral-foreground-rest);
+  }
+
+  button {
+    pointer-events: none;
+  }
+
+  .options {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    height: max-content;
+    overflow-y: hidden;
+    margin-top: 5px;
+    padding: calc((var(--design-unit) + 3) * 2px) calc((var(--design-unit) + 3) * 1px);
+    border: 1px solid rgba(46 51 57 / 100%);
+    border-radius: 4px;
+    background: var(--neutral-fill-input-rest);
+    width: 100%;
+    max-height: 0;
+    visibility: hidden;
+    transition:
+      max-height 0.4s ease 0s,
+      visibility 0.4s ease 0s;
+    z-index: 999;
+  }
+
+  .position-above {
+    bottom: 100%;
+  }
+
+  .checkbox-container {
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+    scrollbar-color: rgb(46 48 53) rgb(31 33 38);
+  }
+
+  span {
+    border-bottom: calc(var(--stroke-width) * 1px) solid;
+    border-color: color-mix(in srgb, var(--neutral-fill-rest), transparent 50%);
+    padding: calc((var(--design-unit) + 2) * 2px) calc((var(--design-unit) + 3) * 1px);
+    font-size: 13px;
+    color: var(--neutral-foreground-hint);
+  }
+
+  .multiselect-checkbox {
+    min-width: fit-content;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    border-bottom: 1px solid;
+    border-color: color-mix(in srgb, var(--neutral-fill-rest), transparent 50%);
+    padding: calc((var(--design-unit) + 3) * 1px) calc((var(--design-unit) + 3) * 1px)
+      calc((var(--design-unit) + 3) * 1px) 0;
+    margin: 0;
+  }
+
+  .multiselect-checkbox:hover {
+    background-color: rgb(45 47 51);
+    cursor: pointer;
+  }
+
+  .multiselect-checkbox::part(label) {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .checkbox-container .multiselect-checkbox[disabled] {
+    cursor: not-allowed;
+  }
+
+  #filter-search {
+    padding: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgb(31 33 38);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    width: 8px;
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px rgba(0 0 0 / 30%);
+    background-color: rgb(46 48 53);
+    border: 3px solid rgb(31 33 38);
+  }
+
+  .visible {
+    visibility: visible;
+    max-height: ${optionsMaxheight.toString()}px;
+  }
+`;

package/dist/esm/categorized-multiselect/categorized-multiselect.template.js

@@ -0,0 +1,55 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, repeat, ref, when, slotted } from '@microsoft/fast-element';
+import { whitespaceFilter } from '@microsoft/fast-foundation';
+import { classNames } from '@microsoft/fast-web-utilities';
+export const getPrefixedCategorizedMultiselect = (prefix = 'foundation') => html `
+  <div class="root" part="root">
+    <div class="control" part="control" @click=${(x) => !x.disabled && x.toggle()}>
+      <label
+        part="label"
+        for="control"
+        class=${(x) => { var _a; return classNames('label', ['label-hidden', !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length)]); }}
+      >
+        <slot
+          ${slotted({
+    property: 'defaultSlottedNodes',
+    filter: whitespaceFilter,
+})}
+        ></slot>
+      </label>
+      <${prefix}-button class="control-button" part="control-button"><${prefix}-icon name="plus" variant="solid" size="lg"></${prefix}-icon></${prefix}-button>
+    </div>
+    <div ${ref('optionsElement')} class="options" part="options">
+      ${when((x) => x.search, html `
+          <${prefix}-text-field
+            id="filter-search"
+            part="filter-search"
+            value=${sync((x) => x.filterSearchValue, 'string', 'input')}
+            placeholder="${(x) => x.getPlaceholder}"
+            @input=${(x, c) => x.setFilter()}
+            @change=${(x, c) => x.changeHandler(c.event)}
+          ></${prefix}-text-field>
+        `)}
+      <div class="checkbox-container" part="checkbox-container">
+        ${repeat((x) => x.filteredAvailableOptions, html `
+            <span>${(x) => x.type}</span>
+            ${repeat((x) => x.options, html `
+                <${prefix}-checkbox
+                  class="multiselect-checkbox"
+                  part="multiselect-checkbox"
+                  @click=${(x, c) => c.parentContext.parent.selectCheckboxOne(x)}
+                  @change=${(x, c) => c.parentContext.parent.changeHandler(c.event)}
+                  ?current-checked="${(x, c) => c.parentContext.parent.isOptionSelected(x)}"
+                  ?disabled="${(x, c) => c.parentContext.parent.isOptionDisabled(x)}"
+                >
+                  ${(x, ctx) => ctx.parentContext.parent.getItemLabel(x)}
+                </${prefix}-checkbox>
+              `)}
+          `)}
+      </div>
+    </div>
+  </div>
+`;
+export const categorizedMultiselectTemplate = html `
+  ${getPrefixedCategorizedMultiselect()}
+`;

package/dist/esm/categorized-multiselect/index.js

@@ -0,0 +1,3 @@
+export * from './categorized-multiselect';
+export * from './categorized-multiselect.styles';
+export * from './categorized-multiselect.template';

package/dist/esm/index.js

@@ -17,6 +17,7 @@ export * from './breadcrumb';
 export * from './button';
 export * from './calendar';
 export * from './card';
+export * from './categorized-multiselect';
 export * from './checkbox';
 export * from './combobox';
 export * from './connection-indicator';

package/dist/esm/multiselect/index.js

@@ -1,3 +1,4 @@
+export * from './multiselect-consts';
 export * from './multiselect';
 export * from './multiselect.styles';
 export * from './multiselect.template';