@ieeesa-npm/presentation 0.8.7 → 0.8.8

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

@@ -1,4 +1,4 @@
-import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 import { FormGroup } from '@angular/forms';
 import { FieldConfig } from '../../models/field-config.model';
@@ -15,19 +15,20 @@ import * as i0 from "@angular/core";
  * @implements {FormField}
  * @implements {OnDestroy}
  */
-export declare class AutocompleteComponent implements OnInit, FormField, OnDestroy {
+export declare class AutocompleteComponent implements OnInit, FormField, OnDestroy, AfterViewInit {
     private formUtilityService;
     config: FieldConfig;
     group: FormGroup;
     value: string;
-    filteredOptions: AutoCompleteOption[];
+    autoCompleteOptionList: AutoCompleteOption[];
+    set autoCompleteOptions(value: AutoCompleteOption[]);
+    get autoCompleteOptions(): AutoCompleteOption[];
     isSelectedOptionsVisible: boolean;
     autoCompleteSearchValue: EventEmitter<string>;
-    autoCompleteOptionSelected: EventEmitter<string>;
+    autoCompleteOptionSelected: EventEmitter<AutoCompleteOption>;
     autoComplete: ElementRef;
     destroy$: Subject<boolean>;
     autocompleteConstInfo: any;
-    optionsToFilter: AutoCompleteOption[];
     constructor(formUtilityService: FormUtilityService);
     /**
      * Implementation of ngOnInit lifecycle hook method to initialize components instance properties.
@@ -35,17 +36,29 @@ export declare class AutocompleteComponent implements OnInit, FormField, OnDestr
      */
     ngOnInit(): void;
     /**
-     * Filters the options on form control value changes.
+     * Initialize the form control change event once the form control is ready on ngAfterViewInit by calling onValueChanges method.
      * @memberof AutocompleteComponent
      */
-    filterOptions(): void;
+    ngAfterViewInit(): void;
     /**
-     * Emits the selected option name when the form on change event is triggered and returns option name.
-     * @param {AutoCompleteOption} data // data is an selected option of filteredOptions.
-     * @return {string} // Returns selected option name as string
+     * Emits an autoCompleteSearchValue change event when the value is changed and value is greater than minCharToSearch or equal to zero.
      * @memberof AutocompleteComponent
      */
-    onChange(data: AutoCompleteOption): string;
+    onValueChanges(): void;
+    /**
+     * Emits the selected option when the form on change event is triggered and returns option.
+     * @param {AutoCompleteOption} data // data is an selected option of autoCompleteOptions.
+     * @return {AutoCompleteOption} // Returns selected option  as AutoCompleteOption
+     * @memberof AutocompleteComponent
+     */
+    onChange(data: AutoCompleteOption): AutoCompleteOption;
+    /**
+     * Display the selected option name
+     * @param {AutoCompleteOption} option
+     * @return {string}
+     * @memberof AutocompleteComponent
+     */
+    displayOptionName(option: AutoCompleteOption): string;
     /**
      * Takes the index and the current item as arguments and needs to return the unique identifier for this item.
      * @param {number} index
@@ -60,5 +73,5 @@ export declare class AutocompleteComponent implements OnInit, FormField, OnDestr
      */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent, "ieeesa-autocomplete", never, { "filteredOptions": { "alias": "filteredOptions"; "required": false; }; "isSelectedOptionsVisible": { "alias": "isSelectedOptionsVisible"; "required": false; }; }, { "autoCompleteSearchValue": "autoCompleteSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent, "ieeesa-autocomplete", never, { "autoCompleteOptions": { "alias": "autoCompleteOptions"; "required": false; }; "isSelectedOptionsVisible": { "alias": "isSelectedOptionsVisible"; "required": false; }; }, { "autoCompleteSearchValue": "autoCompleteSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; }, never, never, true, never>;
 }

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

@@ -38,6 +38,11 @@ export declare class CheckboxComponent implements OnInit, FormField, OnDestroy {
      * @memberof CheckboxComponent
      */
     ngOnInit(): void;
+    /**
+     * Recreate form controls whenever the new set of checkboxes are loaded when component is already initialized
+     * @memberof CheckboxComponent
+     */
+    recreateFormControl(): void;
     /**
      * Creates form group and initializes components properties from config.
      * @memberof CheckboxComponent

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

@@ -96,6 +96,7 @@ export declare class ChipsComponent implements OnInit, OnDestroy {
             label: {
                 filterBy: string;
                 applyButton: string;
+                clearAll: string;
             };
             buttons: {
                 id: number;
@@ -134,10 +135,7 @@ export declare class ChipsComponent implements OnInit, OnDestroy {
                 label: string;
                 ariaLabel: string;
                 toolTip: string;
-                isToolTipNeeded: boolean; /**
-                 * Shows list of chips on the basis of view more/less button state.
-                 * @memberof ChipComponent
-                 */
+                isToolTipNeeded: boolean;
             }[];
         };
         footer: {

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

@@ -1,7 +1,7 @@
 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 { MatSort, Sort, SortDirection } from '@angular/material/sort';
 import { SelectionModel } from '@angular/cdk/collections';
 import { Subject } from 'rxjs';
 import { BreakpointObserverService } from '@ieeesa-npm/utility';
@@ -12,6 +12,7 @@ import { IconButton } from '../../models/icon-button.model';
 import { TableActions } from '../../models/table-actions.model';
 import { ChipOption } from '../../models/chip-option.model';
 import { SearchType } from '../../models/search.model';
+import { FiltersAndOptions } from '../../models/filters-options.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.
@@ -45,6 +46,9 @@ export declare class DataTableComponent implements OnInit, AfterViewInit, OnDest
     selectedFilterOptions: CheckboxOption[];
     appliedFilterOptions: ChipOption[];
     searchType: SearchType;
+    className: string;
+    inbuiltSortingNeeded: boolean;
+    isCellTextOverflowEllipsis: boolean;
     rowSelected: EventEmitter<any>;
     selectedRowToEdit: EventEmitter<any>;
     selectedRowToDelete: EventEmitter<any>;
@@ -58,8 +62,9 @@ export declare class DataTableComponent implements OnInit, AfterViewInit, OnDest
     }>;
     selectedFilter: EventEmitter<ChipOption>;
     removeFilteredOption: EventEmitter<any>;
