@decaf-ts/for-angular 0.0.25 → 0.0.27
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 +1486 -1505
- package/fesm2022/decaf-ts-for-angular.mjs.map +1 -1
- package/index.d.ts +7482 -3
- package/package.json +15 -18
- 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,288 +0,0 @@
|
|
|
1
|
-
import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
|
|
2
|
-
import { FormGroup } from '@angular/forms';
|
|
3
|
-
import { IFormElement } from '../../engine/interfaces';
|
|
4
|
-
import { CrudFormEvent, FieldUpdateMode, HandlerLike, HTMLFormTarget, RenderedModel } from '../../engine';
|
|
5
|
-
import { CrudFormOptions } from './types';
|
|
6
|
-
import { CrudOperations, OperationKeys } from '@decaf-ts/db-decorators';
|
|
7
|
-
import { Model } from '@decaf-ts/decorator-validation';
|
|
8
|
-
import * as i0 from "@angular/core";
|
|
9
|
-
/**
|
|
10
|
-
* @component CrudFormComponent
|
|
11
|
-
* @example <ngx-decaf-crud-form
|
|
12
|
-
* action="create"
|
|
13
|
-
* operation="create"
|
|
14
|
-
* formGroup="formGroup"
|
|
15
|
-
* rendererId="rendererId"
|
|
16
|
-
* submitEvent="submitEvent"
|
|
17
|
-
* target="_self"
|
|
18
|
-
* method="event">
|
|
19
|
-
* </ngx-decaf-crud-form>
|
|
20
|
-
*
|
|
21
|
-
* @param {string} action - The action to be performed (create, read, update, delete)
|
|
22
|
-
* @param {CrudOperations} operation - The CRUD operation being performed (create, read, update, delete)
|
|
23
|
-
* @param {FormGroup} formGroup - The form group
|
|
24
|
-
* @param {string} rendererId - The renderer id
|
|
25
|
-
* @param {SubmitEvent} submitEvent - The submit event
|
|
26
|
-
* @param {string} target - The target
|
|
27
|
-
* @param {string} method - The method
|
|
28
|
-
*/
|
|
29
|
-
export declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, RenderedModel {
|
|
30
|
-
/**
|
|
31
|
-
* @description Repository model for data operations.
|
|
32
|
-
* @summary The data model repository that this component will use for CRUD operations.
|
|
33
|
-
* This provides a connection to the data layer for retrieving and manipulating data.
|
|
34
|
-
*
|
|
35
|
-
* @type {Model| undefined}
|
|
36
|
-
* @memberOf CrudFormComponent
|
|
37
|
-
*/
|
|
38
|
-
model: Model | undefined;
|
|
39
|
-
/**
|
|
40
|
-
* @description The primary data model used for CRUD operations.
|
|
41
|
-
* @summary This input provides the main Model instance that the form interacts with for
|
|
42
|
-
* creating, reading, updating, or deleting records. It serves as the source of schema
|
|
43
|
-
* and validation rules for the form fields, and is required for most operations except
|
|
44
|
-
* for certain read or delete scenarios.
|
|
45
|
-
*
|
|
46
|
-
* @type {Model | undefined}
|
|
47
|
-
* @memberOf CrudFormComponent
|
|
48
|
-
*/
|
|
49
|
-
modelId: Model | undefined;
|
|
50
|
-
/**
|
|
51
|
-
* @description Field update trigger mode for form validation.
|
|
52
|
-
* @summary Determines when form field validation should be triggered. Options include
|
|
53
|
-
* 'change', 'blur', or 'submit'. This affects the user experience by controlling
|
|
54
|
-
* when validation feedback is shown to the user during form interaction.
|
|
55
|
-
*
|
|
56
|
-
* @type {FieldUpdateMode}
|
|
57
|
-
* @default 'change'
|
|
58
|
-
* @memberOf CrudFormComponent
|
|
59
|
-
*/
|
|
60
|
-
updateOn: FieldUpdateMode;
|
|
61
|
-
/**
|
|
62
|
-
* @description Reference to the reactive form DOM element.
|
|
63
|
-
* @summary ViewChild reference that provides direct access to the form's DOM element.
|
|
64
|
-
* This enables programmatic manipulation of the form element and access to native
|
|
65
|
-
* HTML form properties and methods when needed.
|
|
66
|
-
*
|
|
67
|
-
* @type {ElementRef}
|
|
68
|
-
* @memberOf CrudFormComponent
|
|
69
|
-
*/
|
|
70
|
-
component: ElementRef;
|
|
71
|
-
/**
|
|
72
|
-
* @description Form submission target specification.
|
|
73
|
-
* @summary Specifies where to display the response after form submission, similar
|
|
74
|
-
* to the HTML form target attribute. Options include '_self', '_blank', '_parent',
|
|
75
|
-
* '_top', or a named frame. Controls the browser behavior for form responses.
|
|
76
|
-
*
|
|
77
|
-
* @type {HTMLFormTarget}
|
|
78
|
-
* @default '_self'
|
|
79
|
-
* @memberOf CrudFormComponent
|
|
80
|
-
*/
|
|
81
|
-
target: HTMLFormTarget;
|
|
82
|
-
/**
|
|
83
|
-
* @description HTTP method or submission strategy for the form.
|
|
84
|
-
* @summary Defines how the form should be submitted. 'get' and 'post' correspond
|
|
85
|
-
* to standard HTTP methods for traditional form submission, while 'event' uses
|
|
86
|
-
* Angular event-driven submission for single-page application workflows.
|
|
87
|
-
*
|
|
88
|
-
* @type {'get' | 'post' | 'event'}
|
|
89
|
-
* @default 'event'
|
|
90
|
-
* @memberOf CrudFormComponent
|
|
91
|
-
*/
|
|
92
|
-
method: 'get' | 'post' | 'event';
|
|
93
|
-
/**
|
|
94
|
-
* @description Configuration options for the CRUD form behavior.
|
|
95
|
-
* @summary Contains various configuration settings that control form rendering,
|
|
96
|
-
* validation, and behavior. These options are merged with default settings
|
|
97
|
-
* during component initialization to customize the form's functionality.
|
|
98
|
-
*
|
|
99
|
-
* @type {CrudFormOptions}
|
|
100
|
-
* @memberOf CrudFormComponent
|
|
101
|
-
*/
|
|
102
|
-
options: CrudFormOptions;
|
|
103
|
-
/**
|
|
104
|
-
* @description Optional action identifier for form submission context.
|
|
105
|
-
* @summary Specifies a custom action name that will be included in the submit event.
|
|
106
|
-
* If not provided, defaults to the standard submit event constant. Used to
|
|
107
|
-
* distinguish between different types of form submissions within the same component.
|
|
108
|
-
*
|
|
109
|
-
* @type {string | undefined}
|
|
110
|
-
* @memberOf CrudFormComponent
|
|
111
|
-
*/
|
|
112
|
-
action?: string;
|
|
113
|
-
/**
|
|
114
|
-
* @description The current CRUD operation being performed.
|
|
115
|
-
* @summary Specifies the type of operation this form is handling (CREATE, READ, UPDATE, DELETE).
|
|
116
|
-
* This is a required input that determines form behavior, validation rules, and available actions.
|
|
117
|
-
* The operation affects form state, button visibility, and submission logic.
|
|
118
|
-
*
|
|
119
|
-
* @type {CrudOperations}
|
|
120
|
-
* @required
|
|
121
|
-
* @memberOf CrudFormComponent
|
|
122
|
-
*/
|
|
123
|
-
operation: CrudOperations;
|
|
124
|
-
/**
|
|
125
|
-
* @description Custom event handlers for form actions.
|
|
126
|
-
* @summary A record of event handler functions keyed by event names that can be
|
|
127
|
-
* triggered during form operations. These handlers provide extensibility for
|
|
128
|
-
* custom business logic and can be invoked for various form events and actions.
|
|
129
|
-
*
|
|
130
|
-
* @type {HandlerLike}
|
|
131
|
-
* @memberOf CrudFormComponent
|
|
132
|
-
*/
|
|
133
|
-
handlers: HandlerLike;
|
|
134
|
-
/**
|
|
135
|
-
* @description Angular reactive FormGroup for form state management.
|
|
136
|
-
* @summary The FormGroup instance that manages all form controls, validation,
|
|
137
|
-
* and form state. This is the main interface for accessing form values and
|
|
138
|
-
* controlling form behavior. May be undefined for read-only operations.
|
|
139
|
-
*
|
|
140
|
-
* @type {FormGroup | undefined}
|
|
141
|
-
* @memberOf CrudFormComponent
|
|
142
|
-
*/
|
|
143
|
-
formGroup: FormGroup | undefined;
|
|
144
|
-
/**
|
|
145
|
-
* @description Path to the parent FormGroup, if nested.
|
|
146
|
-
* @summary Full dot-delimited path of the parent FormGroup. Set only when is part of a nested structure.
|
|
147
|
-
*
|
|
148
|
-
* @type {string}
|
|
149
|
-
* @memberOf CrudFormComponent
|
|
150
|
-
*/
|
|
151
|
-
childOf?: string;
|
|
152
|
-
/**
|
|
153
|
-
* @description Unique identifier for the form renderer.
|
|
154
|
-
* @summary A unique string identifier used to register and manage this form
|
|
155
|
-
* instance within the NgxFormService. This ID is also used as the HTML id
|
|
156
|
-
* attribute for the form element, enabling DOM queries and form management.
|
|
157
|
-
*
|
|
158
|
-
* @type {string}
|
|
159
|
-
* @memberOf CrudFormComponent
|
|
160
|
-
*/
|
|
161
|
-
rendererId: string;
|
|
162
|
-
/**
|
|
163
|
-
* @description Unique identifier for the current record.
|
|
164
|
-
* @summary A unique identifier for the current record being displayed or manipulated.
|
|
165
|
-
* This is typically used in conjunction with the primary key for operations on specific records.
|
|
166
|
-
*
|
|
167
|
-
* @type {string | number}
|
|
168
|
-
* @memberOf CrudFormComponent
|
|
169
|
-
*/
|
|
170
|
-
uid: string;
|
|
171
|
-
/**
|
|
172
|
-
* @description Unique identifier for the current record instance.
|
|
173
|
-
* @summary This property holds a unique string value that identifies the specific record being managed by the form.
|
|
174
|
-
* It is automatically generated if not provided, ensuring each form instance has a distinct identifier.
|
|
175
|
-
* The uid is used for tracking, referencing, and emitting events related to the current record, and may be used
|
|
176
|
-
* in conjunction with the primary key for CRUD operations.
|
|
177
|
-
*
|
|
178
|
-
* @type {string}
|
|
179
|
-
* @default Randomly generated 12-character string
|
|
180
|
-
* @memberOf CrudFormComponent
|
|
181
|
-
*/
|
|
182
|
-
allowClear: boolean;
|
|
183
|
-
/**
|
|
184
|
-
* @description Reference to CRUD operation constants for template usage.
|
|
185
|
-
* @summary Exposes the OperationKeys enum to the component template, enabling
|
|
186
|
-
* conditional rendering and behavior based on operation types. This protected
|
|
187
|
-
* readonly property ensures that template logic can access operation constants
|
|
188
|
-
* while maintaining encapsulation and preventing accidental modification.
|
|
189
|
-
*
|
|
190
|
-
* @protected
|
|
191
|
-
* @readonly
|
|
192
|
-
* @memberOf CrudFormComponent
|
|
193
|
-
*/
|
|
194
|
-
protected readonly OperationKeys: typeof OperationKeys;
|
|
195
|
-
/**
|
|
196
|
-
* @description Event emitter for form submission events.
|
|
197
|
-
* @summary Emits CrudFormEvent objects when the form is submitted, providing
|
|
198
|
-
* form data, component information, and any associated handlers to parent
|
|
199
|
-
* components. This enables decoupled handling of form submission logic.
|
|
200
|
-
*
|
|
201
|
-
* @type {EventEmitter<CrudFormEvent>}
|
|
202
|
-
* @memberOf CrudFormComponent
|
|
203
|
-
*/
|
|
204
|
-
submitEvent: EventEmitter<CrudFormEvent>;
|
|
205
|
-
/**
|
|
206
|
-
* @description Logger instance for the component.
|
|
207
|
-
* @summary Provides logging capabilities for the component, allowing for consistent
|
|
208
|
-
* and structured logging of information, warnings, and errors. This logger is initialized
|
|
209
|
-
* in the ngOnInit method using the getLogger function from the ForAngularCommonModule.
|
|
210
|
-
*
|
|
211
|
-
* The logger is used throughout the component to record important events, debug information,
|
|
212
|
-
* and potential issues. It helps in monitoring the component's behavior, tracking the flow
|
|
213
|
-
* of operations, and facilitating easier debugging and maintenance.
|
|
214
|
-
*
|
|
215
|
-
* @type {Logger}
|
|
216
|
-
* @private
|
|
217
|
-
* @memberOf CrudFormComponent
|
|
218
|
-
*/
|
|
219
|
-
private logger;
|
|
220
|
-
/**
|
|
221
|
-
* @description Angular Location service.
|
|
222
|
-
* @summary Injected service that provides access to the browser's URL and history.
|
|
223
|
-
* This service is used for interacting with the browser's history API, allowing
|
|
224
|
-
* for back navigation and URL manipulation outside of Angular's router.
|
|
225
|
-
*
|
|
226
|
-
* @private
|
|
227
|
-
* @type {Location}
|
|
228
|
-
* @memberOf CrudFormComponent
|
|
229
|
-
*/
|
|
230
|
-
private location;
|
|
231
|
-
/**
|
|
232
|
-
* @description Component initialization lifecycle method.
|
|
233
|
-
* @summary Initializes the component by setting up the logger, configuring form state
|
|
234
|
-
* based on the operation type, and merging configuration options. For READ and DELETE
|
|
235
|
-
* operations, the formGroup is set to undefined since these operations don't require
|
|
236
|
-
* form input. Configuration options are merged with default settings.
|
|
237
|
-
*
|
|
238
|
-
* @returns {Promise<void>}
|
|
239
|
-
* @memberOf CrudFormComponent
|
|
240
|
-
*/
|
|
241
|
-
ngOnInit(): Promise<void>;
|
|
242
|
-
/**
|
|
243
|
-
* @description Component cleanup lifecycle method.
|
|
244
|
-
* @summary Performs cleanup operations when the component is destroyed.
|
|
245
|
-
* Unregisters the FormGroup from the NgxFormService to prevent memory leaks
|
|
246
|
-
* and ensure proper resource cleanup.
|
|
247
|
-
*
|
|
248
|
-
* @returns {void}
|
|
249
|
-
* @memberOf CrudFormComponent
|
|
250
|
-
*/
|
|
251
|
-
ngOnDestroy(): void;
|
|
252
|
-
/**
|
|
253
|
-
* @description Handles form submission with validation and event emission.
|
|
254
|
-
* @summary Processes form submission by first preventing default browser behavior,
|
|
255
|
-
* then validating all form fields using NgxFormService. If validation passes,
|
|
256
|
-
* extracts form data and emits a submitEvent with the data, component information,
|
|
257
|
-
* and any associated handlers. Returns false if validation fails.
|
|
258
|
-
*
|
|
259
|
-
* @param {SubmitEvent} event - The browser's native form submit event
|
|
260
|
-
* @returns {Promise<boolean | void>} Returns false if validation fails, void if successful
|
|
261
|
-
* @memberOf CrudFormComponent
|
|
262
|
-
*/
|
|
263
|
-
submit(event: SubmitEvent): Promise<boolean | void>;
|
|
264
|
-
/**
|
|
265
|
-
* @description Handles form reset or navigation back functionality.
|
|
266
|
-
* @summary Provides different reset behavior based on the current operation.
|
|
267
|
-
* For CREATE and UPDATE operations, resets the form to its initial state.
|
|
268
|
-
* For READ and DELETE operations, navigates back in the browser history
|
|
269
|
-
* since these operations don't have modifiable form data to reset.
|
|
270
|
-
*
|
|
271
|
-
* @returns {void}
|
|
272
|
-
* @memberOf CrudFormComponent
|
|
273
|
-
*/
|
|
274
|
-
handleReset(): void;
|
|
275
|
-
/**
|
|
276
|
-
* @description Handles delete operations by emitting delete events.
|
|
277
|
-
* @summary Processes delete requests by emitting a submit event with the
|
|
278
|
-
* record's unique identifier as data. This allows parent components to
|
|
279
|
-
* handle the actual deletion logic while maintaining separation of concerns.
|
|
280
|
-
* The event includes the uid and standard component identification.
|
|
281
|
-
*
|
|
282
|
-
* @returns {void}
|
|
283
|
-
* @memberOf CrudFormComponent
|
|
284
|
-
*/
|
|
285
|
-
handleDelete(): void;
|
|
286
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<CrudFormComponent, never>;
|
|
287
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CrudFormComponent, "ngx-decaf-crud-form", never, { "model": { "alias": "model"; "required": false; }; "modelId": { "alias": "modelId"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "target": { "alias": "target"; "required": false; }; "method": { "alias": "method"; "required": false; }; "options": { "alias": "options"; "required": false; }; "action": { "alias": "action"; "required": false; }; "operation": { "alias": "operation"; "required": true; }; "handlers": { "alias": "handlers"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "childOf": { "alias": "childOf"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; }, { "submitEvent": "submitEvent"; }, never, ["*"], true, never>;
|
|
288
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export interface FormReactiveSubmitEvent {
|
|
2
|
-
data: Record<string, unknown>;
|
|
3
|
-
}
|
|
4
|
-
export interface CrudFormOptions {
|
|
5
|
-
buttons: {
|
|
6
|
-
submit: {
|
|
7
|
-
icon?: string;
|
|
8
|
-
iconSlot?: 'start' | 'end';
|
|
9
|
-
text?: string;
|
|
10
|
-
};
|
|
11
|
-
clear?: {
|
|
12
|
-
icon?: string;
|
|
13
|
-
iconSlot?: 'start' | 'end';
|
|
14
|
-
text?: string;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
}
|
|
@@ -1,300 +0,0 @@
|
|
|
1
|
-
import { OnInit } from '@angular/core';
|
|
2
|
-
import { StringOrBoolean } from '../../engine';
|
|
3
|
-
import { NgxBaseComponent } from '../../engine/NgxBaseComponent';
|
|
4
|
-
import { SafeHtml } from '@angular/platform-browser';
|
|
5
|
-
import { FunctionLike } from '../../engine/types';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
/**
|
|
8
|
-
* @description Component for displaying empty state messages with optional actions.
|
|
9
|
-
* @summary This component provides a standardized way to display empty state messages
|
|
10
|
-
* when no data is available or when a user needs to take an action to populate content.
|
|
11
|
-
* It includes customizable title, subtitle, icon, and action button elements that can be
|
|
12
|
-
* styled and configured through input properties. The component supports localization
|
|
13
|
-
* and can trigger navigation or custom actions when the button is clicked.
|
|
14
|
-
*
|
|
15
|
-
* @mermaid
|
|
16
|
-
* classDiagram
|
|
17
|
-
* class EmptyStateComponent {
|
|
18
|
-
* +string title
|
|
19
|
-
* +string titleColor
|
|
20
|
-
* +string subtitle
|
|
21
|
-
* +string subtitleColor
|
|
22
|
-
* +StringOrBoolean showIcon
|
|
23
|
-
* +string icon
|
|
24
|
-
* +string iconSize
|
|
25
|
-
* +string iconColor
|
|
26
|
-
* +string|Function buttonLink
|
|
27
|
-
* +string buttonText
|
|
28
|
-
* +string buttonFill
|
|
29
|
-
* +string buttonColor
|
|
30
|
-
* +string buttonSize
|
|
31
|
-
* +string searchValue
|
|
32
|
-
* -Router Router
|
|
33
|
-
* +ngOnInit()
|
|
34
|
-
* +handleClick()
|
|
35
|
-
* }
|
|
36
|
-
* EmptyStateComponent --|> NgxBaseComponent
|
|
37
|
-
* EmptyStateComponent --|> OnInit
|
|
38
|
-
*
|
|
39
|
-
* @extends {NgxBaseComponent}
|
|
40
|
-
* @implements {OnInit}
|
|
41
|
-
*/
|
|
42
|
-
export declare class EmptyStateComponent extends NgxBaseComponent implements OnInit {
|
|
43
|
-
/**
|
|
44
|
-
* @description The main title displayed in the empty state.
|
|
45
|
-
* @summary Specifies the primary message to show in the empty state component.
|
|
46
|
-
* This text is typically used to inform the user about why they're seeing an empty view.
|
|
47
|
-
* If translatable is true, this will be processed through the localization system.
|
|
48
|
-
*
|
|
49
|
-
* @type {string}
|
|
50
|
-
* @default "title"
|
|
51
|
-
* @memberOf EmptyStateComponent
|
|
52
|
-
*/
|
|
53
|
-
title: string;
|
|
54
|
-
/**
|
|
55
|
-
* @description The color of the title text.
|
|
56
|
-
* @summary Specifies the color for the title text using the application's color system.
|
|
57
|
-
* The value should correspond to a color variable defined in the application's theme.
|
|
58
|
-
* The component will automatically prefix this with "color-" to create the CSS class.
|
|
59
|
-
*
|
|
60
|
-
* @type {string}
|
|
61
|
-
* @default 'gray-6'
|
|
62
|
-
* @memberOf EmptyStateComponent
|
|
63
|
-
*/
|
|
64
|
-
titleColor: string;
|
|
65
|
-
/**
|
|
66
|
-
* @description The secondary message displayed in the empty state.
|
|
67
|
-
* @summary Provides additional context or instructions below the main title.
|
|
68
|
-
* This text is typically used to guide the user on what actions they can take.
|
|
69
|
-
* If translatable is true, this will be processed through the localization system.
|
|
70
|
-
*
|
|
71
|
-
* @type {string | undefined}
|
|
72
|
-
* @memberOf EmptyStateComponent
|
|
73
|
-
*/
|
|
74
|
-
subtitle: string;
|
|
75
|
-
/**
|
|
76
|
-
* @description The color of the subtitle text.
|
|
77
|
-
* @summary Specifies the color for the subtitle text using the application's color system.
|
|
78
|
-
* The value should correspond to a color variable defined in the application's theme.
|
|
79
|
-
* The component will automatically prefix this with "color-" to create the CSS class.
|
|
80
|
-
*
|
|
81
|
-
* @type {string}
|
|
82
|
-
* @default 'gray-4'
|
|
83
|
-
* @memberOf EmptyStateComponent
|
|
84
|
-
*/
|
|
85
|
-
subtitleColor: string;
|
|
86
|
-
/**
|
|
87
|
-
* @description Controls whether the icon is displayed.
|
|
88
|
-
* @summary Determines if the visual icon should be shown in the empty state.
|
|
89
|
-
* This can be provided as a boolean or a string that will be converted to a boolean.
|
|
90
|
-
* Icons help visually communicate the empty state context to users.
|
|
91
|
-
*
|
|
92
|
-
* @type {StringOrBoolean}
|
|
93
|
-
* @default true
|
|
94
|
-
* @memberOf EmptyStateComponent
|
|
95
|
-
*/
|
|
96
|
-
showIcon: StringOrBoolean;
|
|
97
|
-
/**
|
|
98
|
-
* @description The name of the icon to display.
|
|
99
|
-
* @summary Specifies which icon to show when showIcon is true.
|
|
100
|
-
* The component uses the icon system defined in the application,
|
|
101
|
-
* and this value should correspond to an available icon name.
|
|
102
|
-
*
|
|
103
|
-
* @type {string}
|
|
104
|
-
* @default "ti-info-square-rounded"
|
|
105
|
-
* @memberOf EmptyStateComponent
|
|
106
|
-
*/
|
|
107
|
-
icon: string;
|
|
108
|
-
/**
|
|
109
|
-
* @description The size of the displayed icon.
|
|
110
|
-
* @summary Controls the size of the icon shown in the empty state.
|
|
111
|
-
* Can be either 'large' or 'small' to accommodate different layout needs.
|
|
112
|
-
*
|
|
113
|
-
* @type {'large' | 'small' | undefined}
|
|
114
|
-
* @default 'large'
|
|
115
|
-
* @memberOf EmptyStateComponent
|
|
116
|
-
*/
|
|
117
|
-
iconSize?: 'large' | 'small';
|
|
118
|
-
/**
|
|
119
|
-
* @description The color of the displayed icon.
|
|
120
|
-
* @summary Specifies the color for the icon using Ionic's predefined color system.
|
|
121
|
-
* This allows the icon to match the application's color scheme.
|
|
122
|
-
*
|
|
123
|
-
* @type {PredefinedColors | undefined}
|
|
124
|
-
* @default 'medium'
|
|
125
|
-
* @memberOf EmptyStateComponent
|
|
126
|
-
*/
|
|
127
|
-
iconColor?: string;
|
|
128
|
-
/**
|
|
129
|
-
* @description The navigation target or action for the button.
|
|
130
|
-
* @summary Specifies where the button should navigate to when clicked or what function
|
|
131
|
-
* it should execute. This can be either a URL string or a function that handles navigation.
|
|
132
|
-
* When not provided, the button will not perform any action.
|
|
133
|
-
*
|
|
134
|
-
* @type {string | FunctionLike | undefined}
|
|
135
|
-
* @memberOf EmptyStateComponent
|
|
136
|
-
*/
|
|
137
|
-
buttonLink?: string | FunctionLike;
|
|
138
|
-
/**
|
|
139
|
-
* @description The text displayed on the action button.
|
|
140
|
-
* @summary Specifies the label for the action button in the empty state.
|
|
141
|
-
* If translatable is true, this will be processed through the localization system.
|
|
142
|
-
* If not provided, the button will not display any text.
|
|
143
|
-
*
|
|
144
|
-
* @type {string | undefined}
|
|
145
|
-
* @memberOf EmptyStateComponent
|
|
146
|
-
*/
|
|
147
|
-
buttonText?: string;
|
|
148
|
-
/**
|
|
149
|
-
* @description The fill style of the action button.
|
|
150
|
-
* @summary Controls the visual style of the button using Ionic's button fill options.
|
|
151
|
-
* 'solid' creates a button with a solid background, 'outline' creates a button with
|
|
152
|
-
* just a border, and 'clear' creates a button with no background or border.
|
|
153
|
-
*
|
|
154
|
-
* @type {'clear' | 'solid' | 'outline'}
|
|
155
|
-
* @default 'solid'
|
|
156
|
-
* @memberOf EmptyStateComponent
|
|
157
|
-
*/
|
|
158
|
-
buttonFill: 'clear' | 'solid' | 'outline';
|
|
159
|
-
/**
|
|
160
|
-
* @description The color of the action button.
|
|
161
|
-
* @summary Specifies the color for the button using Ionic's color system.
|
|
162
|
-
* This allows the button to match the application's color scheme.
|
|
163
|
-
*
|
|
164
|
-
* @type {string}
|
|
165
|
-
* @default 'primary'
|
|
166
|
-
* @memberOf EmptyStateComponent
|
|
167
|
-
*/
|
|
168
|
-
buttonColor: string;
|
|
169
|
-
/**
|
|
170
|
-
* @description The size of the action button.
|
|
171
|
-
* @summary Controls the size of the button shown in the empty state.
|
|
172
|
-
* Can be 'large', 'small', or 'default' to accommodate different layout needs.
|
|
173
|
-
*
|
|
174
|
-
* @type {'large' | 'small' | 'default'}
|
|
175
|
-
* @default 'default'
|
|
176
|
-
* @memberOf EmptyStateComponent
|
|
177
|
-
*/
|
|
178
|
-
buttonSize: 'large' | 'small' | 'default';
|
|
179
|
-
/**
|
|
180
|
-
* @description The search value that resulted in no results.
|
|
181
|
-
* @summary When the empty state is shown due to a search with no results,
|
|
182
|
-
* this property can hold the search term that was used. This can be displayed
|
|
183
|
-
* in the empty state message to provide context to the user.
|
|
184
|
-
*
|
|
185
|
-
* @type {string}
|
|
186
|
-
* @memberOf EmptyStateComponent
|
|
187
|
-
*/
|
|
188
|
-
searchValue: string;
|
|
189
|
-
/**
|
|
190
|
-
* @description Service for handling navigation operations.
|
|
191
|
-
* @summary Injected service that provides methods for navigating between routes.
|
|
192
|
-
* This service is used when the buttonLink is a string URL to navigate to that location.
|
|
193
|
-
*
|
|
194
|
-
* @private
|
|
195
|
-
* @type {Router}
|
|
196
|
-
* @memberOf EmptyStateComponent
|
|
197
|
-
*/
|
|
198
|
-
private router;
|
|
199
|
-
private sanitizer;
|
|
200
|
-
private translate;
|
|
201
|
-
searchSubtitle: SafeHtml;
|
|
202
|
-
/**
|
|
203
|
-
* @description Creates an instance of EmptyStateComponent.
|
|
204
|
-
* @summary Initializes a new EmptyStateComponent by calling the parent class constructor
|
|
205
|
-
* with the component name for logging and identification purposes. This component provides
|
|
206
|
-
* a standardized way to display empty state messages with optional icons and action buttons.
|
|
207
|
-
*
|
|
208
|
-
* @memberOf EmptyStateComponent
|
|
209
|
-
*/
|
|
210
|
-
constructor();
|
|
211
|
-
/**
|
|
212
|
-
* @description Initializes the component after Angular first displays the data-bound properties.
|
|
213
|
-
* @summary Sets up the component by processing boolean inputs, applying localization to text
|
|
214
|
-
* elements if translation is enabled, and formatting CSS classes for title and subtitle colors.
|
|
215
|
-
* This method prepares the component for user interaction by ensuring all properties are
|
|
216
|
-
* properly initialized and localized.
|
|
217
|
-
*
|
|
218
|
-
* @mermaid
|
|
219
|
-
* sequenceDiagram
|
|
220
|
-
* participant A as Angular Lifecycle
|
|
221
|
-
* participant E as EmptyStateComponent
|
|
222
|
-
*
|
|
223
|
-
* A->>E: ngOnInit()
|
|
224
|
-
* E->>E: Process translatable flag
|
|
225
|
-
* E->>E: Process showIcon flag
|
|
226
|
-
* E->>E: Get locale settings
|
|
227
|
-
* alt translatable is true
|
|
228
|
-
* E->>E: Localize title
|
|
229
|
-
* E->>E: Localize subtitle
|
|
230
|
-
* E->>E: Localize buttonText
|
|
231
|
-
* end
|
|
232
|
-
* E->>E: Format title CSS class
|
|
233
|
-
* E->>E: Format subtitle CSS class
|
|
234
|
-
*
|
|
235
|
-
* @return {Promise<void>}
|
|
236
|
-
* @memberOf EmptyStateComponent
|
|
237
|
-
*/
|
|
238
|
-
ngOnInit(): Promise<void>;
|
|
239
|
-
/**
|
|
240
|
-
* @description Handles click events on the action button.
|
|
241
|
-
* @summary This method is triggered when the user clicks the action button in the empty state
|
|
242
|
-
* component. It supports three navigation patterns: 1) no action when buttonLink is not provided,
|
|
243
|
-
* 2) custom function execution when buttonLink is a function, and 3) navigation to a specific URL
|
|
244
|
-
* when buttonLink is a string. This flexibility allows the empty state to trigger various actions
|
|
245
|
-
* based on the context in which it's used.
|
|
246
|
-
*
|
|
247
|
-
* @mermaid
|
|
248
|
-
* sequenceDiagram
|
|
249
|
-
* participant U as User
|
|
250
|
-
* participant E as EmptyStateComponent
|
|
251
|
-
* participant N as Router
|
|
252
|
-
*
|
|
253
|
-
* U->>E: Click action button
|
|
254
|
-
* E->>E: handleClick()
|
|
255
|
-
* alt buttonLink is not provided
|
|
256
|
-
* E-->>U: Return false (no action)
|
|
257
|
-
* else buttonLink is a function
|
|
258
|
-
* E->>E: Execute buttonLink function
|
|
259
|
-
* E-->>U: Return function result
|
|
260
|
-
* else buttonLink is a URL string
|
|
261
|
-
* E->>N: navigateForward(buttonLink)
|
|
262
|
-
* N-->>E: Return navigation result
|
|
263
|
-
* E-->>U: Return navigation result
|
|
264
|
-
* end
|
|
265
|
-
*
|
|
266
|
-
* @return {boolean | void | Promise<boolean>}
|
|
267
|
-
* - false if no action is taken
|
|
268
|
-
* - The result of the buttonLink function if it's a function
|
|
269
|
-
* - A Promise resolving to the navigation result if buttonLink is a URL
|
|
270
|
-
* @memberOf EmptyStateComponent
|
|
271
|
-
*/
|
|
272
|
-
handleClick(): boolean | void | Promise<boolean>;
|
|
273
|
-
/**
|
|
274
|
-
* @description Generates a localized and sanitized subtitle for search results.
|
|
275
|
-
* @summary This method takes a content string, typically the subtitle, and processes it
|
|
276
|
-
* through the translation service. It replaces a placeholder ('value0') with the actual
|
|
277
|
-
* search value, then sanitizes the result to safely use as HTML. This is particularly
|
|
278
|
-
* useful for displaying dynamic, localized messages in the empty state when a search
|
|
279
|
-
* yields no results.
|
|
280
|
-
*
|
|
281
|
-
* @param {string} content - The content string to be translated and processed
|
|
282
|
-
* @return {Promise<SafeHtml>} A promise that resolves to a sanitized HTML string
|
|
283
|
-
*
|
|
284
|
-
* @mermaid
|
|
285
|
-
* sequenceDiagram
|
|
286
|
-
* participant E as EmptyStateComponent
|
|
287
|
-
* participant T as TranslateService
|
|
288
|
-
* participant S as DomSanitizer
|
|
289
|
-
*
|
|
290
|
-
* E->>T: instant(content, {'value0': searchValue})
|
|
291
|
-
* T-->>E: Return translated string
|
|
292
|
-
* E->>S: bypassSecurityTrustHtml(translatedString)
|
|
293
|
-
* S-->>E: Return sanitized SafeHtml
|
|
294
|
-
*
|
|
295
|
-
* @memberOf EmptyStateComponent
|
|
296
|
-
*/
|
|
297
|
-
getSearchSubtitle(content: string): Promise<SafeHtml>;
|
|
298
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
|
|
299
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "ngx-decaf-empty-state", never, { "title": { "alias": "title"; "required": false; }; "titleColor": { "alias": "titleColor"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "subtitleColor": { "alias": "subtitleColor"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "buttonLink": { "alias": "buttonLink"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "buttonFill": { "alias": "buttonFill"; "required": false; }; "buttonColor": { "alias": "buttonColor"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "searchValue": { "alias": "searchValue"; "required": false; }; }, {}, never, never, true, never>;
|
|
300
|
-
}
|