@ieeesa-npm/presentation 0.4.3 → 0.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/assets/constants.json +72 -0
- package/esm2022/lib/components/autocomplete/autocomplete.component.mjs +3 -3
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +23 -4
- package/esm2022/lib/components/chips/chips.component.mjs +148 -0
- package/esm2022/lib/components/data-table/data-table.component.mjs +374 -0
- package/esm2022/lib/components/date-picker/date-picker.component.mjs +3 -3
- package/esm2022/lib/components/date-picker-header/date-picker-header.component.mjs +3 -3
- package/esm2022/lib/components/dynamic-form/dynamic-form.component.mjs +3 -3
- package/esm2022/lib/components/filter/filter.component.mjs +134 -0
- package/esm2022/lib/components/footer/footer.component.mjs +3 -3
- package/esm2022/lib/components/form-error/form-error.component.mjs +3 -3
- package/esm2022/lib/components/form-support-text/form-support-text.component.mjs +3 -3
- package/esm2022/lib/components/header/header.component.mjs +3 -3
- package/esm2022/lib/components/icon-button/icon-button.component.mjs +4 -4
- package/esm2022/lib/components/input/input.component.mjs +3 -3
- package/esm2022/lib/components/menu/menu.component.mjs +3 -3
- package/esm2022/lib/components/modal/modal.component.mjs +3 -3
- package/esm2022/lib/components/modal-confirmation/modal-confirmation.component.mjs +3 -3
- package/esm2022/lib/components/navigation-menu/navigation-menu.component.mjs +3 -3
- package/esm2022/lib/components/notification/notification.component.mjs +3 -3
- package/esm2022/lib/components/radio/radio.component.mjs +3 -3
- package/esm2022/lib/components/search/search.component.mjs +3 -3
- package/esm2022/lib/components/select/select.component.mjs +3 -3
- package/esm2022/lib/components/text-area/text-area.component.mjs +3 -3
- package/esm2022/lib/components/toggle-button/toggle-button.component.mjs +3 -3
- package/esm2022/lib/components/welcome/welcome.component.mjs +3 -3
- package/esm2022/lib/models/checkbox-option.model.mjs +1 -1
- package/esm2022/lib/models/chip-option.model.mjs +16 -0
- package/esm2022/lib/models/icon-button.model.mjs +1 -1
- package/esm2022/lib/models/paginator-config.model.mjs +2 -0
- package/esm2022/lib/models/table-actions.model.mjs +2 -0
- package/esm2022/lib/models/table-schema.model.mjs +11 -0
- package/esm2022/public-api.mjs +8 -1
- package/fesm2022/ieeesa-npm-presentation.mjs +802 -64
- package/fesm2022/ieeesa-npm-presentation.mjs.map +1 -1
- package/lib/components/checkbox/checkbox.component.d.ts +15 -4
- package/lib/components/chips/chips.component.d.ts +203 -0
- package/lib/components/data-table/data-table.component.d.ts +192 -0
- package/lib/components/filter/filter.component.d.ts +71 -0
- package/lib/models/checkbox-option.model.d.ts +1 -1
- package/lib/models/chip-option.model.d.ts +18 -0
- package/lib/models/icon-button.model.d.ts +1 -0
- package/lib/models/paginator-config.model.d.ts +5 -0
- package/lib/models/table-actions.model.d.ts +8 -0
- package/lib/models/table-schema.model.d.ts +18 -0
- package/package.json +3 -3
- package/public-api.d.ts +7 -0
- package/src/lib/assets/constants.json +72 -0
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import { EventEmitter, OnInit } from '@angular/core';
|
|
1
|
+
import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
|
|
2
2
|
import { FormGroup } from '@angular/forms';
|
|
3
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
4
|
+
import { Subject } from 'rxjs';
|
|
3
5
|
import { FieldConfig } from '../../models/field-config.model';
|
|
4
6
|
import { FormField } from '../../models/form-field.model';
|
|
5
7
|
import { CheckboxOption } from '../../models/checkbox-option.model';
|
|
@@ -12,7 +14,7 @@ import * as i0 from "@angular/core";
|
|
|
12
14
|
* @implements {OnInit}
|
|
13
15
|
* @implements {FormField}
|
|
14
16
|
*/
|
|
15
|
-
export declare class CheckboxComponent implements OnInit, FormField {
|
|
17
|
+
export declare class CheckboxComponent implements OnInit, FormField, OnDestroy {
|
|
16
18
|
private formUtilityService;
|
|
17
19
|
config: FieldConfig;
|
|
18
20
|
group: FormGroup;
|
|
@@ -24,10 +26,14 @@ export declare class CheckboxComponent implements OnInit, FormField {
|
|
|
24
26
|
*/
|
|
25
27
|
set checkboxes(value: CheckboxOption[]);
|
|
26
28
|
get checkboxes(): CheckboxOption[];
|
|
29
|
+
selectedCheckboxesInfo: SelectionModel<CheckboxOption>;
|
|
27
30
|
checkboxSelection: EventEmitter<CheckboxOption>;
|
|
31
|
+
selectedCheckboxes: EventEmitter<CheckboxOption[]>;
|
|
32
|
+
destroy$: Subject<boolean>;
|
|
28
33
|
constructor(formUtilityService: FormUtilityService);
|
|
29
34
|
/**
|
|
30
|
-
* Implementation of ngOnInit lifecycle hook method of component to initialize component instance properties
|
|
35
|
+
* Implementation of ngOnInit lifecycle hook method of component to initialize component instance properties
|
|
36
|
+
* and emits whenever the checkboxes selection state changes
|
|
31
37
|
* @memberof CheckboxComponent
|
|
32
38
|
*/
|
|
33
39
|
ngOnInit(): void;
|
|
@@ -50,6 +56,11 @@ export declare class CheckboxComponent implements OnInit, FormField {
|
|
|
50
56
|
* @memberof CheckboxComponent
|
|
51
57
|
*/
|
|
52
58
|
trackById(index: number, option: CheckboxOption): number | string;
|
|
59
|
+
/**
|
|
60
|
+
* NgOnDestroy performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
|
|
61
|
+
* @memberof CheckboxComponent
|
|
62
|
+
*/
|
|
63
|
+
ngOnDestroy(): void;
|
|
53
64
|
static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
|
|
54
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "ieeesa-checkbox", never, { "checkboxes": { "alias": "checkboxes"; "required": false; }; }, { "checkboxSelection": "checkboxSelection"; }, never, never, true, never>;
|
|
65
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "ieeesa-checkbox", never, { "checkboxes": { "alias": "checkboxes"; "required": false; }; }, { "checkboxSelection": "checkboxSelection"; "selectedCheckboxes": "selectedCheckboxes"; }, never, never, true, never>;
|
|
55
66
|
}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
|
|
2
|
+
import { Subject } from 'rxjs';
|
|
3
|
+
import { BreakpointObserverService } from '@ieeesa-npm/utility';
|
|
4
|
+
import { ChipOption, ChipOrientation, ChipsType } from '../../models/chip-option.model';
|
|
5
|
+
import { IconButton } from '../../models/icon-button.model';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
/**
|
|
8
|
+
* Chips component allow users to view information, make selections, filter content.
|
|
9
|
+
* @export
|
|
10
|
+
* @class ChipComponent
|
|
11
|
+
* @implements {OnInit}
|
|
12
|
+
* @implements {OnDestroy}
|
|
13
|
+
*/
|
|
14
|
+
export declare class ChipsComponent implements OnInit, OnDestroy {
|
|
15
|
+
breakpointObserverService: BreakpointObserverService;
|
|
16
|
+
defaultVisibleChips: ChipOption[];
|
|
17
|
+
isViewMoreActive: boolean;
|
|
18
|
+
isMobileView: boolean;
|
|
19
|
+
labelViewAllOrLess: string;
|
|
20
|
+
constants: {
|
|
21
|
+
ariaLabel: {
|
|
22
|
+
clear: string;
|
|
23
|
+
warning: string;
|
|
24
|
+
previousMonth: string;
|
|
25
|
+
nextMonth: string;
|
|
26
|
+
menuIcon: string;
|
|
27
|
+
close: string;
|
|
28
|
+
};
|
|
29
|
+
button: {
|
|
30
|
+
cancel: string;
|
|
31
|
+
ok: string;
|
|
32
|
+
};
|
|
33
|
+
chips: {
|
|
34
|
+
noOfDefaultVisibleChips: number;
|
|
35
|
+
label: {
|
|
36
|
+
viewAll: string;
|
|
37
|
+
viewLess: string;
|
|
38
|
+
};
|
|
39
|
+
ariaLabel: {
|
|
40
|
+
chipsList: string;
|
|
41
|
+
};
|
|
42
|
+
icons: {
|
|
43
|
+
arrow: {
|
|
44
|
+
id: number;
|
|
45
|
+
iconURL: string;
|
|
46
|
+
toolTip: string;
|
|
47
|
+
ariaLabel: string;
|
|
48
|
+
};
|
|
49
|
+
remove: {
|
|
50
|
+
id: number;
|
|
51
|
+
iconURL: string;
|
|
52
|
+
toolTip: string;
|
|
53
|
+
ariaLabel: string;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
dataTable: {
|
|
58
|
+
label: {
|
|
59
|
+
clearAll: string;
|
|
60
|
+
};
|
|
61
|
+
ariaLabel: {
|
|
62
|
+
search: string;
|
|
63
|
+
selectAll: string;
|
|
64
|
+
select: string;
|
|
65
|
+
link: string;
|
|
66
|
+
pagination: string;
|
|
67
|
+
};
|
|
68
|
+
buttons: ({
|
|
69
|
+
id: number;
|
|
70
|
+
iconURL: string;
|
|
71
|
+
toolTip: string;
|
|
72
|
+
ariaLabel: string;
|
|
73
|
+
disabled: boolean;
|
|
74
|
+
} | {
|
|
75
|
+
id: number;
|
|
76
|
+
iconURL: string;
|
|
77
|
+
toolTip: string;
|
|
78
|
+
ariaLabel: string;
|
|
79
|
+
disabled?: undefined;
|
|
80
|
+
})[];
|
|
81
|
+
};
|
|
82
|
+
datePicker: {
|
|
83
|
+
selectDateLabel: string;
|
|
84
|
+
dateFormatLabel: string;
|
|
85
|
+
startDateLabel: string;
|
|
86
|
+
endDateLabel: string;
|
|
87
|
+
};
|
|
88
|
+
dropdown: {
|
|
89
|
+
placeholderText: string;
|
|
90
|
+
};
|
|
91
|
+
filter: {
|
|
92
|
+
label: {
|
|
93
|
+
filterBy: string;
|
|
94
|
+
applyButton: string;
|
|
95
|
+
};
|
|
96
|
+
buttons: {
|
|
97
|
+
id: number;
|
|
98
|
+
iconURL: string;
|
|
99
|
+
toolTip: string;
|
|
100
|
+
ariaLabel: string;
|
|
101
|
+
}[];
|
|
102
|
+
};
|
|
103
|
+
textarea: {
|
|
104
|
+
maxLengthDefault: number;
|
|
105
|
+
};
|
|
106
|
+
autocomplete: {
|
|
107
|
+
minCharToSearch: number;
|
|
108
|
+
debounceTime: number;
|
|
109
|
+
};
|
|
110
|
+
header: {
|
|
111
|
+
alt: {
|
|
112
|
+
logo: string;
|
|
113
|
+
};
|
|
114
|
+
ariaLabel: {
|
|
115
|
+
helpLink: string;
|
|
116
|
+
userProfile: string;
|
|
117
|
+
hamburgerMenu: string;
|
|
118
|
+
};
|
|
119
|
+
label: {
|
|
120
|
+
signOut: string;
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
footer: {
|
|
124
|
+
alt: {
|
|
125
|
+
logo: string;
|
|
126
|
+
};
|
|
127
|
+
links: {
|
|
128
|
+
label: string;
|
|
129
|
+
ariaLabel: string;
|
|
130
|
+
redirectUrl: string;
|
|
131
|
+
}[];
|
|
132
|
+
ieeeLogo: string;
|
|
133
|
+
copyright: {
|
|
134
|
+
link: string;
|
|
135
|
+
textPart1: string;
|
|
136
|
+
textPart2: string;
|
|
137
|
+
hyperLinkPart3: string;
|
|
138
|
+
textPart4: string;
|
|
139
|
+
};
|
|
140
|
+
};
|
|
141
|
+
welcome: {
|
|
142
|
+
buttons: {
|
|
143
|
+
label: string;
|
|
144
|
+
ariaLabel: string;
|
|
145
|
+
url: string;
|
|
146
|
+
}[];
|
|
147
|
+
};
|
|
148
|
+
defaultWelcomeBgColor: string;
|
|
149
|
+
};
|
|
150
|
+
chipsType: typeof ChipsType;
|
|
151
|
+
orientations: typeof ChipOrientation;
|
|
152
|
+
destroy$: Subject<boolean>;
|
|
153
|
+
private chips;
|
|
154
|
+
set chipGroup(value: ChipOption[]);
|
|
155
|
+
get chipGroup(): ChipOption[];
|
|
156
|
+
chipOrientation: ChipOrientation;
|
|
157
|
+
noOfDefaultVisibleChips: number;
|
|
158
|
+
hasViewMoreForDesktop: boolean;
|
|
159
|
+
hasViewMoreForMobile: boolean;
|
|
160
|
+
avatar: IconButton;
|
|
161
|
+
arrow: IconButton;
|
|
162
|
+
typeOfChip: ChipsType;
|
|
163
|
+
isViewMoreNeeded: boolean;
|
|
164
|
+
private isChipToggled;
|
|
165
|
+
set hasChipToggled(value: boolean);
|
|
166
|
+
get hasChipToggled(): boolean;
|
|
167
|
+
viewAllLabel: string;
|
|
168
|
+
viewLessLabel: string;
|
|
169
|
+
selectedChip: EventEmitter<any>;
|
|
170
|
+
constructor(breakpointObserverService: BreakpointObserverService);
|
|
171
|
+
ngOnInit(): void;
|
|
172
|
+
/**
|
|
173
|
+
* Onclick the chip, it emits selectedChip event with selected chip.
|
|
174
|
+
* @param {ChipOption} chip
|
|
175
|
+
* @memberof ChipComponent
|
|
176
|
+
*/
|
|
177
|
+
onChipClick(chip: ChipOption): void;
|
|
178
|
+
/**
|
|
179
|
+
* Shows list of chips on the basis of view more/less button state.
|
|
180
|
+
* @memberof ChipComponent
|
|
181
|
+
*/
|
|
182
|
+
viewChips(): void;
|
|
183
|
+
/**
|
|
184
|
+
* Sets the isViewMoreNeeded value based on hasViewMore and isMobileView values.
|
|
185
|
+
* @memberof ChipsComponent
|
|
186
|
+
*/
|
|
187
|
+
getViewMore(): void;
|
|
188
|
+
/**
|
|
189
|
+
* Allows Angular to detect the specific chip option that needs to change or be added by tracking option unique Id.
|
|
190
|
+
* @param {number} index
|
|
191
|
+
* @param {ChipOption} option
|
|
192
|
+
* @return {*} {(number | string)}
|
|
193
|
+
* @memberof ChipComponent
|
|
194
|
+
*/
|
|
195
|
+
trackById(index: number, option: ChipOption): number | string;
|
|
196
|
+
/**
|
|
197
|
+
* NgOnDestroy performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
|
|
198
|
+
* @memberof GroupsComponent
|
|
199
|
+
*/
|
|
200
|
+
ngOnDestroy(): void;
|
|
201
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ChipsComponent, never>;
|
|
202
|
+
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>;
|
|
203
|
+
}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { EventEmitter, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
|
2
|
+
import { MatTableDataSource } from '@angular/material/table';
|
|
3
|
+
import { PageEvent } from '@angular/material/paginator';
|
|
4
|
+
import { MatSort, SortDirection } from '@angular/material/sort';
|
|
5
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
6
|
+
import { Subject } from 'rxjs';
|
|
7
|
+
import { BreakpointObserverService } from '@ieeesa-npm/utility';
|
|
8
|
+
import { TableColumnSchema, TableColumnType } from '../../models/table-schema.model';
|
|
9
|
+
import { PaginatorConfig } from '../../models/paginator-config.model';
|
|
10
|
+
import { CheckboxOption } from '../../models/checkbox-option.model';
|
|
11
|
+
import { IconButton } from '../../models/icon-button.model';
|
|
12
|
+
import { TableActions } from '../../models/table-actions.model';
|
|
13
|
+
import { ChipOption } from '../../models/chip-option.model';
|
|
14
|
+
import * as i0 from "@angular/core";
|
|
15
|
+
/**
|
|
16
|
+
* 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.
|
|
17
|
+
* @export
|
|
18
|
+
* @class DataTableComponent
|
|
19
|
+
* @implements {OnInit}
|
|
20
|
+
* @implements {AfterViewInit}
|
|
21
|
+
* @implements {OnDestroy}
|
|
22
|
+
*/
|
|
23
|
+
export declare class DataTableComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
24
|
+
private breakpointObserverService;
|
|
25
|
+
private tableData;
|
|
26
|
+
set tableDataInfo(value: any[]);
|
|
27
|
+
get tableDataInfo(): any[];
|
|
28
|
+
private columnSchema;
|
|
29
|
+
set columnSchemaInfo(value: TableColumnSchema[]);
|
|
30
|
+
get columnSchemaInfo(): TableColumnSchema[];
|
|
31
|
+
constants: any;
|
|
32
|
+
tableActions: TableActions;
|
|
33
|
+
caption: string;
|
|
34
|
+
paginatorConfig: PaginatorConfig;
|
|
35
|
+
searchPlaceHolderText: string;
|
|
36
|
+
rowEditButton: IconButton;
|
|
37
|
+
rowDeleteButton: IconButton;
|
|
38
|
+
tableEditButton: IconButton;
|
|
39
|
+
tableDeleteButton: IconButton;
|
|
40
|
+
addButton: IconButton;
|
|
41
|
+
defaultColumnSortDirection: SortDirection;
|
|
42
|
+
defaultSortedColumn: string;
|
|
43
|
+
filters: ChipOption[];
|
|
44
|
+
selectedFilterOptions: CheckboxOption[];
|
|
45
|
+
appliedFilterOptions: ChipOption[];
|
|
46
|
+
rowSelected: EventEmitter<any>;
|
|
47
|
+
selectedRowToEdit: EventEmitter<any>;
|
|
48
|
+
selectedRowToDelete: EventEmitter<any>;
|
|
49
|
+
selectedRowsToDelete: EventEmitter<TableColumnSchema[]>;
|
|
50
|
+
rowLink: EventEmitter<any>;
|
|
51
|
+
addRow: EventEmitter<any>;
|
|
52
|
+
columnDataOnRowLinkClick: EventEmitter<any>;
|
|
53
|
+
paginationChange: EventEmitter<{
|
|
54
|
+
pageOffset: number;
|
|
55
|
+
pageLimit: number;
|
|
56
|
+
}>;
|
|
57
|
+
selectedFilter: EventEmitter<ChipOption>;
|
|
58
|
+
removeFilteredOption: EventEmitter<any>;
|
|
59
|
+
filteredOptions: EventEmitter<CheckboxOption[]>;
|
|
60
|
+
searchedValue: EventEmitter<string>;
|
|
61
|
+
displayedColumns: string[];
|
|
62
|
+
isMobileView: boolean;
|
|
63
|
+
dataSource: MatTableDataSource<any>;
|
|
64
|
+
selectedRows: SelectionModel<TableColumnSchema>;
|
|
65
|
+
pageLimit: number;
|
|
66
|
+
pageOffset: number;
|
|
67
|
+
columnType: typeof TableColumnType;
|
|
68
|
+
isSearchActive: boolean;
|
|
69
|
+
clearAll: any;
|
|
70
|
+
destroy$: Subject<boolean>;
|
|
71
|
+
sort: MatSort;
|
|
72
|
+
constructor(breakpointObserverService: BreakpointObserverService);
|
|
73
|
+
/**
|
|
74
|
+
* Initializes the data table component and sets the table action buttons.
|
|
75
|
+
* @memberof DataTableComponent
|
|
76
|
+
*/
|
|
77
|
+
ngOnInit(): void;
|
|
78
|
+
/**
|
|
79
|
+
* Initializes the sort feature of dataSource
|
|
80
|
+
* @memberof DataTableComponent
|
|
81
|
+
*/
|
|
82
|
+
ngAfterViewInit(): void;
|
|
83
|
+
/**
|
|
84
|
+
* Sets the dataSource whenever the table data changes.
|
|
85
|
+
* @memberof DataTableComponent
|
|
86
|
+
*/
|
|
87
|
+
tableDataChanges(): void;
|
|
88
|
+
/**
|
|
89
|
+
* OnSelectClick method emits the rowSelected event with selected row data.
|
|
90
|
+
* @param {*} row
|
|
91
|
+
* @param {boolean} checked
|
|
92
|
+
* @memberof DataTableComponent
|
|
93
|
+
*/
|
|
94
|
+
onSelectClick(row: any): void;
|
|
95
|
+
/**
|
|
96
|
+
* OnEditClick method emits the selectedRowToEdit event with the selected row data.
|
|
97
|
+
* @param {*} row
|
|
98
|
+
* @memberof DataTableComponent
|
|
99
|
+
*/
|
|
100
|
+
onEditClick(row: any): void;
|
|
101
|
+
/**
|
|
102
|
+
* OnDeleteClick method emits the selectedRowToDelete event with the selected row data.
|
|
103
|
+
* @param {*} row
|
|
104
|
+
* @memberof DataTableComponent
|
|
105
|
+
*/
|
|
106
|
+
onDeleteClick(row: any): void;
|
|
107
|
+
/**
|
|
108
|
+
*OnLinkClick method emits the event with row and column.
|
|
109
|
+
* @param {*} row
|
|
110
|
+
* @param {TableColumnSchema} [column]
|
|
111
|
+
* @memberof DataTableComponent
|
|
112
|
+
*/
|
|
113
|
+
onLinkClick(row: any, column?: TableColumnSchema): void;
|
|
114
|
+
/**
|
|
115
|
+
* OnTableEditClick method emits event with selected rows data when edit button clicked.
|
|
116
|
+
* @memberof DataTableComponent
|
|
117
|
+
*/
|
|
118
|
+
onTableEditClick(): void;
|
|
119
|
+
/**
|
|
120
|
+
* OnDeleteTableClick method emits event with selected row data when delete button clicked.
|
|
121
|
+
* @memberof DataTableComponent
|
|
122
|
+
*/
|
|
123
|
+
onDeleteTableClick(): void;
|
|
124
|
+
/**
|
|
125
|
+
* OnAddClick method emits the add event when add button clicked.
|
|
126
|
+
* @memberof DataTableComponent
|
|
127
|
+
*/
|
|
128
|
+
onAddClick(): void;
|
|
129
|
+
/**
|
|
130
|
+
* OnTableSearchClick method toggles the isSearchActive state when the search icon is clicked for the mobile view.
|
|
131
|
+
* @memberof DataTableComponent
|
|
132
|
+
*/
|
|
133
|
+
onTableSearchClick(): void;
|
|
134
|
+
/**
|
|
135
|
+
* SelectedFilterInfo method emits the selectedFilter event with selected filter information.
|
|
136
|
+
* @param {ChipOption} option
|
|
137
|
+
* @memberof DataTableComponent
|
|
138
|
+
*/
|
|
139
|
+
selectedFilterTypeInfo(option: ChipOption): void;
|
|
140
|
+
/**
|
|
141
|
+
* OnSelectedFilterOptions method emits the filteredOptions event with the selected options and adds "Clear all" option to clear the all selections.
|
|
142
|
+
* @param {CheckboxOption[]} options
|
|
143
|
+
* @memberof DataTableComponent
|
|
144
|
+
*/
|
|
145
|
+
onSelectedFilterOptions(options: CheckboxOption[]): void;
|
|
146
|
+
/**
|
|
147
|
+
* OnRemovalOfFilteredOption method emits the removeFilteredOption event with removed option.
|
|
148
|
+
* Sets the new appliedFilterOptions without removed option.
|
|
149
|
+
* @param {ChipOption} option
|
|
150
|
+
* @memberof DataTableComponent
|
|
151
|
+
*/
|
|
152
|
+
onRemovalOfFilteredOption(option: ChipOption): void;
|
|
153
|
+
/**
|
|
154
|
+
* SearchValue method emits the searched value.
|
|
155
|
+
* @param {string} value
|
|
156
|
+
* @memberof DataTableComponent
|
|
157
|
+
*/
|
|
158
|
+
searchValue(value: string): void;
|
|
159
|
+
/**
|
|
160
|
+
* Handles the pagination for every page.
|
|
161
|
+
* @param {PageEvent} event
|
|
162
|
+
* @memberof DataTableComponent
|
|
163
|
+
*/
|
|
164
|
+
handlePagination(event: PageEvent): void;
|
|
165
|
+
/**
|
|
166
|
+
* IsAllRowSelected method returns the boolean value by checking selectedRows and totalRows length.
|
|
167
|
+
* @return {*} {boolean}
|
|
168
|
+
* @memberof DataTableComponent
|
|
169
|
+
*/
|
|
170
|
+
isAllRowsSelected(): boolean;
|
|
171
|
+
/**
|
|
172
|
+
* ToggleAllRowsSelection method clears selectedRows when all rows are selected else selects the all rows.
|
|
173
|
+
* @return {*} {void}
|
|
174
|
+
* @memberof DataTableComponent
|
|
175
|
+
*/
|
|
176
|
+
toggleAllRowsSelection(): void;
|
|
177
|
+
/**
|
|
178
|
+
* Allows Angular to detect the specific table row that needs to change or be added by tracking row unique Id.
|
|
179
|
+
* @param {number} index
|
|
180
|
+
* @param {TableColumnSchema} column
|
|
181
|
+
* @return {*} {number}
|
|
182
|
+
* @memberof DataTableComponent
|
|
183
|
+
*/
|
|
184
|
+
trackById(index: number, column: TableColumnSchema): number;
|
|
185
|
+
/**
|
|
186
|
+
* NgOnDestroy performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
|
|
187
|
+
* @memberof DataTableComponent
|
|
188
|
+
*/
|
|
189
|
+
ngOnDestroy(): void;
|
|
190
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableComponent, never>;
|
|
191
|
+
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>;
|
|
192
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { EventEmitter, OnDestroy } from '@angular/core';
|
|
2
|
+
import { BreakpointObserverService } from '@ieeesa-npm/utility';
|
|
3
|
+
import { Subject } from 'rxjs';
|
|
4
|
+
import { CheckboxOption } from '../../models/checkbox-option.model';
|
|
5
|
+
import { IconButton } from '../../models/icon-button.model';
|
|
6
|
+
import { ChipOption, ChipsType } from '../../models/chip-option.model';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
/**
|
|
9
|
+
* Provides an implementation for group of filter.
|
|
10
|
+
* @export
|
|
11
|
+
* @class FilterComponent
|
|
12
|
+
* @implements {OnDestroy}
|
|
13
|
+
*/
|
|
14
|
+
export declare class FilterComponent implements OnDestroy {
|
|
15
|
+
private breakpointObserverService;
|
|
16
|
+
constants: any;
|
|
17
|
+
arrow: IconButton;
|
|
18
|
+
removeIcon: IconButton;
|
|
19
|
+
isFilterOpened: boolean;
|
|
20
|
+
selectedCheckboxes: CheckboxOption[];
|
|
21
|
+
onFilterToggle: boolean;
|
|
22
|
+
isFilterActive: boolean;
|
|
23
|
+
isMobileView: boolean;
|
|
24
|
+
typeOfChip: ChipsType;
|
|
25
|
+
destroy$: Subject<boolean>;
|
|
26
|
+
private filteredTypeOptionsInfo;
|
|
27
|
+
set appliedFilterOptions(options: ChipOption[]);
|
|
28
|
+
get appliedFilterOptions(): ChipOption[];
|
|
29
|
+
filterButton: IconButton;
|
|
30
|
+
filters: ChipOption[];
|
|
31
|
+
selectedFilterOptions: CheckboxOption[];
|
|
32
|
+
selectedFilter: EventEmitter<ChipOption>;
|
|
33
|
+
filteredOptions: EventEmitter<CheckboxOption[]>;
|
|
34
|
+
removeFilteredOption: EventEmitter<ChipOption>;
|
|
35
|
+
constructor(breakpointObserverService: BreakpointObserverService);
|
|
36
|
+
/**
|
|
37
|
+
* OnFilterSelected receives the selected filter from chip component, emits the selected filter and toggle the isFilterByOptionsVisible state.
|
|
38
|
+
* @param {ChipOption} type
|
|
39
|
+
* @memberof FilterComponent
|
|
40
|
+
*/
|
|
41
|
+
onFilterSelected(type: ChipOption): void;
|
|
42
|
+
/**
|
|
43
|
+
* OnRemovalOfFilteredOption method receives removed chip from chip component and emits the event with removed chip.
|
|
44
|
+
* @param {ChipOption} option
|
|
45
|
+
* @memberof FilterComponent
|
|
46
|
+
*/
|
|
47
|
+
onRemovalOfFilteredOption(option: ChipOption): void;
|
|
48
|
+
/**
|
|
49
|
+
* OnFilterApply toggles the isFilterByOptionsVisible state, emits the selected filter options and toggles the filter stateO
|
|
50
|
+
* @memberof FilterComponent
|
|
51
|
+
*/
|
|
52
|
+
onFilterApply(): void;
|
|
53
|
+
/**
|
|
54
|
+
* SelectedFilterOptions method is called for every selection and deselection of filter option and stores the selected filter options.
|
|
55
|
+
* @param {CheckboxOption[]} values
|
|
56
|
+
* @memberof FilterComponent
|
|
57
|
+
*/
|
|
58
|
+
selectedFilterOptionsInfo(values: CheckboxOption[]): void;
|
|
59
|
+
/**
|
|
60
|
+
* OnFilterByIconClick method toggles the isFilterActive value.
|
|
61
|
+
* @memberof FilterComponent
|
|
62
|
+
*/
|
|
63
|
+
onFilterByIconClick(): void;
|
|
64
|
+
/**
|
|
65
|
+
* NgOnDestroy performs necessary cleanup tasks, such as unsubscribing from subscription when the component is being destroyed.
|
|
66
|
+
* @memberof FilterComponent
|
|
67
|
+
*/
|
|
68
|
+
ngOnDestroy(): void;
|
|
69
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FilterComponent, never>;
|
|
70
|
+
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>;
|
|
71
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare enum ChipOrientation {
|
|
2
|
+
HORIZONTAL = "HORIZONTAL",
|
|
3
|
+
VERTICAL = "VERTICAL"
|
|
4
|
+
}
|
|
5
|
+
export declare enum ChipsType {
|
|
6
|
+
STATIC = " STATIC",
|
|
7
|
+
TOGGLE = "TOGGLE",
|
|
8
|
+
INPUT = "INPUT",
|
|
9
|
+
AUTOCOMPLETE = "AUTOCOMPLETE",
|
|
10
|
+
FORM_CONTROL = "FORM_CONTROL",
|
|
11
|
+
AVATAR = "AVATAR"
|
|
12
|
+
}
|
|
13
|
+
export interface ChipOption {
|
|
14
|
+
id: number | string;
|
|
15
|
+
name: string;
|
|
16
|
+
checked: boolean;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare enum TableColumnType {
|
|
2
|
+
TEXT = "TEXT",
|
|
3
|
+
LINK = "LINK",
|
|
4
|
+
SELECT = "SELECT",
|
|
5
|
+
ADD = "ADD",
|
|
6
|
+
EDIT = "EDIT",
|
|
7
|
+
DELETE = "DELETE"
|
|
8
|
+
}
|
|
9
|
+
export interface TableColumnSchema {
|
|
10
|
+
id: number;
|
|
11
|
+
columnDef: string;
|
|
12
|
+
heading: string;
|
|
13
|
+
columnType: TableColumnType;
|
|
14
|
+
cellData: any;
|
|
15
|
+
isDateColumn?: boolean;
|
|
16
|
+
isStickyColumn?: boolean;
|
|
17
|
+
isSortableColumn?: boolean;
|
|
18
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ieeesa-npm/presentation",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.5",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^16.1.0",
|
|
6
6
|
"@angular/core": "^16.1.0",
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
"moment": "^2.29.4",
|
|
19
19
|
"rxjs": "~7.8.0",
|
|
20
20
|
"zone.js": "~0.13.0",
|
|
21
|
-
"@ieeesa-npm/shared-styles": "^0.1.
|
|
22
|
-
"@ieeesa-npm/feature": "^0.2.
|
|
21
|
+
"@ieeesa-npm/shared-styles": "^0.1.1",
|
|
22
|
+
"@ieeesa-npm/feature": "^0.2.7"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"tslib": "^2.3.0"
|
package/public-api.d.ts
CHANGED
|
@@ -21,6 +21,9 @@ export * from './lib/components/select/select.component';
|
|
|
21
21
|
export * from './lib/components/text-area/text-area.component';
|
|
22
22
|
export * from './lib/components/toggle-button/toggle-button.component';
|
|
23
23
|
export * from './lib/components/welcome/welcome.component';
|
|
24
|
+
export * from './lib/components/chips/chips.component';
|
|
25
|
+
export * from './lib/components/filter/filter.component';
|
|
26
|
+
export * from './lib/components/data-table/data-table.component';
|
|
24
27
|
export * from './lib/directives/dynamic-form-field/dynamic-form-field.directive';
|
|
25
28
|
export * from './lib/directives/focus-invalid-form-field/focus-invalid-form-field.directive';
|
|
26
29
|
export * from './lib/directives/set-background/set-background.directive';
|
|
@@ -46,6 +49,10 @@ export * from './lib/models/radio-option.model';
|
|
|
46
49
|
export * from './lib/models/search.model';
|
|
47
50
|
export * from './lib/models/select-option.model';
|
|
48
51
|
export * from './lib/models/toggle-button.model';
|
|
52
|
+
export * from './lib/models/chip-option.model';
|
|
53
|
+
export * from './lib/models/paginator-config.model';
|
|
54
|
+
export * from './lib/models/table-actions.model';
|
|
55
|
+
export * from './lib/models/table-schema.model';
|
|
49
56
|
export * from './lib/services/datepicker.service';
|
|
50
57
|
export * from './lib/services/form-utility.service';
|
|
51
58
|
export * from './lib/presentation.module';
|