-    filteredOptions: EventEmitter<CheckboxOption[]>;
+    filteredOptions: EventEmitter<FiltersAndOptions[]>;
     searchedValue: EventEmitter<string>;
+    sortChange: EventEmitter<Sort>;
     displayedColumns: string[];
     isMobileView: boolean;
     dataSource: MatTableDataSource<any>;
@@ -89,6 +94,12 @@ export declare class DataTableComponent implements OnInit, AfterViewInit, OnDest
      * @memberof DataTableComponent
      */
     tableDataChanges(): void;
+    /**
+     * SortTableData method emits the clicked table column name and sorting direction
+     * @param {Sort} sort
+     * @memberof DataTableComponent
+     */
+    sortTableData(sort: Sort): void;
     /**
      * OnSelectClick method emits the rowSelected event with selected row data.
      * @param {*} row
@@ -146,14 +157,13 @@ export declare class DataTableComponent implements OnInit, AfterViewInit, OnDest
      * @param {CheckboxOption[]} options
      * @memberof DataTableComponent
      */
-    onSelectedFilterOptions(options: CheckboxOption[]): void;
+    onSelectedFilterOptions(selectedOptions: FiltersAndOptions[]): 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;
+    onRemovalOfFilteredOption(options: FiltersAndOptions[]): void;
     /**
      * SearchValue method emits the searched value.
      * @param {string} value
@@ -192,5 +202,5 @@ export declare class DataTableComponent implements OnInit, AfterViewInit, OnDest
      */
     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; }; "searchType": { "alias": "searchType"; "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>;
+    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; }; "searchType": { "alias": "searchType"; "required": false; }; "className": { "alias": "className"; "required": false; }; "inbuiltSortingNeeded": { "alias": "inbuiltSortingNeeded"; "required": false; }; "isCellTextOverflowEllipsis": { "alias": "isCellTextOverflowEllipsis"; "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"; "sortChange": "sortChange"; }, never, never, true, never>;
 }

package/lib/components/dynamic-form/dynamic-form.component.d.ts

@@ -61,7 +61,7 @@ export declare class DynamicFormComponent implements OnInit, AfterContentInit {
         controlName: string;
     }>;
     formControlChange: EventEmitter<Event>;
