@genesislcap/grid-pro 11.3.0

package/dist/esm/cell-renderers/action.renderer.js

@@ -0,0 +1,85 @@
+import { __awaiter, __decorate } from "tslib";
+import { css, html, observable } from '@microsoft/fast-element';
+import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
+import { logger } from '../utils';
+export class ActionRenderer extends FoundationElement {
+    init(params) {
+        if (!params)
+            return;
+        this.params = params;
+    }
+    getGui() {
+        return this;
+    }
+    destroy() { }
+    refresh(params) {
+        this.params = params;
+        return true;
+    }
+    isDisabled(data) {
+        var _a;
+        if (typeof ((_a = this.params) === null || _a === void 0 ? void 0 : _a.isDisabled) === 'function') {
+            try {
+                return this.params.isDisabled(data);
+            }
+            catch (error) {
+                logger.error('Error executing grid action cell renderer isDisabled callback:', error);
+            }
+        }
+        return false;
+    }
+    clickHandler() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.pendingAction = true;
+            yield this.params.actionClick(this.params.data);
+            this.pendingAction = false;
+        });
+    }
+    get dataTestId() {
+        var _a;
+        if (this.params.dataTestId) {
+            return this.params.dataTestId + ((_a = this.params.data[this.params.uniqueFieldName]) !== null && _a !== void 0 ? _a : '');
+        }
+        return undefined;
+    }
+}
+__decorate([
+    observable
+], ActionRenderer.prototype, "params", void 0);
+__decorate([
+    observable
+], ActionRenderer.prototype, "pendingAction", void 0);
+const { create } = DesignToken;
+export const actionHeightMultiplier = create('action-height-multiplier').withDefault('0.6px');
+export const agActionRendererStyles = css `
+  .action-container {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+  }
+  .action-renderer {
+    align-self: center;
+    display: flex;
+    height: calc(
+      (var(--base-height-multiplier) + var(--density)) * var(--design-unit) *
+        var(--action-height-multiplier)
+    );
+  }
+`;
+export const foundationGridProActionRenderer = ActionRenderer.compose({
+    baseName: 'grid-pro-action-renderer',
+    styles: css `
+    ${agActionRendererStyles}
+  `,
+    template: html `
+    <div class="action-container" part="action-container">
+      <foundation-button
+        class="action-renderer"
+        part="action-renderer"
+        data-test-id="${(x) => x.dataTestId}"
+        ?disabled=${(x) => { var _a; return x.pendingAction || x.isDisabled((_a = x.params) === null || _a === void 0 ? void 0 : _a.data); }}
+        appearance="${(x) => x.params.appearance}"
+        @click=${(x) => x.clickHandler()}">${(x) => x.params.actionName}</foundation-button>
+    </div>`,
+});

