@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

package/src/old/components/renderers/custom-header-component.ts

@@ -1,92 +0,0 @@
-import { IHeaderComp, IHeaderParams } from '@ag-grid-community/core';
-import { checkboxTag } from '../../tags'; // Ensure this is your custom checkbox tag or use a regular HTML input tag
-
-export class CustomHeaderCheckboxComponent implements IHeaderComp {
-  private eCheckbox: HTMLElement;
-  private params!: IHeaderParams;
-  private indeterminateIndicator: HTMLElement | null = null;
-
-  constructor() {
-    this.eCheckbox = document.createElement(checkboxTag); // Create custom checkbox
-  }
-
-  refresh(params: IHeaderParams): boolean {
-    return true;
-  }
-
-  init(params: IHeaderParams): void {
-    this.params = params;
-
-    this.eCheckbox.setAttribute('aria-label', 'Select all rows');
-    this.eCheckbox.setAttribute('role', 'checkbox');
-    this.eCheckbox.setAttribute('tabindex', '0');
-
-    this.indeterminateIndicator =
-      this.eCheckbox.shadowRoot?.querySelector('[part="indeterminate-indicator"]') || null;
-
-    this.eCheckbox.addEventListener('click', this.onCheckboxClick);
-    this.eCheckbox.addEventListener('keydown', this.onKeyDown);
-
-    this.params.api.addEventListener('selectionChanged', this.updateCheckboxState);
-    this.updateCheckboxState(); // Initial state update
-  }
-
-  private onKeyDown = (event: KeyboardEvent) => {
-    // Spacebar triggers checkbox toggle
-    if (event.key === ' ' || event.key === 'Spacebar') {
-      event.preventDefault();
-      this.onCheckboxClick();
-    }
-  };
-
-  private onCheckboxClick = () => {
-    const isChecked = this.eCheckbox.classList.contains('checked');
-    this.params.api.forEachNode((node) => node.setSelected(!isChecked));
-    this.updateCheckboxState();
-  };
-
-  private updateCheckboxState = () => {
-    const selectedNodes = this.params.api.getSelectedNodes();
-    const displayedRowCount = this.params.api.getDisplayedRowCount();
-
-    // Remove all state classes first
-    this.eCheckbox.classList.remove('checked', 'unchecked', 'indeterminate');
-    this.eCheckbox.removeAttribute('aria-checked');
-
-    if (selectedNodes.length === displayedRowCount && displayedRowCount > 0) {
-      this.setCheckboxState('checked', true);
-    } else if (selectedNodes.length === 0) {
-      this.setCheckboxState('unchecked', false);
-    } else {
-      this.setCheckboxState('indeterminate', false);
-      this.updateIndeterminateIndicator();
-    }
-  };
-
-  private setCheckboxState(state: string, isChecked: boolean) {
-    this.eCheckbox.classList.add(state);
-    this.eCheckbox.setAttribute(
-      'aria-checked',
-      state === 'checked' ? 'true' : state === 'unchecked' ? 'false' : 'mixed',
-    );
-  }
-
-  private updateIndeterminateIndicator() {
-    if (!this.indeterminateIndicator) {
-      this.indeterminateIndicator = this.eCheckbox.shadowRoot?.querySelector(
-        '[part="indeterminate-indicator"]',
-      );
-    }
-    this.indeterminateIndicator.style.backgroundColor = 'var(--accent-fill-rest)';
-  }
-
-  getGui(): HTMLElement {
-    return this.eCheckbox; // Return the custom checkbox element
-  }
-
-  destroy(): void {
-    this.params.api.removeEventListener('selectionChanged', this.updateCheckboxState);
-    this.eCheckbox.removeEventListener('click', this.onCheckboxClick);
-    this.eCheckbox.removeEventListener('keydown', this.onKeyDown);
-  }
-}

package/src/old/components/renderers/filter-value-renderer.ts

