eru-grid 0.0.26 → 0.0.27

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "eru-grid",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "peerDependencies": {
     "@angular/common": "^21.1.2",
-    "@angular/core": "^21.1.2"
+    "@angular/core": "^21.1.2",
+    "@angular/cdk": "^21.1.2",
+    "@angular/material": "^21.1.2",
+    "@angular/forms": "^21.1.2",
+    "@angular/router": "^21.1.2",
+    "rxjs": "~7.8.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/types/eru-grid.d.ts

@@ -1,6 +1,6 @@
 import * as eru_grid from 'eru-grid';
 import * as _angular_core from '@angular/core';
-import { OnInit, AfterViewInit, OnDestroy, QueryList, ElementRef, ChangeDetectorRef, Provider, EventEmitter, Signal } from '@angular/core';
+import { OnInit, AfterViewInit, OnDestroy, QueryList, ElementRef, TemplateRef, ChangeDetectorRef, Provider, EventEmitter } from '@angular/core';
 import { FixedSizeVirtualScrollStrategy, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { MatDatepicker } from '@angular/material/datepicker';
 
@@ -60,12 +60,17 @@ interface GridFeatures {
     freezeField?: string;
     freezeHeader?: boolean;
     freezeGrandTotal?: boolean;
+    sortable?: boolean;
+    sortBar?: boolean;
     replaceZeroValue?: string;
     gridHeight?: number;
     allowSelection?: boolean;
     actionColumn?: boolean;
     actionColumnPosition?: 'before' | 'after';
     designMode?: boolean;
+    groupBar?: boolean;
+    headerRowHeight?: number;
+    dataRowHeight?: number;
 }
 interface GridStyles {
     subTotalStyle?: 'bold' | 'italic' | 'highlighted';
@@ -74,12 +79,16 @@ interface GridStyles {
 interface GridTokens {
     [key: string]: string;
 }
+type GridPreset = 'default' | 'modern' | 'compact' | 'bold' | 'financial' | 'elevated' | 'custom';
+declare const PRESET_MANAGED_FIELDS: (keyof GridFeatures)[];
+declare const PRESET_CONFIG_DEFAULTS: Record<Exclude<GridPreset, 'custom'>, Partial<GridFeatures>>;
 interface GridConfiguration {
     mode: GridMode;
     config: GridFeatures;
     fields: Field[];
     styles?: GridStyles;
     tokens?: GridTokens;
+    preset?: GridPreset;
     pivot?: PivotConfiguration;
     data?: any[];
     columnConstraints?: {
@@ -119,6 +128,8 @@ interface Field {
     showSubtotals?: boolean;
     aggregationFunction?: AggregationFunction;
     enableDrilldown?: boolean;
+    open_status?: any[];
+    close_status?: any[];
 }
 type DataTypes = 'number' | 'textbox' | 'currency' | 'date' | 'datetime' | 'duration' | 'dropdown_single_select' | 'dropdown_multi_select' | 'location' | 'email' | 'people' | 'checkbox' | 'phone' | 'priority' | 'status' | 'progress' | 'attachment' | 'tag' | 'rating' | 'website';
 type AggregationFunction = 'sum' | 'count' | 'avg' | 'min' | 'max';
@@ -228,6 +239,23 @@ interface CellValueChange {
     rowId: string;
     row: any;
 }
+/**
+ * Template context injected into a custom boardCardTemplate on EruGridComponent.
+ *
+ * Usage in a consumer app:
+ *   <ng-template #myCard let-row let-columns="columns" let-group="group">
+ *     <mat-card>{{ row?.entity_id }} — {{ group.title }}</mat-card>
+ *   </ng-template>
+ *   <eru-grid [boardCardTemplate]="myCard" [gridConfig]="cfg"></eru-grid>
+ */
+interface BoardCardContext {
+    /** Row data for this card ($implicit — bind with let-row) */
+    $implicit: Row;
+    /** Visible columns configured for the board view */
+    columns: Field[];
+    /** The Kanban column (group) this card belongs to */
+    group: RowGroup;
+}
 
 declare class PivotTransformService {
     private columnGroupState;
@@ -522,12 +550,18 @@ declare class EruGridStore {
     private readonly _columnResize;
     private readonly _columnReorder;
     private readonly _cellValueChange;
+    private readonly _sortColumns;
     private readonly _dataRequest;
     private readonly _requestQueue;
     readonly columns: _angular_core.Signal<Field[]>;
     readonly groups: _angular_core.Signal<RowGroup[]>;
     readonly rows: _angular_core.Signal<Row[]>;
     readonly groupRows: _angular_core.Signal<Map<string, Row[]>>;
+    /** Reactive summary: array of { groupId, count } for each group currently in the store. */
+    readonly groupRowsSummary: _angular_core.Signal<{
+        groupId: string;
+        count: number;
+    }[]>;
     readonly selectedRowIds: _angular_core.Signal<Set<string>>;
     readonly configuration: _angular_core.Signal<GridConfiguration>;
     readonly isLoading: _angular_core.Signal<boolean>;
@@ -542,6 +576,7 @@ declare class EruGridStore {
     readonly columnResize: _angular_core.Signal<ColumnResize | null>;
     readonly columnReorder: _angular_core.Signal<ColumnReorder | null>;
     readonly cellValueChange: _angular_core.Signal<CellValueChange | null>;
+    readonly sortColumns: _angular_core.Signal<string[]>;
     readonly dataRequest: _angular_core.Signal<RowDataRequest | null>;
     readonly dynamicDataRequest: _angular_core.Signal<string[] | null>;
     readonly dynamicData: _angular_core.Signal<Map<string, any> | null>;
@@ -611,7 +646,7 @@ declare class EruGridStore {
     setError(error: string | null): void;
     isRowSelected(rowId: string): boolean;
     isGroupSelected(groupId: string): boolean;
-    getRowsForGroup(groupId: string): Row[];
+    getRowsForGroup(groupId: string | null | undefined): Row[];
     setGridMode(mode: GridMode): void;
     updateGridConfiguration(updates: Partial<GridConfiguration>): void;
     setPivotConfiguration(pivotConfig: PivotConfiguration): void;
@@ -706,6 +741,28 @@ declare class EruGridStore {
      * Get the row grand total for table mode
      */
     getRowGrandTotal(): RowGrandTotal | null;
+    /**
+     * Set sort direction for a column.
+     * If the column already has the requested direction, it is removed (toggle off).
+     * Otherwise, any existing sort on that column is replaced with the new direction.
+     */
+    setSortDirection(fieldName: string, direction: 'asc' | 'desc'): void;
+    /**
+     * Get the field name used for grouping, or null if no grouping
+     */
+    getGroupByField(): string | null;
+    /**
+     * Clear all sort columns
+     */
+    clearSort(): void;
+    /**
+     * Get the sort direction for a specific field: 'asc' | 'desc' | null
+     */
+    getSortDirection(fieldName: string): 'asc' | 'desc' | null;
+    /**
+     * Get the sort priority (1-based) for a field, or null if not sorted
+     */
+    getSortPriority(fieldName: string): number | null;
     /**
      * Set the dynamic data request
      */
@@ -779,6 +836,9 @@ declare class EruGridService {
     private eruGridStore;
     private themeService;
     private columnConstraintsService;
+    private _loadBoardFn;
+    /** Called once by EruGridComponent to register its loadBoardAll trigger. */
+    registerLoadBoard(fn: () => void): void;
     constructor(eruGridStore: EruGridStore, themeService: ThemeService, columnConstraintsService: ColumnConstraintsService);
     set_table_configuration(data: GridConfiguration): void;
     get columns(): _angular_core.Signal<Field[]>;
@@ -825,6 +885,7 @@ declare class EruGridService {
     get configuration(): _angular_core.Signal<GridConfiguration>;
     get isLoading(): _angular_core.Signal<boolean>;
     get error(): _angular_core.Signal<string | null>;
+    get sortColumns(): _angular_core.Signal<string[]>;
     /**
      * Check if a specific feature is enabled
      */
@@ -855,6 +916,8 @@ declare class EruGridComponent implements OnInit, AfterViewInit, OnDestroy {
     gridService: EruGridService;
     gridStore: EruGridStore;
     private elementRef;
+    private breakpointObserver;
+    readonly isSmViewport: _angular_core.WritableSignal<boolean>;
     private containerHeight;
     private resizeObserver;
     private groupIntersectionObserver;
@@ -866,6 +929,31 @@ declare class EruGridComponent implements OnInit, AfterViewInit, OnDestroy {
     headerScrollers?: QueryList<ElementRef<HTMLDivElement>>;
     gtScroller: ElementRef<HTMLDivElement>;
     gridConfig: GridConfiguration | undefined;
+    /**
+     * Optional custom template for board-mode cards.
+     * When provided, EruGridComponent renders this template for each card instead of the built-in card.
+     * The shared EruGridStore is used regardless — state (rows, groups, selection) is preserved
+     * across table / pivot / board mode switches.
+     *
+     * Template context: BoardCardContext
+     *   - $implicit  → Row        (bind with let-row)
+     *   - columns    → Field[]    (bind with let-columns="columns")
+     *   - group      → RowGroup   (bind with let-group="group")
+     *
+     * Example:
+     *   <ng-template #myCard let-row let-columns="columns" let-group="group">
+     *     <mat-card>{{ row?.entity_id }} in {{ group.title }}</mat-card>
+     *   </ng-template>
+     *   <eru-grid [boardCardTemplate]="myCard" [gridConfig]="cfg"></eru-grid>
+     */
+    boardCardTemplate?: TemplateRef<BoardCardContext>;
+    /**
+     * Height in pixels of each board card slot.
+     * Must match the fixed height of the card rendered by boardCardTemplate (or the default card).
+     * CDK virtual scroll uses this to position items — mismatches cause overlap or gaps.
+     * Default: 208 (matches the built-in default card height).
+     */
+    boardCardHeight: number;
     initialMinHeight: number;
     initialTotalWidth: number;
     viewport: CdkVirtualScrollViewport;
@@ -882,6 +970,7 @@ declare class EruGridComponent implements OnInit, AfterViewInit, OnDestroy {
     currentPivotScrollIndex: _angular_core.WritableSignal<number>;
     firstDataRowIndex: _angular_core.WritableSignal<number>;
     private ngZone;
+    private rowSignalsCache;
     groupContentHeightsMap: _angular_core.Signal<Map<string, number>>;
     private _virtualRowspanCache;
     mode: _angular_core.Signal<eru_grid.GridMode>;
@@ -893,6 +982,11 @@ declare class EruGridComponent implements OnInit, AfterViewInit, OnDestroy {
     maxDepth: _angular_core.Signal<number>;
     subTotalStyle: _angular_core.Signal<"bold" | "italic" | "highlighted">;
     grandTotalStyle: _angular_core.Signal<"bold" | "italic" | "highlighted">;
+    isSortable: _angular_core.Signal<boolean>;
+    showSortBar: _angular_core.Signal<boolean>;
+    showGroupBar: _angular_core.Signal<boolean>;
+    headerRowHeight: _angular_core.Signal<number>;
+    dataRowHeight: _angular_core.Signal<number>;
     freezeHeader: _angular_core.Signal<boolean>;
     freezeGrandTotal: _angular_core.Signal<boolean>;
     grandTotalPosition: _angular_core.Signal<"before" | "after">;
@@ -1002,7 +1096,7 @@ declare class EruGridComponent implements OnInit, AfterViewInit, OnDestroy {
     trackByRowFn(index: number, row: any): string;
     trackByGroupFn(index: number, group: RowGroup): string;
     getRowsForGroup(groupId: string): Row[];
-    getRowsForGroupSignal(groupId: string): _angular_core.Signal<Row[]>;
+    getRowsForGroupSignal(groupId: string | null | undefined): any;
     trackByHeaderFn(index: number, header: any): string;
     hasNestedHeaders(): boolean;
     getHeaderRows(): any[][];
@@ -1018,6 +1112,24 @@ declare class EruGridComponent implements OnInit, AfterViewInit, OnDestroy {
     toggleRowSelection(event: Event, row: any): void;
     toggleGroupSelection(event: Event, groupId: string): void;
     onActionClick(event: Event, row: any): void;
+    onSortColumn(event: Event, column: Field, direction: 'asc' | 'desc'): void;
+    getSortDirection(fieldName: string): 'asc' | 'desc' | null;
+    getSortPriority(fieldName: string): number | null;
+    /** Get column label from a sort entry (field name or -fieldName) */
+    getColumnLabel(entry: string): string;
+    /** Extract field name from sort entry */
+    getFieldName(entry: string): string;
+    /** Toggle direction of an existing sort chip (asc ↔ desc) */
+    onBoardSortChipToggle(event: Event, entry: string): void;
+    /** Remove a sort chip */
+    onBoardSortChipRemove(event: Event, entry: string): void;
+    /** Add a field from dropdown — defaults to asc */
+    onBoardSortFieldSelect(column: Field): void;
+    onBoardSortClear(): void;
+    /** Get the field name used for grouping */
+    groupByField: _angular_core.Signal<string | null>;
+    /** Toggle sort direction on the group field (asc ↔ desc, never remove) */
+    onGroupSortToggle(event: Event, direction: 'asc' | 'desc'): void;
     /**
      * Check if action column is enabled
      * @returns true if actionColumn is enabled, false otherwise (default: false)
@@ -1144,11 +1256,19 @@ declare class EruGridComponent implements OnInit, AfterViewInit, OnDestroy {
     readonly BOARD_CARD_ITEM_HEIGHT = 208;
     readonly isBoardMode: _angular_core.Signal<boolean>;
     readonly visibleBoardFields: _angular_core.Signal<Field[]>;
+    readonly visibleColumns: _angular_core.Signal<Field[]>;
+    readonly hiddenColumns: _angular_core.Signal<Field[]>;
+    readonly hasHiddenColumns: _angular_core.Signal<boolean>;
+    readonly expandedRows: _angular_core.WritableSignal<Set<string>>;
+    rowExpandKey(row: any, index: number): string;
+    isRowExpanded(row: any, index: number): boolean;
+    toggleRowExpand(row: any, index: number, event?: Event): void;
+    rowDetailColspan(): number;
     onBoardScrolledIndexChange(firstVisibleIndex: number, group: RowGroup): void;
     requestBoardRowsForGroup(group: RowGroup): void;
     loadBoardAll(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EruGridComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EruGridComponent, "eru-grid", never, { "gridConfig": { "alias": "gridConfig"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EruGridComponent, "eru-grid", never, { "gridConfig": { "alias": "gridConfig"; "required": false; }; "boardCardTemplate": { "alias": "boardCardTemplate"; "required": false; }; "boardCardHeight": { "alias": "boardCardHeight"; "required": false; }; }, {}, never, never, true, never>;
 }
 interface GroupItem {
     type: 'header' | 'row' | 'table-header' | 'row-place-holder' | 'ghost-loading';
@@ -1176,6 +1296,8 @@ declare class AttachmentComponent implements OnInit {
     isActive: _angular_core.InputSignal<boolean>;
     isDrillable: _angular_core.InputSignal<boolean>;
     columnWidth: _angular_core.InputSignal<number>;
+    eruGridStore: _angular_core.InputSignal<EruGridStore | null>;
+    private pendingViewRequests;
     valueChange: EventEmitter<string[] | null>;
     blur: EventEmitter<string[] | null>;
     focus: EventEmitter<void>;
@@ -1208,11 +1330,12 @@ declare class AttachmentComponent implements OnInit {
     processFile(file: File): void;
     uploadFile(base64String: string, fileName: string): void;
     viewFile(file: string, event?: Event): void;
+    private openBase64InNewTab;
     deleteFile(file: string, event?: Event): void;
     trackByFile(index: number, file: string): string;
     getFileName(file: string): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AttachmentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AttachmentComponent, "eru-attachment", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "isEditable": { "alias": "isEditable"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; "isDrillable": { "alias": "isDrillable"; "required": false; "isSignal": true; }; "columnWidth": { "alias": "columnWidth"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; "drilldownClick": "drilldownClick"; "editModeChange": "editModeChange"; "fileAdded": "fileAdded"; "fileDeleted": "fileDeleted"; "fileViewed": "fileViewed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AttachmentComponent, "eru-attachment", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "isEditable": { "alias": "isEditable"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; "isDrillable": { "alias": "isDrillable"; "required": false; "isSignal": true; }; "columnWidth": { "alias": "columnWidth"; "required": false; "isSignal": true; }; "eruGridStore": { "alias": "eruGridStore"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; "drilldownClick": "drilldownClick"; "editModeChange": "editModeChange"; "fileAdded": "fileAdded"; "fileDeleted": "fileDeleted"; "fileViewed": "fileViewed"; }, never, never, true, never>;
 }
 
 declare class CheckboxComponent {
@@ -1801,6 +1924,18 @@ declare class StatusComponent implements OnInit {
     editModeChange: EventEmitter<boolean>;
     currentValue: _angular_core.WritableSignal<string | null>;
     searchText: _angular_core.WritableSignal<string>;
+    groupedOptions: _angular_core.Signal<{
+        open: {
+            value: any;
+            label: any;
+            color: any;
+        }[];
+        close: {
+            value: any;
+            label: any;
+            color: any;
+        }[];
+    }>;
     filteredOptions: _angular_core.Signal<{
         value: any;
         label: any;
@@ -2037,39 +2172,6 @@ declare class WebsiteComponent implements OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WebsiteComponent, "eru-website", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "isEditable": { "alias": "isEditable"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; "isDrillable": { "alias": "isDrillable"; "required": false; "isSignal": true; }; "columnWidth": { "alias": "columnWidth"; "required": false; "isSignal": true; }; "fieldSize": { "alias": "fieldSize"; "required": false; "isSignal": true; }; "eruGridStore": { "alias": "eruGridStore"; "required": false; "isSignal": true; }; "externalError": { "alias": "externalError"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; "drilldownClick": "drilldownClick"; "validationError": "validationError"; "editModeChange": "editModeChange"; }, never, never, true, never>;
 }
 
-/** Height of each card item (card + bottom padding) — must match CSS .card-container height */
-declare const BOARD_CARD_ITEM_HEIGHT = 208;
-declare class BoardViewComponent implements OnInit, AfterViewInit {
-    gridStore: EruGridStore;
-    /** Pixel height of each card item, used by cdk-virtual-scroll-viewport [itemSize] */
-    readonly cardItemHeight = 208;
-    set gridConfig(config: any);
-    groups: Signal<RowGroup[]>;
-    columns: Signal<Field[]>;
-    visibleFields: Signal<Field[]>;
-    set_table_group(data: RowGroup[]): void;
-    setRowGrandTotal(grandTotal: any): void;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    private groupRowsSignals;
-    getRowsForGroupSignal(groupId: string): Signal<Row[]>;
-    trackByRowFn(index: number, row: Row): string;
-    /**
-     * CDK virtual scroll pagination trigger.
-     * Fired whenever the first visible item index changes.
-     * Loads the next page when the user scrolls within `threshold` items of the end.
-     */
-    onScrolledIndexChange(firstVisibleIndex: number, group: RowGroup): void;
-    onBoardScroll(_event: Event): void;
-    loadMoreAll(): void;
-    requestRowsForGroup(group: RowGroup): void;
-    addRowsForGroup(groupId: string, rows: Row[], hasMore: boolean): void;
-    onCardClick(_row: Row): void;
-    onActionClick(event: Event, row: Row): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BoardViewComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BoardViewComponent, "board-view", never, { "gridConfig": { "alias": "gridConfig"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 declare class ThemeToggleComponent {
     private themeService;
     availableThemes: {
@@ -2085,5 +2187,5 @@ declare class ThemeToggleComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemeToggleComponent, "eru-theme-toggle", never, {}, {}, never, never, true, never>;
 }
 
-export { AttachmentComponent, BOARD_CARD_ITEM_HEIGHT, BoardViewComponent, CheckboxComponent, ColumnConstraintsService, CurrencyComponent, CustomVirtualScrollStrategy, DateComponent, DatetimeComponent, DurationComponent, EmailComponent, EruGridComponent, EruGridService, EruGridStore, LocationComponent, MATERIAL_MODULES, MATERIAL_PROVIDERS, NumberComponent, PeopleComponent, PhoneComponent, PriorityComponent, ProgressComponent, RatingComponent, SelectComponent, StatusComponent, TagComponent, TextareaComponent, TextboxComponent, ThemeService, ThemeToggleComponent, WebsiteComponent };
-export type { ActionClick, AggregationFunction, AttachmentConfig, CellValueChange, ColumnReorder, ColumnResize, ColumnWidthConstraints, CurrencyValidationResult, DataTypes, Drilldown, DurationValue, EmailValidationResult, Field, GridConfiguration, GridFeatures, GridMode, GridStyles, GridTokens, GroupItem$1 as GroupItem, LocationConfig, LocationValidationResult, NumberValidationResult, PeopleOption, PivotColumnGroupState, PivotColumnHeader, PivotConfiguration, PivotHeaderStructure, PivotMetadata, PivotResult, PivotRow, RatingConfig, Row, RowDataRequest, RowDataResponse, RowGrandTotal, RowGroup, TextareaValidationResult, TextboxValidationResult, Theme, WebsiteValidationResult };
+export { AttachmentComponent, CheckboxComponent, ColumnConstraintsService, CurrencyComponent, CustomVirtualScrollStrategy, DateComponent, DatetimeComponent, DurationComponent, EmailComponent, EruGridComponent, EruGridService, EruGridStore, LocationComponent, MATERIAL_MODULES, MATERIAL_PROVIDERS, NumberComponent, PRESET_CONFIG_DEFAULTS, PRESET_MANAGED_FIELDS, PeopleComponent, PhoneComponent, PriorityComponent, ProgressComponent, RatingComponent, SelectComponent, StatusComponent, TagComponent, TextareaComponent, TextboxComponent, ThemeService, ThemeToggleComponent, WebsiteComponent };
+export type { ActionClick, AggregationFunction, AttachmentConfig, BoardCardContext, CellValueChange, ColumnReorder, ColumnResize, ColumnWidthConstraints, CurrencyValidationResult, DataTypes, Drilldown, DurationValue, EmailValidationResult, Field, GridConfiguration, GridFeatures, GridMode, GridPreset, GridStyles, GridTokens, GroupItem$1 as GroupItem, LocationConfig, LocationValidationResult, NumberValidationResult, PeopleOption, PivotColumnGroupState, PivotColumnHeader, PivotConfiguration, PivotHeaderStructure, PivotMetadata, PivotResult, PivotRow, RatingConfig, Row, RowDataRequest, RowDataResponse, RowGrandTotal, RowGroup, TextareaValidationResult, TextboxValidationResult, Theme, WebsiteValidationResult };