@ngstarter-ui/components 21.0.42 → 21.0.43
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/README.md +0 -1
- package/ai/component-registry.json +26 -101
- package/fesm2022/ngstarter-ui-components-form-builder.mjs +204 -19
- package/fesm2022/ngstarter-ui-components-form-builder.mjs.map +1 -1
- package/package.json +1 -5
- package/types/ngstarter-ui-components-form-builder.d.ts +41 -5
- package/fesm2022/ngstarter-ui-components-form-renderer-autocomplete-many-field-CGQ3pJaG.mjs +0 -124
- package/fesm2022/ngstarter-ui-components-form-renderer-autocomplete-many-field-CGQ3pJaG.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-checkbox-field-CoyKdvhV.mjs +0 -22
- package/fesm2022/ngstarter-ui-components-form-renderer-checkbox-field-CoyKdvhV.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-datepicker-field-Cf3jfPv7.mjs +0 -44
- package/fesm2022/ngstarter-ui-components-form-renderer-datepicker-field-Cf3jfPv7.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-divider-content-D8Sffofu.mjs +0 -17
- package/fesm2022/ngstarter-ui-components-form-renderer-divider-content-D8Sffofu.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-image-content-ICTwkZPa.mjs +0 -17
- package/fesm2022/ngstarter-ui-components-form-renderer-image-content-ICTwkZPa.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-input-field-tZHU8-_L.mjs +0 -35
- package/fesm2022/ngstarter-ui-components-form-renderer-input-field-tZHU8-_L.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-radio-group-field-DugkPKYU.mjs +0 -38
- package/fesm2022/ngstarter-ui-components-form-renderer-radio-group-field-DugkPKYU.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-select-field-DyBidcIU.mjs +0 -39
- package/fesm2022/ngstarter-ui-components-form-renderer-select-field-DyBidcIU.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-text-content-BjzH_M3-.mjs +0 -24
- package/fesm2022/ngstarter-ui-components-form-renderer-text-content-BjzH_M3-.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-textarea-field-DxbPsw3z.mjs +0 -37
- package/fesm2022/ngstarter-ui-components-form-renderer-textarea-field-DxbPsw3z.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-timezone-field-DAWrM-jS.mjs +0 -35
- package/fesm2022/ngstarter-ui-components-form-renderer-timezone-field-DAWrM-jS.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer-toggle-field-iyqUrWxt.mjs +0 -22
- package/fesm2022/ngstarter-ui-components-form-renderer-toggle-field-iyqUrWxt.mjs.map +0 -1
- package/fesm2022/ngstarter-ui-components-form-renderer.mjs +0 -317
- package/fesm2022/ngstarter-ui-components-form-renderer.mjs.map +0 -1
- package/types/ngstarter-ui-components-form-renderer.d.ts +0 -121
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ngstarter-ui/components",
|
|
3
3
|
"description": "NgStarter - AI-friendly Enterprise Angular UI Components and Admin Panel",
|
|
4
|
-
"version": "21.0.
|
|
4
|
+
"version": "21.0.43",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/elementarlabsdev/ngstarter.git"
|
|
@@ -297,10 +297,6 @@
|
|
|
297
297
|
"types": "./types/ngstarter-ui-components-form-field.d.ts",
|
|
298
298
|
"default": "./fesm2022/ngstarter-ui-components-form-field.mjs"
|
|
299
299
|
},
|
|
300
|
-
"./form-renderer": {
|
|
301
|
-
"types": "./types/ngstarter-ui-components-form-renderer.d.ts",
|
|
302
|
-
"default": "./fesm2022/ngstarter-ui-components-form-renderer.mjs"
|
|
303
|
-
},
|
|
304
300
|
"./gauge": {
|
|
305
301
|
"types": "./types/ngstarter-ui-components-gauge.d.ts",
|
|
306
302
|
"default": "./fesm2022/ngstarter-ui-components-gauge.mjs"
|
|
@@ -3,7 +3,9 @@ import { ValidatorFn, FormControl, FormGroup } from '@angular/forms';
|
|
|
3
3
|
import * as _angular_core from '@angular/core';
|
|
4
4
|
import { Type, InjectionToken, EnvironmentProviders, TemplateRef } from '@angular/core';
|
|
5
5
|
import { TreeNodeDropPosition, Tree, TreeNodeDrop } from '@ngstarter-ui/components/tree';
|
|
6
|
+
import { DateRangeInput } from '@ngstarter-ui/components/datepicker';
|
|
6
7
|
import { RadioGroupOrientation } from '@ngstarter-ui/components/radio';
|
|
8
|
+
import { UploadFileSelectedEvent } from '@ngstarter-ui/components/upload';
|
|
7
9
|
import * as _ngstarter_ui_components_form_builder from '@ngstarter-ui/components/form-builder';
|
|
8
10
|
|
|
9
11
|
type FormBuilderFieldWidth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
@@ -67,6 +69,15 @@ interface FormBuilderFieldRenderContext {
|
|
|
67
69
|
control: FormControl;
|
|
68
70
|
readonly: boolean;
|
|
69
71
|
}
|
|
72
|
+
interface FormBuilderUploadContext {
|
|
73
|
+
field: FormBuilderField;
|
|
74
|
+
control: FormControl;
|
|
75
|
+
event: any;
|
|
76
|
+
files: File[];
|
|
77
|
+
fileList: FileList | null;
|
|
78
|
+
multiple: boolean;
|
|
79
|
+
}
|
|
80
|
+
type FormBuilderUploadCallback = (context: FormBuilderUploadContext) => any | Promise<any>;
|
|
70
81
|
interface FormBuilderSettingsContext {
|
|
71
82
|
field: FormBuilderField;
|
|
72
83
|
schema: FormBuilderSchema;
|
|
@@ -120,6 +131,7 @@ interface FormBuilderFieldChange {
|
|
|
120
131
|
declare const FORM_BUILDER_ITEMS: InjectionToken<FormBuilderItemDefinition[]>;
|
|
121
132
|
declare const FORM_BUILDER_FIELDS: InjectionToken<FormBuilderFieldDefinition[]>;
|
|
122
133
|
declare const FORM_BUILDER_SETTINGS: InjectionToken<FormBuilderSettingsDefinition[]>;
|
|
134
|
+
declare const FORM_BUILDER_UPLOAD_CALLBACK: InjectionToken<FormBuilderUploadCallback>;
|
|
123
135
|
declare function formBuilderField(definition: FormBuilderFieldDefinition): FormBuilderFieldDefinition;
|
|
124
136
|
declare function formBuilderItem(definition: FormBuilderItemDefinition): FormBuilderItemDefinition;
|
|
125
137
|
declare function formBuilderSettings(definition: FormBuilderSettingsDefinition): FormBuilderSettingsDefinition;
|
|
@@ -127,6 +139,7 @@ declare function provideFormBuilder(config?: {
|
|
|
127
139
|
items?: FormBuilderItemDefinition[];
|
|
128
140
|
fields?: FormBuilderFieldDefinition[];
|
|
129
141
|
settings?: FormBuilderSettingsDefinition[];
|
|
142
|
+
uploadCallback?: FormBuilderUploadCallback;
|
|
130
143
|
}): EnvironmentProviders;
|
|
131
144
|
declare const DEFAULT_FORM_BUILDER_FIELDS: FormBuilderFieldDefinition[];
|
|
132
145
|
declare const DEFAULT_FORM_BUILDER_ITEMS: FormBuilderItemDefinition[];
|
|
@@ -174,6 +187,7 @@ declare class FormBuilder {
|
|
|
174
187
|
readonly schema: _angular_core.ModelSignal<FormBuilderSchema>;
|
|
175
188
|
readonly paletteTitle: _angular_core.InputSignal<string>;
|
|
176
189
|
readonly inspectorTitle: _angular_core.InputSignal<string>;
|
|
190
|
+
readonly uploadCallback: _angular_core.InputSignal<FormBuilderUploadCallback | null | undefined>;
|
|
177
191
|
readonly fieldSelected: _angular_core.OutputEmitterRef<FormBuilderFieldChange>;
|
|
178
192
|
readonly fieldAdded: _angular_core.OutputEmitterRef<FormBuilderFieldChange>;
|
|
179
193
|
readonly fieldRemoved: _angular_core.OutputEmitterRef<FormBuilderFieldChange>;
|
|
@@ -291,7 +305,7 @@ declare class FormBuilder {
|
|
|
291
305
|
private findFieldLocation;
|
|
292
306
|
private deletePreviewControls;
|
|
293
307
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormBuilder, never>;
|
|
294
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilder, "ngs-form-builder", ["ngsFormBuilder"], { "schema": { "alias": "schema"; "required": false; "isSignal": true; }; "paletteTitle": { "alias": "paletteTitle"; "required": false; "isSignal": true; }; "inspectorTitle": { "alias": "inspectorTitle"; "required": false; "isSignal": true; }; }, { "schema": "schemaChange"; "fieldSelected": "fieldSelected"; "fieldAdded": "fieldAdded"; "fieldRemoved": "fieldRemoved"; }, never, never, true, never>;
|
|
308
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilder, "ngs-form-builder", ["ngsFormBuilder"], { "schema": { "alias": "schema"; "required": false; "isSignal": true; }; "paletteTitle": { "alias": "paletteTitle"; "required": false; "isSignal": true; }; "inspectorTitle": { "alias": "inspectorTitle"; "required": false; "isSignal": true; }; "uploadCallback": { "alias": "uploadCallback"; "required": false; "isSignal": true; }; }, { "schema": "schemaChange"; "fieldSelected": "fieldSelected"; "fieldAdded": "fieldAdded"; "fieldRemoved": "fieldRemoved"; }, never, never, true, never>;
|
|
295
309
|
}
|
|
296
310
|
declare function createDefaultFormBuilderSchema(): FormBuilderSchema;
|
|
297
311
|
|
|
@@ -307,6 +321,7 @@ declare class FormBuilderRenderer {
|
|
|
307
321
|
readonly readonly: _angular_core.InputSignal<boolean>;
|
|
308
322
|
readonly showSubmit: _angular_core.InputSignal<boolean>;
|
|
309
323
|
readonly submitLabel: _angular_core.InputSignal<string>;
|
|
324
|
+
readonly uploadCallback: _angular_core.InputSignal<FormBuilderUploadCallback | null | undefined>;
|
|
310
325
|
readonly value: _angular_core.ModelSignal<Record<string, any>>;
|
|
311
326
|
readonly formSubmit: _angular_core.OutputEmitterRef<Record<string, any>>;
|
|
312
327
|
readonly formReady: _angular_core.OutputEmitterRef<FormGroup<any>>;
|
|
@@ -323,22 +338,35 @@ declare class FormBuilderRenderer {
|
|
|
323
338
|
private fieldInitialValue;
|
|
324
339
|
private resolveCanvasItems;
|
|
325
340
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormBuilderRenderer, never>;
|
|
326
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilderRenderer, "ngs-form-
|
|
341
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilderRenderer, "ngs-form-renderer", ["ngsFormRenderer"], { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "showSubmit": { "alias": "showSubmit"; "required": false; "isSignal": true; }; "submitLabel": { "alias": "submitLabel"; "required": false; "isSignal": true; }; "uploadCallback": { "alias": "uploadCallback"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "formSubmit": "formSubmit"; "formReady": "formReady"; }, never, never, true, never>;
|
|
327
342
|
}
|
|
328
343
|
|
|
329
344
|
declare class FormBuilderFieldHost {
|
|
345
|
+
private readonly providedUploadCallback;
|
|
330
346
|
readonly field: _angular_core.InputSignal<FormBuilderField>;
|
|
331
347
|
readonly control: _angular_core.InputSignal<FormControl<any>>;
|
|
332
348
|
readonly definitions: _angular_core.InputSignal<FormBuilderFieldDefinition[]>;
|
|
333
349
|
readonly readonly: _angular_core.InputSignal<boolean>;
|
|
334
350
|
readonly editableCanvas: _angular_core.InputSignal<boolean>;
|
|
351
|
+
readonly uploadCallback: _angular_core.InputSignal<FormBuilderUploadCallback | null | undefined>;
|
|
335
352
|
protected readonly customLoaded: _angular_core.WritableSignal<boolean>;
|
|
353
|
+
protected readonly controlValue: _angular_core.WritableSignal<any>;
|
|
336
354
|
protected readonly textInputType: _angular_core.Signal<"email" | "text" | "number">;
|
|
337
355
|
protected readonly radioOrientation: _angular_core.Signal<RadioGroupOrientation>;
|
|
356
|
+
protected readonly uploadAccept: _angular_core.Signal<any>;
|
|
357
|
+
protected readonly uploadDisabled: _angular_core.Signal<boolean>;
|
|
358
|
+
protected readonly dateRangeDisabled: _angular_core.Signal<boolean>;
|
|
359
|
+
protected readonly uploadSelectedText: _angular_core.Signal<any>;
|
|
360
|
+
protected readonly spacerHeight: _angular_core.Signal<number>;
|
|
361
|
+
protected readonly dateRangeStartValue: _angular_core.Signal<string>;
|
|
362
|
+
protected readonly dateRangeEndValue: _angular_core.Signal<string>;
|
|
338
363
|
private readonly anchor;
|
|
339
364
|
constructor();
|
|
365
|
+
protected onUploadFilesSelected(event: UploadFileSelectedEvent): Promise<void>;
|
|
366
|
+
protected onDateRangeChanged(rangeInput: DateRangeInput<any>): void;
|
|
367
|
+
private formatDateRangePart;
|
|
340
368
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormBuilderFieldHost, never>;
|
|
341
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilderFieldHost, "ngs-form-builder-field-host", ["ngsFormBuilderFieldHost"], { "field": { "alias": "field"; "required": true; "isSignal": true; }; "control": { "alias": "control"; "required": true; "isSignal": true; }; "definitions": { "alias": "definitions"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "editableCanvas": { "alias": "editableCanvas"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
369
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilderFieldHost, "ngs-form-builder-field-host", ["ngsFormBuilderFieldHost"], { "field": { "alias": "field"; "required": true; "isSignal": true; }; "control": { "alias": "control"; "required": true; "isSignal": true; }; "definitions": { "alias": "definitions"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "editableCanvas": { "alias": "editableCanvas"; "required": false; "isSignal": true; }; "uploadCallback": { "alias": "uploadCallback"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
342
370
|
}
|
|
343
371
|
|
|
344
372
|
declare class FormBuilderSettingsHost {
|
|
@@ -361,6 +389,7 @@ declare class FormBuilderSettingsHost {
|
|
|
361
389
|
}
|
|
362
390
|
|
|
363
391
|
type RadioOrientation = 'vertical' | 'horizontal';
|
|
392
|
+
type SpacerHeight = 8 | 16 | 24 | 32 | 48 | 64;
|
|
364
393
|
declare class BasicFormBuilderFieldSettings {
|
|
365
394
|
private readonly destroyRef;
|
|
366
395
|
readonly field: _angular_core.InputSignal<FormBuilderField>;
|
|
@@ -368,16 +397,23 @@ declare class BasicFormBuilderFieldSettings {
|
|
|
368
397
|
protected readonly optionsControl: FormControl<string>;
|
|
369
398
|
protected readonly fieldWidthOptions: FormBuilderFieldWidth[];
|
|
370
399
|
protected readonly radioOrientationOptions: RadioOrientation[];
|
|
400
|
+
protected readonly spacerHeightOptions: SpacerHeight[];
|
|
371
401
|
protected readonly hasCheckedState: _angular_core.Signal<boolean>;
|
|
372
402
|
protected readonly hasPlaceholder: _angular_core.Signal<boolean>;
|
|
373
403
|
protected readonly hasOptions: _angular_core.Signal<boolean>;
|
|
374
404
|
protected readonly hasClearable: _angular_core.Signal<boolean>;
|
|
405
|
+
protected readonly hasMultiple: _angular_core.Signal<boolean>;
|
|
375
406
|
protected readonly isSelect: _angular_core.Signal<boolean>;
|
|
407
|
+
protected readonly isUpload: _angular_core.Signal<boolean>;
|
|
376
408
|
protected readonly isRadio: _angular_core.Signal<boolean>;
|
|
409
|
+
protected readonly isSpacer: _angular_core.Signal<boolean>;
|
|
410
|
+
protected readonly hasBehaviorToggles: _angular_core.Signal<boolean>;
|
|
377
411
|
protected readonly radioOrientation: _angular_core.Signal<RadioOrientation>;
|
|
378
412
|
protected readonly optionsText: _angular_core.Signal<string>;
|
|
379
413
|
constructor();
|
|
380
414
|
protected patch(changes: Partial<FormBuilderField>): void;
|
|
415
|
+
protected patchSettings(changes: Record<string, any>): void;
|
|
416
|
+
protected patchMultiple(multiple: boolean): void;
|
|
381
417
|
protected patchSelectMultiple(multiple: boolean): void;
|
|
382
418
|
protected patchRadioOrientation(orientation: RadioOrientation): void;
|
|
383
419
|
protected patchOptions(value: string): void;
|
|
@@ -406,5 +442,5 @@ declare class BasicFormBuilderSectionSettings {
|
|
|
406
442
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BasicFormBuilderSectionSettings, "ngs-basic-form-builder-section-settings", ["ngsBasicFormBuilderSectionSettings"], { "section": { "alias": "section"; "required": true; "isSignal": true; }; "update": { "alias": "update"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
407
443
|
}
|
|
408
444
|
|
|
409
|
-
export { BasicFormBuilderFieldSettings, BasicFormBuilderLayoutSettings, BasicFormBuilderSectionSettings, DEFAULT_FORM_BUILDER_FIELDS, DEFAULT_FORM_BUILDER_ITEMS, FORM_BUILDER_FIELDS, FORM_BUILDER_ITEMS, FORM_BUILDER_SETTINGS, FormBuilder, FormBuilderFieldHost, FormBuilderRenderer, FormBuilderSettingsHost,
|
|
410
|
-
export type { FormBuilderComponentImporter, FormBuilderField, FormBuilderFieldChange, FormBuilderFieldDefinition, FormBuilderFieldRenderContext, FormBuilderFieldSettingsContext, FormBuilderFieldWidth, FormBuilderItemDefinition, FormBuilderItemKind, FormBuilderLayoutItem, FormBuilderOption, FormBuilderSchema, FormBuilderSection, FormBuilderSectionSettingsContext, FormBuilderSettingsContext, FormBuilderSettingsDefinition, FormBuilderValidationRule, FormBuilderVisibility };
|
|
445
|
+
export { BasicFormBuilderFieldSettings, BasicFormBuilderLayoutSettings, BasicFormBuilderSectionSettings, DEFAULT_FORM_BUILDER_FIELDS, DEFAULT_FORM_BUILDER_ITEMS, FORM_BUILDER_FIELDS, FORM_BUILDER_ITEMS, FORM_BUILDER_SETTINGS, FORM_BUILDER_UPLOAD_CALLBACK, FormBuilder, FormBuilderFieldHost, FormBuilderRenderer, FormBuilderSettingsHost, createDefaultFormBuilderSchema, formBuilderField, formBuilderItem, formBuilderSettings, provideFormBuilder, validatorsFromRules };
|
|
446
|
+
export type { FormBuilderComponentImporter, FormBuilderField, FormBuilderFieldChange, FormBuilderFieldDefinition, FormBuilderFieldRenderContext, FormBuilderFieldSettingsContext, FormBuilderFieldWidth, FormBuilderItemDefinition, FormBuilderItemKind, FormBuilderLayoutItem, FormBuilderOption, FormBuilderSchema, FormBuilderSection, FormBuilderSectionSettingsContext, FormBuilderSettingsContext, FormBuilderSettingsDefinition, FormBuilderUploadCallback, FormBuilderUploadContext, FormBuilderValidationRule, FormBuilderVisibility };
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, viewChild, Component } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/forms';
|
|
4
|
-
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import { Autocomplete, AutocompleteTrigger } from '@ngstarter-ui/components/autocomplete';
|
|
6
|
-
import { Option } from '@ngstarter-ui/components/option';
|
|
7
|
-
import { ChipGrid, ChipInput, ChipRemove, ChipRow } from '@ngstarter-ui/components/chips';
|
|
8
|
-
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
9
|
-
import { Error, FormField, Hint, Label } from '@ngstarter-ui/components/form-field';
|
|
10
|
-
import { Icon } from '@ngstarter-ui/components/icon';
|
|
11
|
-
import { startWith, tap, debounceTime, distinctUntilChanged, switchMap, of } from 'rxjs';
|
|
12
|
-
import { ProgressSpinner } from '@ngstarter-ui/components/spinner';
|
|
13
|
-
import { AsyncPipe } from '@angular/common';
|
|
14
|
-
import { HttpClient, HttpParams } from '@angular/common/http';
|
|
15
|
-
|
|
16
|
-
class AutocompleteManyField {
|
|
17
|
-
httpClient = inject(HttpClient);
|
|
18
|
-
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
19
|
-
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
20
|
-
separatorKeysCodes = [ENTER, COMMA];
|
|
21
|
-
chipsCtrl = new FormControl('');
|
|
22
|
-
input = viewChild.required('input');
|
|
23
|
-
value = [];
|
|
24
|
-
filteredOptions$;
|
|
25
|
-
isLoading = false;
|
|
26
|
-
ngOnInit() {
|
|
27
|
-
this.filteredOptions$ = this.chipsCtrl.valueChanges.pipe(startWith(''), tap(() => this.isLoading = true), debounceTime(300), distinctUntilChanged(), switchMap((query) => {
|
|
28
|
-
if (!query || !query.trim()) {
|
|
29
|
-
return of([]);
|
|
30
|
-
}
|
|
31
|
-
const params = new HttpParams().set('query', query || '');
|
|
32
|
-
return this.httpClient.get(this.config().payload?.['autocompleteUrl'], {
|
|
33
|
-
params
|
|
34
|
-
});
|
|
35
|
-
}), tap(() => this.isLoading = false));
|
|
36
|
-
}
|
|
37
|
-
getErrorMessage() {
|
|
38
|
-
const errors = this.control().errors;
|
|
39
|
-
if (!errors) {
|
|
40
|
-
return '';
|
|
41
|
-
}
|
|
42
|
-
const errorKey = Object.keys(errors)[0];
|
|
43
|
-
const validator = this.config().validators?.find((v) => v.type === errorKey);
|
|
44
|
-
return validator?.message || 'Invalid value';
|
|
45
|
-
}
|
|
46
|
-
get options() {
|
|
47
|
-
return this.config()?.payload?.['options'] || [];
|
|
48
|
-
}
|
|
49
|
-
get bindValue() {
|
|
50
|
-
return this.config().bindValue || 'id';
|
|
51
|
-
}
|
|
52
|
-
get bindName() {
|
|
53
|
-
return this.config().bindName || 'name';
|
|
54
|
-
}
|
|
55
|
-
add(event) {
|
|
56
|
-
const name = (event.value || '').trim();
|
|
57
|
-
const hasValue = this.value.find(v => v[this.bindName].toLowerCase() === name.toLowerCase());
|
|
58
|
-
if (name && !hasValue) {
|
|
59
|
-
this.value.push({
|
|
60
|
-
[this.bindValue]: null,
|
|
61
|
-
[this.bindName]: name,
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
event.chipInput.clear();
|
|
65
|
-
this.chipsCtrl.setValue(null);
|
|
66
|
-
this.isLoading = false;
|
|
67
|
-
this.calculateControlValue();
|
|
68
|
-
}
|
|
69
|
-
remove(chip) {
|
|
70
|
-
const index = this.value.indexOf(chip);
|
|
71
|
-
if (index >= 0) {
|
|
72
|
-
this.value.splice(index, 1);
|
|
73
|
-
this.calculateControlValue();
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
onSelected(event) {
|
|
77
|
-
const hasValue = this.value.find(v => v[this.bindName].toLowerCase() === event.option.value[this.bindName].toLowerCase());
|
|
78
|
-
if (!hasValue) {
|
|
79
|
-
this.value.push(event.option.value);
|
|
80
|
-
}
|
|
81
|
-
this.input().nativeElement.value = '';
|
|
82
|
-
this.chipsCtrl.setValue(null);
|
|
83
|
-
this.calculateControlValue();
|
|
84
|
-
this.isLoading = false;
|
|
85
|
-
}
|
|
86
|
-
calculateControlValue() {
|
|
87
|
-
const value = this.value.map(v => {
|
|
88
|
-
const itemValue = v[this.bindValue];
|
|
89
|
-
if (itemValue) {
|
|
90
|
-
return {
|
|
91
|
-
[this.bindValue]: itemValue,
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
return v;
|
|
95
|
-
});
|
|
96
|
-
this.control().setValue(value);
|
|
97
|
-
}
|
|
98
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AutocompleteManyField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
99
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AutocompleteManyField, isStandalone: true, selector: "ngs-autocomplete-many-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (control() && config()) {\n <ngs-form-field>\n <ngs-label>{{ config().label }}</ngs-label>\n <ngs-chip-grid #chipGrid>\n @for (option of value; track option) {\n <ngs-chip-row (removed)=\"remove(option)\">\n {{ option[bindName] }}\n <button ngsChipRemove>\n <ngs-icon name=\"fluent:dismiss-circle-24-regular\"/>\n </button>\n </ngs-chip-row>\n }\n <input [placeholder]=\"config().placeholder\"\n #input\n maxlength=\"30\"\n [formControl]=\"chipsCtrl\"\n [ngsChipInputFor]=\"chipGrid\"\n [ngsAutocomplete]=\"autocomplete\"\n [ngsChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (chipInputTokenEnd)=\"add($event)\">\n </ngs-chip-grid>\n @if (isLoading) {\n <div class=\"loader\">\n <ngs-progress-spinner\n mode=\"indeterminate\"\n [diameter]=\"20\"/>\n </div>\n }\n <ngs-autocomplete #autocomplete=\"ngsAutocomplete\" (optionSelected)=\"onSelected($event)\">\n @for (option of filteredOptions$ | async; track option) {\n <ngs-option [value]=\"option\">{{ option[bindName] }}</ngs-option>\n }\n\n @if (!(filteredOptions$ | async)?.length && !isLoading && chipsCtrl.value) {\n <ngs-option disabled>\n No search results found.\n </ngs-option>\n }\n </ngs-autocomplete>\n <ngs-hint>{{ config().hint }}</ngs-hint>\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}:host .loader{position:absolute;right:0;top:50%;transform:translateY(-50%)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "component", type: Autocomplete, selector: "ngs-autocomplete", inputs: ["aria-label", "aria-labelledby", "autoActiveFirstOption", "autoSelectActiveOption", "class", "disableRipple", "displayWith", "hideSingleSelectionIndicator", "panelWidth", "requireSelection"], outputs: ["closed", "opened", "optionActivated", "optionSelected"], exportAs: ["ngsAutocomplete"] }, { kind: "directive", type: AutocompleteTrigger, selector: "[ngsAutocomplete]", inputs: ["ngsAutocomplete"], exportAs: ["ngsAutocompleteTrigger"] }, { kind: "component", type: ChipGrid, selector: "ngs-chip-grid", inputs: ["id", "placeholder", "required", "disabled"], outputs: ["valueChange"], exportAs: ["ngsChipGrid"] }, { kind: "directive", type: ChipInput, selector: "input[ngsChipInputFor]", inputs: ["ngsChipInputFor", "ngsChipInputSeparatorKeyCodes", "ngsChipInputAddOnBlur"], outputs: ["chipInputTokenEnd"] }, { kind: "directive", type: ChipRemove, selector: "ngs-chip-remove, [ngsChipRemove]" }, { kind: "component", type: ChipRow, selector: "ngs-chip-row", inputs: ["editable"], outputs: ["edited"], exportAs: ["ngsChipRow"] }, { kind: "component", type: Error, selector: "ngs-error", exportAs: ["ngsError"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ProgressSpinner, selector: "ngs-progress-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["ngsProgressSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
100
|
-
}
|
|
101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AutocompleteManyField, decorators: [{
|
|
102
|
-
type: Component,
|
|
103
|
-
args: [{ selector: 'ngs-autocomplete-many-field', imports: [
|
|
104
|
-
FormsModule,
|
|
105
|
-
Autocomplete,
|
|
106
|
-
AutocompleteTrigger,
|
|
107
|
-
ChipGrid,
|
|
108
|
-
ChipInput,
|
|
109
|
-
ChipRemove,
|
|
110
|
-
ChipRow,
|
|
111
|
-
Error,
|
|
112
|
-
FormField,
|
|
113
|
-
Hint,
|
|
114
|
-
Icon,
|
|
115
|
-
Label,
|
|
116
|
-
Option,
|
|
117
|
-
ReactiveFormsModule,
|
|
118
|
-
ProgressSpinner,
|
|
119
|
-
AsyncPipe
|
|
120
|
-
], template: "@if (control() && config()) {\n <ngs-form-field>\n <ngs-label>{{ config().label }}</ngs-label>\n <ngs-chip-grid #chipGrid>\n @for (option of value; track option) {\n <ngs-chip-row (removed)=\"remove(option)\">\n {{ option[bindName] }}\n <button ngsChipRemove>\n <ngs-icon name=\"fluent:dismiss-circle-24-regular\"/>\n </button>\n </ngs-chip-row>\n }\n <input [placeholder]=\"config().placeholder\"\n #input\n maxlength=\"30\"\n [formControl]=\"chipsCtrl\"\n [ngsChipInputFor]=\"chipGrid\"\n [ngsAutocomplete]=\"autocomplete\"\n [ngsChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (chipInputTokenEnd)=\"add($event)\">\n </ngs-chip-grid>\n @if (isLoading) {\n <div class=\"loader\">\n <ngs-progress-spinner\n mode=\"indeterminate\"\n [diameter]=\"20\"/>\n </div>\n }\n <ngs-autocomplete #autocomplete=\"ngsAutocomplete\" (optionSelected)=\"onSelected($event)\">\n @for (option of filteredOptions$ | async; track option) {\n <ngs-option [value]=\"option\">{{ option[bindName] }}</ngs-option>\n }\n\n @if (!(filteredOptions$ | async)?.length && !isLoading && chipsCtrl.value) {\n <ngs-option disabled>\n No search results found.\n </ngs-option>\n }\n </ngs-autocomplete>\n <ngs-hint>{{ config().hint }}</ngs-hint>\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}:host .loader{position:absolute;right:0;top:50%;transform:translateY(-50%)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
121
|
-
}], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
|
|
122
|
-
|
|
123
|
-
export { AutocompleteManyField };
|
|
124
|
-
//# sourceMappingURL=ngstarter-ui-components-form-renderer-autocomplete-many-field-CGQ3pJaG.mjs.map
|
package/fesm2022/ngstarter-ui-components-form-renderer-autocomplete-many-field-CGQ3pJaG.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-form-renderer-autocomplete-many-field-CGQ3pJaG.mjs","sources":["../../../projects/components/form-renderer/src/fields/autocomplete-many-field/autocomplete-many-field.ts","../../../projects/components/form-renderer/src/fields/autocomplete-many-field/autocomplete-many-field.html"],"sourcesContent":["import { Component, ElementRef, inject, input, OnInit, viewChild } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport {\n Autocomplete,\n AutocompleteSelectedEvent,\n AutocompleteTrigger\n} from '@ngstarter-ui/components/autocomplete';\nimport { Option } from '@ngstarter-ui/components/option';\nimport { ChipGrid, ChipInput, ChipInputEvent, ChipRemove, ChipRow } from '@ngstarter-ui/components/chips';\nimport { ComponentConfig } from '../../models/form-config.model';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\nimport { Error, FormField, Hint, Label } from '@ngstarter-ui/components/form-field';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { catchError, debounceTime, distinctUntilChanged, Observable, of, startWith, switchMap, tap } from 'rxjs';\nimport { ProgressSpinner } from '@ngstarter-ui/components/spinner';\nimport { AsyncPipe } from '@angular/common';\nimport { HttpClient, HttpParams } from '@angular/common/http';\n\n@Component({\n selector: 'ngs-autocomplete-many-field',\n imports: [\n FormsModule,\n Autocomplete,\n AutocompleteTrigger,\n ChipGrid,\n ChipInput,\n ChipRemove,\n ChipRow,\n Error,\n FormField,\n Hint,\n Icon,\n Label,\n Option,\n ReactiveFormsModule,\n ProgressSpinner,\n AsyncPipe\n ],\n templateUrl: './autocomplete-many-field.html',\n styleUrl: './autocomplete-many-field.scss'\n})\nexport class AutocompleteManyField implements OnInit {\n private httpClient = inject(HttpClient);\n\n control = input.required<FormControl>();\n config = input.required<ComponentConfig>();\n\n readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n readonly chipsCtrl = new FormControl('');\n readonly input = viewChild.required<ElementRef<HTMLInputElement>>('input');\n readonly value: any[] = [];\n\n filteredOptions$!: Observable<any[]>;\n isLoading = false;\n\n ngOnInit() {\n this.filteredOptions$ = this.chipsCtrl.valueChanges.pipe(\n startWith(''),\n tap(() => this.isLoading = true),\n debounceTime(300),\n distinctUntilChanged(),\n switchMap((query: any) => {\n if (!query || !query.trim()) {\n return of([]);\n }\n const params = new HttpParams().set('query', query || '');\n return this.httpClient.get<any[]>(this.config().payload?.['autocompleteUrl'], {\n params\n });\n }),\n tap(() => this.isLoading = false)\n );\n }\n\n getErrorMessage(): string {\n const errors = this.control().errors;\n\n if (!errors) {\n return '';\n }\n\n const errorKey = Object.keys(errors)[0];\n const validator = this.config().validators?.find((v: any) => v.type === errorKey);\n return validator?.message || 'Invalid value';\n }\n\n get options() {\n return this.config()?.payload?.['options'] || [];\n }\n\n get bindValue() {\n return this.config().bindValue || 'id';\n }\n\n get bindName() {\n return this.config().bindName || 'name';\n }\n\n add(event: ChipInputEvent): void {\n const name = (event.value || '').trim();\n const hasValue = this.value.find(\n v => v[this.bindName].toLowerCase() === name.toLowerCase()\n );\n\n if (name && !hasValue) {\n this.value.push({\n [this.bindValue]: null,\n [this.bindName]: name,\n });\n }\n\n event.chipInput!.clear();\n this.chipsCtrl.setValue(null);\n this.isLoading = false;\n this.calculateControlValue();\n }\n\n remove(chip: any): void {\n const index = this.value.indexOf(chip);\n\n if (index >= 0) {\n this.value.splice(index, 1);\n this.calculateControlValue();\n }\n }\n\n onSelected(event: AutocompleteSelectedEvent): void {\n const hasValue = this.value.find(\n v => v[this.bindName].toLowerCase() === (event.option.value as any)[this.bindName].toLowerCase()\n );\n\n if (!hasValue) {\n this.value.push(event.option.value);\n }\n\n this.input().nativeElement.value = '';\n this.chipsCtrl.setValue(null);\n this.calculateControlValue();\n this.isLoading = false;\n }\n\n private calculateControlValue() {\n const value = this.value.map(v => {\n const itemValue = v[this.bindValue];\n\n if (itemValue) {\n return {\n [this.bindValue]: itemValue,\n };\n }\n\n return v;\n });\n this.control().setValue(value);\n }\n}\n","@if (control() && config()) {\n <ngs-form-field>\n <ngs-label>{{ config().label }}</ngs-label>\n <ngs-chip-grid #chipGrid>\n @for (option of value; track option) {\n <ngs-chip-row (removed)=\"remove(option)\">\n {{ option[bindName] }}\n <button ngsChipRemove>\n <ngs-icon name=\"fluent:dismiss-circle-24-regular\"/>\n </button>\n </ngs-chip-row>\n }\n <input [placeholder]=\"config().placeholder\"\n #input\n maxlength=\"30\"\n [formControl]=\"chipsCtrl\"\n [ngsChipInputFor]=\"chipGrid\"\n [ngsAutocomplete]=\"autocomplete\"\n [ngsChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (chipInputTokenEnd)=\"add($event)\">\n </ngs-chip-grid>\n @if (isLoading) {\n <div class=\"loader\">\n <ngs-progress-spinner\n mode=\"indeterminate\"\n [diameter]=\"20\"/>\n </div>\n }\n <ngs-autocomplete #autocomplete=\"ngsAutocomplete\" (optionSelected)=\"onSelected($event)\">\n @for (option of filteredOptions$ | async; track option) {\n <ngs-option [value]=\"option\">{{ option[bindName] }}</ngs-option>\n }\n\n @if (!(filteredOptions$ | async)?.length && !isLoading && chipsCtrl.value) {\n <ngs-option disabled>\n No search results found.\n </ngs-option>\n }\n </ngs-autocomplete>\n <ngs-hint>{{ config().hint }}</ngs-hint>\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </ngs-form-field>\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/forms';
|
|
4
|
-
import { ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import { Checkbox } from '@ngstarter-ui/components/checkbox';
|
|
6
|
-
|
|
7
|
-
class CheckboxField {
|
|
8
|
-
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
9
|
-
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
10
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CheckboxField, isStandalone: true, selector: "ngs-checkbox-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if(control() && config()) {\n <ngs-checkbox [formControl]=\"control()\">\n {{ config().label }}\n </ngs-checkbox>\n}\n", styles: [":host{display:block;margin-bottom:calc(var(--spacing, .25rem) * 3)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12
|
-
}
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxField, decorators: [{
|
|
14
|
-
type: Component,
|
|
15
|
-
args: [{ selector: 'ngs-checkbox-field', imports: [
|
|
16
|
-
Checkbox,
|
|
17
|
-
ReactiveFormsModule
|
|
18
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(control() && config()) {\n <ngs-checkbox [formControl]=\"control()\">\n {{ config().label }}\n </ngs-checkbox>\n}\n", styles: [":host{display:block;margin-bottom:calc(var(--spacing, .25rem) * 3)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
19
|
-
}], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
|
|
20
|
-
|
|
21
|
-
export { CheckboxField };
|
|
22
|
-
//# sourceMappingURL=ngstarter-ui-components-form-renderer-checkbox-field-CoyKdvhV.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-form-renderer-checkbox-field-CoyKdvhV.mjs","sources":["../../../projects/components/form-renderer/src/fields/checkbox-field/checkbox-field.ts","../../../projects/components/form-renderer/src/fields/checkbox-field/checkbox-field.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ComponentConfig } from '../../models/form-config.model';\nimport { Checkbox } from '@ngstarter-ui/components/checkbox';\n\n@Component({\n selector: 'ngs-checkbox-field',\n imports: [\n Checkbox,\n ReactiveFormsModule\n ],\n templateUrl: './checkbox-field.html',\n styleUrl: './checkbox-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CheckboxField {\n control = input.required<FormControl>();\n config = input.required<ComponentConfig>();\n}\n","@if(control() && config()) {\n <ngs-checkbox [formControl]=\"control()\">\n {{ config().label }}\n </ngs-checkbox>\n}\n"],"names":[],"mappings":";;;;;;MAea,aAAa,CAAA;AACxB,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAAe;AACvC,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,4EAAmB;uGAF/B,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECf1B,8HAKA,EAAA,MAAA,EAAA,CAAA,0IAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDGI,QAAQ,yaACR,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAMV,aAAa,EAAA,UAAA,EAAA,CAAA;kBAVzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAAA,OAAA,EACrB;wBACP,QAAQ;wBACR;qBACD,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,8HAAA,EAAA,MAAA,EAAA,CAAA,0IAAA,CAAA,EAAA;;;;;"}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/forms';
|
|
4
|
-
import { ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import { Hint, Suffix, Error, Label, FormField } from '@ngstarter-ui/components/form-field';
|
|
6
|
-
import { DatepickerToggle, Datepicker, DatepickerInput, provideNativeDateAdapter } from '@ngstarter-ui/components/datepicker';
|
|
7
|
-
import { Input } from '@ngstarter-ui/components/input';
|
|
8
|
-
|
|
9
|
-
class DatepickerField {
|
|
10
|
-
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
11
|
-
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
12
|
-
getErrorMessage() {
|
|
13
|
-
const errors = this.control().errors;
|
|
14
|
-
if (!errors)
|
|
15
|
-
return '';
|
|
16
|
-
const errorKey = Object.keys(errors)[0];
|
|
17
|
-
const validator = this.config().validators?.find((v) => v.type === errorKey);
|
|
18
|
-
return validator?.message || 'Invalid value';
|
|
19
|
-
}
|
|
20
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DatepickerField, isStandalone: true, selector: "ngs-datepicker-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
22
|
-
provideNativeDateAdapter()
|
|
23
|
-
], exportAs: ["ngsDatepickerField"], ngImport: i0, template: "@if(control() && config()) {\n <ngs-form-field>\n <ngs-label>{{ config().label }}</ngs-label>\n <input ngsInput [ngsDatepicker]=\"picker\" [formControl]=\"control()\" readonly>\n <ngs-datepicker-toggle ngsSuffix [for]=\"picker\" />\n <ngs-datepicker #picker />\n <ngs-hint>{{ config().hint }}</ngs-hint>\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: Suffix, selector: "[ngsSuffix]" }, { kind: "component", type: DatepickerToggle, selector: "ngs-datepicker-toggle", inputs: ["for"], exportAs: ["ngsDatepickerToggle"] }, { kind: "component", type: Datepicker, selector: "ngs-datepicker", inputs: ["startAt", "calendarHeaderComponent", "quickPresets", "showQuickPresets"], exportAs: ["ngsDatepicker"] }, { kind: "component", type: Error, selector: "ngs-error", exportAs: ["ngsError"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: DatepickerInput, selector: "input[ngsDatepicker]", inputs: ["ngsDatepicker"], exportAs: ["ngsDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24
|
-
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DatepickerField, decorators: [{
|
|
26
|
-
type: Component,
|
|
27
|
-
args: [{ selector: 'ngs-datepicker-field', exportAs: 'ngsDatepickerField', providers: [
|
|
28
|
-
provideNativeDateAdapter()
|
|
29
|
-
], imports: [
|
|
30
|
-
Hint,
|
|
31
|
-
Input,
|
|
32
|
-
Suffix,
|
|
33
|
-
DatepickerToggle,
|
|
34
|
-
Datepicker,
|
|
35
|
-
Error,
|
|
36
|
-
Label,
|
|
37
|
-
FormField,
|
|
38
|
-
ReactiveFormsModule,
|
|
39
|
-
DatepickerInput
|
|
40
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(control() && config()) {\n <ngs-form-field>\n <ngs-label>{{ config().label }}</ngs-label>\n <input ngsInput [ngsDatepicker]=\"picker\" [formControl]=\"control()\" readonly>\n <ngs-datepicker-toggle ngsSuffix [for]=\"picker\" />\n <ngs-datepicker #picker />\n <ngs-hint>{{ config().hint }}</ngs-hint>\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
41
|
-
}], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
|
|
42
|
-
|
|
43
|
-
export { DatepickerField };
|
|
44
|
-
//# sourceMappingURL=ngstarter-ui-components-form-renderer-datepicker-field-Cf3jfPv7.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-form-renderer-datepicker-field-Cf3jfPv7.mjs","sources":["../../../projects/components/form-renderer/src/fields/datepicker-field/datepicker-field.ts","../../../projects/components/form-renderer/src/fields/datepicker-field/datepicker-field.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ComponentConfig } from '../../models/form-config.model';\nimport { Error, FormField, Hint, Label, Suffix } from '@ngstarter-ui/components/form-field';\nimport { Datepicker, DatepickerInput, DatepickerToggle, provideNativeDateAdapter } from '@ngstarter-ui/components/datepicker';\nimport { Input } from '@ngstarter-ui/components/input';\n\n@Component({\n selector: 'ngs-datepicker-field',\n exportAs: 'ngsDatepickerField',\n providers: [\n provideNativeDateAdapter()\n ],\n imports: [\n Hint,\n Input,\n Suffix,\n DatepickerToggle,\n Datepicker,\n Error,\n Label,\n FormField,\n ReactiveFormsModule,\n DatepickerInput\n ],\n templateUrl: './datepicker-field.html',\n styleUrl: './datepicker-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatepickerField {\n control = input.required<FormControl>();\n config = input.required<ComponentConfig>();\n\n getErrorMessage(): string {\n const errors = this.control().errors;\n if (!errors) return '';\n const errorKey = Object.keys(errors)[0];\n const validator = this.config().validators?.find((v: any) => v.type === errorKey);\n return validator?.message || 'Invalid value';\n }\n}\n","@if(control() && config()) {\n <ngs-form-field>\n <ngs-label>{{ config().label }}</ngs-label>\n <input ngsInput [ngsDatepicker]=\"picker\" [formControl]=\"control()\" readonly>\n <ngs-datepicker-toggle ngsSuffix [for]=\"picker\" />\n <ngs-datepicker #picker />\n <ngs-hint>{{ config().hint }}</ngs-hint>\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </ngs-form-field>\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import { Divider } from '@ngstarter-ui/components/divider';
|
|
4
|
-
|
|
5
|
-
class DividerContent {
|
|
6
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DividerContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DividerContent, isStandalone: true, selector: "ngs-divider-content", exportAs: ["ngsDividerContent"], ngImport: i0, template: "<ngs-divider/>\n", styles: [":host hr{width:100%;border:none;border-top:1px solid var(--ngs-color-outline-variant);margin:1rem 0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8
|
-
}
|
|
9
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DividerContent, decorators: [{
|
|
10
|
-
type: Component,
|
|
11
|
-
args: [{ selector: 'ngs-divider-content', exportAs: 'ngsDividerContent', imports: [
|
|
12
|
-
Divider
|
|
13
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngs-divider/>\n", styles: [":host hr{width:100%;border:none;border-top:1px solid var(--ngs-color-outline-variant);margin:1rem 0}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
14
|
-
}] });
|
|
15
|
-
|
|
16
|
-
export { DividerContent };
|
|
17
|
-
//# sourceMappingURL=ngstarter-ui-components-form-renderer-divider-content-D8Sffofu.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-form-renderer-divider-content-D8Sffofu.mjs","sources":["../../../projects/components/form-renderer/src/content/divider-content/divider-content.ts","../../../projects/components/form-renderer/src/content/divider-content/divider-content.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { Divider } from '@ngstarter-ui/components/divider';\n\n@Component({\n selector: 'ngs-divider-content',\n exportAs: 'ngsDividerContent',\n imports: [\n Divider\n ],\n templateUrl: './divider-content.html',\n styleUrl: './divider-content.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DividerContent {\n\n}\n","<ngs-divider/>\n"],"names":[],"mappings":";;;;MAaa,cAAc,CAAA;uGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb3B,kBACA,EAAA,MAAA,EAAA,CAAA,2KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDMI,OAAO,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAME,cAAc,EAAA,UAAA,EAAA,CAAA;kBAV1B,SAAS;+BACE,qBAAqB,EAAA,QAAA,EACrB,mBAAmB,EAAA,OAAA,EACpB;wBACP;qBACD,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,2KAAA,CAAA,EAAA;;;;;"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
|
|
4
|
-
class ImageContent {
|
|
5
|
-
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
6
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ImageContent, isStandalone: true, selector: "ngs-image-content", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ngs-image-content" }, exportAs: ["ngsImageContent"], ngImport: i0, template: "@if (config().content; as opts) {\n <img [src]=\"opts['src']\"\n [alt]=\"opts['alt'] || ''\"\n [width]=\"opts['width'] || null\"\n [height]=\"opts['height'] || null\">\n}\n", styles: [":host{display:flex;align-items:center;justify-content:center}:host img{max-width:100%;height:auto;border-radius:4px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8
|
-
}
|
|
9
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageContent, decorators: [{
|
|
10
|
-
type: Component,
|
|
11
|
-
args: [{ selector: 'ngs-image-content', exportAs: 'ngsImageContent', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
12
|
-
'class': 'ngs-image-content',
|
|
13
|
-
}, template: "@if (config().content; as opts) {\n <img [src]=\"opts['src']\"\n [alt]=\"opts['alt'] || ''\"\n [width]=\"opts['width'] || null\"\n [height]=\"opts['height'] || null\">\n}\n", styles: [":host{display:flex;align-items:center;justify-content:center}:host img{max-width:100%;height:auto;border-radius:4px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
14
|
-
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
|
|
15
|
-
|
|
16
|
-
export { ImageContent };
|
|
17
|
-
//# sourceMappingURL=ngstarter-ui-components-form-renderer-image-content-ICTwkZPa.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-form-renderer-image-content-ICTwkZPa.mjs","sources":["../../../projects/components/form-renderer/src/content/image-content/image-content.ts","../../../projects/components/form-renderer/src/content/image-content/image-content.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ComponentConfig } from '../../models/form-config.model';\n\n@Component({\n selector: 'ngs-image-content',\n exportAs: 'ngsImageContent',\n imports: [],\n templateUrl: './image-content.html',\n styleUrl: './image-content.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-image-content',\n }\n})\nexport class ImageContent {\n config = input.required<ComponentConfig>();\n}\n","@if (config().content; as opts) {\n <img [src]=\"opts['src']\"\n [alt]=\"opts['alt'] || ''\"\n [width]=\"opts['width'] || null\"\n [height]=\"opts['height'] || null\">\n}\n"],"names":[],"mappings":";;;MAca,YAAY,CAAA;AACvB,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,4EAAmB;uGAD/B,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,iSCdzB,iMAMA,EAAA,MAAA,EAAA,CAAA,2LAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDQa,YAAY,EAAA,UAAA,EAAA,CAAA;kBAXxB,SAAS;+BACE,mBAAmB,EAAA,QAAA,EACnB,iBAAiB,EAAA,OAAA,EAClB,EAAE,mBAGM,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,OAAO,EAAE,mBAAmB;AAC7B,qBAAA,EAAA,QAAA,EAAA,iMAAA,EAAA,MAAA,EAAA,CAAA,2LAAA,CAAA,EAAA;;;;;"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/forms';
|
|
4
|
-
import { ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import { Error, Hint, Label, FormField } from '@ngstarter-ui/components/form-field';
|
|
6
|
-
import { Input } from '@ngstarter-ui/components/input';
|
|
7
|
-
|
|
8
|
-
class InputField {
|
|
9
|
-
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
10
|
-
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
11
|
-
getErrorMessage() {
|
|
12
|
-
const errors = this.control().errors;
|
|
13
|
-
if (!errors)
|
|
14
|
-
return '';
|
|
15
|
-
const errorKey = Object.keys(errors)[0];
|
|
16
|
-
const validator = this.config().validators?.find((v) => v.type === errorKey);
|
|
17
|
-
return validator?.message || 'Invalid value';
|
|
18
|
-
}
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: InputField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: InputField, isStandalone: true, selector: "ngs-input-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if(control() && config()) {\n <ngs-form-field>\n <ngs-label>{{ config().label }}</ngs-label>\n <input ngsInput\n [type]=\"config().inputType || 'text'\"\n [formControl]=\"control()\"\n [placeholder]=\"config().placeholder || ''\"\n [readonly]=\"config().readonly\">\n @if (config().hint) {\n <ngs-hint>{{ config().hint }}</ngs-hint>\n }\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Error, selector: "ngs-error", exportAs: ["ngsError"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21
|
-
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: InputField, decorators: [{
|
|
23
|
-
type: Component,
|
|
24
|
-
args: [{ selector: 'ngs-input-field', imports: [
|
|
25
|
-
ReactiveFormsModule,
|
|
26
|
-
Error,
|
|
27
|
-
Hint,
|
|
28
|
-
Label,
|
|
29
|
-
Input,
|
|
30
|
-
FormField
|
|
31
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(control() && config()) {\n <ngs-form-field>\n <ngs-label>{{ config().label }}</ngs-label>\n <input ngsInput\n [type]=\"config().inputType || 'text'\"\n [formControl]=\"control()\"\n [placeholder]=\"config().placeholder || ''\"\n [readonly]=\"config().readonly\">\n @if (config().hint) {\n <ngs-hint>{{ config().hint }}</ngs-hint>\n }\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </ngs-form-field>\n}\n", styles: [":host{display:block}:host ngs-form-field{width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
32
|
-
}], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
|
|
33
|
-
|
|
34
|
-
export { InputField };
|
|
35
|
-
//# sourceMappingURL=ngstarter-ui-components-form-renderer-input-field-tZHU8-_L.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-form-renderer-input-field-tZHU8-_L.mjs","sources":["../../../projects/components/form-renderer/src/fields/input-field/input-field.ts","../../../projects/components/form-renderer/src/fields/input-field/input-field.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ComponentConfig } from '../../models/form-config.model';\nimport { Error, FormField, Hint, Label } from '@ngstarter-ui/components/form-field';\nimport { Input } from '@ngstarter-ui/components/input';\n\n@Component({\n selector: 'ngs-input-field',\n imports: [\n ReactiveFormsModule,\n Error,\n Hint,\n Label,\n Input,\n FormField\n ],\n templateUrl: './input-field.html',\n styleUrl: './input-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class InputField {\n control = input.required<FormControl>();\n config = input.required<ComponentConfig>();\n\n getErrorMessage(): string {\n const errors = this.control().errors;\n if (!errors) return '';\n const errorKey = Object.keys(errors)[0];\n const validator = this.config().validators?.find((v: any) => v.type === errorKey);\n return validator?.message || 'Invalid value';\n }\n}\n","@if(control() && config()) {\n <ngs-form-field>\n <ngs-label>{{ config().label }}</ngs-label>\n <input ngsInput\n [type]=\"config().inputType || 'text'\"\n [formControl]=\"control()\"\n [placeholder]=\"config().placeholder || ''\"\n [readonly]=\"config().readonly\">\n @if (config().hint) {\n <ngs-hint>{{ config().hint }}</ngs-hint>\n }\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </ngs-form-field>\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/forms';
|
|
4
|
-
import { ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import { RadioButton, RadioGroup } from '@ngstarter-ui/components/radio';
|
|
6
|
-
import { Error, Hint } from '@ngstarter-ui/components/form-field';
|
|
7
|
-
|
|
8
|
-
class RadioGroupField {
|
|
9
|
-
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
10
|
-
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
11
|
-
getErrorMessage() {
|
|
12
|
-
const errors = this.control().errors;
|
|
13
|
-
if (!errors) {
|
|
14
|
-
return '';
|
|
15
|
-
}
|
|
16
|
-
const errorKey = Object.keys(errors)[0];
|
|
17
|
-
const validator = this.config().validators?.find((v) => v.type === errorKey);
|
|
18
|
-
return validator?.message || 'Invalid value';
|
|
19
|
-
}
|
|
20
|
-
get options() {
|
|
21
|
-
return this.config().payload?.['options'] || [];
|
|
22
|
-
}
|
|
23
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioGroupField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: RadioGroupField, isStandalone: true, selector: "ngs-radio-group-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["ngsRadioGroupField"], ngImport: i0, template: "@if (control() && config()) {\n <div class=\"radio-group-container\">\n @if (config().label) {\n <div class=\"radio-group-label\">{{ config().label }}</div>\n }\n <ngs-radio-group\n [formControl]=\"control()\"\n [class.inline]=\"config().inline\">\n @for (option of options; track option.value) {\n <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n }\n </ngs-radio-group>\n @if (config().hint && (control().valid || control().invalid && !control().touched)) {\n <ngs-hint>{{ config().hint }}</ngs-hint>\n }\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </div>\n}\n", styles: [":host{display:block;margin-bottom:calc(var(--spacing, .25rem) * 6)}:host .radio-group-label{display:block;color:var(--ngs-form-field-outlined-label-text-color);font-size:calc(var(--ngs-form-field-outlined-label-text-size) * .75)}:host ngs-radio-group{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host ngs-radio-group.inline{flex-direction:row;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 4)}:host ngs-hint{display:block;font-size:var(--ngs-form-field-subscript-text-size, var(--ngs-font-size-xs))}:host ngs-error{display:block;font-size:var(--ngs-form-field-subscript-text-size, var(--ngs-font-size-xs));letter-spacing:var(--ngs-form-field-subscript-text-tracking, normal);font-weight:var(--ngs-form-field-subscript-text-weight, 400)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: RadioButton, selector: "ngs-radio-button", inputs: ["id", "value", "name", "checked", "disabled"], outputs: ["checkedChange", "change"] }, { kind: "component", type: RadioGroup, selector: "ngs-radio-group", inputs: ["disabled", "name", "orientation", "value"], outputs: ["disabledChange", "valueChange", "change"], exportAs: ["ngsRadioGroup"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Error, selector: "ngs-error", exportAs: ["ngsError"] }, { kind: "component", type: Hint, selector: "ngs-hint", inputs: ["align"], exportAs: ["ngsHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25
|
-
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioGroupField, decorators: [{
|
|
27
|
-
type: Component,
|
|
28
|
-
args: [{ selector: 'ngs-radio-group-field', exportAs: 'ngsRadioGroupField', imports: [
|
|
29
|
-
RadioButton,
|
|
30
|
-
RadioGroup,
|
|
31
|
-
ReactiveFormsModule,
|
|
32
|
-
Error,
|
|
33
|
-
Hint,
|
|
34
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (control() && config()) {\n <div class=\"radio-group-container\">\n @if (config().label) {\n <div class=\"radio-group-label\">{{ config().label }}</div>\n }\n <ngs-radio-group\n [formControl]=\"control()\"\n [class.inline]=\"config().inline\">\n @for (option of options; track option.value) {\n <ngs-radio-button [value]=\"option.value\">{{ option.label }}</ngs-radio-button>\n }\n </ngs-radio-group>\n @if (config().hint && (control().valid || control().invalid && !control().touched)) {\n <ngs-hint>{{ config().hint }}</ngs-hint>\n }\n @if (control().invalid && control().touched) {\n <ngs-error>{{ getErrorMessage() }}</ngs-error>\n }\n </div>\n}\n", styles: [":host{display:block;margin-bottom:calc(var(--spacing, .25rem) * 6)}:host .radio-group-label{display:block;color:var(--ngs-form-field-outlined-label-text-color);font-size:calc(var(--ngs-form-field-outlined-label-text-size) * .75)}:host ngs-radio-group{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host ngs-radio-group.inline{flex-direction:row;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 4)}:host ngs-hint{display:block;font-size:var(--ngs-form-field-subscript-text-size, var(--ngs-font-size-xs))}:host ngs-error{display:block;font-size:var(--ngs-form-field-subscript-text-size, var(--ngs-font-size-xs));letter-spacing:var(--ngs-form-field-subscript-text-tracking, normal);font-weight:var(--ngs-form-field-subscript-text-weight, 400)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
35
|
-
}], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
|
|
36
|
-
|
|
37
|
-
export { RadioGroupField };
|
|
38
|
-
//# sourceMappingURL=ngstarter-ui-components-form-renderer-radio-group-field-DugkPKYU.mjs.map
|