@testgorilla/tgo-ui 2.6.99 → 2.7.0

package/README.md

@@ -4,8 +4,8 @@
 
 To see the updates of the library in the client app, use commands below from package.json
 
-- build the updated version of canopy-ui with ```build:tgo-ui (ng build tgo-ui)```
-- restart the client app with ```start:client (ng serve)```
+- build the updated version of canopy-ui with `build:tgo-ui (ng build tgo-ui)`
+- restart the client app with `start:client (ng serve)`
 
 # Foundations
 

package/components/button/button.model.d.ts

@@ -1,4 +1,4 @@
-import { BadgeVariant } from '../badge/badge.model';
+import { BadgeVariant, RebrandBadgeColor } from '../badge/badge.model';
 export type ButtonIconPosition = 'left' | 'right';
 export type ButtonColor = 'primary' | 'secondary' | 'ghost' | 'outlined' | 'destructive' | 'tertiary' | 'link' | 'tab' | 'text' | 'menuTrigger' | 'menuCell' | 'icon-button';
 export type ButtonSize = 'big' | 'medium' | 'small';
@@ -10,4 +10,5 @@ export interface ButtonBadgeConfig {
     badgeType: BadgeVariant | null;
     badgeLabel: string;
     badgeNotificationAmount: number;
+    rebrandColor: RebrandBadgeColor;
 }

package/components/deprecated-table/deprecated-table.component.module.d.ts