@@ -1,237 +0,0 @@
-import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/core';
-import { css, html, observable, FoundationElement, ref } from '@genesislcap/web-core';
-import { getFilterTypeByFieldType } from '../../utils/getFiltersByType';
-
-/**
- * Custom params interface for the filter value renderer
- * @public
- */
-export interface FilterValueRendererParams {
-  onChange?: (value: any, params: ICellRendererParams) => void;
-  accessor?: string;
-}
-
-const ISO_DATETIME_LENGTH = 16;
-
-/**
- * The AG Filter Value Renderer element.
- * Provides type-aware input fields for filter values (text, number, date, datetime)
- * @public
- * @tagname %%prefix%%-filter-value-renderer
- */
-export class FilterValueRenderer extends FoundationElement implements ICellRendererComp {
-  @observable
-  public params: ICellRendererParams & FilterValueRendererParams;
-
-  value: any = '';
-  inputElement: HTMLInputElement;
-
-  @observable
-  inputType: 'text' | 'number' | 'date' | 'datetime-local' = 'text';
-
-  /**
-   * Initialize the renderer with cell parameters
-   */
-  public init(params: ICellRendererParams & FilterValueRendererParams) {
-    if (!params) return;
-
-    this.params = params;
-
-    // Get value using accessor or direct value
-    const accessor = params.accessor;
-    let value = params.value;
-
-    if (accessor && params.data) {
-      const keys = accessor.split('.');
-      let current = params.data;
-      for (const key of keys) {
-        current = current?.[key];
-      }
-      value = current;
-    }
-
-    // Determine input type based on field type
-    const fieldType = params.data?.type;
-    const filterType = getFilterTypeByFieldType(fieldType);
-
-    switch (filterType) {
-      case 'number':
-        this.inputType = 'number';
-        this.value = value ?? '';
-        break;
-
-      case 'date':
-        this.inputType = 'date';
-        // Convert epoch timestamp or Date object to ISO date string (YYYY-MM-DD)
-        if (value) {
-          if (typeof value === 'number') {
-            // Handle epoch timestamp
-            const date = new Date(value);
-            this.value = date.toISOString().split('T')[0];
-          } else if (typeof value === 'string') {
-            // Handle ISO string or other date formats
-            const date = new Date(value);
-            if (!isNaN(date.getTime())) {
-              this.value = date.toISOString().split('T')[0];
-            } else {
-              this.value = value;
-            }
-          } else if (value instanceof Date) {
-            this.value = value.toISOString().split('T')[0];
-          } else {
-            this.value = value;
-          }
-        } else {
-          this.value = '';
-        }
-        break;
-
-      case 'datetime':
-        this.inputType = 'datetime-local';
-        // Convert epoch timestamp or Date object to ISO datetime string (YYYY-MM-DDTHH:mm)
-        if (value) {
-          if (typeof value === 'number') {
-            // Handle epoch timestamp
-            const date = new Date(value);
-            this.value = date.toISOString().slice(0, ISO_DATETIME_LENGTH); // YYYY-MM-DDTHH:mm
-          } else if (typeof value === 'string') {
-            // Handle ISO string or other date formats
-            const date = new Date(value);
-            if (!isNaN(date.getTime())) {
-              this.value = date.toISOString().slice(0, ISO_DATETIME_LENGTH); // YYYY-MM-DDTHH:mm
-            } else {
-              this.value = value;
-            }
-          } else if (value instanceof Date) {
-            this.value = value.toISOString().slice(0, ISO_DATETIME_LENGTH); // YYYY-MM-DDTHH:mm
-          } else {
-            this.value = value;
-          }
-        } else {
-          this.value = '';
-        }
-        break;
-
-      case 'text':
-      default:
-        this.inputType = 'text';
-        this.value = value ?? '';
-        break;
-    }
-
-    // Set input value directly after element is ready
-    if (this.inputElement) {
-      this.inputElement.value = this.value;
-    }
-  }
-
-  /**
-   * Handle input blur events - only update when user leaves the field
-   * This prevents focus loss during typing
-   */
-  public handleChange(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const newValue = input.value;
-
-    // Store value internally (not as observable to avoid re-render)
-    this.value = newValue;
-
-    // Call onChange callback if provided
-    if (this.params.onChange) {
-      this.params.onChange(newValue, this.params);
-    }
-  }
-
-  /**
-   * Get the DOM element for the cell
-   */
-  public getGui(): HTMLElement {
-    return this;
-  }
-
-  /**
-   * Cleanup when renderer is destroyed
-   */
-  public destroy() {
-    // No cleanup needed
-  }
-
-  /**
-   * Refresh the cell with new data
-   */
-  public refresh(params: ICellRendererParams): boolean {
-    // Return false to indicate we don't support refresh
-    // AG Grid will destroy and recreate the cell renderer instead
-    return false;
-  }
-}
-
-/**
- * The AG Filter Value Renderer Styles.
- * @public
- */
-export const agFilterValueRendererStyles = css`
-  :host {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    width: 100%;
-  }
-
-  .filter-input {
-    width: 100%;
-    height: 100%;
-    padding: 0 8px;
-    border: none;
-    background: transparent;
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-    outline: none;
-  }
-
-  .filter-input:focus {
-    outline: none;
-    background: var(--ag-input-focus-background-color, var(--neutral-fill-input-rest));
-  }
-
-  .filter-input[type='date'],
-  .filter-input[type='datetime-local'] {
-    padding: 0 4px;
-  }
-
-  .filter-input[type='number'] {
-    text-align: right;
-  }
-`;
-
-/**
- * Get the template for the Filter Value Renderer
- * @returns A template for the filter value input
- * @public
- */
-export const getAgFilterValueRendererTemplate = () => {
-  return html<FilterValueRenderer>`
-    <input
-      ${ref('inputElement')}
-      class="filter-input"
-      type="${(x) => x.inputType ?? 'text'}"
-      value="${(x) => x.value ?? ''}"
-      @blur="${(x, c) => x.handleChange(c.event)}"
-      placeholder="Enter value..."
-    />
-  `;
-};
-
-/**
- * A function that returns a Foundation Filter Value Renderer registration for configuring the component with a DesignSystem.
- *
- * @public
- * @remarks
- * HTML Element: \<foundation-filter-value-renderer\>
- */
-export const foundationAgFilterValueRenderer = FilterValueRenderer.compose({
-  baseName: 'grid-pro-filter-value-renderer',
-  styles: agFilterValueRendererStyles,
-  template: getAgFilterValueRendererTemplate(),
-});