-    formAutoCompleteSearch: EventEmitter<Event>;
+    formAutoCompleteSearch: EventEmitter<string>;
     autoCompleteOptionSelected: EventEmitter<FormGroup<any>[]>;
     formAfterContentInit: EventEmitter<FormGroup<any>[]>;
     formSelectedDateRange: EventEmitter<{
@@ -187,7 +187,7 @@ export declare class DynamicFormComponent implements OnInit, AfterContentInit {
      * @param {Event} event
      * @memberof DynamicFormComponent
      */
-    onAutoCompleteSearch(event: Event): void;
+    onAutoCompleteSearch(event: string): void;
     /**
      * Handles form field checkbox selection event
      * @param {CheckboxOption} option

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

@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
 import { CheckboxOption } from '../../models/checkbox-option.model';
 import { IconButton } from '../../models/icon-button.model';
 import { ChipOption } from '../../models/chip-option.model';
+import { FiltersAndOptions } from '../../models/filters-options.model';
 import * as i0 from "@angular/core";
 /**
  * Provides an implementation for group of filter.
@@ -23,16 +24,20 @@ export declare class FilterComponent implements OnDestroy {
     isFilterActive: boolean;
     isMobileView: boolean;
     isApplyButtonDisabled: boolean;
+    filtersAndOptions: Map<string | number, CheckboxOption[]>;
     destroy$: Subject<boolean>;
     private filteredTypeOptionsInfo;
     set appliedFilterOptions(options: ChipOption[]);
     get appliedFilterOptions(): ChipOption[];
     filterButton: IconButton;
     filters: ChipOption[];
-    selectedFilterOptions: CheckboxOption[];
+    private selectedFilterOptionsList;
+    selectedFilterId: string | number;
+    set selectedFilterOptions(options: CheckboxOption[]);
+    get selectedFilterOptions(): CheckboxOption[];
     selectedFilter: EventEmitter<ChipOption>;
-    filteredOptions: EventEmitter<CheckboxOption[]>;
-    removeFilteredOption: EventEmitter<ChipOption>;
+    filteredOptions: EventEmitter<FiltersAndOptions[]>;
+    removeFilteredOption: EventEmitter<any>;
     constructor(breakpointObserverService: BreakpointObserverService, changeDetectorReference: ChangeDetectorRef);
     /**
      * OnFilterSelected receives the selected filter from chip component, emits the selected filter and toggle the isFilterByOptionsVisible state.
@@ -46,6 +51,7 @@ export declare class FilterComponent implements OnDestroy {
      * @memberof FilterComponent
      */
     onRemovalOfFilteredOption(option: ChipOption): void;
+    getListOfSelectedCheckboxes(): FiltersAndOptions[];
     /**
      * OnFilterApply toggles the isFilterByOptionsVisible state, emits the selected filter options and toggles the filter stateO
      * @memberof FilterComponent
@@ -53,7 +59,7 @@ export declare class FilterComponent implements OnDestroy {
     onFilterApply(): void;
     /**
      * SelectedFilterOptions method is called for every selection and deselection of filter option and stores the selected filter options.
-     * @param {CheckboxOption[]} values
+     * @param {FiltersAndOptions[]} values
      * @memberof FilterComponent
      */
     selectedFilterOptionsInfo(values: CheckboxOption[]): void;

package/lib/directives/dynamic-form-field/dynamic-form-field.directive.d.ts

@@ -55,7 +55,7 @@ export declare class DynamicFormFieldDirective implements FormField, OnInit, OnD
         searchEvent: Event;
         controlName: string;
     }>;
-    formAutoCompleteSearch: EventEmitter<Event>;
+    formAutoCompleteSearch: EventEmitter<string>;
     autoCompleteOptionSelected: EventEmitter<Event>;
     formCheckboxSelection: EventEmitter<CheckboxOption>;
     component: ComponentRef<any>;

package/lib/models/filters-options.model.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxOption } from './checkbox-option.model';
+export interface FiltersAndOptions {
+    [key: string | number]: CheckboxOption[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/presentation",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",
@@ -19,7 +19,7 @@
     "rxjs": "~7.8.0",
     "zone.js": "~0.13.0",
     "@ieeesa-npm/shared-styles": "^0.2.1",
-    "@ieeesa-npm/feature": "^0.7.0"
+    "@ieeesa-npm/feature": "^0.7.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -59,6 +59,7 @@ export * from './lib/models/table-actions.model';
 export * from './lib/models/table-schema.model';
 export * from './lib/models/breadcrumb.model';
 export * from './lib/models/tile.model';
+export * from './lib/models/filters-options.model';
 export * from './lib/models/profile-menu.model';
 export * from './lib/services/datepicker.service';
 export * from './lib/services/form-utility.service';

package/src/lib/assets/constants.json

@@ -95,7 +95,8 @@
   "filter": {
     "label": {
       "filterBy": "Filter By:",
-      "applyButton": "Apply"
+      "applyButton": "Apply",
+      "clearAll": "Clear All"
     },
     "buttons": [
       {