@genesislcap/grid-pro 14.18.0 → 14.19.0

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

@@ -0,0 +1,94 @@
+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';
+/**
+ * The AG Text Field Renderer element.
+ * @public
+ * @tagname %%prefix%%-grid-text-field-renderer
+
+ */
+export class AgTextFieldRenderer extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        // Text field value
+        this.textValue = '';
+        /**
+         * On text change handler
+         * @param e - CustomEvent
+         */
+        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
+], AgTextFieldRenderer.prototype, "textValue", void 0);
+__decorate([
+    observable
+], AgTextFieldRenderer.prototype, "params", void 0);
+/**
+ * The AG Text Field Renderer Styles.
+ * @public
+ */
+export const textFieldRendererStyles = css `
+  :host {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-center: center;
+  }
+  .text-renderer {
+    width: 100%;
+  }
+`;
+/**
+ * Get a Design System prefixed Text Field template.
+ * @param designSystem - The design system prefix to use. Defaults to 'foundation'.
+ * @returns A Text Field component template prefixed with the correct design system.
+ * @public
+ */
+export const getTextFieldRendererTemplate = (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}>
+  `;
+};
+/**
+ * The Foundation Text Field Renderer registry.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-grid-pro-text-field-renderer\>
+ */
+export const foundationAgTextFieldRenderer = AgTextFieldRenderer.compose({
+    baseName: 'grid-pro-text-renderer',
+    styles: textFieldRendererStyles,
+    template: getTextFieldRendererTemplate(),
+});

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

@@ -1,76 +1,27 @@
-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';
+// TODO: DEPRECATED due the incorrect "text" name
+import { AgTextFieldRenderer, getTextFieldRendererTemplate, textFieldRendererStyles, } from './text-field.renderer';
 /**
+ * @public
+ * @deprecated - Use AgTextFieldRenderer instead
  * @tagname %%prefix%%-grid-text-renderer
  */
-export class AgTextRenderer extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        // Text field value
-        this.textValue = '';
-        /**
-         * On text change handler
-         * @param e CustomEvent
-         */
-        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;
-    }
+export class AgTextRenderer extends AgTextFieldRenderer {
 }
-__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}>
-  `;
-};
 /**
- * The Foundation Text Renderer
+ * @public
+ * @deprecated - Use textFieldRendererStyles instead
+ */
+export const textRendererStyles = textFieldRendererStyles;
+/**
+ * @public
+ * @deprecated - Use getTextFieldRendererTemplate instead
+ */
+export const getTextRendererTemplate = getTextFieldRendererTemplate;
+/**
+ * The Foundation Text Renderer registry.
  *
  * @public
+ * @deprecated - Use foundationAgTextFieldRenderer instead
  * @remarks
  * HTML Element: \<foundation-grid-text-renderer\>
  */

package/dist/esm/column/column.js