package/src/old/components/renderers/row-select.renderer.ts

@@ -1,148 +0,0 @@
-import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/core';
-import { BooleanRendererParams, EDITED_COLUMN_FIELD } from '@genesislcap/foundation-zero-grid-pro';
-import { css, html, observable, FoundationElement } from '@genesislcap/web-core';
-
-/**
- * The AG Row Select Renderer element.
- * @public
- * @tagname %%prefix%%-row-select-renderer
- */
-export class RowSelectRenderer extends FoundationElement implements ICellRendererComp {
-  @observable
-  public params: ICellRendererParams & BooleanRendererParams;
-
-  @observable
-  checked: boolean;
-
-  public isDisabled(data): boolean {
-    if (typeof this.params?.isDisabled === 'function') {
-      try {
-        return this.params.isDisabled(data);
-      } catch (error) {
-        // logger.error('Error executing grid action cell renderer isDisabled callback:', error);
-      }
-    }
-    return false;
-  }
-
-  public init(params: ICellRendererParams) {
-    if (!params) return;
-    this.params = params;
-    this.checked = !!params.value;
-    const { ariaLabelField } = params.context;
-    this.ariaLabel = `Select row for ${params.data[ariaLabelField]}. Press Space to toggle selection.`;
-    this.params.api.addEventListener('selectionChanged', this.onSelectionChanged.bind(this));
-  }
-
-  public onSelectionChanged() {
-    if (this.params && this.params.node) {
-      this.checked = this.params.node.isSelected() ?? false;
-    }
-  }
-
-  public changeHandler(e) {
-    this.checked = e.target.checked;
-    this.params.node.setSelected(this.checked);
-  }
-
-  public getGui(): HTMLElement {
-    return this;
-  }
-
-  public destroy() {
-    if (this.params && this.params.api) {
-      // oxlint-disable-next-line unicorn/no-invalid-remove-event-listener -- symmetric to addEventListener(.bind)
-      this.params.api.removeEventListener('selectionChanged', this.onSelectionChanged.bind(this));
-    }
-  }
-
-  public refresh(params: ICellRendererParams) {
-    this.checked = params.value;
-    return true;
-  }
-
-  getValue() {
-    return this.checked;
-  }
-
-  isCancelBeforeStart() {
-    return !!this.params.data[EDITED_COLUMN_FIELD];
-  }
-}
-
-/**
- * The AG Boolean Renderer Styles.
- * @public
- */
-export const agRowSelectRendererStyles = css`
-  :host {
-    align-items: center;
-    display: flex;
-    height: 100%;
-  }
-
-  .custom-checkbox {
-    width: calc((var(--base-height-multiplier) - 1) * 2px);
-    height: calc((var(--base-height-multiplier) - 1) * 2px);
-    background: var(--ag-background-color);
-  }
-
-  .custom-checkbox:focus {
-    outline: none;
-    box-shadow: var(--ag-input-focus-box-shadow);
-    border-radius: 2px;
-  }
-
-  .custom-checkbox::part(control) {
-    width: calc((var(--base-height-multiplier) - 1) * 2px);
-    height: calc((var(--base-height-multiplier) - 1) * 2px);
-    background: var(--ag-background-color);
-    border-radius: 2px;
-    border: calc(var(--stroke-width) * 2px) solid var(--ag-checkbox-unchecked-color);
-  }
-
-  .custom-checkbox[aria-checked='true'],
-  .custom-checkbox[aria-checked='true']::part(control) {
-    background: var(--ag-checkbox-checked-color);
-    border: none;
-  }
-
-  .custom-checkbox[aria-checked='true']::part(checked-indicator) {
-    fill: var(--foreground-on-accent-rest);
-    box-shadow: none;
-    border-radius: 0;
-  }
-`;
-
-/**
- * Get a Design System prefixed Checkbox template.
- * @param designSystem - The design system prefix to use. Defaults to 'foundation'.
- * @returns A Checkbox component template prefixed with the correct design system.
- * @public
- */
-export const getAgRowSelectRendererTemplate = (designSystem = 'rapid') => {
-  const checkboxComponent = `${designSystem}-checkbox`;
-  return html<RowSelectRenderer>`
-    <${checkboxComponent}
-      role="checkbox"
-      class="custom-checkbox"
-      @change=${(x, c) => x.changeHandler(c.event)}
-      :checked=${(x) => x.checked}
-      :disabled=${(x) => x.isDisabled(x.params.data)}
-      aria-label=${(x) => x.ariaLabel}
-    ></${checkboxComponent}>
-  `;
-};
-
-/**
- * A function that returns a Foundation Row Select Renderer registration for configuring the component with a DesignSystem.
- *
- * @public
- * @remarks
- * HTML Element: \<foundation-row-select-renderer\>
- */
-export const foundationAgRowSelectRenderer = RowSelectRenderer.compose({
-  baseName: 'grid-pro-row-select-renderer',
-  styles: agRowSelectRendererStyles,
-  template: getAgRowSelectRendererTemplate(),
-});