package/dist/esm/cell-renderers/actions-menu.renderer.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { html, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { GridProRendererTypes } from '../grid-pro.types';
+export class ActionsMenuRenderer extends FoundationElement {
+    init(params) {
+        if (!params)
+            return;
+        this.params = params;
+    }
+    getGui() {
+        return this;
+    }
+    destroy() { }
+    refresh(params) {
+        return false;
+    }
+}
+__decorate([
+    observable
+], ActionsMenuRenderer.prototype, "params", void 0);
+export const foundationGridProActionsMenuRenderer = ActionsMenuRenderer.compose({
+    baseName: 'grid-pro-actions-menu-renderer',
+    template: html `
+    <foundation-actions-menu
+      name="${(x) => x.params.headerName}"
+      :definition=${(x) => x.params}
+    ></foundation-actions-menu>
+  `,
+});
+export const getActionsMenuDef = (actions, overrideDef = {}, customActionsOpenerName = '⋮', isVertical = false, buttonAppearance) => {
+    const actionsMenuDef = {
+        cellRenderer: GridProRendererTypes.actionsMenu,
+        cellRendererParams: {
+            actions,
+            buttonAppearance,
+            isVertical,
+            buttonText: customActionsOpenerName,
+        },
+        cellStyle: { border: 'none', overflow: 'visible' },
+        field: 'actions',
+        headerName: 'Actions',
+        width: 150,
+    };
+    return Object.assign(Object.assign({}, actionsMenuDef), overrideDef);
+};

package/dist/esm/cell-renderers/boolean.renderer.js

@@ -0,0 +1,42 @@
+import { __decorate } from "tslib";
+import { css, html, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+export class BooleanRenderer extends FoundationElement {
+    init(params) {
+        if (!params)
+            return;
+        this.params = params;
+    }
+    getGui() {
+        return this;
+    }
+    destroy() { }
+    refresh(params) {
+        return true;
+    }
+}
+__decorate([
+    observable
+], BooleanRenderer.prototype, "params", void 0);
+export const agBooleanRendererStyles = css `
+  :host {
+    align-center: center;
+    display: flex;
+    height: 100%;
+  }
+`;
+export const getAgBooleanRendererTemplate = (designSystem = 'foundation') => {
+    const checkboxComponent = `${designSystem}-checkbox`;
+    return html `
+    <${checkboxComponent}
+      @change="${(x) => { var _a; return (_a = x.params) === null || _a === void 0 ? void 0 : _a.changeHandler(x.params); }}"
+      checked="${(x) => { var _a; return (_a = x.params) === null || _a === void 0 ? void 0 : _a.value; }}"
+      readonly="${(x) => { var _a; return (_a = x.params) === null || _a === void 0 ? void 0 : _a.readonly; }}"
+    ></${checkboxComponent}>
+  `;
+};
+export const foundationAgBooleanRenderer = BooleanRenderer.compose({
+    baseName: 'boolean-renderer',
+    styles: agBooleanRendererStyles,
+    template: getAgBooleanRendererTemplate(),
+});

package/dist/esm/cell-renderers/index.js

@@ -0,0 +1,5 @@
+export * from './action.renderer';
+export * from './actions-menu.renderer';
+export * from './boolean.renderer';
+export * from './text.renderer';
+export * from './select.renderer';

package/dist/esm/cell-renderers/select.renderer.js

@@ -0,0 +1,69 @@
+import { __decorate } from "tslib";
+import { css, html, observable, repeat } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { setValueWithAccessor } from './utils';
+export class SelectRenderer extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.selectionChanged = (e) => {
+            this.value = e.target.value;
+            this.params.onSelect(e.target.value, this.params);
+        };
+    }
+    init(params) {
+        var _a;
+        if (!params)
+            return;
+        this.params = params;
+        this.value = setValueWithAccessor((_a = params.node) === null || _a === void 0 ? void 0 : _a.data, params.accessor) || undefined;
+    }
+    getGui() {
+        return this;
+    }
+    destroy() { }
+    refresh(params) {
+        return true;
+    }
+}
+__decorate([
+    observable
+], SelectRenderer.prototype, "params", void 0);
+__decorate([
+    observable
+], SelectRenderer.prototype, "value", void 0);
+export const agSelectRendererStyles = css `
+  :host,
+  .select-renderer,
+  zero-option,
+  ::part(listbox),
+  ::part(control) {
+    max-width: var(--select-renderer-max-width);
+    min-width: 100%;
+  }
+`;
+export const getSelectRendererTemplate = (designSystem = 'foundation') => {
+    const selectComponent = `${designSystem}-select`;
+    const optionComponent = `${designSystem}-option`;
+    return html `
+    <${selectComponent}
+      class="select-renderer"
+      @change=${(x, c) => x.selectionChanged(c.event)}
+      :value=${(x) => x.value}
+    >
+      <${optionComponent}
+        defaultSelected
+        style="display: none;"
+      >
+        ${(x) => x.params.defaultValue || 'Select option'}
+      </${optionComponent}>
+      ${repeat((x) => x.params.options(x.params.node.data), html `
+        <${optionComponent} value=${(x) => x.name}>${(x) => x.displayName}</${optionComponent}>
+      `)}
+    </${selectComponent}>
+  `;
+};
+export const foundationAgSelectRenderer = SelectRenderer.compose({
+    baseName: 'select-renderer',
+    styles: agSelectRendererStyles,
+    template: getSelectRendererTemplate(),
+});

package/dist/esm/cell-renderers/text.renderer.js

