@ieeesa-npm/presentation 0.4.4 → 0.4.6

package/lib/components/chips/chips.component.d.ts

@@ -0,0 +1,194 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { BreakpointObserverService } from '@ieeesa-npm/utility';
+import { ChipOption, ChipOrientation, ChipsType } from '../../models/chip-option.model';
+import { IconButton } from '../../models/icon-button.model';
+import * as i0 from "@angular/core";
+/**
+ * Chips component allow users to view information, make selections, filter content.
+ * @export
+ * @class ChipComponent
+ * @implements {OnInit}
+ * @implements {OnDestroy}
+ */
+export declare class ChipsComponent implements OnInit, OnDestroy {
+    breakpointObserverService: BreakpointObserverService;
+    defaultVisibleChips: ChipOption[];
+    isViewMoreActive: boolean;
+    isMobileView: boolean;
+    labelViewAllOrLess: string;
+    constants: {
+        ariaLabel: {
+            clear: string;
+            warning: string;
+            previousMonth: string;
+            nextMonth: string;
+            menuIcon: string;
+            close: string;
+        };
+        button: {
+            cancel: string;
+            ok: string;
+        };
+        chips: {
+            noOfDefaultVisibleChips: number;
+            label: {
+                viewAll: string;
+                viewLess: string;
+            };
+            ariaLabel: {
+                chipsList: string;
+            };
+            icons: {
+                arrow: {
+                    id: number;
+                    iconURL: string;
+                    toolTip: string;
+                    ariaLabel: string;
+                };
+                remove: {
+                    id: number;
+                    iconURL: string;
+                    toolTip: string;
+                    ariaLabel: string;
+                };
+            };
+        };
+        dataTable: {
+            label: {
+                clearAll: string;
+            };
+            ariaLabel: {
+                search: string;
+                selectAll: string;
+                select: string;
+                link: string;
+                pagination: string;
+            };
+            buttons: {
+                id: number;
+                iconURL: string;
+                toolTip: string;
+                ariaLabel: string;
+            }[];
+        };
+        datePicker: {
+            selectDateLabel: string;
+            dateFormatLabel: string;
+            startDateLabel: string;
+            endDateLabel: string;
+        };
+        dropdown: {
+            placeholderText: string;
+        };
+        filter: {
+            label: {
+                filterBy: string;
+                applyButton: string;
+            };
+            buttons: {
+                id: number;
+                iconURL: string;
+                toolTip: string;
+                ariaLabel: string;
+            }[];
+        };
+        textarea: {
+            maxLengthDefault: number;
+        };
+        autocomplete: {
+            minCharToSearch: number;
+            debounceTime: number;
+        };
+        header: {
+            alt: {
+                logo: string;
+            };
+            ariaLabel: {
+                helpLink: string;
+                userProfile: string;
+                hamburgerMenu: string;
+            };
+            label: {
+                signOut: string;
+            };
+        };
+        footer: {
+            alt: {
+                logo: string;
+            };
+            links: {
+                label: string;
+                ariaLabel: string;
+                redirectUrl: string;
+            }[];
+            ieeeLogo: string;
+            copyright: {
+                link: string;
+                textPart1: string;
+                textPart2: string;
+                hyperLinkPart3: string;
+                textPart4: string;
+            };
+        };
+        welcome: {
+            buttons: {
+                label: string;
+                ariaLabel: string;
+                url: string;
+            }[];
+        };
+        defaultWelcomeBgColor: string;
+    };
+    chipsType: typeof ChipsType;
+    orientations: typeof ChipOrientation;
+    destroy$: Subject<boolean>;
+    private chips;
+    set chipGroup(value: ChipOption[]);
+    get chipGroup(): ChipOption[];
+    chipOrientation: ChipOrientation;
+    noOfDefaultVisibleChips: number;
+    hasViewMoreForDesktop: boolean;
+    hasViewMoreForMobile: boolean;
+    avatar: IconButton;
+    arrow: IconButton;
+    typeOfChip: ChipsType;
+    isViewMoreNeeded: boolean;
+    hasChipToggled: boolean;
+    viewAllLabel: string;
+    viewLessLabel: string;
+    selectedChip: EventEmitter<any>;
+    constructor(breakpointObserverService: BreakpointObserverService);
+    ngOnInit(): void;
+    /**
+     * Onclick the chip, it emits selectedChip event with selected chip.
+     * @param {ChipOption} chip
+     * @memberof ChipComponent
+     */
+    onChipClick(chip: ChipOption): void;
+    /**
+     * Shows list of chips on the basis of view more/less button state.
+     * @memberof ChipComponent
+     */
+    viewChips(): void;
+    /**
+     * Sets the isViewMoreNeeded value based on hasViewMore and isMobileView values.
+     * @memberof ChipsComponent
+     */
+    getViewMore(): void;
+    /**
+     * Allows Angular to detect the specific chip option that needs to change or be added by tracking option unique Id.
+     * @param {number} index
+     * @param {ChipOption} option
+     * @return {*}  {(number | string)}
+     * @memberof ChipComponent
+     */
+    trackById(index: number, option: ChipOption): number | string;
+    /**
+     * NgOnDestroy performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
+     * @memberof GroupsComponent
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipsComponent, "ieeesa-chips", never, { "chipGroup": { "alias": "chipGroup"; "required": false; }; "chipOrientation": { "alias": "chipOrientation"; "required": false; }; "noOfDefaultVisibleChips": { "alias": "noOfDefaultVisibleChips"; "required": false; }; "hasViewMoreForDesktop": { "alias": "hasViewMoreForDesktop"; "required": false; }; "hasViewMoreForMobile": { "alias": "hasViewMoreForMobile"; "required": false; }; "avatar": { "alias": "avatar"; "required": false; }; "arrow": { "alias": "arrow"; "required": false; }; "typeOfChip": { "alias": "typeOfChip"; "required": false; }; "isViewMoreNeeded": { "alias": "isViewMoreNeeded"; "required": false; }; "hasChipToggled": { "alias": "hasChipToggled"; "required": false; }; "viewAllLabel": { "alias": "viewAllLabel"; "required": false; }; "viewLessLabel": { "alias": "viewLessLabel"; "required": false; }; }, { "selectedChip": "selectedChip"; }, never, never, true, never>;
+}

package/lib/components/data-table/data-table.component.d.ts

@@ -0,0 +1,193 @@
+import { EventEmitter, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatSort, SortDirection } from '@angular/material/sort';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Subject } from 'rxjs';
+import { BreakpointObserverService } from '@ieeesa-npm/utility';
+import { TableColumnSchema, TableColumnType } from '../../models/table-schema.model';
+import { PaginatorConfig } from '../../models/paginator-config.model';
+import { CheckboxOption } from '../../models/checkbox-option.model';
+import { IconButton } from '../../models/icon-button.model';
+import { TableActions } from '../../models/table-actions.model';
+import { ChipOption } from '../../models/chip-option.model';
+import * as i0 from "@angular/core";
+/**
+ * Provides a Material Design styled data-table that can be used to display rows of data with sortBy, filterBy, add/edit/delete table row data, pagination, search table data.
+ * @export
+ * @class DataTableComponent
+ * @implements {OnInit}
+ * @implements {AfterViewInit}
+ * @implements {OnDestroy}
+ */
+export declare class DataTableComponent implements OnInit, AfterViewInit, OnDestroy {
+    private breakpointObserverService;
+    private tableData;
+    set tableDataInfo(value: any[]);
+    get tableDataInfo(): any[];
+    private columnSchema;
+    set columnSchemaInfo(value: TableColumnSchema[]);
+    get columnSchemaInfo(): TableColumnSchema[];
+    constants: any;
+    tableActions: TableActions;
+    caption: string;
+    paginatorConfig: PaginatorConfig;
+    searchPlaceHolderText: string;
+    rowEditButton: IconButton;
+    rowDeleteButton: IconButton;
+    tableEditButton: IconButton;
+    tableDeleteButton: IconButton;
+    addButton: IconButton;
+    defaultColumnSortDirection: SortDirection;
+    defaultSortedColumn: string;
+    filters: ChipOption[];
+    selectedFilterOptions: CheckboxOption[];
+    appliedFilterOptions: ChipOption[];
+    rowSelected: EventEmitter<any>;
+    selectedRowToEdit: EventEmitter<any>;
+    selectedRowToDelete: EventEmitter<any>;
+    selectedRowsToDelete: EventEmitter<TableColumnSchema[]>;
+    rowLink: EventEmitter<any>;
+    addRow: EventEmitter<any>;
+    columnDataOnRowLinkClick: EventEmitter<any>;
+    paginationChange: EventEmitter<{
+        pageOffset: number;
+        pageLimit: number;
+    }>;
+    selectedFilter: EventEmitter<ChipOption>;
+    removeFilteredOption: EventEmitter<any>;
+    filteredOptions: EventEmitter<CheckboxOption[]>;
+    searchedValue: EventEmitter<string>;
+    displayedColumns: string[];
+    isMobileView: boolean;
+    dataSource: MatTableDataSource<any>;
+    selectedRows: SelectionModel<TableColumnSchema>;
+    pageLimit: number;
+    pageOffset: number;
+    columnType: typeof TableColumnType;
+    isSearchActive: boolean;
+    clearAll: any;
+    destroy$: Subject<boolean>;
+    sort: MatSort;
+    paginator: MatPaginator;
+    constructor(breakpointObserverService: BreakpointObserverService);
+    /**
+     * Initializes the data table component and sets the table action buttons.
+     * @memberof DataTableComponent
+     */
+    ngOnInit(): void;
+    /**
+     * Initializes the sort feature of dataSource
+     * @memberof DataTableComponent
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Sets the dataSource whenever the table data changes.
+     * @memberof DataTableComponent
+     */
+    tableDataChanges(): void;
+    /**
+     * OnSelectClick method emits the rowSelected event with selected row data.
+     * @param {*} row
+     * @param {boolean} checked
+     * @memberof DataTableComponent
+     */
+    onSelectClick(row: any): void;
+    /**
+     * OnEditClick method emits the selectedRowToEdit event with the selected row data.
+     * @param {*} row
+     * @memberof DataTableComponent
+     */
+    onEditClick(row: any): void;
+    /**
+     * OnDeleteClick method emits the selectedRowToDelete event with the selected row data.
+     * @param {*} row
+     * @memberof DataTableComponent
+     */
+    onDeleteClick(row: any): void;
+    /**
+     *OnLinkClick method emits the event with row and column.
+     * @param {*} row
+     * @param {TableColumnSchema} [column]
+     * @memberof DataTableComponent
+     */
+    onLinkClick(row: any, column?: TableColumnSchema): void;
+    /**
+     * OnTableEditClick method emits event with selected rows data when edit button clicked.
+     * @memberof DataTableComponent
+     */
+    onTableEditClick(): void;
+    /**
+     * OnDeleteTableClick method emits event with selected row data when delete button clicked.
+     * @memberof DataTableComponent
+     */
+    onDeleteTableClick(): void;
+    /**
+     * OnAddClick method emits the add event when add button clicked.
+     * @memberof DataTableComponent
+     */
+    onAddClick(): void;
+    /**
+     * OnTableSearchClick method toggles the isSearchActive state when the search icon is clicked for the mobile view.
+     * @memberof DataTableComponent
+     */
+    onTableSearchClick(): void;
+    /**
+     * SelectedFilterInfo method emits the selectedFilter event with selected filter information.
+     * @param {ChipOption} option
+     * @memberof DataTableComponent
+     */
+    selectedFilterTypeInfo(option: ChipOption): void;
+    /**
+     * OnSelectedFilterOptions method emits the filteredOptions event with the selected options and adds "Clear all" option to clear the all selections.
+     * @param {CheckboxOption[]} options
+     * @memberof DataTableComponent
+     */
+    onSelectedFilterOptions(options: CheckboxOption[]): void;
+    /**
+     * OnRemovalOfFilteredOption method emits the removeFilteredOption event with removed option.
+     * Sets the new appliedFilterOptions without removed option.
+     * @param {ChipOption} option
+     * @memberof DataTableComponent
+     */
+    onRemovalOfFilteredOption(option: ChipOption): void;
+    /**
+     * SearchValue method emits the searched value.
+     * @param {string} value
+     * @memberof DataTableComponent
+     */
+    searchValue(value: string): void;
+    /**
+     * Handles the pagination for every page.
+     * @param {PageEvent} event
+     * @memberof DataTableComponent
+     */
+    handlePagination(event: PageEvent): void;
+    /**
+     * IsAllRowSelected method returns the boolean value by checking selectedRows and totalRows length.
+     * @return {*}  {boolean}
+     * @memberof DataTableComponent
+     */
+    isAllRowsSelected(): boolean;
+    /**
+     * ToggleAllRowsSelection method clears selectedRows when all rows are selected else selects the all rows.
+     * @return {*}  {void}
+     * @memberof DataTableComponent
+     */
+    toggleAllRowsSelection(): void;
+    /**
+     * Allows Angular to detect the specific table row that needs to change or be added by tracking row unique Id.
+     * @param {number} index
+     * @param {TableColumnSchema} column
+     * @return {*}  {number}
+     * @memberof DataTableComponent
+     */
+    trackById(index: number, column: TableColumnSchema): number;
+    /**
+     * NgOnDestroy performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
+     * @memberof DataTableComponent
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableComponent, "ieeesa-data-table", never, { "tableDataInfo": { "alias": "tableDataInfo"; "required": false; }; "columnSchemaInfo": { "alias": "columnSchemaInfo"; "required": false; }; "tableActions": { "alias": "tableActions"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "paginatorConfig": { "alias": "paginatorConfig"; "required": false; }; "searchPlaceHolderText": { "alias": "searchPlaceHolderText"; "required": false; }; "rowEditButton": { "alias": "rowEditButton"; "required": false; }; "rowDeleteButton": { "alias": "rowDeleteButton"; "required": false; }; "tableEditButton": { "alias": "tableEditButton"; "required": false; }; "tableDeleteButton": { "alias": "tableDeleteButton"; "required": false; }; "addButton": { "alias": "addButton"; "required": false; }; "defaultColumnSortDirection": { "alias": "defaultColumnSortDirection"; "required": false; }; "defaultSortedColumn": { "alias": "defaultSortedColumn"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "selectedFilterOptions": { "alias": "selectedFilterOptions"; "required": false; }; "appliedFilterOptions": { "alias": "appliedFilterOptions"; "required": false; }; }, { "rowSelected": "rowSelected"; "selectedRowToEdit": "selectedRowToEdit"; "selectedRowToDelete": "selectedRowToDelete"; "selectedRowsToDelete": "selectedRowsToDelete"; "rowLink": "rowLink"; "addRow": "addRow"; "columnDataOnRowLinkClick": "columnDataOnRowLinkClick"; "paginationChange": "paginationChange"; "selectedFilter": "selectedFilter"; "removeFilteredOption": "removeFilteredOption"; "filteredOptions": "filteredOptions"; "searchedValue": "searchedValue"; }, never, never, true, never>;
+}

package/lib/components/filter/filter.component.d.ts

@@ -0,0 +1,71 @@
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { BreakpointObserverService } from '@ieeesa-npm/utility';
+import { Subject } from 'rxjs';
+import { CheckboxOption } from '../../models/checkbox-option.model';
+import { IconButton } from '../../models/icon-button.model';
+import { ChipOption, ChipsType } from '../../models/chip-option.model';
+import * as i0 from "@angular/core";
+/**
+ * Provides an implementation for group of filter.
+ * @export
+ * @class FilterComponent
+ * @implements {OnDestroy}
+ */
+export declare class FilterComponent implements OnDestroy {
+    private breakpointObserverService;
+    constants: any;
+    arrow: IconButton;
+    removeIcon: IconButton;
+    isFilterOpened: boolean;
+    selectedCheckboxes: CheckboxOption[];
+    onFilterToggle: boolean;
+    isFilterActive: boolean;
+    isMobileView: boolean;
+    typeOfChip: ChipsType;
+    destroy$: Subject<boolean>;
+    private filteredTypeOptionsInfo;
+    set appliedFilterOptions(options: ChipOption[]);
+    get appliedFilterOptions(): ChipOption[];
+    filterButton: IconButton;
+    filters: ChipOption[];
+    selectedFilterOptions: CheckboxOption[];
+    selectedFilter: EventEmitter<ChipOption>;
+    filteredOptions: EventEmitter<CheckboxOption[]>;
+    removeFilteredOption: EventEmitter<ChipOption>;
+    constructor(breakpointObserverService: BreakpointObserverService);
+    /**
+     * OnFilterSelected receives the selected filter from chip component, emits the selected filter and toggle the isFilterByOptionsVisible state.
+     * @param {ChipOption} type
+     * @memberof FilterComponent
+     */
+    onFilterSelected(type: ChipOption): void;
+    /**
+     * OnRemovalOfFilteredOption method receives removed chip from chip component and emits the event with removed chip.
+     * @param {ChipOption} option
+     * @memberof FilterComponent
+     */
+    onRemovalOfFilteredOption(option: ChipOption): void;
+    /**
+     * OnFilterApply toggles the isFilterByOptionsVisible state, emits the selected filter options and toggles the filter stateO
+     * @memberof FilterComponent
+     */
+    onFilterApply(): void;
+    /**
+     * SelectedFilterOptions method is called for every selection and deselection of filter option and stores the selected filter options.
+     * @param {CheckboxOption[]} values
+     * @memberof FilterComponent
+     */
+    selectedFilterOptionsInfo(values: CheckboxOption[]): void;
+    /**
+     * OnFilterByIconClick method toggles the isFilterActive value.
+     * @memberof FilterComponent
+     */
+    onFilterByIconClick(): void;
+    /**
+     * NgOnDestroy performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
+     * @memberof FilterComponent
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "ieeesa-filter", never, { "appliedFilterOptions": { "alias": "appliedFilterOptions"; "required": false; }; "filterButton": { "alias": "filterButton"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "selectedFilterOptions": { "alias": "selectedFilterOptions"; "required": false; }; }, { "selectedFilter": "selectedFilter"; "filteredOptions": "filteredOptions"; "removeFilteredOption": "removeFilteredOption"; }, never, never, true, never>;
+}

package/lib/models/chip-option.model.d.ts

@@ -0,0 +1,18 @@
+export declare enum ChipOrientation {
+    HORIZONTAL = "HORIZONTAL",
+    VERTICAL = "VERTICAL"
+}
+export declare enum ChipsType {
+    STATIC = " STATIC",
+    TOGGLE = "TOGGLE",
+    INPUT = "INPUT",
+    AUTOCOMPLETE = "AUTOCOMPLETE",
+    FORM_CONTROL = "FORM_CONTROL",
+    AVATAR = "AVATAR"
+}
+export interface ChipOption {
+    id: number | string;
+    name: string;
+    checked: boolean;
+    disabled?: boolean;
+}

package/lib/models/paginator-config.model.d.ts

@@ -0,0 +1,5 @@
+export interface PaginatorConfig {
+    recordsPerPage: number;
+    pageSizeOptions: number[];
+    totalRecords: number;
+}

package/lib/models/table-actions.model.d.ts

@@ -0,0 +1,8 @@
+export interface TableActions {
+    isSearchNeeded?: boolean;
+    isFilterNeeded?: boolean;
+    isAddNeeded?: boolean;
+    isEditNeeded?: boolean;
+    isDeleteNeeded?: boolean;
+    isPaginationNeeded?: boolean;
+}

package/lib/models/table-schema.model.d.ts

@@ -0,0 +1,18 @@
+export declare enum TableColumnType {
+    TEXT = "TEXT",
+    LINK = "LINK",
+    SELECT = "SELECT",
+    ADD = "ADD",
+    EDIT = "EDIT",
+    DELETE = "DELETE"
+}
+export interface TableColumnSchema {
+    id: number;
+    columnDef: string;
+    heading: string;
+    columnType: TableColumnType;
+    cellData: any;
+    isDateColumn?: boolean;
+    isStickyColumn?: boolean;
+    isSortableColumn?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/presentation",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",
@@ -18,8 +18,8 @@
     "moment": "^2.29.4",
     "rxjs": "~7.8.0",
     "zone.js": "~0.13.0",
-    "@ieeesa-npm/shared-styles": "^0.1.1",
-    "@ieeesa-npm/feature": "^0.2.6"
+    "@ieeesa-npm/shared-styles": "^0.1.2",
+    "@ieeesa-npm/feature": "^0.2.8"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -21,6 +21,9 @@ export * from './lib/components/select/select.component';
 export * from './lib/components/text-area/text-area.component';
 export * from './lib/components/toggle-button/toggle-button.component';
 export * from './lib/components/welcome/welcome.component';
+export * from './lib/components/chips/chips.component';
+export * from './lib/components/filter/filter.component';
+export * from './lib/components/data-table/data-table.component';
 export * from './lib/directives/dynamic-form-field/dynamic-form-field.directive';
 export * from './lib/directives/focus-invalid-form-field/focus-invalid-form-field.directive';
 export * from './lib/directives/set-background/set-background.directive';
@@ -46,6 +49,10 @@ export * from './lib/models/radio-option.model';
 export * from './lib/models/search.model';
 export * from './lib/models/select-option.model';
 export * from './lib/models/toggle-button.model';
+export * from './lib/models/chip-option.model';
+export * from './lib/models/paginator-config.model';
+export * from './lib/models/table-actions.model';
+export * from './lib/models/table-schema.model';
 export * from './lib/services/datepicker.service';
 export * from './lib/services/form-utility.service';
 export * from './lib/presentation.module';

package/src/lib/assets/constants.json

@@ -51,21 +51,31 @@
         "id": 1,
         "iconURL": "assets/images/sprites/sprites.svg#icon-data-table-edit",
         "toolTip": "",
-        "ariaLabel": "Edit",
-        "disabled": true
+        "ariaLabel": "Edit"
       },
       {
         "id": 2,
         "iconURL": "assets/images/sprites/sprites.svg#icon-data-table-delete",
         "toolTip": "",
-        "ariaLabel": "Delete",
-        "disabled": true
+        "ariaLabel": "Delete"
       },
       {
         "id": 3,
         "iconURL": "assets/images/sprites/sprites.svg#icon-add-member",
         "toolTip": "",
         "ariaLabel": "Add user(s)"
+      },
+      {
+        "id": 4,
+        "iconURL": "assets/images/sprites/sprites.svg#icon-data-table-row-edit",
+        "toolTip": "",
+        "ariaLabel": "Edit"
+      },
+      {
+        "id": 5,
+        "iconURL": "assets/images/sprites/sprites.svg#icon-data-table-row-delete",
+        "toolTip": "",
+        "ariaLabel": "Delete"
       }
     ]
   },