package/src/old/components/select-fields/columns.ts

@@ -1,83 +0,0 @@
-import type { GridOptions } from '@ag-grid-community/core';
-import { defaultRowConfig } from '../../constants/grid-config';
-import { RowSelectRenderer } from '../renderers/row-select.renderer';
-
-/**
- * Field selection grid config
- */
-export const FIELD_SELECT_CONFIG = {
-  colDefs: [
-    {
-      cellRenderer: 'row-select',
-      checkboxSelection: false,
-      filter: false,
-      headerCheckboxSelection: true,
-      suppressMenu: true,
-      suppressSorting: true,
-      width: 60,
-    },
-    {
-      field: 'name',
-      headerName: 'Field Name',
-    },
-  ],
-  gridOptions: {
-    ...defaultRowConfig,
-    components: {
-      'row-select': RowSelectRenderer,
-    },
-    defaultColDef: {
-      filter: false,
-      floatingFilter: false,
-      sortable: false,
-      sort: 'asc',
-      suppressMenu: false,
-      resizable: false,
-    },
-    context: {
-      ariaLabelField: 'name',
-    },
-    rowSelection: 'multiple',
-    suppressRowClickSelection: true,
-  } as GridOptions,
-};
-
-/**
- * Selected fields config
- */
-export const SELECTED_FIELDS_CONFIG = {
-  colDefs: [
-    {
-      cellRenderer: 'row-select',
-      checkboxSelection: false,
-      filter: false,
-      headerCheckboxSelection: true,
-      suppressMenu: true,
-      suppressSorting: true,
-      width: 60,
-    },
-    {
-      field: 'name',
-      headerName: 'Column name',
-    },
-  ],
-  gridOptions: {
-    ...defaultRowConfig,
-    components: {
-      'row-select': RowSelectRenderer,
-    },
-    defaultColDef: {
-      filter: false,
-      floatingFilter: false,
-      sortable: false,
-      suppressMenu: false,
-      resizable: false,
-    },
-    context: {
-      ariaLabelField: 'name',
-    },
-    animateRows: true,
-    debug: true,
-    rowDragManaged: true,
-  },
-};