@@ -0,0 +1,66 @@
+import { __decorate } from "tslib";
+import { sync } from '@genesislcap/foundation-utils';
+import { css, html, observable, ref } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { setValueWithAccessor } from './utils';
+export class AgTextRenderer extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.textValue = '';
+        this.textChanged = (e) => {
+            this.textValue = e.target.value;
+            this.params.onChange(e.target.value, this.params);
+        };
+    }
+    init(params) {
+        var _a;
+        if (!params)
+            return;
+        this.params = params;
+        this.textValue =
+            this.textValue === ''
+                ? setValueWithAccessor((_a = params === null || params === void 0 ? void 0 : params.node) === null || _a === void 0 ? void 0 : _a.data, params.accessor)
+                : this.textValue;
+    }
+    getGui() {
+        return this;
+    }
+    destroy() { }
+    refresh(params) {
+        return true;
+    }
+}
+__decorate([
+    observable
+], AgTextRenderer.prototype, "textValue", void 0);
+__decorate([
+    observable
+], AgTextRenderer.prototype, "params", void 0);
+export const textRendererStyles = css `
+  :host {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-center: center;
+  }
+  .text-renderer {
+    width: 100%;
+  }
+`;
+export const getTextRendererTemplate = (designSystem = 'foundation') => {
+    const textComponent = `${designSystem}-text-field`;
+    return html `
+    <${textComponent}
+      ${ref('textField')}
+      type="text"
+      class="text-renderer"
+      :value="${sync((x) => x.textValue)}"
+      @change="${(x, c) => x.textChanged(c.event)}"
+    ></${textComponent}>
+  `;
+};
+export const foundationAgTextRenderer = AgTextRenderer.compose({
+    baseName: 'grid-text-renderer',
+    styles: textRendererStyles,
+    template: getTextRendererTemplate(),
+});

package/dist/esm/cell-renderers/utils/accessor.js

@@ -0,0 +1,18 @@
+export const setValueWithAccessor = (data, accessor) => {
+    if (accessor.indexOf('.') < 0) {
+        return data[accessor];
+    }
+    else {
+        const accessorPieces = accessor.split('.');
+        let currentObject = data;
+        while (accessorPieces.length > 0 && currentObject) {
+            const fieldPiece = accessorPieces.shift();
+            if (accessorPieces.length === 0) {
+                return currentObject[fieldPiece];
+            }
+            else {
+                currentObject = currentObject[fieldPiece];
+            }
+        }
+    }
+};

package/dist/esm/cell-renderers/utils/index.js

@@ -0,0 +1 @@
+export * from './accessor';

package/dist/esm/column/column.js

@@ -0,0 +1,24 @@
+import { __decorate } from "tslib";
+import { customElement, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { ColumnTemplate as template } from './column.template';
+let GridColumn = class GridColumn extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.definition = {};
+    }
+    slottedAgCellChanged() { }
+};
+__decorate([
+    observable
+], GridColumn.prototype, "slottedAgCell", void 0);
+__decorate([
+    observable
+], GridColumn.prototype, "definition", void 0);
+GridColumn = __decorate([
+    customElement({
+        name: 'grid-pro-column',
+        template,
+    })
+], GridColumn);
+export { GridColumn };

package/dist/esm/column/column.template.js

@@ -0,0 +1,6 @@
+import { html, slotted } from '@microsoft/fast-element';
+export const ColumnTemplate = html `
+  <template>
+    <slot ${slotted('slottedAgCell')} @slotchange="${(x) => x.slottedAgCellChanged()}"></slot>
+  </template>
+`;

package/dist/esm/column/index.js

@@ -0,0 +1,3 @@
+export * from './column.template';
+export * from './column';
+export * from './utils';

package/dist/esm/column/utils/grid-pro-columns.js

@@ -0,0 +1,15 @@
+import { html, repeat, when } from '@microsoft/fast-element';
+export function gridProColumns(itemsBinding, includeRenderers = true) {
+    return html `
+    ${repeat(typeof itemsBinding === 'function' ? itemsBinding : () => itemsBinding, html `
+        <grid-pro-column :definition=${(x) => x}>
+          ${when((x) => includeRenderers && x.cellRenderer, html `
+              <grid-pro-cell
+                :renderer="${(x) => x.cellRenderer}"
+                :rendererParams="${(x) => x.cellRendererParams}"
+              ></grid-pro-cell>
+            `)}
+        </grid-pro-column>
+      `)}
+  `;
+}

package/dist/esm/column/utils/index.js

@@ -0,0 +1 @@
+export * from './grid-pro-columns';