@genesislcap/grid-pro 14.405.0 → 14.406.0-workspaces.2

package/dist/esm/multicolumn-dropdown/multicolumn-dropdown.js

@@ -0,0 +1,380 @@
+import { __awaiter, __decorate } from "tslib";
+import { Connect } from '@genesislcap/foundation-comms';
+import { CriteriaBuilder, ExpressionBuilder, Join, Serialisers, } from '@genesislcap/foundation-criteria';
+import { LifecycleMixin, stringArrayConverter } from '@genesislcap/foundation-utils';
+import { attr, DOM, Observable, observable, volatile } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import debounce from 'lodash.debounce';
+import { dropdownWidthVar, multicolumnDropdownStyles } from './multicolumn-dropdown.styles';
+import { multicolumnDropdownTemplate } from './multicolumn-dropdown.template';
+const DEBOUNCE_WAIT_MS = 300;
+const DEFAULT_COL_DEF = {
+    menuTabs: ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab'],
+};
+/**
+ * Checks if the given mouse event occurred outside the target element.
+ * @public
+ */
+export const wasClickOutsideElement = (event, target) => !event.composedPath().includes(target);
+/**
+ * Builds an equality criteria string for value lookup using foundation-criteria.
+ * Properly escapes values for Groovy expressions.
+ */
+function buildEqualityCriteria(field, value) {
+    const expr = new ExpressionBuilder()
+        .withField(field)
+        .withValue(value !== null && value !== void 0 ? value : '')
+        .withSerialiser(Serialisers.EQ)
+        .withGroup('default')
+        .build();
+    return expr.serialiser(expr);
+}
+/**
+ * Fetches a single object from a resource by matching a value key.
+ * @internal
+ */
+function getObjectFromResource(connect, resourceName, valueKey, value) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        try {
+            const criteriaMatch = buildEqualityCriteria(valueKey, value);
+            const message = yield connect.request(resourceName, {
+                DETAILS: { CRITERIA_MATCH: criteriaMatch },
+            });
+            if (((_a = message.REPLY) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+                return message.REPLY[0];
+            }
+            return undefined;
+        }
+        catch (error) {
+            console.error(`Failed to retrieve object from the ${resourceName} resource: ${error instanceof Error ? error.message : String(error)}`);
+            return undefined;
+        }
+    });
+}
+/**
+ * @beta
+ * A dropdown component that displays its options in a multi-column AG Grid.
+ * Search triggers a reqrep and displays the results in the grid dropdown.
+ *
+ * @public
+ * @tagname %%prefix%%-multicolumn-dropdown
+ */
+export class MulticolumnDropdown extends LifecycleMixin(FoundationElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Tells whether a given request supports lookup by Groovy Expressions.
+         *
+         * @remarks Only set this to TRUE for GPAL ReqReps when you want to search on multiple fields.
+         * Custom ReqReps don't support groovy expressions for criteria match.
+         */
+        this.requestSupportsAdvancedSearch = false;
+        this.defaultSlottedNodes = [];
+        this.getAndSetRowsDebounce = debounce(() => this.getAndSetRows(), DEBOUNCE_WAIT_MS);
+        this.handleClickOutside = (event) => {
+            if (wasClickOutsideElement(event, this)) {
+                this.open = false;
+            }
+        };
+    }
+    /** The connect service - uses DI by default, but can be manually set for dynamic element creation */
+    get connect() {
+        var _a;
+        return (_a = this.connectOverride) !== null && _a !== void 0 ? _a : this._connectDI;
+    }
+    set connect(value) {
+        this.connectOverride = value;
+    }
+    get value() {
+        Observable.track(this, 'value');
+        return this._value;
+    }
+    set value(value) {
+        if (value === this._value)
+            return;
+        if (!value) {
+            this.selectedRow = undefined;
+        }
+        else {
+            getObjectFromResource(this.connect, this.resourceName, this.valueKey, value).then((object) => {
+                if (this.value === value) {
+                    this.selectedRow = object;
+                }
+            });
+        }
+        this.emitValue(value);
+    }
+    /** Value to display in the form field */
+    get displayValue() {
+        return ((this.selectedRow && this.labelKey && this.selectedRow[this.labelKey]) || this.value || '');
+    }
+    get hasSearchKey() {
+        return !!this.searchKey && this.searchKey.length > 0;
+    }
+    get hasSlottedContent() {
+        if (!this.defaultSlottedNodes || this.defaultSlottedNodes.length === 0) {
+            return false;
+        }
+        return this.defaultSlottedNodes.some((node) => {
+            var _a;
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                return true;
+            }
+            if (node.nodeType === Node.TEXT_NODE) {
+                return ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0;
+            }
+            return false;
+        });
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        if ((_a = this.optionsElement) === null || _a === void 0 ? void 0 : _a.style) {
+            this.dropdownWidthChanged();
+        }
+        this.open = false;
+        this.filterSearch = '';
+        if (this.grid) {
+            this.grid.gridOptions = {
+                defaultColDef: DEFAULT_COL_DEF,
+                onRowClicked: (event) => {
+                    this.selectedRow = event.data;
+                    this.emitValue(event.data[this.valueKey]);
+                    this.toggle();
+                },
+            };
+        }
+    }
+    /**
+     * Sets row data on the grid in a version-safe way.
+     * AG Grid v32+ removed `setRowData` in favour of `updateGridOptions`.
+     */
+    setGridRowData(rows) {
+        var _a;
+        const api = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi;
+        if (!api)
+            return;
+        if (typeof api.updateGridOptions === 'function') {
+            api.updateGridOptions({ rowData: rows });
+        }
+        else {
+            api.setRowData(rows);
+        }
+    }
+    /**
+     * Sets column defs on the grid in a version-safe way.
+     * AG Grid v32+ removed `setColumnDefs` in favour of `updateGridOptions`.
+     */
+    setGridColumnDefs(colDefs) {
+        var _a;
+        const api = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi;
+        if (!api)
+            return;
+        if (typeof api.updateGridOptions === 'function') {
+            api.updateGridOptions({ columnDefs: colDefs });
+        }
+        else {
+            api.setColumnDefs(colDefs);
+        }
+    }
+    /**
+     * Emits 'change' and 'input' events so that the `sync` directive and forms work correctly.
+     */
+    emitValue(value) {
+        this._value = value;
+        this.$emit('change', value);
+        this.$emit('input', value);
+        Observable.notify(this, 'value');
+    }
+    toggle() {
+        this.open = !this.open;
+    }
+    getAndSetRows() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            if (!((_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi))
+                return;
+            const request = (this.lastRequest = {});
+            const requestParams = this.request ? { REQUEST: Object.assign({}, this.request) } : {};
+            const searchKey = Array.isArray(this.searchKey) && this.searchKey.length === 1
+                ? this.searchKey[0]
+                : this.searchKey;
+            let criteriaMatch;
+            if (searchKey && this.filterSearch) {
+                if (!this.requestSupportsAdvancedSearch) {
+                    if (Array.isArray(searchKey))
+                        throw Error('MulticolumnDropdown: Unable to search multiple keys via request; if the request is a GPAL ReqRep, set requestSupportsAdvancedSearch to true');
+                    requestParams.REQUEST = Object.assign(Object.assign({}, requestParams.REQUEST), { [searchKey]: `*${this.filterSearch}*` });
+                }
+                else {
+                    const searchKeys = Array.isArray(searchKey) ? searchKey : [searchKey];
+                    const searchExpressions = searchKeys.map((sk) => {
+                        var _a;
+                        return new ExpressionBuilder()
+                            .withField(sk)
+                            .withValue((_a = this.filterSearch) !== null && _a !== void 0 ? _a : '')
+                            .withSerialiser(Serialisers.containsIgnoreCase)
+                            .withGroup('default')
+                            .build();
+                    });
+                    const searchBuilder = new CriteriaBuilder();
+                    searchBuilder.Or(searchExpressions, { join: Join.Or() });
+                    criteriaMatch = searchBuilder.build();
+                }
+            }
+            const trimmedBaseCriteria = (_b = this.baseCriteria) === null || _b === void 0 ? void 0 : _b.trim();
+            if (trimmedBaseCriteria && criteriaMatch) {
+                criteriaMatch = `(${criteriaMatch}) && (${trimmedBaseCriteria})`;
+            }
+            else if (trimmedBaseCriteria) {
+                criteriaMatch = trimmedBaseCriteria;
+            }
+            if (criteriaMatch) {
+                requestParams.DETAILS = { CRITERIA_MATCH: criteriaMatch };
+            }
+            try {
+                const message = yield this.connect.request(this.resourceName, requestParams);
+                if (request !== this.lastRequest)
+                    return;
+                const rows = (message === null || message === void 0 ? void 0 : message.REPLY) || [];
+                this.setGridRowData(rows);
+                if (rows.length > 0) {
+                    this.grid.gridApi.hideOverlay();
+                }
+                else {
+                    this.grid.gridApi.showNoRowsOverlay();
+                }
+            }
+            catch (error) {
+                console.error(`Failed to retrieve rows from the ${this.resourceName} resource: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        });
+    }
+    filterSearchChanged() {
+        var _a, _b;
+        if (!this.open)
+            return;
+        (_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.showLoadingOverlay();
+        this.getAndSetRowsDebounce();
+    }
+    requestChanged() {
+        var _a, _b;
+        if (!this.open)
+            return;
+        (_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.showLoadingOverlay();
+        this.getAndSetRows();
+    }
+    columnDefinitionsChanged() {
+        this.setGridColumnDefs(this.columnDefinitions);
+    }
+    openChanged() {
+        var _a, _b;
+        if (this.open) {
+            document.addEventListener('mousedown', this.handleClickOutside);
+            if ((_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi) {
+                this.grid.gridApi.showLoadingOverlay();
+                this.getAndSetRows();
+            }
+        }
+        else {
+            document.removeEventListener('mousedown', this.handleClickOutside);
+            this.filterSearch = '';
+            if ((_b = this.grid) === null || _b === void 0 ? void 0 : _b.gridApi) {
+                this.setGridRowData([]);
+            }
+        }
+    }
+    dropdownWidthChanged() {
+        var _a, _b;
+        (_b = (_a = this.optionsElement) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.setProperty(dropdownWidthVar, this.dropdownWidth > 0 ? `${this.dropdownWidth}px` : 'inherit');
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        super.disconnectedCallback();
+        const shouldRunDisconnect = this.shouldRunDisconnect;
+        DOM.queueUpdate(() => {
+            var _a;
+            if (!shouldRunDisconnect)
+                return;
+            if ((_a = this.grid) === null || _a === void 0 ? void 0 : _a.gridApi) {
+                this.setGridRowData([]);
+            }
+            this.selectedRow = undefined;
+            this._value = undefined;
+        });
+    }
+    changeHandler(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+}
+__decorate([
+    Connect
+], MulticolumnDropdown.prototype, "_connectDI", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], MulticolumnDropdown.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'resource-name' })
+], MulticolumnDropdown.prototype, "resourceName", void 0);
+__decorate([
+    attr({ attribute: 'search-key', converter: stringArrayConverter })
+], MulticolumnDropdown.prototype, "searchKey", void 0);
+__decorate([
+    attr({ attribute: 'advanced-search-req', mode: 'boolean' })
+], MulticolumnDropdown.prototype, "requestSupportsAdvancedSearch", void 0);
+__decorate([
+    attr({ attribute: 'value-key' })
+], MulticolumnDropdown.prototype, "valueKey", void 0);
+__decorate([
+    attr({ attribute: 'label-key' })
+], MulticolumnDropdown.prototype, "labelKey", void 0);
+__decorate([
+    attr({ attribute: 'dropdown-placement' })
+], MulticolumnDropdown.prototype, "dropdownPlacement", void 0);
+__decorate([
+    attr
+], MulticolumnDropdown.prototype, "dropdownWidth", void 0);
+__decorate([
+    observable
+], MulticolumnDropdown.prototype, "request", void 0);
+__decorate([
+    observable
+], MulticolumnDropdown.prototype, "columnDefinitions", void 0);
+__decorate([
+    observable
+], MulticolumnDropdown.prototype, "baseCriteria", void 0);
+__decorate([
+    observable
+], MulticolumnDropdown.prototype, "defaultSlottedNodes", void 0);
+__decorate([
+    observable
+], MulticolumnDropdown.prototype, "filterSearch", void 0);
+__decorate([
+    observable
+], MulticolumnDropdown.prototype, "open", void 0);
+__decorate([
+    observable
+], MulticolumnDropdown.prototype, "selectedRow", void 0);
+__decorate([
+    volatile
+], MulticolumnDropdown.prototype, "displayValue", null);
+__decorate([
+    volatile
+], MulticolumnDropdown.prototype, "hasSearchKey", null);
+__decorate([
+    volatile
+], MulticolumnDropdown.prototype, "hasSlottedContent", null);
+/**
+ * A function that returns a Multicolumn Dropdown registration for configuring the component with a DesignSystem.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-multicolumn-dropdown\>
+ */
+export const foundationMulticolumnDropdown = MulticolumnDropdown.compose({
+    baseName: 'multicolumn-dropdown',
+    template: multicolumnDropdownTemplate,
+    styles: multicolumnDropdownStyles,
+});

package/dist/esm/multicolumn-dropdown/multicolumn-dropdown.styles.js

@@ -0,0 +1,148 @@
+import { css } from '@microsoft/fast-element';
+/** The CSS variable to use for specifying the dropdown's width */
+export const dropdownWidthVar = '--dropdown-width';
+/** The CSS class to use for the options element's class in the dropdown */
+export const optionsClass = 'options';
+/** Class name used to hide elements with display:none */
+export const DISPLAY_NONE_CLASS = 'dnone';
+/**
+ * Multicolumn Dropdown styles.
+ * @public
+ */
+export const multicolumnDropdownStyles = css `
+  label {
+    color: var(--neutral-foreground-hint, rgb(135 155 166));
+    font-style: normal;
+    margin: calc(var(--design-unit) * 2px) 0;
+    display: block;
+    cursor: pointer;
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  .${DISPLAY_NONE_CLASS} {
+    display: none !important;
+  }
+
+  .root {
+    position: relative;
+    width: inherit;
+    min-width: 250px;
+    ${dropdownWidthVar}: 350px;
+  }
+
+  .control {
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  #display-field {
+    width: 100%;
+    cursor: pointer;
+    color: inherit;
+    min-height: 40px;
+    padding-left: calc(var(--design-unit) * 2.25px);
+    padding-right: 52px;
+    border-width: 0;
+    background: var(--neutral-fill-input-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    text-overflow: ellipsis;
+    font-size: var(--type-ramp-base-font-size);
+    font-family: var(--body-font);
+  }
+
+  #display-field[disabled] {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  #display-field:focus {
+    outline: 1px solid var(--accent-fill-rest);
+    background: var(--neutral-fill-input-rest);
+    border-style: none;
+    box-shadow: none;
+  }
+
+  #display-field:hover:not(:focus):not([disabled]) {
+    outline: 1px solid var(--neutral-stroke-hover, rgb(231 232 232));
+  }
+
+  button {
+    pointer-events: none;
+  }
+
+  #arrow-icon {
+    display: inline-block;
+    width: 16px;
+    color: currentColor;
+    position: absolute;
+    left: calc(100% - 26px);
+    padding: 0;
+    cursor: pointer;
+    transform: rotate(0deg);
+    transition: transform 0.2s linear 0s;
+  }
+
+  #arrow-icon.flipped {
+    transform: rotate(180deg);
+  }
+
+  .cross-icon {
+    display: inline-block;
+    width: 12px;
+    color: currentColor;
+    position: absolute;
+    left: calc(100% - 46px);
+    padding: 0;
+    cursor: pointer;
+    visibility: hidden;
+  }
+
+  .cross-icon:hover {
+    color: var(--error-color);
+  }
+
+  .disabled-icon {
+    pointer-events: none;
+    opacity: var(--disabled-opacity);
+  }
+
+  .${optionsClass} {
+    min-width: 100%;
+    width: var(${dropdownWidthVar});
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    height: max-content;
+    overflow-y: hidden;
+    margin: 5px 0;
+    background: var(--neutral-fill-input-rest);
+    visibility: hidden;
+    z-index: 999;
+  }
+
+  .dropdown-above {
+    bottom: 100%;
+  }
+
+  .dropdown-left {
+    right: 0;
+  }
+
+  .grid-container {
+    height: 300px;
+    width: 100%;
+  }
+
+  #filter-search {
+    padding: 5px;
+  }
+
+  .visible {
+    visibility: visible;
+  }
+`;

package/dist/esm/multicolumn-dropdown/multicolumn-dropdown.template.js

@@ -0,0 +1,75 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { gridProColumns } from '../column';
+import { DISPLAY_NONE_CLASS, optionsClass } from './multicolumn-dropdown.styles';
+/**
+ * Get a Design System prefixed Multicolumn Dropdown template.
+ * @param designSystem - The design system prefix to use. Defaults to 'foundation'.
+ * @returns A Multicolumn Dropdown component template prefixed with the correct design system.
+ * @public
+ */
+export const getMulticolumnDropdownTemplate = (designSystem = 'foundation') => html `
+    <label
+      part="label"
+      for="control"
+      class="label ${(x) => { var _a, _b; return (_b = classNames([DISPLAY_NONE_CLASS, !((_a = x.hasSlottedContent) !== null && _a !== void 0 ? _a : false)])) !== null && _b !== void 0 ? _b : ''; }}"
+    >
+      <slot
+        ${slotted({
+    property: 'defaultSlottedNodes',
+})}
+      ></slot>
+    </label>
+    <div class="root" part="root">
+      <div class="control" part="control">
+        <${designSystem}-icon
+          id="arrow-icon"
+          name="chevron-down"
+          class="${(x) => classNames(['flipped', x.open], ['disabled-icon', x.disabled])}"
+          @click=${(x) => !x.disabled && x.toggle()}
+        ></${designSystem}-icon>
+        <${designSystem}-icon
+          name="xmark"
+          class="cross-icon ${(x) => classNames(['visible', !!x.value], ['disabled-icon', x.disabled])}"
+          @click=${(x) => !x.disabled && (x.value = undefined)}
+        ></${designSystem}-icon>
+        <input
+          readonly
+          type="text"
+          id="display-field"
+          part="display-field"
+          ?disabled=${(x) => x.disabled}
+          :value="${(x) => x.displayValue}"
+          @click=${(x) => x.toggle()}
+        />
+      </div>
+      <div
+        ${ref('optionsElement')}
+        class="${(x) => {
+    var _a, _b, _c, _d;
+    return classNames(optionsClass, ['visible', x.open], ['dropdown-above', (_b = (_a = x.dropdownPlacement) === null || _a === void 0 ? void 0 : _a.startsWith('top')) !== null && _b !== void 0 ? _b : false], ['dropdown-left', (_d = (_c = x.dropdownPlacement) === null || _c === void 0 ? void 0 : _c.endsWith('left')) !== null && _d !== void 0 ? _d : false]);
+}}"
+      >
+        <${designSystem}-text-field
+          id="filter-search"
+          part="filter-search"
+          placeholder="Search..."
+          :value=${sync((x) => x.filterSearch, 'string', 'input')}
+          ?hidden=${(x) => !x.hasSearchKey}
+          @change=${(x, c) => x.changeHandler(c.event)}
+        ></${designSystem}-text-field>
+        <div class="grid-container" part="grid">
+          <${designSystem}-grid-pro
+            ${ref('grid')}
+            only-template-col-defs
+          >${gridProColumns((x) => x.columnDefinitions)}</${designSystem}-grid-pro>
+        </div>
+      </div>
+    </div>
+  `;
+/**
+ * The default Multicolumn Dropdown template using the 'foundation' design system prefix.
+ * @public
+ */
+export const multicolumnDropdownTemplate = getMulticolumnDropdownTemplate();