@decaf-ts/for-angular 0.0.25 → 0.0.26
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/fesm2022/decaf-ts-for-angular.mjs +1465 -1488
- package/fesm2022/decaf-ts-for-angular.mjs.map +1 -1
- package/index.d.ts +7470 -3
- package/package.json +14 -17
- package/components/component-renderer/component-renderer.component.d.ts +0 -278
- package/components/crud-field/crud-field.component.d.ts +0 -611
- package/components/crud-form/constants.d.ts +0 -5
- package/components/crud-form/crud-form.component.d.ts +0 -288
- package/components/crud-form/types.d.ts +0 -17
- package/components/empty-state/empty-state.component.d.ts +0 -300
- package/components/fieldset/fieldset.component.d.ts +0 -555
- package/components/filter/filter.component.d.ts +0 -514
- package/components/for-angular-components.module.d.ts +0 -20
- package/components/index.d.ts +0 -16
- package/components/layout/layout.component.d.ts +0 -110
- package/components/list/list.component.d.ts +0 -848
- package/components/list-item/list-item.component.d.ts +0 -390
- package/components/model-renderer/model-renderer.component.d.ts +0 -97
- package/components/pagination/constants.d.ts +0 -7
- package/components/pagination/pagination.component.d.ts +0 -264
- package/components/searchbar/searchbar.component.d.ts +0 -407
- package/components/stepped-form/stepped-form.component.d.ts +0 -255
- package/directives/collapsable.directive.d.ts +0 -9
- package/directives/index.d.ts +0 -1
- package/engine/DynamicModule.d.ts +0 -17
- package/engine/NgxBaseComponent.d.ts +0 -541
- package/engine/NgxCrudFormField.d.ts +0 -123
- package/engine/NgxFormService.d.ts +0 -601
- package/engine/NgxRenderingEngine.d.ts +0 -282
- package/engine/ValidatorFactory.d.ts +0 -15
- package/engine/constants.d.ts +0 -168
- package/engine/decorators.d.ts +0 -25
- package/engine/index.d.ts +0 -18
- package/engine/interfaces.d.ts +0 -271
- package/engine/types.d.ts +0 -200
- package/esm2022/components/component-renderer/component-renderer.component.mjs +0 -321
- package/esm2022/components/crud-field/crud-field.component.mjs +0 -518
- package/esm2022/components/crud-form/constants.mjs +0 -14
- package/esm2022/components/crud-form/crud-form.component.mjs +0 -259
- package/esm2022/components/crud-form/types.mjs +0 -2
- package/esm2022/components/empty-state/empty-state.component.mjs +0 -345
- package/esm2022/components/fieldset/fieldset.component.mjs +0 -677
- package/esm2022/components/filter/filter.component.mjs +0 -700
- package/esm2022/components/for-angular-components.module.mjs +0 -84
- package/esm2022/components/index.mjs +0 -20
- package/esm2022/components/layout/layout.component.mjs +0 -150
- package/esm2022/components/list/list.component.mjs +0 -1238
- package/esm2022/components/list-item/list-item.component.mjs +0 -405
- package/esm2022/components/model-renderer/model-renderer.component.mjs +0 -144
- package/esm2022/components/pagination/constants.mjs +0 -2
- package/esm2022/components/pagination/pagination.component.mjs +0 -321
- package/esm2022/components/searchbar/searchbar.component.mjs +0 -491
- package/esm2022/components/stepped-form/stepped-form.component.mjs +0 -306
- package/esm2022/decaf-ts-for-angular.mjs +0 -5
- package/esm2022/directives/collapsable.directive.mjs +0 -29
- package/esm2022/directives/index.mjs +0 -2
- package/esm2022/engine/DynamicModule.mjs +0 -18
- package/esm2022/engine/NgxBaseComponent.mjs +0 -541
- package/esm2022/engine/NgxCrudFormField.mjs +0 -137
- package/esm2022/engine/NgxFormService.mjs +0 -917
- package/esm2022/engine/NgxRenderingEngine.mjs +0 -376
- package/esm2022/engine/ValidatorFactory.mjs +0 -106
- package/esm2022/engine/constants.mjs +0 -170
- package/esm2022/engine/decorators.mjs +0 -38
- package/esm2022/engine/index.mjs +0 -19
- package/esm2022/engine/interfaces.mjs +0 -4
- package/esm2022/engine/types.mjs +0 -2
- package/esm2022/for-angular-common.module.mjs +0 -84
- package/esm2022/helpers/index.mjs +0 -13
- package/esm2022/helpers/utils.mjs +0 -436
- package/esm2022/i18n/Loader.mjs +0 -86
- package/esm2022/i18n/data/en.json +0 -85
- package/esm2022/public-apis.mjs +0 -15
- package/for-angular-common.module.d.ts +0 -50
- package/helpers/index.d.ts +0 -12
- package/helpers/utils.d.ts +0 -279
- package/i18n/Loader.d.ts +0 -43
- package/public-apis.d.ts +0 -14
|
@@ -1,514 +0,0 @@
|
|
|
1
|
-
import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
|
|
2
|
-
import { NgxBaseComponent } from '../../engine/NgxBaseComponent';
|
|
3
|
-
import { IFilterQuery, IFilterQueryItem } from '../../engine';
|
|
4
|
-
import { Subscription } from 'rxjs';
|
|
5
|
-
import { OrderDirection } from '@decaf-ts/core';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
/**
|
|
8
|
-
* @description Advanced filter component for creating dynamic search filters with step-by-step construction.
|
|
9
|
-
* @summary This component provides a comprehensive filtering interface that allows users to build
|
|
10
|
-
* complex search criteria using a three-step approach: select index → select condition → enter value.
|
|
11
|
-
* It supports filtering by multiple field indexes, comparison conditions, and values, displaying
|
|
12
|
-
* selected filters as removable chips. The component is responsive and includes auto-suggestions
|
|
13
|
-
* with keyboard navigation support.
|
|
14
|
-
*
|
|
15
|
-
* @example
|
|
16
|
-
* ```html
|
|
17
|
-
* <ngx-decaf-filter
|
|
18
|
-
* [indexes]="['name', 'email', 'department', 'status']"
|
|
19
|
-
* [conditions]="['Equal', 'Contains', 'Greater Than', 'Less Than']"
|
|
20
|
-
* [sort]="['createdAt', 'updatedAt']"
|
|
21
|
-
* [disableSort]="false"
|
|
22
|
-
* (filterEvent)="onFiltersChanged($event)">
|
|
23
|
-
* </ngx-decaf-filter>
|
|
24
|
-
* ```
|
|
25
|
-
*
|
|
26
|
-
* @mermaid
|
|
27
|
-
* sequenceDiagram
|
|
28
|
-
* participant U as User
|
|
29
|
-
* participant F as FilterComponent
|
|
30
|
-
* participant P as Parent Component
|
|
31
|
-
*
|
|
32
|
-
* U->>F: Focus input field
|
|
33
|
-
* F->>F: handleFocus() - Show available indexes
|
|
34
|
-
* U->>F: Select index (e.g., "name")
|
|
35
|
-
* F->>F: addFilter() - Step 1 completed
|
|
36
|
-
* F->>F: Show available conditions
|
|
37
|
-
* U->>F: Select condition (e.g., "Contains")
|
|
38
|
-
* F->>F: addFilter() - Step 2 completed
|
|
39
|
-
* F->>F: Show value input prompt
|
|
40
|
-
* U->>F: Enter value and press Enter
|
|
41
|
-
* F->>F: addFilter() - Step 3 completed
|
|
42
|
-
* F->>F: Create complete filter object
|
|
43
|
-
* F->>P: Emit filterEvent with new filter array
|
|
44
|
-
* F->>F: Reset to step 1 for next filter
|
|
45
|
-
*
|
|
46
|
-
* @memberOf ForAngularCommonModule
|
|
47
|
-
*/
|
|
48
|
-
export declare class FilterComponent extends NgxBaseComponent implements OnInit, OnDestroy {
|
|
49
|
-
/**
|
|
50
|
-
* @description Reference to the dropdown options container element.
|
|
51
|
-
* @summary ViewChild reference used to access and manipulate the dropdown options element
|
|
52
|
-
* for highlighting filtered items and managing visual feedback during option selection.
|
|
53
|
-
* This element contains the filterable suggestions that users can interact with.
|
|
54
|
-
*
|
|
55
|
-
* @type {ElementRef}
|
|
56
|
-
* @memberOf FilterComponent
|
|
57
|
-
*/
|
|
58
|
-
optionsFilterElement: ElementRef;
|
|
59
|
-
/**
|
|
60
|
-
* @description Available field indexes for filtering operations.
|
|
61
|
-
* @summary Defines the list of field names that users can filter by. These represent
|
|
62
|
-
* the data properties available for filtering operations. Each index corresponds to
|
|
63
|
-
* a field in the data model that supports comparison operations.
|
|
64
|
-
*
|
|
65
|
-
* @type {string[]}
|
|
66
|
-
* @default []
|
|
67
|
-
* @memberOf FilterComponent
|
|
68
|
-
*/
|
|
69
|
-
indexes: string[];
|
|
70
|
-
/**
|
|
71
|
-
* @description Available comparison conditions for filters.
|
|
72
|
-
* @summary Defines the list of comparison operators that can be used when creating filters.
|
|
73
|
-
* These conditions determine how the filter value is compared against the field value.
|
|
74
|
-
* Common conditions include equality, containment, and numerical comparison operations.
|
|
75
|
-
*
|
|
76
|
-
* @type {string[]}
|
|
77
|
-
* @default []
|
|
78
|
-
* @memberOf FilterComponent
|
|
79
|
-
*/
|
|
80
|
-
conditions: string[];
|
|
81
|
-
/**
|
|
82
|
-
* @description Available sorting options for the filtered data.
|
|
83
|
-
* @summary Defines the list of field names that can be used for sorting the filtered results.
|
|
84
|
-
* When disableSort is false, this array is automatically merged with the indexes array
|
|
85
|
-
* to provide comprehensive sorting capabilities.
|
|
86
|
-
*
|
|
87
|
-
* @type {string[]}
|
|
88
|
-
* @default []
|
|
89
|
-
* @memberOf FilterComponent
|
|
90
|
-
*/
|
|
91
|
-
sortBy: string[];
|
|
92
|
-
/**
|
|
93
|
-
* @description Controls whether sorting functionality is disabled.
|
|
94
|
-
* @summary When set to true, prevents the automatic merging of sort and indexes arrays,
|
|
95
|
-
* effectively disabling sorting capabilities. This is useful when you want to provide
|
|
96
|
-
* filtering without sorting options.
|
|
97
|
-
*
|
|
98
|
-
* @type {boolean}
|
|
99
|
-
* @default false
|
|
100
|
-
* @memberOf FilterComponent
|
|
101
|
-
*/
|
|
102
|
-
disableSort: boolean;
|
|
103
|
-
/**
|
|
104
|
-
* @description Current window width for responsive behavior.
|
|
105
|
-
* @summary Stores the current browser window width in pixels. This value is updated
|
|
106
|
-
* on window resize events to enable responsive filtering behavior and layout adjustments
|
|
107
|
-
* based on available screen space.
|
|
108
|
-
*
|
|
109
|
-
* @type {number}
|
|
110
|
-
* @memberOf FilterComponent
|
|
111
|
-
*/
|
|
112
|
-
windowWidth: number;
|
|
113
|
-
/**
|
|
114
|
-
* @description Available options for the current filter step.
|
|
115
|
-
* @summary Contains the list of options available for selection in the current step.
|
|
116
|
-
* This array changes dynamically based on the current step: indexes → conditions → empty for value input.
|
|
117
|
-
*
|
|
118
|
-
* @type {string[]}
|
|
119
|
-
* @default []
|
|
120
|
-
* @memberOf FilterComponent
|
|
121
|
-
*/
|
|
122
|
-
options: string[];
|
|
123
|
-
/**
|
|
124
|
-
* @description Filtered options based on user input.
|
|
125
|
-
* @summary Contains the subset of options that match the current user input for real-time
|
|
126
|
-
* filtering. This array is updated as the user types to show only relevant suggestions
|
|
127
|
-
* in the dropdown menu.
|
|
128
|
-
*
|
|
129
|
-
* @type {string[]}
|
|
130
|
-
* @default []
|
|
131
|
-
* @memberOf FilterComponent
|
|
132
|
-
*/
|
|
133
|
-
filteredOptions: string[];
|
|
134
|
-
/**
|
|
135
|
-
* @description Complete filter objects created by the user.
|
|
136
|
-
* @summary Array of complete filter objects, each containing index, condition, and value properties.
|
|
137
|
-
* These represent the active filters that can be applied to data operations.
|
|
138
|
-
*
|
|
139
|
-
* @type {KeyValue[]}
|
|
140
|
-
* @default []
|
|
141
|
-
* @memberOf FilterComponent
|
|
142
|
-
*/
|
|
143
|
-
filterValue: IFilterQueryItem[];
|
|
144
|
-
/**
|
|
145
|
-
* @description Current filter being constructed.
|
|
146
|
-
* @summary Temporary object that accumulates filter properties (index, condition, value)
|
|
147
|
-
* during the three-step filter creation process. Gets added to filterValue when complete.
|
|
148
|
-
*
|
|
149
|
-
* @type {KeyValue}
|
|
150
|
-
* @default {}
|
|
151
|
-
* @memberOf FilterComponent
|
|
152
|
-
*/
|
|
153
|
-
lastFilter: IFilterQueryItem;
|
|
154
|
-
/**
|
|
155
|
-
* @description Current step in the filter creation process.
|
|
156
|
-
* @summary Tracks the current step of filter creation: 1 = index selection, 2 = condition selection,
|
|
157
|
-
* 3 = value input. Automatically resets to 1 after completing a filter.
|
|
158
|
-
*
|
|
159
|
-
* @type {number}
|
|
160
|
-
* @default 1
|
|
161
|
-
* @memberOf FilterComponent
|
|
162
|
-
*/
|
|
163
|
-
step: number;
|
|
164
|
-
/**
|
|
165
|
-
* @description Controls dropdown visibility state.
|
|
166
|
-
* @summary Boolean flag that determines whether the options dropdown is currently visible.
|
|
167
|
-
* Used to manage the dropdown's open/close state and coordinate with focus/blur events.
|
|
168
|
-
*
|
|
169
|
-
* @type {boolean}
|
|
170
|
-
* @default false
|
|
171
|
-
* @memberOf FilterComponent
|
|
172
|
-
*/
|
|
173
|
-
dropdownOpen: boolean;
|
|
174
|
-
/**
|
|
175
|
-
* @description Current input field value.
|
|
176
|
-
* @summary Stores the current text input value that the user is typing. This value is
|
|
177
|
-
* bound to the input field and is cleared after each successful filter step completion.
|
|
178
|
-
*
|
|
179
|
-
* @type {string}
|
|
180
|
-
* @default ''
|
|
181
|
-
* @memberOf FilterComponent
|
|
182
|
-
*/
|
|
183
|
-
value: string;
|
|
184
|
-
/**
|
|
185
|
-
* @description Current sorting field value.
|
|
186
|
-
* @summary Stores the field name currently selected for sorting operations.
|
|
187
|
-
* This value determines which field is used to order the filtered results.
|
|
188
|
-
* Defaults to 'id' and can be changed through the sort dropdown selection.
|
|
189
|
-
*
|
|
190
|
-
* @type {string}
|
|
191
|
-
* @default 'id'
|
|
192
|
-
* @memberOf FilterComponent
|
|
193
|
-
*/
|
|
194
|
-
sortValue: string;
|
|
195
|
-
/**
|
|
196
|
-
* @description Current sorting direction.
|
|
197
|
-
* @summary Defines the direction of the sort operation - ascending or descending.
|
|
198
|
-
* This value works in conjunction with sortValue to determine the complete
|
|
199
|
-
* sorting configuration for filtered results.
|
|
200
|
-
*
|
|
201
|
-
* @type {OrderDirection}
|
|
202
|
-
* @default OrderDirection.DSC
|
|
203
|
-
* @memberOf FilterComponent
|
|
204
|
-
*/
|
|
205
|
-
sortDirection: OrderDirection;
|
|
206
|
-
/**
|
|
207
|
-
* @description Subscription for window resize events.
|
|
208
|
-
* @summary RxJS subscription that listens for window resize events with debouncing
|
|
209
|
-
* to update the windowWidth property. This enables responsive behavior and prevents
|
|
210
|
-
* excessive updates during resize operations.
|
|
211
|
-
*
|
|
212
|
-
* @type {Subscription}
|
|
213
|
-
* @memberOf FilterComponent
|
|
214
|
-
*/
|
|
215
|
-
windowResizeSubscription: Subscription;
|
|
216
|
-
/**
|
|
217
|
-
* @description Browsing mode (dark or light).
|
|
218
|
-
* @summary Indicates whether the dark mode theme is currently enabled.
|
|
219
|
-
* Defaults to `false`.
|
|
220
|
-
*
|
|
221
|
-
* @type {boolean}
|
|
222
|
-
* @memberOf FilterComponent
|
|
223
|
-
*/
|
|
224
|
-
isDarkMode: boolean;
|
|
225
|
-
/**
|
|
226
|
-
* @description Event emitter for filter changes.
|
|
227
|
-
* @summary Emits filter events when the user creates, modifies, or clears filters.
|
|
228
|
-
* The emitted value contains an array of complete filter objects or undefined when
|
|
229
|
-
* filters are cleared. Parent components listen to this event to update their data display.
|
|
230
|
-
*
|
|
231
|
-
* @type {EventEmitter<KeyValue[] | undefined>}
|
|
232
|
-
* @memberOf FilterComponent
|
|
233
|
-
*/
|
|
234
|
-
filterEvent: EventEmitter<IFilterQuery | undefined>;
|
|
235
|
-
/**
|
|
236
|
-
* @description Event emitter for search events.
|
|
237
|
-
* @summary Emits search events when the user interacts with the searchbar.
|
|
238
|
-
* @type {EventEmitter<string>}
|
|
239
|
-
* @memberOf FilterComponent
|
|
240
|
-
*/
|
|
241
|
-
searchEvent: EventEmitter<string>;
|
|
242
|
-
/**
|
|
243
|
-
* @description Constructor for FilterComponent.
|
|
244
|
-
* @summary Initializes a new instance of the FilterComponent.
|
|
245
|
-
* Calls the parent constructor with the component name to establish base locale string generation
|
|
246
|
-
* and internationalization support.
|
|
247
|
-
*
|
|
248
|
-
* @memberOf FilterComponent
|
|
249
|
-
*/
|
|
250
|
-
constructor();
|
|
251
|
-
/**
|
|
252
|
-
* @description Initializes the component after Angular first displays the data-bound properties.
|
|
253
|
-
* @summary Sets up the component by initializing window width tracking, setting up resize event
|
|
254
|
-
* subscriptions with debouncing, configuring sorting options, and calling the base initialization.
|
|
255
|
-
* This method prepares the component for user interaction and responsive behavior.
|
|
256
|
-
*
|
|
257
|
-
* @mermaid
|
|
258
|
-
* sequenceDiagram
|
|
259
|
-
* participant A as Angular Lifecycle
|
|
260
|
-
* participant F as FilterComponent
|
|
261
|
-
* participant W as Window
|
|
262
|
-
* participant R as RxJS
|
|
263
|
-
*
|
|
264
|
-
* A->>F: ngOnInit()
|
|
265
|
-
* F->>W: getWindowWidth()
|
|
266
|
-
* W-->>F: Return current width
|
|
267
|
-
* F->>R: Setup resize subscription with debounce
|
|
268
|
-
* R-->>F: Subscription created
|
|
269
|
-
* alt disableSort is false
|
|
270
|
-
* F->>F: Merge sort and indexes arrays
|
|
271
|
-
* end
|
|
272
|
-
* F->>F: Call initialize()
|
|
273
|
-
*
|
|
274
|
-
* @returns {Promise<void>}
|
|
275
|
-
* @memberOf FilterComponent
|
|
276
|
-
*/
|
|
277
|
-
ngOnInit(): Promise<void>;
|
|
278
|
-
/**
|
|
279
|
-
* @description Retrieves and configures available indexes for filtering and sorting.
|
|
280
|
-
* @summary Extracts field indexes from the model if available and merges them with
|
|
281
|
-
* sorting options when sorting is enabled. This method sets up the available field
|
|
282
|
-
* options for both filtering and sorting operations based on the model structure.
|
|
283
|
-
*
|
|
284
|
-
* @returns {void}
|
|
285
|
-
* @memberOf FilterComponent
|
|
286
|
-
*/
|
|
287
|
-
getIndexes(): void;
|
|
288
|
-
/**
|
|
289
|
-
* @description Cleanup method called when the component is destroyed.
|
|
290
|
-
* @summary Unsubscribes from window resize events to prevent memory leaks.
|
|
291
|
-
* This is essential for proper cleanup of RxJS subscriptions when the component
|
|
292
|
-
* is removed from the DOM.
|
|
293
|
-
*
|
|
294
|
-
* @returns {void}
|
|
295
|
-
* @memberOf FilterComponent
|
|
296
|
-
*/
|
|
297
|
-
ngOnDestroy(): void;
|
|
298
|
-
/**
|
|
299
|
-
* @description Handles input events from the text field.
|
|
300
|
-
* @summary Processes user input and filters the available options based on the typed value.
|
|
301
|
-
* This method provides real-time filtering of suggestions as the user types in the input field.
|
|
302
|
-
*
|
|
303
|
-
* @param {InputEvent} event - The input event containing the new value
|
|
304
|
-
* @returns {void}
|
|
305
|
-
* @memberOf FilterComponent
|
|
306
|
-
*/
|
|
307
|
-
handleInput(event: InputEvent): void;
|
|
308
|
-
/**
|
|
309
|
-
* @description Handles focus events on the input field.
|
|
310
|
-
* @summary Sets up the available options when the input field receives focus and opens the dropdown.
|
|
311
|
-
* If no options are provided, automatically determines the appropriate options based on current step.
|
|
312
|
-
* This method initializes the dropdown with contextually relevant suggestions.
|
|
313
|
-
*
|
|
314
|
-
* @param {string[]} options - Optional array of options to display
|
|
315
|
-
* @returns {void}
|
|
316
|
-
* @memberOf FilterComponent
|
|
317
|
-
*/
|
|
318
|
-
handleFocus(options?: string[]): void;
|
|
319
|
-
/**
|
|
320
|
-
* @description Handles blur events on the input field with delayed closing.
|
|
321
|
-
* @summary Manages the dropdown closing behavior with a delay to allow for option selection.
|
|
322
|
-
* Uses a two-phase approach to prevent premature closing when users click on dropdown options.
|
|
323
|
-
*
|
|
324
|
-
* @param {boolean} close - Internal flag to control the closing phase
|
|
325
|
-
* @returns {void}
|
|
326
|
-
* @memberOf FilterComponent
|
|
327
|
-
*/
|
|
328
|
-
handleBlur(close?: boolean): void;
|
|
329
|
-
/**
|
|
330
|
-
* @description Determines the appropriate options based on the current filter step.
|
|
331
|
-
* @summary Returns the contextually relevant options for the current step in the filter creation process.
|
|
332
|
-
* Step 1 shows indexes, Step 2 shows conditions, Step 3 shows no options (value input).
|
|
333
|
-
*
|
|
334
|
-
* @returns {string[]} Array of options appropriate for the current step
|
|
335
|
-
* @memberOf FilterComponent
|
|
336
|
-
*/
|
|
337
|
-
getOptions(): string[];
|
|
338
|
-
/**
|
|
339
|
-
* @description Adds a filter step or completes filter creation through a three-step process.
|
|
340
|
-
* @summary Core method for building filters step by step: Step 1 (Index) → Step 2 (Condition) → Step 3 (Value).
|
|
341
|
-
* When all steps are complete, creates a complete filter object and adds it to the filter collection.
|
|
342
|
-
* Handles both keyboard events (Enter to submit) and programmatic calls.
|
|
343
|
-
*
|
|
344
|
-
* @param {string} value - The value to add for the current step
|
|
345
|
-
* @param {CustomEvent} event - Optional event (KeyboardEvent triggers submission when value is empty)
|
|
346
|
-
* @returns {void}
|
|
347
|
-
*
|
|
348
|
-
* @mermaid
|
|
349
|
-
* sequenceDiagram
|
|
350
|
-
* participant U as User
|
|
351
|
-
* participant F as FilterComponent
|
|
352
|
-
*
|
|
353
|
-
* U->>F: addFilter(value, event)
|
|
354
|
-
* F->>F: Trim and validate value
|
|
355
|
-
* alt KeyboardEvent && empty value
|
|
356
|
-
* F->>F: submit() - Send current filters
|
|
357
|
-
* else Valid value or step 3
|
|
358
|
-
* alt Step 1 (Index)
|
|
359
|
-
* F->>F: lastFilter.index = value
|
|
360
|
-
* F->>F: options = conditions
|
|
361
|
-
* else Step 2 (Condition)
|
|
362
|
-
* F->>F: lastFilter.condition = value
|
|
363
|
-
* F->>F: options = []
|
|
364
|
-
* else Step 3 (Value)
|
|
365
|
-
* F->>F: lastFilter.value = value
|
|
366
|
-
* F->>F: Add complete filter to filterValue
|
|
367
|
-
* F->>F: Reset step to 1
|
|
368
|
-
* end
|
|
369
|
-
* F->>F: Increment step
|
|
370
|
-
* F->>F: Clear input & focus
|
|
371
|
-
* F->>F: Show next options
|
|
372
|
-
* end
|
|
373
|
-
*
|
|
374
|
-
* @memberOf FilterComponent
|
|
375
|
-
*/
|
|
376
|
-
addFilter(value: string, event?: CustomEvent): void;
|
|
377
|
-
/**
|
|
378
|
-
* @description Selects an option from the dropdown suggestions.
|
|
379
|
-
* @summary Handles option selection when a user clicks on a suggestion in the dropdown.
|
|
380
|
-
* This method acts as a bridge between dropdown clicks and the main addFilter logic.
|
|
381
|
-
*
|
|
382
|
-
* @param {CustomEvent} event - The click event from the dropdown option
|
|
383
|
-
* @param {string} value - The selected option value
|
|
384
|
-
* @returns {void}
|
|
385
|
-
* @memberOf FilterComponent
|
|
386
|
-
*/
|
|
387
|
-
selectOption(value: string): void;
|
|
388
|
-
/**
|
|
389
|
-
* @description Determines if a filter option can be individually removed.
|
|
390
|
-
* @summary Checks whether a filter component should display a close icon for removal.
|
|
391
|
-
* Only value options can be removed individually; index and condition options are part
|
|
392
|
-
* of the complete filter structure and cannot be removed separately.
|
|
393
|
-
*
|
|
394
|
-
* @param {string} option - The filter option text to check
|
|
395
|
-
* @returns {boolean} True if the option can be cleared individually, false otherwise
|
|
396
|
-
* @memberOf FilterComponent
|
|
397
|
-
*/
|
|
398
|
-
allowClear(option: string): boolean;
|
|
399
|
-
/**
|
|
400
|
-
* @description Removes a complete filter from the collection based on filter value.
|
|
401
|
-
* @summary Removes a complete filter by matching the provided value against filter values
|
|
402
|
-
* in the collection. Uses string normalization to handle accents and case differences.
|
|
403
|
-
* After removal, resets the interface to show available indexes for new filter creation.
|
|
404
|
-
*
|
|
405
|
-
* @param {string} filter - The filter value to remove (matches against filter.value property)
|
|
406
|
-
* @returns {void}
|
|
407
|
-
*
|
|
408
|
-
* @mermaid
|
|
409
|
-
* sequenceDiagram
|
|
410
|
-
* participant U as User
|
|
411
|
-
* participant F as FilterComponent
|
|
412
|
-
*
|
|
413
|
-
* U->>F: removeFilter(filterValue)
|
|
414
|
-
* F->>F: cleanString(filterValue)
|
|
415
|
-
* F->>F: Filter out matching filter objects
|
|
416
|
-
* F->>F: Clear input value
|
|
417
|
-
* F->>F: handleFocus(indexes) - Reset to index selection
|
|
418
|
-
* Note over F: Filter removed and UI reset
|
|
419
|
-
*
|
|
420
|
-
* @memberOf FilterComponent
|
|
421
|
-
*/
|
|
422
|
-
removeFilter(filter: string): void;
|
|
423
|
-
/**
|
|
424
|
-
* @description Resets the component to its initial state.
|
|
425
|
-
* @summary Clears all filter data, options, and resets the step counter to 1.
|
|
426
|
-
* This method provides a clean slate for new filter creation without emitting events.
|
|
427
|
-
*
|
|
428
|
-
* @returns {void}
|
|
429
|
-
* @memberOf FilterComponent
|
|
430
|
-
*/
|
|
431
|
-
reset(): void;
|
|
432
|
-
/**
|
|
433
|
-
* @description Clears all filters and notifies parent components.
|
|
434
|
-
* @summary Resets the component state and emits undefined to notify parent components
|
|
435
|
-
* that all filters have been cleared. This triggers any connected data refresh logic.
|
|
436
|
-
*
|
|
437
|
-
* @param {string} value - Optional parameter (currently unused)
|
|
438
|
-
* @returns {void}
|
|
439
|
-
* @memberOf FilterComponent
|
|
440
|
-
*/
|
|
441
|
-
clear(value?: string): void;
|
|
442
|
-
/**
|
|
443
|
-
* @description Submits the current filter collection to parent components.
|
|
444
|
-
* @summary Emits the current filter array to parent components when filters are ready
|
|
445
|
-
* to be applied. Only emits if there are active filters. Clears options after submission.
|
|
446
|
-
*
|
|
447
|
-
* @returns {void}
|
|
448
|
-
* @memberOf FilterComponent
|
|
449
|
-
*/
|
|
450
|
-
submit(): void;
|
|
451
|
-
/**
|
|
452
|
-
* @description Toggles the sort direction between ascending and descending.
|
|
453
|
-
* @summary Handles sort direction changes by toggling between ASC and DSC values.
|
|
454
|
-
* When the direction changes, automatically triggers a submit to apply the new
|
|
455
|
-
* sorting configuration to the filtered results.
|
|
456
|
-
*
|
|
457
|
-
* @returns {void}
|
|
458
|
-
* @memberOf FilterComponent
|
|
459
|
-
*/
|
|
460
|
-
handleSortDirectionChange(): void;
|
|
461
|
-
/**
|
|
462
|
-
* @description Handles sort field selection changes from the dropdown.
|
|
463
|
-
* @summary Processes sort field changes when users select a different field
|
|
464
|
-
* from the sort dropdown. Updates the sortValue property and triggers
|
|
465
|
-
* a submit to apply the new sorting configuration if the value has changed.
|
|
466
|
-
*
|
|
467
|
-
* @param {CustomEvent} event - The select change event containing the new sort field value
|
|
468
|
-
* @returns {void}
|
|
469
|
-
* @memberOf FilterComponent
|
|
470
|
-
*/
|
|
471
|
-
handleSortChange(event: CustomEvent): void;
|
|
472
|
-
/**
|
|
473
|
-
* @description Filters available options based on user input with visual highlighting.
|
|
474
|
-
* @summary Performs real-time filtering of available options based on user input.
|
|
475
|
-
* Also handles visual highlighting of matching options in the dropdown. Returns all
|
|
476
|
-
* options if input is less than 2 characters for performance optimization.
|
|
477
|
-
*
|
|
478
|
-
* @param {string | null | undefined} value - The search value to filter by
|
|
479
|
-
* @returns {string[]} Array of filtered options that match the input
|
|
480
|
-
*
|
|
481
|
-
* @mermaid
|
|
482
|
-
* sequenceDiagram
|
|
483
|
-
* participant U as User
|
|
484
|
-
* participant F as FilterComponent
|
|
485
|
-
* participant D as DOM
|
|
486
|
-
*
|
|
487
|
-
* U->>F: filterOptions(inputValue)
|
|
488
|
-
* alt inputValue < 2 characters
|
|
489
|
-
* F->>D: Remove existing highlights
|
|
490
|
-
* F-->>U: Return all options
|
|
491
|
-
* else inputValue >= 2 characters
|
|
492
|
-
* F->>D: Query all option elements
|
|
493
|
-
* F->>D: Add highlight to first matching option
|
|
494
|
-
* F->>F: Filter options by substring match
|
|
495
|
-
* F-->>U: Return filtered options
|
|
496
|
-
* end
|
|
497
|
-
*
|
|
498
|
-
* @memberOf FilterComponent
|
|
499
|
-
*/
|
|
500
|
-
filterOptions(value: string | null | undefined): string[];
|
|
501
|
-
/**
|
|
502
|
-
* @description Handles search events from the integrated searchbar component.
|
|
503
|
-
* @summary Processes search input from the searchbar and emits search events
|
|
504
|
-
* to parent components. This method acts as a bridge between the internal
|
|
505
|
-
* searchbar component and external search event listeners.
|
|
506
|
-
*
|
|
507
|
-
* @param {string | undefined} value - The search value entered by the user
|
|
508
|
-
* @returns {void}
|
|
509
|
-
* @memberOf FilterComponent
|
|
510
|
-
*/
|
|
511
|
-
handleSearch(value: string | undefined): void;
|
|
512
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<FilterComponent, never>;
|
|
513
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "ngx-decaf-filter", never, { "indexes": { "alias": "indexes"; "required": false; }; "conditions": { "alias": "conditions"; "required": false; }; "sortBy": { "alias": "sortBy"; "required": false; }; "disableSort": { "alias": "disableSort"; "required": false; }; }, { "filterEvent": "filterEvent"; "searchEvent": "searchEvent"; }, never, never, true, never>;
|
|
514
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as i0 from "@angular/core";
|
|
2
|
-
import * as i1 from "./model-renderer/model-renderer.component";
|
|
3
|
-
import * as i2 from "./component-renderer/component-renderer.component";
|
|
4
|
-
import * as i3 from "./crud-field/crud-field.component";
|
|
5
|
-
import * as i4 from "./crud-form/crud-form.component";
|
|
6
|
-
import * as i5 from "./empty-state/empty-state.component";
|
|
7
|
-
import * as i6 from "./list/list.component";
|
|
8
|
-
import * as i7 from "./list-item/list-item.component";
|
|
9
|
-
import * as i8 from "./searchbar/searchbar.component";
|
|
10
|
-
import * as i9 from "./pagination/pagination.component";
|
|
11
|
-
import * as i10 from "./fieldset/fieldset.component";
|
|
12
|
-
import * as i11 from "./layout/layout.component";
|
|
13
|
-
import * as i12 from "./filter/filter.component";
|
|
14
|
-
import * as i13 from "./stepped-form/stepped-form.component";
|
|
15
|
-
import * as i14 from "../directives/collapsable.directive";
|
|
16
|
-
export declare class ForAngularComponentsModule {
|
|
17
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ForAngularComponentsModule, never>;
|
|
18
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<ForAngularComponentsModule, never, [typeof i1.ModelRendererComponent, typeof i2.ComponentRendererComponent, typeof i3.CrudFieldComponent, typeof i4.CrudFormComponent, typeof i5.EmptyStateComponent, typeof i6.ListComponent, typeof i7.ListItemComponent, typeof i8.SearchbarComponent, typeof i9.PaginationComponent, typeof i4.CrudFormComponent, typeof i10.FieldsetComponent, typeof i11.LayoutComponent, typeof i12.FilterComponent, typeof i13.SteppedFormComponent, typeof i14.CollapsableDirective], [typeof i1.ModelRendererComponent, typeof i2.ComponentRendererComponent, typeof i3.CrudFieldComponent, typeof i4.CrudFormComponent, typeof i5.EmptyStateComponent, typeof i6.ListComponent, typeof i7.ListItemComponent, typeof i8.SearchbarComponent, typeof i9.PaginationComponent, typeof i4.CrudFormComponent, typeof i10.FieldsetComponent, typeof i11.LayoutComponent, typeof i12.FilterComponent, typeof i13.SteppedFormComponent, typeof i14.CollapsableDirective]>;
|
|
19
|
-
static ɵinj: i0.ɵɵInjectorDeclaration<ForAngularComponentsModule>;
|
|
20
|
-
}
|
package/components/index.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export * from './component-renderer/component-renderer.component';
|
|
2
|
-
export * from './crud-field/crud-field.component';
|
|
3
|
-
export * from './crud-form/crud-form.component';
|
|
4
|
-
export * from './empty-state/empty-state.component';
|
|
5
|
-
export * from './fieldset/fieldset.component';
|
|
6
|
-
export * from './filter/filter.component';
|
|
7
|
-
export * from './layout/layout.component';
|
|
8
|
-
export * from './list/list.component';
|
|
9
|
-
export * from './list-item/list-item.component';
|
|
10
|
-
export * from './model-renderer/model-renderer.component';
|
|
11
|
-
export * from './pagination/pagination.component';
|
|
12
|
-
export * from './searchbar/searchbar.component';
|
|
13
|
-
export * from './crud-form/constants';
|
|
14
|
-
export * from './pagination/constants';
|
|
15
|
-
export * from './stepped-form/stepped-form.component';
|
|
16
|
-
export * from './for-angular-components.module';
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { OnInit } from '@angular/core';
|
|
2
|
-
import { NgxBaseComponent } from '../../engine/NgxBaseComponent';
|
|
3
|
-
import { KeyValue } from '../../engine';
|
|
4
|
-
import { UIMediaBreakPoints } from '@decaf-ts/ui-decorators';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
/**
|
|
7
|
-
* @description Layout component for creating responsive grid layouts in Angular applications.
|
|
8
|
-
* @summary This component provides a flexible grid system that can be configured with dynamic
|
|
9
|
-
* rows and columns. It supports responsive breakpoints and can render child components within
|
|
10
|
-
* the grid structure. The component extends NgxBaseComponent to inherit common functionality
|
|
11
|
-
* and integrates with the model and component renderer systems.
|
|
12
|
-
*
|
|
13
|
-
* @class LayoutComponent
|
|
14
|
-
* @extends {NgxBaseComponent}
|
|
15
|
-
* @implements {OnInit}
|
|
16
|
-
* @memberOf LayoutComponent
|
|
17
|
-
*/
|
|
18
|
-
export declare class LayoutComponent extends NgxBaseComponent implements OnInit {
|
|
19
|
-
/**
|
|
20
|
-
* @description Number of columns or array of column definitions for the grid layout.
|
|
21
|
-
* @summary Defines the column structure of the grid. When a number is provided, it creates
|
|
22
|
-
* that many equal-width columns. When an array is provided, each element can define specific
|
|
23
|
-
* column properties or sizing. This allows for flexible grid layouts that can adapt to
|
|
24
|
-
* different content requirements.
|
|
25
|
-
*
|
|
26
|
-
* @type {(number | string[])}
|
|
27
|
-
* @default 1
|
|
28
|
-
* @memberOf LayoutComponent
|
|
29
|
-
*/
|
|
30
|
-
cols: number | string[];
|
|
31
|
-
/**
|
|
32
|
-
* @description Number of rows or array of row definitions for the grid layout.
|
|
33
|
-
* @summary Defines the row structure of the grid. When a number is provided, it creates
|
|
34
|
-
* that many equal-height rows. When an array is provided, each element can define specific
|
|
35
|
-
* row properties or sizing. This provides control over vertical spacing and content organization.
|
|
36
|
-
*
|
|
37
|
-
* @type {(number | string[])}
|
|
38
|
-
* @default 1
|
|
39
|
-
* @memberOf LayoutComponent
|
|
40
|
-
*/
|
|
41
|
-
rows: number | KeyValue[] | string[];
|
|
42
|
-
/**
|
|
43
|
-
* @description Media breakpoint for responsive behavior.
|
|
44
|
-
* @summary Determines the responsive breakpoint at which the layout should adapt.
|
|
45
|
-
* This affects how the grid behaves on different screen sizes, allowing for
|
|
46
|
-
* mobile-first or desktop-first responsive design patterns. The breakpoint
|
|
47
|
-
* is automatically processed to ensure compatibility with the UI framework.
|
|
48
|
-
*
|
|
49
|
-
* @type {UIMediaBreakPoints}
|
|
50
|
-
* @default 'medium'
|
|
51
|
-
* @memberOf LayoutComponent
|
|
52
|
-
*/
|
|
53
|
-
breakpoint: UIMediaBreakPoints;
|
|
54
|
-
/**
|
|
55
|
-
* @description Array of child components or data to render within the grid.
|
|
56
|
-
* @summary Contains the child elements that will be distributed across the grid layout.
|
|
57
|
-
* Each item in the array represents content that will be rendered using the appropriate
|
|
58
|
-
* renderer component (ModelRenderer or ComponentRenderer). This allows for mixed content
|
|
59
|
-
* types within a single layout structure.
|
|
60
|
-
*
|
|
61
|
-
* @type {KeyValue[]}
|
|
62
|
-
* @default []
|
|
63
|
-
* @memberOf LayoutComponent
|
|
64
|
-
*/
|
|
65
|
-
children: KeyValue[];
|
|
66
|
-
/**
|
|
67
|
-
* @description Creates an instance of LayoutComponent.
|
|
68
|
-
* @summary Initializes a new LayoutComponent with the component name "LayoutComponent".
|
|
69
|
-
* This constructor calls the parent NgxBaseComponent constructor to set up base
|
|
70
|
-
* functionality and component identification.
|
|
71
|
-
*
|
|
72
|
-
* @memberOf LayoutComponent
|
|
73
|
-
*/
|
|
74
|
-
constructor();
|
|
75
|
-
/**
|
|
76
|
-
* @description Getter that converts columns input to an array format.
|
|
77
|
-
* @summary Transforms the cols input property into a standardized string array format.
|
|
78
|
-
* When cols is a number, it creates an array with that many empty string elements.
|
|
79
|
-
* When cols is already an array, it returns the array as-is. This normalization
|
|
80
|
-
* ensures consistent handling of column definitions in the template.
|
|
81
|
-
*
|
|
82
|
-
* @type {string[]}
|
|
83
|
-
* @readonly
|
|
84
|
-
* @memberOf LayoutComponent
|
|
85
|
-
*/
|
|
86
|
-
get _cols(): string[];
|
|
87
|
-
/**
|
|
88
|
-
* @description Getter that converts rows input to an array format.
|
|
89
|
-
* @summary Transforms the rows input property into a standardized string array format.
|
|
90
|
-
* When rows is a number, it creates an array with that many empty string elements.
|
|
91
|
-
* When rows is already an array, it returns the array as-is. This normalization
|
|
92
|
-
* ensures consistent handling of row definitions in the template.
|
|
93
|
-
*
|
|
94
|
-
* @type {KeyValue[]}
|
|
95
|
-
* @readonly
|
|
96
|
-
* @memberOf LayoutComponent
|
|
97
|
-
*/
|
|
98
|
-
get _rows(): KeyValue[];
|
|
99
|
-
/**
|
|
100
|
-
* @description Angular lifecycle hook that runs after component initialization.
|
|
101
|
-
* @summary Called once, after the first ngOnChanges(). This method triggers the
|
|
102
|
-
* component's initialization process, which includes property parsing and grid
|
|
103
|
-
* setup. It ensures the component is properly configured before rendering.
|
|
104
|
-
*
|
|
105
|
-
* @memberOf LayoutComponent
|
|
106
|
-
*/
|
|
107
|
-
ngOnInit(): Promise<void>;
|
|
108
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
|
|
109
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ngx-decaf-layout", never, { "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "children": { "alias": "children"; "required": false; }; }, {}, never, never, true, never>;
|
|
110
|
-
}
|