@@ -2,6 +2,11 @@ import { __decorate } from "tslib";
 import { customElement, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { ColumnTemplate as template } from './column.template';
+/**
+ * The Grid Pro Column element.
+ * @remarks Used insde the Grid Pro element, to specify the column definitions (ColDef) for a given column.
+ * @public
+ */
 let GridColumn = class GridColumn extends FoundationElement {
     constructor() {
         super(...arguments);

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

@@ -1,4 +1,8 @@
 import { html, slotted } from '@microsoft/fast-element';
+/**
+ * The Grid Pro Column Template.
+ * @public
+ */
 export const ColumnTemplate = html `
   <template>
     <slot ${slotted('slottedAgCell')} @slotchange="${(x) => x.slottedAgCellChanged()}"></slot>

package/dist/esm/external/ag-grid-css.js

@@ -1,4 +1,9 @@
 import { css } from '@microsoft/fast-element';
+/**
+ * AG Grid core CSS.
+ * @remarks without this grid will not show up.
+ * @public
+ */
 export const agGridCSS = css `
   .ag-icon {
     font-family: var(--ag-icon-font-family);

package/dist/esm/external/ag-head-css.js

@@ -1,4 +1,9 @@
 import { css } from '@microsoft/fast-element';
+/**
+ * Custom Drag n Drop CSS for Grid Pro.
+ * @remarks helps with color and background issues when dragging a column.
+ * @public
+ */
 export const agHeadCSS = css `
   .ag-dnd-ghost {
     background: var(--ag-header-background-color, var(--ag-background-color, #1f2126));

package/dist/esm/external/ag-theme-alpine-no-font-css.js

@@ -1,4 +1,8 @@
 import { css } from '@microsoft/fast-element';
+/**
+ * AG Alpine Theme (no fonts) CSS.
+ * @public
+ */
 export const agThemeAlpineNofontsCSS = css `
   .ag-theme-alpine,
   .ag-theme-alpine-dark {

package/dist/esm/external/ag-theme-balham-no-font-css.js

@@ -1,4 +1,8 @@
 import { css } from '@microsoft/fast-element';
+/**
+ * AG Balham Theme (no fonts) CSS.
+ * @public
+ */
 export const agThemeBalhamNofontsCSS = css `
   .ag-theme-balham,
   .ag-theme-balham-dark {

package/dist/esm/external/ag-theme-material-no-font-css.js

@@ -1,4 +1,8 @@
 import { css } from '@microsoft/fast-element';
+/**
+ * AG Material Theme (no fonts) CSS.
+ * @public
+ */
 export const agThemeMaterialNofontsCSS = css `
   .ag-theme-material {
     --ag-material-primary-color: #3f51b5;

package/dist/esm/external/fonts.js

@@ -1,4 +1,8 @@
 import { AgGridTheme } from '../grid-pro.types';
+/**
+ * The AG Alpine font face used on ag-theme-alpine/ag-theme-alpine-dark Grid Pro themes.
+ * @public
+ */
 export const agGridAlpineFontFace = `
   @font-face {
     font-family: "agGridAlpine";
@@ -7,6 +11,10 @@ export const agGridAlpineFontFace = `
     font-style: normal;
   }
 `;
+/**
+ * The AG Balham font face used on ag-theme-balham/ag-theme-balham-dark Grid Pro themes.
+ * @public
+ */
 export const agGridBalhamFontFace = `
   @font-face {
     font-family: "agGridBalham";
@@ -15,6 +23,10 @@ export const agGridBalhamFontFace = `
     font-style: normal;
   }
 `;
+/**
+ * The AG Material font face used on ag-theme-material Grid Pro theme.
+ * @public
+ */
 export const agGridMaterialFontFace = `
   @font-face {
     font-family: "agGridMaterial";
@@ -23,6 +35,10 @@ export const agGridMaterialFontFace = `
     font-style: normal;
   }
 `;
+/**
+ * Font Face map with all the font faces for each theme.
+ * @public
+ */
 export const agThemeFontFaceMap = {
     [AgGridTheme.alpine]: agGridAlpineFontFace,
     [AgGridTheme.alpineDark]: agGridAlpineFontFace,
@@ -30,4 +46,9 @@ export const agThemeFontFaceMap = {
     [AgGridTheme.balhamDark]: agGridBalhamFontFace,
     [AgGridTheme.material]: agGridMaterialFontFace,
 };
+/**
+ * The default font face for Grid Pro (agGridAlpine).
+ * @remarks this will change to Roboto.
+ * @public
+ */
 export const defaultAgGridFontFace = agGridAlpineFontFace;

package/dist/esm/external/index.js

@@ -5,6 +5,11 @@ import { agThemeAlpineNofontsCSS } from './ag-theme-alpine-no-font-css';
 import { agThemeBalhamNofontsCSS } from './ag-theme-balham-no-font-css';
 import { agThemeMaterialNofontsCSS } from './ag-theme-material-no-font-css';
 export * from './fonts';
+/**
+ * All External AG Grid Stock in one CSS.
+ * @remarks This is a collection of multiple AG themes, only needed if the target element needs more than one stock theme.
+ * @public
+ */
 export const agExternalStockStyles = css `
   ${agGridCSS}
   ${agHeadCSS}
@@ -12,4 +17,8 @@ export const agExternalStockStyles = css `
   ${agThemeBalhamNofontsCSS}
   ${agThemeMaterialNofontsCSS}
 `;
+/**
+ * All available External AG Grid Stock CSS.
+ * @public
+ */
 export { agGridCSS, agHeadCSS, agThemeAlpineNofontsCSS, agThemeBalhamNofontsCSS, agThemeMaterialNofontsCSS, };

package/dist/esm/grid-components.js

@@ -1,10 +1,16 @@
-import { foundationGridProActionRenderer, foundationGridProActionsMenuRenderer, foundationAgBooleanRenderer, foundationAgSelectRenderer, foundationAgTextRenderer, } from './cell-renderers';
+import { foundationGridProActionRenderer, foundationGridProActionsMenuRenderer, foundationAgBooleanRenderer, foundationAgSelectRenderer, foundationAgTextRenderer, foundationAgTextFieldRenderer, } from './cell-renderers';
 import { foundationGridPro } from './grid-pro';
+/**
+ * The Grid Pro Components.
+ * @remarks Contains all available components, from Grid Pro itself to the cell renderers.
+ * @public
+ */
 export const foundationGridComponents = {
     foundationGridProActionRenderer,
     foundationGridProActionsMenuRenderer,
     foundationAgBooleanRenderer,
     foundationAgTextRenderer,
+    foundationAgTextFieldRenderer,
     foundationAgSelectRenderer,
     foundationGridPro,
     register(container, ...rest) {

package/dist/esm/grid-pro-genesis-datasource/grid-pro-genesis-datasource.js

@@ -86,11 +86,14 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         }
         logger.warn(`Application not connected, falling back to local columnDefs/rowData`);
     }
+    /**
+     * @public
+     */
     deinit() {
         this.reset();
     }
     /**
-     * Use {@link deinit} instead
+     * Use {@link @genesislcap/grid-pro#GridProGenesisDatasource#deinit} instead
      * @deprecated
      */
     reset() {

package/dist/esm/grid-pro.definitions.js

@@ -1,4 +1,11 @@
 import { formatDateTimestamp, formatDateTimeTimestamp } from '@genesislcap/foundation-utils';
+/**
+ * Returns a filter type based on the Grid Pro field/column type.
+ * @param type - The type of the field/column
+ * @returns The ag-grid filter type
+ * @remarks Currently only returns agTextColumnFilter
+ * @alpha
+ */
 export function getFilterByFieldType(type) {
     switch (type) {
         // case 'int':
@@ -14,6 +21,13 @@ export function getFilterByFieldType(type) {
             return 'agTextColumnFilter';
     }
 }
+/**
+ * Return a column type base on each field's metadata from the selected resource.
+ * @param metadataType - The type of the field/column
+ * @returns the column type
+ * @remarks Currently only handles numeric columns
+ * @alpha
+ */
 export function getColumnType(metadataType) {
     switch (metadataType === null || metadataType === void 0 ? void 0 : metadataType.toLowerCase()) {
         case 'int':
@@ -24,6 +38,13 @@ export function getColumnType(metadataType) {
             return 'numericColumn';
     }
 }
+/**
+ * Returns the filter params based on the Grid Pro field/column type.
+ * @param type - The type of the field/column
+ * @returns the filter params for the specified field type
+ * @remarks Currently only returns a default filter params object, for all field types
+ * @alpha
+ */
 export function getFilterParamsByFieldType(type) {
     switch (type) {
         // case FieldTypeEnum.DATE:
@@ -60,14 +81,33 @@ export function getFilterParamsByFieldType(type) {
         }
     }
 }
+/**
+ * Returns a formatted date value from the Grid Pro cell value.
+ * @param param - A ValueFormatterParams object.
+ * @returns A formatted date value.
+ * @public
+ */
 export function dateValueFormatter({ value }) {
     return formatDateTimestamp(value);
 }
+/**
+ * Returns a formatted date time value from the Grid Pro cell value.
+ * @param param - A ValueFormatterParams object.
+ * @returns A formatted date time value.
+ * @public
+ */
 export function dateTimeValueFormatter({ value }) {
     return formatDateTimeTimestamp(value);
 }
 // TODO: possible duplicate - need to evaluate the differences
 const isoDateTimeSliceEnd = 19;
+/**
+ * Returns a formatted date value from an epoch number.
+ * @param epoch - A number representing the number of milliseconds since the Unix epoch (1 January 1970 00:00:00 UTC).
+ * @returns A formatted date value.
+ * @alpha
+ * @deprecated No longer used in the Grid Pro package.
+ */
 export function formatDateExtra(epoch) {
     return new Date(epoch)
         .toISOString()

package/dist/esm/grid-pro.js

@@ -125,7 +125,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         }, DEBOUNCED_RESIZE_TIME);
     }
     /**
-     * If {@link gridAutosizingEnabled} is true, will remove the widths from the column states.
+     * If {@link @genesislcap/grid-pro#GridPro#gridAutosizingEnabled} is true, will remove the widths from the column states.
      * @internal
      */
     removeConfigWidthsToAutosize(colState) {

package/dist/esm/grid-pro.styles.js

@@ -1,5 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { agExternalStockStyles } from './external';
+/**
+ * The Grid Pro styles.
+ * @public
+ * @remarks this is the default CSS, bundles Alpine/Balham/Material AG themes.
+ */
 export const foundationGridProStyles = css `
   ${agExternalStockStyles}
   :host {

package/dist/esm/grid-pro.template.js

@@ -1,4 +1,8 @@
 import { html, ref } from '@microsoft/fast-element';
+/**
+ * The Grid Pro Template.
+ * @public
+ */
 export const gridProTemplate = html `
   <template>
     <span part="grid" class="${(x) => x.classNames}">

package/dist/esm/grid-pro.types.js

@@ -1,5 +1,9 @@
 import { CSSVarsTokenMapper } from '@genesislcap/foundation-ui';
 import { css } from '@microsoft/fast-element';
+/**
+ * All official AG CSS variables
+ * @public
+ */
 export var AgGridCSSVars;
 (function (AgGridCSSVars) {
     AgGridCSSVars["foregroundColor"] = "--ag-foreground-color";
@@ -47,6 +51,10 @@ export var AgGridCSSVars;
     AgGridCSSVars["inputFocusBoxShadow"] = "--ag-input-focus-box-shadow";
     AgGridCSSVars["inputFocusBorderColor"] = "--ag-input-focus-border-color";
 })(AgGridCSSVars || (AgGridCSSVars = {}));
+/**
+ * The available Grid Pro themes.
+ * @public
+ */
 export var AgGridTheme;
 (function (AgGridTheme) {
     AgGridTheme["alpine"] = "ag-theme-alpine";
@@ -55,13 +63,63 @@ export var AgGridTheme;
     AgGridTheme["balhamDark"] = "ag-theme-balham-dark";
     AgGridTheme["material"] = "ag-theme-material";
 })(AgGridTheme || (AgGridTheme = {}));
+/**
+ * Generates the class name for a given Grid Pro theme name.
+ * @param themeName - the Grid Pro theme name
+ * @returns the class name for the Grid Pro token map
+ * @public
+ * @example The result of this will be a class name that is applied to the grid part of GridPro template (actual content of the class comes from agThemeTokenMapCSS):
+ * ```html
+ * <span part="grid" class="ag-theme-genesis-rapid-dark">
+ * ```
+ */
 export const agThemeTokenMapClassname = (themeName) => `${themeName}-token-map`;
+/**
+ * Generates the id name for custom Grid Pro fonts.
+ * @param themeName - the Grid Pro theme name
+ * @returns the id name for the Grid Pro fonts
+ * @public
+ * @example The result of this is used in the id of style tag:
+ * ```html
+ * <style id="ag-theme-alpine-fonts"></style>
+ * ```
+ */
 export const agThemeFontsId = (themeName) => `${themeName}-fonts`;
+/**
+ * Generates the CSS for a given GridPro theme name and token map
+ * @param themeName - the GridPro theme name
+ * @param tokenMap - a map of CSS variables {@link @genesislcap/grid-pro#AgGridCSSVars} and custom token values
+ * @returns the CSS for the Grid Pro token map
+ * @public
+ * @example
+ * ```ts
+ * export const agThemeGenesisRapidTokens = {
+ *  backgroundColor: create<Swatch>('rapid-ag-background-color').withDefault((elem: HTMLElement) =>
+ *    baseLayerLuminance.getValueFor(elem) === StandardLuminance.LightMode
+ *      ? lightColors.backgroundSwatch
+ *      : darkColors.backgroundSwatch
+ *  ),
+ *  foregroundColor: create<Swatch>('rapid-ag-foreground-color').withDefault((elem: HTMLElement) =>
+ *    baseLayerLuminance.getValueFor(elem) === StandardLuminance.LightMode
+ *      ? lightColors.foregroundSwatch
+ *      : darkColors.foregroundSwatch
+ *  ),
+ * };
+ * export const agThemeGenesisRapidTokenMap: CSSVarTokenMap<AgGridCSSVars | string> = {
+ *  [AgGridCSSVars.backgroundColor]: agThemeGenesisRapidTokens.backgroundColor,
+ *  [AgGridCSSVars.foregroundColor]: agThemeGenesisRapidTokens.foregroundColor,
+ * };
+ * ```
+ */
 export const agThemeTokenMapCSS = (themeName, tokenMap) => css `
   .${agThemeTokenMapClassname(themeName)} {
     ${new CSSVarsTokenMapper(tokenMap)}
   }
 `;
+/**
+ * The available Grid Pro Renderer Types
+ * @public
+ */
 export var GridProRendererTypes;
 (function (GridProRendererTypes) {
     GridProRendererTypes["action"] = "action";

package/dist/esm/index.js

@@ -1,3 +1,7 @@
+import * as AgcCore from '@ag-grid-community/core';
+import * as AgcCsvExport from '@ag-grid-community/csv-export';
+import * as AgeCore from '@ag-grid-enterprise/core';
+import * as AgeExcelExport from '@ag-grid-enterprise/excel-export';
 export * from './grid-pro.definitions';
 export * from './grid-pro.styles';
 export * from './grid-pro.template';
@@ -11,9 +15,27 @@ export * from './column';
 export * from './grid-pro-genesis-datasource';
 export * from './grid-components';
 export * from './utils';
-export * as AgcCore from '@ag-grid-community/core';
+/**
+ * Re-export of entire @ag-grid-community/core
+ */
+export { AgcCore };
+/**
+ * Re-export of ClientSideRowModelModule from @ag-grid-community/client-side-row-model
+ */
 export { ClientSideRowModelModule as AgcCSRMModule } from '@ag-grid-community/client-side-row-model';
-export * as AgcCsvExport from '@ag-grid-community/csv-export';
-export * as AgeCore from '@ag-grid-enterprise/core';
+/**
+ * Re-export of entire @ag-grid-community/csv-export
+ */
+export { AgcCsvExport };
+/**
+ * Re-export of entire @ag-grid-enterprise/core
+ */
+export { AgeCore };
+/**
+ * Re-export of ServerSideRowModelModule from @ag-grid-enterprise/server-side-row-model
+ */
 export { ServerSideRowModelModule as AgeSSRMModule } from '@ag-grid-enterprise/server-side-row-model';
-export * as AgeExcelExport from '@ag-grid-enterprise/excel-export';
+/**
+ * Re-export of entire @ag-grid-enterprise/excel-export
+ */
+export { AgeExcelExport };

package/dist/esm/style/colors.js

@@ -1,4 +1,14 @@
 import { parseColorHexRGB } from '@microsoft/fast-colors';
 import { SwatchRGB } from '@microsoft/fast-components';
+/**
+ * The background color swatch.
+ * @deprecated - only used in the deprecated ag-theme-material theme
+ * @internal
+ */
 export const backgroundSwatch = SwatchRGB.from(parseColorHexRGB('#4c4c4c'));
+/**
+ * The foreground color swatch.
+ * @deprecated - only used in the deprecated ag-theme-material theme
+ * @internal
+ */
 export const foregroundSwatch = SwatchRGB.from(parseColorHexRGB('#c01754'));

package/dist/esm/style/tokens.js

@@ -1,6 +1,11 @@
 import { DesignToken } from '@microsoft/fast-foundation';
 import { backgroundSwatch, foregroundSwatch } from './colors';
 const { create } = DesignToken;
+/**
+ * The design tokens for the ag-theme-material theme.
+ * @deprecated - use no usage in the codebase
+ * @internal
+ */
 export const agThemeMaterialCustomTokens = {
     foregroundColor: create('fui-ag-foreground-color').withDefault(foregroundSwatch),
     backgroundColor: create('fui-ag-background-color').withDefault(backgroundSwatch),

package/dist/esm/utils/logger.js

@@ -1,2 +1,6 @@
 import { createLogger } from '@genesislcap/foundation-utils';
+/**
+ * Logger for the grid-pro package
+ * @public
+ */
 export const logger = createLogger('grid-pro');