@@ -1,14 +1,14 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./deprecated-table.component";
-import * as i2 from "./pipes/data-property-getter";
-import * as i3 from "./directives/dynamic-component.directive";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/material/table";
-import * as i6 from "@angular/material/sort";
-import * as i7 from "@angular/material/icon";
-import * as i8 from "@angular/material/tooltip";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/table";
+import * as i4 from "@angular/material/sort";
+import * as i5 from "@angular/material/icon";
+import * as i6 from "@angular/material/tooltip";
+import * as i7 from "./directives/dynamic-component.directive";
+import * as i8 from "./pipes/data-property-getter";
 export declare class DeprecatedTableComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DeprecatedTableComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DeprecatedTableComponentModule, [typeof i1.DeprecatedTableComponent, typeof i2.DataPropertyGetterPipe, typeof i3.DynamicComponentDirective], [typeof i4.CommonModule, typeof i5.MatTableModule, typeof i6.MatSortModule, typeof i7.MatIconModule, typeof i8.MatTooltipModule], [typeof i1.DeprecatedTableComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DeprecatedTableComponentModule, [typeof i1.DeprecatedTableComponent], [typeof i2.CommonModule, typeof i3.MatTableModule, typeof i4.MatSortModule, typeof i5.MatIconModule, typeof i6.MatTooltipModule, typeof i7.DynamicComponentDirective, typeof i8.DataPropertyGetterPipe], [typeof i1.DeprecatedTableComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DeprecatedTableComponentModule>;
 }

package/components/deprecated-table/directives/dynamic-component.directive.d.ts

@@ -9,5 +9,5 @@ export declare class DynamicComponentDirective implements OnDestroy {
     constructor(vcr: ViewContainerRef);
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicComponentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicComponentDirective, "[dynamicComponent]", never, { "dynamicComponent": { "alias": "dynamicComponent"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicComponentDirective, "[dynamicComponent]", never, { "dynamicComponent": { "alias": "dynamicComponent"; "required": false; }; }, {}, never, never, true, never>;
 }

package/components/deprecated-table/pipes/data-property-getter.d.ts

@@ -4,5 +4,5 @@ export declare class DataPropertyGetterPipe implements PipeTransform {
     transform(obj: object, keyName?: string): any;
     private getDeepVal;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataPropertyGetterPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<DataPropertyGetterPipe, "dataPropertyGetter", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<DataPropertyGetterPipe, "dataPropertyGetter", true>;
 }

package/components/empty-state/empty-state.component.d.ts

@@ -118,7 +118,7 @@ export declare class EmptyStateComponent {
     onPrimaryButtonClick(event: Event): void;
     onSecondaryButtonClick(event: Event): void;
     onTertiaryButtonClick(event: Event): void;
-    getVariant(variant: ButtonVariant): "primary" | "secondary" | "ghost";
+    getVariant(variant: ButtonVariant): "ghost" | "primary" | "secondary";
     static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, [{ optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "ui-empty-state", never, { "showIllustration": { "alias": "showIllustration"; "required": false; }; "illustrationVariant": { "alias": "illustrationVariant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "emptyStateVariant": { "alias": "emptyStateVariant"; "required": false; }; "title": { "alias": "title"; "required": false; }; "bodyText": { "alias": "bodyText"; "required": false; }; "primaryButtonText": { "alias": "primaryButtonText"; "required": false; }; "primaryButtonVariant": { "alias": "primaryButtonVariant"; "required": false; }; "secondaryButtonText": { "alias": "secondaryButtonText"; "required": false; }; "secondaryButtonVariant": { "alias": "secondaryButtonVariant"; "required": false; }; "tertiaryButtonText": { "alias": "tertiaryButtonText"; "required": false; }; "tertiaryButtonVariant": { "alias": "tertiaryButtonVariant"; "required": false; }; "language": { "alias": "language"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, { "primaryButtonClick": "primaryButtonClick"; "secondaryButtonClick": "secondaryButtonClick"; "tertiaryButtonClick": "tertiaryButtonClick"; }, never, never, false, never>;
 }

package/components/field/field.component.d.ts

@@ -169,6 +169,13 @@ export declare class FieldComponent implements OnInit, ControlValueAccessor, DoC
      * @memberof FieldComponent
      */
     trimOnSubmit: boolean;
+    /**
+     * Max rows for multi-line type
+     *
+     * @type {number}
+     * @memberof FieldComponent
+     */
+    maxRows: number;
     validateEvent: EventEmitter<string>;
     get getPasswordIcon(): IconName;
     isActiveField: boolean;
@@ -211,5 +218,5 @@ export declare class FieldComponent implements OnInit, ControlValueAccessor, DoC
     private clearSpace;
     trackByFn: (index: number, value: any) => any;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldComponent, [{ optional: true; }, null, null, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "ui-field", never, { "label": { "alias": "label"; "required": false; }; "fieldName": { "alias": "fieldName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hintMessage": { "alias": "hintMessage"; "required": false; }; "type": { "alias": "type"; "required": false; }; "updateOnBlur": { "alias": "updateOnBlur"; "required": false; }; "allowOnlyDigits": { "alias": "allowOnlyDigits"; "required": false; }; "language": { "alias": "language"; "required": false; }; "showBottomContent": { "alias": "showBottomContent"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isValid": { "alias": "isValid"; "required": false; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; }; "trimOnBlur": { "alias": "trimOnBlur"; "required": false; }; "trimOnSubmit": { "alias": "trimOnSubmit"; "required": false; }; }, { "validateEvent": "validateEvent"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "ui-field", never, { "label": { "alias": "label"; "required": false; }; "fieldName": { "alias": "fieldName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hintMessage": { "alias": "hintMessage"; "required": false; }; "type": { "alias": "type"; "required": false; }; "updateOnBlur": { "alias": "updateOnBlur"; "required": false; }; "allowOnlyDigits": { "alias": "allowOnlyDigits"; "required": false; }; "language": { "alias": "language"; "required": false; }; "showBottomContent": { "alias": "showBottomContent"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isValid": { "alias": "isValid"; "required": false; }; "maxCharacters": { "alias": "maxCharacters"; "required": false; }; "trimOnBlur": { "alias": "trimOnBlur"; "required": false; }; "trimOnSubmit": { "alias": "trimOnSubmit"; "required": false; }; "maxRows": { "alias": "maxRows"; "required": false; }; }, { "validateEvent": "validateEvent"; }, never, never, false, never>;
 }

package/components/icon/icon.model.d.ts

@@ -3,5 +3,5 @@ type TgoIcons = typeof tgoIcons[number];
 type TgoRebrandIcons = typeof tgoRebrandIcons[number];
 export type IconSize = '16' | '24' | '40' | '80';
 export type IconName = TgoRebrandIcons | TgoIcons | '';
-export type IconColor = 'teal' | 'petrol' | 'dark' | 'white' | 'black' | 'inherit' | 'rebrand-black' | string;
+export type IconColor = 'teal' | 'petrol' | 'dark' | 'white' | 'black' | 'inherit' | 'rebrand-black' | 'red' | 'grey' | 'orange' | string;
 export {};

package/components/overflow-menu/overflow-menu.component.d.ts

@@ -51,5 +51,5 @@ export declare class OverflowMenuComponent implements OnInit {
     ngOnInit(): void;
     onSelectItem(event: Event, value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OverflowMenuComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OverflowMenuComponent, "ui-overflow-menu", never, { "buttons": { "alias": "buttons"; "required": false; }; "iconTrigger": { "alias": "iconTrigger"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; }, { "selectItem": "selectItem"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OverflowMenuComponent, "ui-overflow-menu", never, { "buttons": { "alias": "buttons"; "required": false; }; "iconTrigger": { "alias": "iconTrigger"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; }, { "selectItem": "selectItem"; }, never, ["[menu-content]"], false, never>;
 }

package/components/table/table.component.d.ts

@@ -1,9 +1,11 @@
 import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
-import { ColumnEllipse, Sort, TableColumn, TableConfig, TableConfigWithPagination, TableData } from './table.model';
+import { ColumnEllipse, ColumnType, DataSource, TableColumn, TableConfig, TableConfigWithPagination, TableData, TableDetailColumn } from './table.model';
 import { PageEvent } from '@angular/material/paginator';
 import { ApplicationTheme } from '../../models/application-theme.model';
+import { MatTableDataSource } from '@angular/material/table';
+import { Sort } from '@angular/material/sort';
 import * as i0 from "@angular/core";
-export declare class TableComponent implements OnChanges {
+export declare class TableComponent<T extends DataSource, TDetail extends DataSource> implements OnChanges {
     private readonly defaultAppTheme;
     /**
      * Table configuration
@@ -11,7 +13,7 @@ export declare class TableComponent implements OnChanges {
      * @type {TableConfig}
      * @memberof TableComponent
      */
-    set config(config: TableConfig);
+    set config(config: TableConfig<T>);
     /**
      * Input property for providing the table data.
      *
@@ -34,26 +36,51 @@ export declare class TableComponent implements OnChanges {
      * @memberof TableComponent
      */
     applicationTheme: ApplicationTheme;
+    /**
+     * Data structure to select which columns should be rendered and their capabilities
+     *
+     * @type {TableDetailColumn}
+     * @memberof TableComponent
+     */
+    tableDetailColumns: TableDetailColumn<T, TDetail>;
+    tableDetails: boolean;
+    /**
+     * Disable border radius for table
+     *
+     * @type {boolean}
+     * @memberof TableComponent
+     */
+    disableBorderRadius: boolean;
+    onRowClickEvent: EventEmitter<any>;
+    onDetailRowClickEvent: EventEmitter<any>;
     paginatorChange: EventEmitter<PageEvent>;
     sortChange: EventEmitter<Sort>;
     protected tableData: TableData;
     protected sourceData: TableData;
     protected columnsTooltipState: ColumnEllipse[];
-    protected tableConfig: TableConfigWithPagination;
+    protected tableConfig: TableConfigWithPagination<T>;
     protected displayedColumns: string[];
+    protected columnsDetailToDisplay: string[];
     protected skeletonStyleConfig: {
         background: string;
         'border-radius': string;
         height: string;
     };
+    protected dataSourceDetail: MatTableDataSource<any, import("@angular/material/table").MatTableDataSourcePaginator>;
+    protected elementDetail: any;
+    protected readonly DataType: typeof ColumnType;
     constructor(defaultAppTheme: ApplicationTheme);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
-    private defaultPaginationConfig;
     protected onPaginatorChange(event: PageEvent): void;
     protected onChangeColumnSize(columnIndex: number, showTooltip: boolean): void;
     protected onSortChange(sortState: Sort): void;
-    trackColumnKey: (index: number, column: TableColumn) => string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "ui-table", never, { "config": { "alias": "config"; "required": true; }; "data": { "alias": "data"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, { "paginatorChange": "paginatorChange"; "sortChange": "sortChange"; }, never, never, false, never>;
+    protected onRowClick(rowParams: any): void;
+    protected onDetailRowClick(rowParams: any): void;
+    protected toggleRow(element: T): void;
+    private setTableDetailDataSource;
+    private defaultPaginationConfig;
+    trackColumnKey: (index: number, column: TableColumn<T>) => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any, any>, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any, any>, "ui-table", never, { "config": { "alias": "config"; "required": true; }; "data": { "alias": "data"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "tableDetailColumns": { "alias": "tableDetailColumns"; "required": false; }; "tableDetails": { "alias": "tableDetails"; "required": false; }; "disableBorderRadius": { "alias": "disableBorderRadius"; "required": false; }; }, { "onRowClickEvent": "onRowClickEvent"; "onDetailRowClickEvent": "onDetailRowClickEvent"; "paginatorChange": "paginatorChange"; "sortChange": "sortChange"; }, never, never, false, never>;
 }

package/components/table/table.component.module.d.ts

@@ -10,8 +10,10 @@ import * as i8 from "../button/button.component.module";
 import * as i9 from "@angular/material/sort";
 import * as i10 from "../icon/icon.component.module";
 import * as i11 from "../../directives/ellipse-text.directive";
+import * as i12 from "../deprecated-table/directives/dynamic-component.directive";
+import * as i13 from "../deprecated-table/pipes/data-property-getter";
 export declare class TableComponentModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TableComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TableComponentModule, [typeof i1.TableComponent, typeof i2.SentenceCasePipe], [typeof i3.CommonModule, typeof i4.MatTableModule, typeof i5.MatTooltipModule, typeof i6.SkeletonComponent, typeof i7.PaginatorComponentModule, typeof i8.ButtonComponentModule, typeof i9.MatSortModule, typeof i10.IconComponentModule, typeof i11.EllipseTextDirective], [typeof i1.TableComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TableComponentModule, [typeof i1.TableComponent, typeof i2.SentenceCasePipe], [typeof i3.CommonModule, typeof i4.MatTableModule, typeof i5.MatTooltipModule, typeof i6.SkeletonComponent, typeof i7.PaginatorComponentModule, typeof i8.ButtonComponentModule, typeof i9.MatSortModule, typeof i10.IconComponentModule, typeof i11.EllipseTextDirective, typeof i12.DynamicComponentDirective, typeof i13.DataPropertyGetterPipe], [typeof i1.TableComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TableComponentModule>;
 }

package/components/table/table.model.d.ts

@@ -1,15 +1,16 @@
-import { TemplateRef } from '@angular/core';
-export interface TableConfig {
-    columns: TableColumn[];
+import { TemplateRef, Type } from '@angular/core';
+export interface TableConfig<T> {
+    columns: TableColumn<T>[];
     pagination?: Pagination;
     title?: string;
     width?: number;
     sort?: Sort;
+    hidePagination?: boolean;
 }
-export interface TableConfigWithPagination extends TableConfig {
+export interface TableConfigWithPagination<T> extends TableConfig<T> {
     pagination: Pagination;
 }
-export interface TableColumn {
+export interface TableColumn<T> {
     title: string;
     key: string;
     widthPerc?: number;
@@ -17,6 +18,7 @@ export interface TableColumn {
     allowMultiline?: boolean;
     bold?: boolean;
     showTooltip?: boolean;
+    tooltip?: string;
     allowSort?: boolean;
     isSticky?: boolean;
     headerCellTemplate?: TemplateRef<any>;
@@ -25,6 +27,11 @@ export interface TableColumn {
     hidden?: boolean;
     order?: number;
     fontSize?: '12px' | '14px';
+    field?: string;
+    type?: ColumnType;
+    function?: (v: T) => string;
+    renderer?: (v: T) => ComponentRenderer | string;
+    styles?: ColumnStyles;
 }
 export interface Pagination {
     itemsPerPageOptions: number[];
@@ -40,5 +47,40 @@ export interface ColumnEllipse {
 export interface Sort {
     active: string;
     direction: SortDirection;
+    defaultSortStart: SortDirection;
 }
 export type SortDirection = 'asc' | 'desc' | '';
+export interface TableDetailColumn<T, TDetail> {
+    columnDefs: TableColumn<TDetail>[];
+    setDetailRowData: (params: DetailRowDataParams<T, TDetail>) => void;
+}
+export interface DetailRowDataParams<T, TDetail> {
+    data: T;
+    setDetailDataSource(rowData: TDetail[]): void;
+}
+export declare enum ColumnType {
+    FIELD = "field",
+    FUNCTION = "function",
+    RENDERER = "renderer"
+}
+export interface ComponentRenderer {
+    component: Type<any>;
+    inputs?: any;
+    outputs?: {
+        [key: string]: any;
+    };
+}
+export interface ColumnStyles {
+    alignment?: ColumnAlignment;
+    width?: string;
+    'min-width'?: string;
+    padding?: string;
+}
+export declare enum ColumnAlignment {
+    LEFT = "left",
+    RIGHT = "right",
+    CENTER = "center"
+}
+export type DataSource = {
+    [key: string]: any;
+};

package/esm2022/assets/i18n/en.json

@@ -92,6 +92,7 @@
         "MAX_LENGTH": "Please enter a value with a maximum length of ({{maxlength}}) characters",
         "MIN_LENGTH": "Please enter a value with a minimum length of ({{maxlength}}) characters",
         "MAX": "Please enter a value with a maximum value of ({{max}})",
-        "MIN": "Please enter a value with a minimum value of ({{min}})"
+        "MIN": "Please enter a value with a minimum value of ({{min}})",
+        "EMAIL_INCORRECT": "Please use a valid email address"
     }
 }