onshore-forms 0.0.9 → 0.0.10

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.
Files changed (33) hide show
  1. package/esm2020/lib/components/form-autocomplete-item/form-autocomplete-item.component.mjs +87 -6
  2. package/esm2020/lib/components/form-checkbox-item/form-checkbox-item.component.mjs +5 -19
  3. package/esm2020/lib/components/form-colorpicker-item/form-colorpicker-item.component.mjs +6 -20
  4. package/esm2020/lib/components/form-datetime-item/form-datetime-item.component.mjs +53 -0
  5. package/esm2020/lib/components/form-dropdown-item/form-dropdown-item.component.mjs +13 -20
  6. package/esm2020/lib/components/form-image-item/form-image-item.component.mjs +22 -19
  7. package/esm2020/lib/components/form-input-item/form-input-item.component.mjs +20 -21
  8. package/esm2020/lib/components/form-item-container/form-item-container.component.mjs +65 -0
  9. package/esm2020/lib/components/form-switch-item/form-switch-item.component.mjs +5 -18
  10. package/esm2020/lib/components/form-validation-output/form-validation-output.component.mjs +5 -5
  11. package/esm2020/lib/enums/form.enums.mjs +10 -1
  12. package/esm2020/lib/models/form.models.mjs +1 -1
  13. package/esm2020/lib/onshore-forms.component.mjs +3 -3
  14. package/esm2020/lib/onshore-forms.module.mjs +34 -13
  15. package/esm2020/public-api.mjs +3 -2
  16. package/fesm2015/onshore-forms.mjs +327 -197
  17. package/fesm2015/onshore-forms.mjs.map +1 -1
  18. package/fesm2020/onshore-forms.mjs +300 -179
  19. package/fesm2020/onshore-forms.mjs.map +1 -1
  20. package/lib/components/form-autocomplete-item/form-autocomplete-item.component.d.ts +27 -3
  21. package/lib/components/{form-textarea-item/form-textarea-item.component.d.ts → form-datetime-item/form-datetime-item.component.d.ts} +7 -5
  22. package/lib/components/form-dropdown-item/form-dropdown-item.component.d.ts +3 -2
  23. package/lib/components/form-image-item/form-image-item.component.d.ts +8 -3
  24. package/lib/components/form-input-item/form-input-item.component.d.ts +9 -3
  25. package/lib/components/form-item-container/form-item-container.component.d.ts +17 -0
  26. package/lib/enums/form.enums.d.ts +8 -0
  27. package/lib/models/form.models.d.ts +10 -23
  28. package/lib/onshore-forms.module.d.ts +28 -23
  29. package/package.json +9 -11
  30. package/public-api.d.ts +2 -1
  31. package/esm2020/lib/components/form-textarea-item/form-textarea-item.component.mjs +0 -61
  32. package/styles/scss/main.scss +0 -4
  33. package/styles/scss/theme1.scss +0 -8
@@ -5,32 +5,40 @@ import { FormGroup, FormControl, FormArray, FormsModule, ReactiveFormsModule } f
5
5
  import { Subject, debounceTime, distinctUntilChanged, skip } from 'rxjs';
6
6
  import * as i2 from '@angular/common';
7
7
  import { CommonModule } from '@angular/common';
8
- import * as i3 from 'primeng/tooltip';
9
- import { TooltipModule } from 'primeng/tooltip';
10
- import * as i4 from 'primeng/inputnumber';
8
+ import * as i3$1 from 'primeng/inputnumber';
11
9
  import { InputNumberModule } from 'primeng/inputnumber';
12
- import * as i5 from 'primeng/inputtext';
10
+ import * as i4 from 'primeng/inputtext';
13
11
  import { InputTextModule } from 'primeng/inputtext';
12
+ import * as i5 from 'primeng/inputtextarea';
13
+ import { InputTextareaModule } from 'primeng/inputtextarea';
14
+ import * as i2$1 from 'primeng/tooltip';
15
+ import { TooltipModule } from 'primeng/tooltip';
16
+ import * as i3 from 'primeng/togglebutton';
17
+ import { ToggleButtonModule } from 'primeng/togglebutton';
14
18
  import * as i1 from '@ngx-translate/core';
15
- import * as i4$1 from 'primeng/inputswitch';
19
+ import * as i2$2 from 'primeng/inputswitch';
16
20
  import { InputSwitchModule } from 'primeng/inputswitch';
17
- import * as i4$2 from 'primeng/inputtextarea';
18
- import { InputTextareaModule } from 'primeng/inputtextarea';
19
- import * as i2$1 from 'primeng/dynamicdialog';
21
+ import * as i2$3 from 'primeng/dynamicdialog';
20
22
  import * as i5$1 from 'primeng/button';
21
23
  import { ButtonModule } from 'primeng/button';
22
24
  import * as i6 from 'primeng/ripple';
23
25
  import { RippleModule } from 'primeng/ripple';
24
- import * as i3$1 from 'primeng/dropdown';
26
+ import * as i3$2 from 'primeng/dropdown';
25
27
  import { DropdownModule } from 'primeng/dropdown';
26
- import * as i4$3 from 'primeng/multiselect';
28
+ import * as i4$1 from 'primeng/multiselect';
27
29
  import { MultiSelectModule } from 'primeng/multiselect';
28
- import * as i3$2 from 'primeng/colorpicker';
30
+ import * as i2$4 from 'primeng/colorpicker';
29
31
  import { ColorPickerModule } from 'primeng/colorpicker';
30
- import * as i3$3 from 'primeng/checkbox';
32
+ import * as i2$5 from 'primeng/checkbox';
31
33
  import { CheckboxModule } from 'primeng/checkbox';
34
+ import * as i3$3 from 'primeng/autocomplete';
32
35
  import { AutoCompleteModule } from 'primeng/autocomplete';
36
+ import * as i4$2 from 'primeng/api';
33
37
  import { DialogModule } from 'primeng/dialog';
38
+ import { SelectButtonModule } from 'primeng/selectbutton';
39
+ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
40
+ import * as i2$6 from 'primeng/calendar';
41
+ import { CalendarModule } from 'primeng/calendar';
34
42
 
35
43
  var OnshoreFormTemplateType;
36
44
  (function (OnshoreFormTemplateType) {
@@ -43,13 +51,22 @@ var OnshoreFormTemplateType;
43
51
  OnshoreFormTemplateType["phone"] = "phone";
44
52
  OnshoreFormTemplateType["regexp"] = "regexp";
45
53
  OnshoreFormTemplateType["select"] = "select";
54
+ OnshoreFormTemplateType["switch"] = "switch";
46
55
  OnshoreFormTemplateType["check"] = "check";
47
56
  OnshoreFormTemplateType["radio"] = "radio";
48
57
  OnshoreFormTemplateType["image"] = "image";
49
58
  OnshoreFormTemplateType["autocomplete"] = "autocomplete";
50
59
  OnshoreFormTemplateType["color"] = "color";
60
+ OnshoreFormTemplateType["date"] = "date";
61
+ OnshoreFormTemplateType["time"] = "time";
62
+ OnshoreFormTemplateType["datetime"] = "datetime";
51
63
  OnshoreFormTemplateType["subform"] = "subform";
52
64
  })(OnshoreFormTemplateType || (OnshoreFormTemplateType = {}));
65
+ var OnshoreFormTemplateLayout;
66
+ (function (OnshoreFormTemplateLayout) {
67
+ OnshoreFormTemplateLayout["vertical"] = "vertical";
68
+ OnshoreFormTemplateLayout["horizontal"] = "horizontal";
69
+ })(OnshoreFormTemplateLayout || (OnshoreFormTemplateLayout = {}));
53
70
  var OnshoreImageError;
54
71
  (function (OnshoreImageError) {
55
72
  OnshoreImageError["none"] = "";
@@ -212,14 +229,14 @@ class OnshoreFormsComponent {
212
229
  OnshoreFormsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
213
230
  OnshoreFormsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormsComponent, selector: "lib-onshore-forms", ngImport: i0, template: `
214
231
  <p>
215
- onshore-forms works 2!
232
+ onshore-forms works!
216
233
  </p>
217
234
  `, isInline: true });
218
235
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsComponent, decorators: [{
219
236
  type: Component,
220
237
  args: [{ selector: 'lib-onshore-forms', template: `
221
238
  <p>
222
- onshore-forms works 2!
239
+ onshore-forms works!
223
240
  </p>
224
241
  ` }]
225
242
  }], ctorParameters: function () { return []; } });
@@ -233,9 +250,9 @@ class OnshoreFormValidationOutputComponent {
233
250
  }
234
251
  ngOnChanges(changes) {
235
252
  this.validationTranslation = '';
236
- if (changes['validationErrors'].currentValue) {
253
+ if (changes['validationErrors'].currentValue && this.validationErrors) {
237
254
  Object.keys(this.validationErrors).forEach(error => {
238
- const exists = Object.values(this.validationItems).filter(validationItem => validationItem.key == error);
255
+ const exists = Object.values(this.validationItems ?? []).filter(validationItem => validationItem.key == error);
239
256
  if (exists && exists.length > 0) {
240
257
  this.validationTranslation += this.translate.instant('request.error.' + error) + '<br>';
241
258
  }
@@ -249,10 +266,10 @@ class OnshoreFormValidationOutputComponent {
249
266
  }
250
267
  }
251
268
  OnshoreFormValidationOutputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
252
- OnshoreFormValidationOutputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", externValidationPattern: "externValidationPattern", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small *ngIf=\"validationErrors && validationErrors['pattern']\" [innerHTML]=\"externValidationPattern\"></small>\n<small *ngIf=\"validationTranslation\" [innerHTML]=\"validationTranslation\"></small>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
269
+ OnshoreFormValidationOutputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", externValidationPattern: "externValidationPattern", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small class=\"onshore-color-danger\"\n *ngIf=\"validationErrors && validationErrors['pattern']\"\n [innerHTML]=\"externValidationPattern\">\n</small>\n<small class=\"onshore-color-danger\"\n *ngIf=\"validationTranslation\"\n [innerHTML]=\"validationTranslation\">\n</small>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
253
270
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, decorators: [{
254
271
  type: Component,
255
- args: [{ selector: 'onshore-form-validation-output', changeDetection: ChangeDetectionStrategy.OnPush, template: "<small *ngIf=\"validationErrors && validationErrors['pattern']\" [innerHTML]=\"externValidationPattern\"></small>\n<small *ngIf=\"validationTranslation\" [innerHTML]=\"validationTranslation\"></small>\n" }]
272
+ args: [{ selector: 'onshore-form-validation-output', changeDetection: ChangeDetectionStrategy.OnPush, template: "<small class=\"onshore-color-danger\"\n *ngIf=\"validationErrors && validationErrors['pattern']\"\n [innerHTML]=\"externValidationPattern\">\n</small>\n<small class=\"onshore-color-danger\"\n *ngIf=\"validationTranslation\"\n [innerHTML]=\"validationTranslation\">\n</small>\n" }]
256
273
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { validationErrors: [{
257
274
  type: Input
258
275
  }], externValidationPattern: [{
@@ -261,21 +278,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
261
278
  type: Input
262
279
  }] } });
263
280
 
264
- class OnshoreFormInputItemComponent {
265
- constructor(ngControl, cdr) {
266
- this.ngControl = ngControl;
281
+ class OnshoreFormItemContainer {
282
+ constructor(cdr) {
267
283
  this.cdr = cdr;
268
- this.FormTemplateItemType = OnshoreFormTemplateType;
269
- this.passwordVisible = false;
270
- this.disabled = false;
271
- this.ngControl.valueAccessor = this;
284
+ this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
272
285
  }
273
- // ControlValueAccessor interface
274
- writeValue(obj) { }
275
- registerOnChange(fn) { }
276
- registerOnTouched(fn) { }
277
- setDisabledState(isDisabled) {
278
- this.disabled = isDisabled;
286
+ enabled(enable) {
287
+ setTimeout(() => {
288
+ if (enable) {
289
+ this.ngControl.control.enable();
290
+ }
291
+ else {
292
+ this.ngControl.control.disable();
293
+ }
294
+ this.cdr.markForCheck();
295
+ }, 100);
279
296
  }
280
297
  ngOnInit() {
281
298
  this.ngControl.control?.valueChanges.subscribe(() => {
@@ -284,42 +301,48 @@ class OnshoreFormInputItemComponent {
284
301
  this.ngControl.control?.statusChanges.subscribe(() => {
285
302
  this.cdr.markForCheck();
286
303
  });
287
- if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
288
- this.ngControl.control?.setValue(this.formTemplate.default);
289
- this.cdr.markForCheck();
290
- }
291
- if (this.formTemplate.enabled) {
292
- this.ngControl.control?.enable();
293
- }
294
- else {
295
- this.ngControl.control?.disable();
304
+ this.enabled(this.formTemplate.enabled);
305
+ if (this.formTemplate.locked) {
306
+ this.enabled(false);
296
307
  }
297
308
  }
298
309
  ngOnChanges(changes) {
299
- this.cdr.markForCheck();
300
- }
301
- ngOnDestroy() {
302
- this.ngControl.control?.disable();
310
+ const previousValue = changes['formTemplate'].previousValue;
311
+ const currentValue = changes['formTemplate'].currentValue;
312
+ if (currentValue) {
313
+ if (previousValue?.enabled !== currentValue?.enabled) {
314
+ this.enabled(currentValue?.enabled);
315
+ }
316
+ if (previousValue?.locked !== currentValue?.locked) {
317
+ if (currentValue.locked) {
318
+ this.enabled(false);
319
+ }
320
+ else {
321
+ this.enabled(currentValue.enabled);
322
+ }
323
+ }
324
+ this.cdr.markForCheck();
325
+ }
303
326
  }
304
327
  }
305
- OnshoreFormInputItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
306
- OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <span class=\"p-inputgroup w-100\">\n\n <container-element [ngSwitch]=\"formTemplate.type\" class=\"w-100\" style=\"width: 100%\">\n\n <input *ngSwitchDefault\n class=\"w-100\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n pInputText\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"/>\n\n <input *ngSwitchCase=\"'password'\"\n class=\"w-100\"\n [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n pInputText\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"/>\n\n <p-inputNumber *ngSwitchCase=\"'number'\"\n class=\"w-100\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? 0\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [step]=\"formTemplate.settings?.step ?? 1\"\n [min]=\"formTemplate.settings?.min ?? null\"\n [max]=\"formTemplate.settings?.max ?? null\">\n </p-inputNumber>\n <!--\n [showButtons]=\"true\"\n buttonLayout=\"horizontal\"\n spinnerMode=\"horizontal\"\n decrementButtonClass=\"p-button-outlined text-black-50\"\n incrementButtonClass=\"p-button-outlined text-black-50\"\n -->\n </container-element>\n\n <span class=\"p-inputgroup-addon\">\n <i *ngIf=\"formTemplate.type != FormTemplateItemType.password\" class=\"fa\"\n [class.tl-color-black]=\"ngControl.control.untouched\"\n [class.fa-check]=\"formTemplate.required && ngControl.control.valid\"\n [class.tl-color-primary1]=\"ngControl.control.touched && ngControl.control.valid\"\n [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n [class.tl-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\"\n ></i>\n <i *ngIf=\"formTemplate.type == FormTemplateItemType.password\" class=\"fa tl-color-black\"\n [class.fa-eye-slash]=\"passwordVisible\"\n [class.fa-eye]=\"!passwordVisible\"\n (click)=\"passwordVisible = !passwordVisible\"\n ></i>\n </span>\n\n </span>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n", styles: [".p-inputtext{border-color:var(--color-primary)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]" }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
307
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
328
+ OnshoreFormItemContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
329
+ OnshoreFormItemContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n </b>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"enabled($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n class=\"mr-2\"\n [style]=\"{height: '36px'}\">\n </p-toggleButton>\n\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n <div [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
330
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
308
331
  type: Component,
309
- args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <span class=\"p-inputgroup w-100\">\n\n <container-element [ngSwitch]=\"formTemplate.type\" class=\"w-100\" style=\"width: 100%\">\n\n <input *ngSwitchDefault\n class=\"w-100\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n pInputText\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"/>\n\n <input *ngSwitchCase=\"'password'\"\n class=\"w-100\"\n [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n pInputText\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"/>\n\n <p-inputNumber *ngSwitchCase=\"'number'\"\n class=\"w-100\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? 0\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control.touched && ngControl.control.invalid\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [step]=\"formTemplate.settings?.step ?? 1\"\n [min]=\"formTemplate.settings?.min ?? null\"\n [max]=\"formTemplate.settings?.max ?? null\">\n </p-inputNumber>\n <!--\n [showButtons]=\"true\"\n buttonLayout=\"horizontal\"\n spinnerMode=\"horizontal\"\n decrementButtonClass=\"p-button-outlined text-black-50\"\n incrementButtonClass=\"p-button-outlined text-black-50\"\n -->\n </container-element>\n\n <span class=\"p-inputgroup-addon\">\n <i *ngIf=\"formTemplate.type != FormTemplateItemType.password\" class=\"fa\"\n [class.tl-color-black]=\"ngControl.control.untouched\"\n [class.fa-check]=\"formTemplate.required && ngControl.control.valid\"\n [class.tl-color-primary1]=\"ngControl.control.touched && ngControl.control.valid\"\n [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n [class.tl-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\"\n ></i>\n <i *ngIf=\"formTemplate.type == FormTemplateItemType.password\" class=\"fa tl-color-black\"\n [class.fa-eye-slash]=\"passwordVisible\"\n [class.fa-eye]=\"!passwordVisible\"\n (click)=\"passwordVisible = !passwordVisible\"\n ></i>\n </span>\n\n </span>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n", styles: [".p-inputtext{border-color:var(--color-primary)!important}\n"] }]
310
- }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
311
- type: Self
312
- }, {
313
- type: Optional
314
- }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
332
+ args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n <b [class.mr-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"formTemplate.layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n </b>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"enabled($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n class=\"mr-2\"\n [style]=\"{height: '36px'}\">\n </p-toggleButton>\n\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && formTemplate.layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n <div [style]=\"{'margin-left': formTemplate.layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n </div>\n\n</div>\n" }]
333
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
334
+ type: Input
335
+ }], ngControl: [{
315
336
  type: Input
316
337
  }] } });
317
338
 
318
- class OnshoreFormSwitchItemComponent {
339
+ class OnshoreFormInputItemComponent {
319
340
  constructor(ngControl, cdr) {
320
341
  this.ngControl = ngControl;
321
342
  this.cdr = cdr;
322
- this.valueChange = new EventEmitter();
343
+ this.OnshoreFormTemplateType = OnshoreFormTemplateType;
344
+ this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
345
+ this.passwordVisible = false;
323
346
  this.disabled = false;
324
347
  this.ngControl.valueAccessor = this;
325
348
  }
@@ -331,25 +354,10 @@ class OnshoreFormSwitchItemComponent {
331
354
  this.disabled = isDisabled;
332
355
  }
333
356
  ngOnInit() {
334
- this.ngControl.control?.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), skip(1)).subscribe(newValue => {
335
- this.valueChange.emit(this.ngControl.control?.value);
336
- });
337
- this.ngControl.control?.valueChanges.subscribe(() => {
338
- this.cdr.markForCheck();
339
- });
340
- this.ngControl.control?.statusChanges.subscribe(() => {
341
- this.cdr.markForCheck();
342
- });
343
- if (this.ngControl.control?.value == undefined && this.formTemplate.default != undefined) {
357
+ if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
344
358
  this.ngControl.control?.setValue(this.formTemplate.default);
345
359
  this.cdr.markForCheck();
346
360
  }
347
- if (this.formTemplate.enabled) {
348
- this.ngControl.control?.enable();
349
- }
350
- else {
351
- this.ngControl.control?.disable();
352
- }
353
361
  }
354
362
  ngOnChanges(changes) {
355
363
  this.cdr.markForCheck();
@@ -358,26 +366,34 @@ class OnshoreFormSwitchItemComponent {
358
366
  this.ngControl.control?.disable();
359
367
  }
360
368
  }
361
- OnshoreFormSwitchItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
362
- OnshoreFormSwitchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormSwitchItemComponent, selector: "onshore-form-switch-item", inputs: { formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column pt-1\">\n <div class=\"flex justify-content-between align-items-center\">\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <p-inputSwitch [name]=\"formTemplate.name\" [formControl]=\"ngControl.control\" [inputId]=\"formTemplate.name\"></p-inputSwitch>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4$1.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
363
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
369
+ OnshoreFormInputItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
370
+ OnshoreFormInputItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormInputItemComponent, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <span class=\"p-inputgroup w-full\">\n\n <textarea *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [rows]=\"3\"\n [cols]=\"30\"\n pInputTextarea\n [autoResize]=\"true\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [minLength]=\"minLength ?? null\"\n [maxLength]=\"maxLength ?? null\"></textarea>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text\"\n class=\"w-full\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength ?? null\"\n [maxLength]=\"maxLength ?? null\"/>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n class=\"w-full\"\n [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength ?? null\"\n [maxLength]=\"maxLength ?? null\"/>\n\n <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? 0\"\n [disabled]=\"disabled\"\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [showButtons]=\"true\"\n [step]=\"step ?? 1\"\n [min]=\"min ?? null\"\n [max]=\"max ?? null\">\n </p-inputNumber>\n\n <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n <i class=\"fa\"\n [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n </i>\n </span>\n\n <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n (click)=\"passwordVisible = !passwordVisible\"\n class=\"p-inputgroup-addon cursor-pointer\">\n <i class=\"fa\"\n [class.fa-eye-slash]=\"passwordVisible\"\n [class.fa-eye]=\"!passwordVisible\"\n ></i>\n </span>\n\n </span>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
371
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
364
372
  type: Component,
365
- args: [{ selector: 'onshore-form-switch-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column pt-1\">\n <div class=\"flex justify-content-between align-items-center\">\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <p-inputSwitch [name]=\"formTemplate.name\" [formControl]=\"ngControl.control\" [inputId]=\"formTemplate.name\"></p-inputSwitch>\n\n</div>\n" }]
373
+ args: [{ selector: 'onshore-form-input-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <span class=\"p-inputgroup w-full\">\n\n <textarea *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [rows]=\"3\"\n [cols]=\"30\"\n pInputTextarea\n [autoResize]=\"true\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [minLength]=\"minLength ?? null\"\n [maxLength]=\"maxLength ?? null\"></textarea>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text\"\n class=\"w-full\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength ?? null\"\n [maxLength]=\"maxLength ?? null\"/>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n class=\"w-full\"\n [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength ?? null\"\n [maxLength]=\"maxLength ?? null\"/>\n\n <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? 0\"\n [disabled]=\"disabled\"\n [formControl]=\"ngControl.control\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [showButtons]=\"true\"\n [step]=\"step ?? 1\"\n [min]=\"min ?? null\"\n [max]=\"max ?? null\">\n </p-inputNumber>\n\n <span class=\"p-inputgroup-addon\" *ngIf=\"!disabled\">\n <i class=\"fa\"\n [class.fa-check]=\"formTemplate.required && (ngControl.control.valid || ngControl.control.untouched)\"\n [class.fa-exclamation-triangle]=\"ngControl.control.touched && ngControl.control.invalid\"\n [class.onshore-color-gray-3]=\"ngControl.control.untouched\"\n [class.onshore-color-success]=\"ngControl.control.touched && ngControl.control.valid\"\n [class.onshore-color-danger]=\"ngControl.control.touched && ngControl.control.invalid\">\n </i>\n </span>\n\n <span *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n (click)=\"passwordVisible = !passwordVisible\"\n class=\"p-inputgroup-addon cursor-pointer\">\n <i class=\"fa\"\n [class.fa-eye-slash]=\"passwordVisible\"\n [class.fa-eye]=\"!passwordVisible\"\n ></i>\n </span>\n\n </span>\n</onshore-form-item-container>\n" }]
366
374
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
367
375
  type: Self
368
376
  }, {
369
377
  type: Optional
370
378
  }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
371
379
  type: Input
372
- }], valueChange: [{
373
- type: Output
380
+ }], step: [{
381
+ type: Input
382
+ }], min: [{
383
+ type: Input
384
+ }], max: [{
385
+ type: Input
386
+ }], minLength: [{
387
+ type: Input
388
+ }], maxLength: [{
389
+ type: Input
374
390
  }] } });
375
391
 
376
- class OnshoreFormTextareaItemComponent {
392
+ class OnshoreFormSwitchItemComponent {
377
393
  constructor(ngControl, cdr) {
378
394
  this.ngControl = ngControl;
379
395
  this.cdr = cdr;
380
- this.FormTemplateItemType = OnshoreFormTemplateType;
396
+ this.valueChange = new EventEmitter();
381
397
  this.disabled = false;
382
398
  this.ngControl.valueAccessor = this;
383
399
  }
@@ -389,41 +405,34 @@ class OnshoreFormTextareaItemComponent {
389
405
  this.disabled = isDisabled;
390
406
  }
391
407
  ngOnInit() {
392
- this.ngControl.control?.valueChanges.subscribe(() => {
393
- this.cdr.markForCheck();
394
- });
395
- this.ngControl.control?.statusChanges.subscribe(() => {
396
- this.cdr.markForCheck();
408
+ this.ngControl.control?.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), skip(1)).subscribe(newValue => {
409
+ this.valueChange.emit(this.ngControl.control?.value);
397
410
  });
398
- if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
411
+ if (this.ngControl.control?.value == undefined && this.formTemplate.default != undefined) {
399
412
  this.ngControl.control?.setValue(this.formTemplate.default);
400
413
  this.cdr.markForCheck();
401
414
  }
402
- if (this.formTemplate.enabled) {
403
- this.ngControl.control?.enable();
404
- }
405
- else {
406
- this.ngControl.control?.disable();
407
- }
408
- }
409
- ngOnDestroy() {
410
- this.ngControl.control?.disable();
411
415
  }
412
416
  ngOnChanges(changes) {
413
417
  this.cdr.markForCheck();
414
418
  }
419
+ ngOnDestroy() {
420
+ this.ngControl.control?.disable();
421
+ }
415
422
  }
416
- OnshoreFormTextareaItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormTextareaItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
417
- OnshoreFormTextareaItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormTextareaItemComponent, selector: "onshore-form-textarea-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <span class=\"p-input-icon-right\">\n <i class=\"fa\"\n [class.tl-color-black]=\"ngControl.control?.untouched\"\n [class.fa-check]=\"ngControl.control?.touched && ngControl.control?.valid\"\n [class.text-primary]=\"ngControl.control?.touched && ngControl.control?.valid\"\n [class.fa-exclamation-triangle]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [class.tl-color-danger]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n ></i>\n <textarea class=\"w-100\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.label\"\n [rows]=\"3\"\n [cols]=\"30\"\n pInputTextarea\n [autoResize]=\"true\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"></textarea>\n </span>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n <div *ngIf=\"ngControl.control?.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control?.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$2.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
418
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormTextareaItemComponent, decorators: [{
423
+ OnshoreFormSwitchItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
424
+ OnshoreFormSwitchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormSwitchItemComponent, selector: "onshore-form-switch-item", inputs: { formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <p-inputSwitch [name]=\"formTemplate.name\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n [inputId]=\"formTemplate.name\" class=\"align-self-center\">\n </p-inputSwitch>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
425
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
419
426
  type: Component,
420
- args: [{ selector: 'onshore-form-textarea-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <span class=\"p-input-icon-right\">\n <i class=\"fa\"\n [class.tl-color-black]=\"ngControl.control?.untouched\"\n [class.fa-check]=\"ngControl.control?.touched && ngControl.control?.valid\"\n [class.text-primary]=\"ngControl.control?.touched && ngControl.control?.valid\"\n [class.fa-exclamation-triangle]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [class.tl-color-danger]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n ></i>\n <textarea class=\"w-100\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.label\"\n [rows]=\"3\"\n [cols]=\"30\"\n pInputTextarea\n [autoResize]=\"true\"\n [formControl]=\"ngControl.control\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"></textarea>\n </span>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n <div *ngIf=\"ngControl.control?.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control?.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n" }]
427
+ args: [{ selector: 'onshore-form-switch-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <p-inputSwitch [name]=\"formTemplate.name\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n [inputId]=\"formTemplate.name\" class=\"align-self-center\">\n </p-inputSwitch>\n</onshore-form-item-container>\n" }]
421
428
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
422
429
  type: Self
423
430
  }, {
424
431
  type: Optional
425
432
  }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
426
433
  type: Input
434
+ }], valueChange: [{
435
+ type: Output
427
436
  }] } });
428
437
 
429
438
  class OnshoreFormImageItemComponent {
@@ -438,6 +447,12 @@ class OnshoreFormImageItemComponent {
438
447
  this.imageHeight = 400;
439
448
  this.containWithinAspectRatio = false;
440
449
  this.aspectRatio = 1 / 1;
450
+ this.disableImageSelection = false;
451
+ this.disableWebcamSelection = false;
452
+ this.disableMediaSelection = false;
453
+ this.disableDelete = false;
454
+ this.imagePlaceholder = '';
455
+ this.mediaType = '';
441
456
  this.imageDeleted = new EventEmitter();
442
457
  this.imageCleared = new EventEmitter();
443
458
  this.imageSelectedFromMedia = new EventEmitter();
@@ -475,7 +490,7 @@ class OnshoreFormImageItemComponent {
475
490
  styleClass: 'p-dialog-background-white',
476
491
  modal: true,
477
492
  header: this.translate.instant('search.media.dialogTitle'),
478
- data: { targetType: this.formSettings.mediaType }
493
+ data: { targetType: this.mediaType }
479
494
  }).onClose.subscribe((result) => {
480
495
  if(result) {
481
496
  this.image = result.url;
@@ -520,25 +535,10 @@ class OnshoreFormImageItemComponent {
520
535
  this.cdr.markForCheck();
521
536
  }
522
537
  ngOnInit() {
523
- this.ngControl.control.valueChanges.subscribe((value) => {
524
- this.cdr.markForCheck();
525
- });
526
- this.ngControl.control.statusChanges.subscribe((status) => {
527
- this.cdr.markForCheck();
528
- });
529
538
  if (this.ngControl.control.value == '' && this.formTemplate.default != undefined) {
530
539
  this.ngControl.control.setValue(this.formTemplate.default);
531
540
  this.cdr.markForCheck();
532
541
  }
533
- if (this.formTemplate.enabled) {
534
- this.ngControl.control.enable();
535
- }
536
- else {
537
- this.ngControl.control.disable();
538
- }
539
- if (this.formTemplate.settings) {
540
- this.formSettings = this.formTemplate.settings;
541
- }
542
542
  }
543
543
  ngOnDestroy() {
544
544
  this.subscriptions.forEach((subscription) => {
@@ -548,16 +548,16 @@ class OnshoreFormImageItemComponent {
548
548
  this.image = null;
549
549
  }
550
550
  }
551
- OnshoreFormImageItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i2$1.DialogService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
552
- OnshoreFormImageItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormImageItemComponent, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", inverseColor: "inverseColor", imageWidth: "imageWidth", imageHeight: "imageHeight", containWithinAspectRatio: "containWithinAspectRatio", aspectRatio: "aspectRatio" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageSelectedFromMedia: "imageSelectedFromMedia" }, ngImport: i0, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <div class=\"w-100\">\n\n <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"formSettings?.imagePlaceholder ? formSettings?.imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n </div>\n\n <div class=\"flex flex-column mt-4 w-100\">\n <button pButton pRipple type=\"button\"\n [hidden]=\"formSettings?.disableImageSelection\"\n icon=\"fa fa-image\"\n label=\"Bild hochladen\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true\">\n </button>\n\n <button pButton pRipple type=\"button\"\n [hidden]=\"formSettings?.disableWebcamSelection\"\n icon=\"fa fa-camera\"\n label=\"Foto aufnehmen\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </button>\n\n <!--<button pButton pRipple type=\"button\"\n [hidden]=\"formSettings?.disableMediaSelection\"\n icon=\"fa fa-photo-video\"\n label=\"Medienverwaltung\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"searchMedia()\">\n </button>-->\n\n <button pButton pRipple type=\"button\"\n [hidden]=\"formSettings?.disableDelete\"\n icon=\"fa fa-eraser\"\n label=\"Entfernen\"\n (click)=\"removeImage()\"\n [disabled]=\"!image || disabled\"\n class=\"p-button-rounded p-button-outlined text-secondary\">\n </button>\n\n </div>\n\n </div>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [inverseColor]=\"inverseColor\"\n [resizeToWidth]=\"imageWidth\"\n [resizeToHeight]=\"imageHeight\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"aspectRatio\"\n backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
551
+ OnshoreFormImageItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i2$3.DialogService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
552
+ OnshoreFormImageItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormImageItemComponent, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", inverseColor: "inverseColor", imageWidth: "imageWidth", imageHeight: "imageHeight", containWithinAspectRatio: "containWithinAspectRatio", aspectRatio: "aspectRatio", disableImageSelection: "disableImageSelection", disableWebcamSelection: "disableWebcamSelection", disableMediaSelection: "disableMediaSelection", disableDelete: "disableDelete", imagePlaceholder: "imagePlaceholder", mediaType: "mediaType" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageSelectedFromMedia: "imageSelectedFromMedia" }, ngImport: i0, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <div class=\"w-100\">\n\n <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"fimagePlaceholder ? imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n </div>\n\n <div class=\"flex flex-column mt-4 w-100\">\n <button pButton pRipple type=\"button\"\n [hidden]=\"disableImageSelection\"\n icon=\"fa fa-image\"\n label=\"Bild hochladen\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true\">\n </button>\n\n <button pButton pRipple type=\"button\"\n [hidden]=\"disableWebcamSelection\"\n icon=\"fa fa-camera\"\n label=\"Foto aufnehmen\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </button>\n\n <!--<button pButton pRipple type=\"button\"\n [hidden]=\"disableMediaSelection\"\n icon=\"fa fa-photo-video\"\n label=\"Medienverwaltung\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"searchMedia()\">\n </button>-->\n\n <button pButton pRipple type=\"button\"\n [hidden]=\"disableDelete\"\n icon=\"fa fa-eraser\"\n label=\"Entfernen\"\n (click)=\"removeImage()\"\n [disabled]=\"!image || disabled\"\n class=\"p-button-rounded p-button-outlined text-secondary\">\n </button>\n\n </div>\n\n </div>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [inverseColor]=\"inverseColor\"\n [resizeToWidth]=\"imageWidth\"\n [resizeToHeight]=\"imageHeight\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"aspectRatio\"\n backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i6.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
553
553
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
554
554
  type: Component,
555
- args: [{ selector: 'onshore-form-image-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <div class=\"w-100\">\n\n <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"formSettings?.imagePlaceholder ? formSettings?.imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n </div>\n\n <div class=\"flex flex-column mt-4 w-100\">\n <button pButton pRipple type=\"button\"\n [hidden]=\"formSettings?.disableImageSelection\"\n icon=\"fa fa-image\"\n label=\"Bild hochladen\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true\">\n </button>\n\n <button pButton pRipple type=\"button\"\n [hidden]=\"formSettings?.disableWebcamSelection\"\n icon=\"fa fa-camera\"\n label=\"Foto aufnehmen\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </button>\n\n <!--<button pButton pRipple type=\"button\"\n [hidden]=\"formSettings?.disableMediaSelection\"\n icon=\"fa fa-photo-video\"\n label=\"Medienverwaltung\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"searchMedia()\">\n </button>-->\n\n <button pButton pRipple type=\"button\"\n [hidden]=\"formSettings?.disableDelete\"\n icon=\"fa fa-eraser\"\n label=\"Entfernen\"\n (click)=\"removeImage()\"\n [disabled]=\"!image || disabled\"\n class=\"p-button-rounded p-button-outlined text-secondary\">\n </button>\n\n </div>\n\n </div>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [inverseColor]=\"inverseColor\"\n [resizeToWidth]=\"imageWidth\"\n [resizeToHeight]=\"imageHeight\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"aspectRatio\"\n backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n" }]
555
+ args: [{ selector: 'onshore-form-image-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\" style=\"max-width: 500px\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <div class=\"w-100\">\n\n <div class=\"position-relative flex justify-content-center align-items-center\" style=\"background-color: white\">\n <!--<app-image-placeholder class=\"w-100\" [image]=\"image\" imageStyle=\"position: absolut; height: 250px; width: 250px\" [placeholder]=\"fimagePlaceholder ? imagePlaceholder + ' fa-10x' : 'fa-image fa-10x'\" placeholderStyle=\"width: 250px; height: 250px\"></app-image-placeholder>-->\n </div>\n\n <div class=\"flex flex-column mt-4 w-100\">\n <button pButton pRipple type=\"button\"\n [hidden]=\"disableImageSelection\"\n icon=\"fa fa-image\"\n label=\"Bild hochladen\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true\">\n </button>\n\n <button pButton pRipple type=\"button\"\n [hidden]=\"disableWebcamSelection\"\n icon=\"fa fa-camera\"\n label=\"Foto aufnehmen\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </button>\n\n <!--<button pButton pRipple type=\"button\"\n [hidden]=\"disableMediaSelection\"\n icon=\"fa fa-photo-video\"\n label=\"Medienverwaltung\"\n class=\"p-button-rounded p-button-outlined text-secondary mb-2\"\n [disabled]=\"disabled\"\n (click)=\"searchMedia()\">\n </button>-->\n\n <button pButton pRipple type=\"button\"\n [hidden]=\"disableDelete\"\n icon=\"fa fa-eraser\"\n label=\"Entfernen\"\n (click)=\"removeImage()\"\n [disabled]=\"!image || disabled\"\n class=\"p-button-rounded p-button-outlined text-secondary\">\n </button>\n\n </div>\n\n </div>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n</div>\n\n<!--\n<p-dialog [header]=\"'Bild ausw\u00E4hlen'\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <app-image-chooser buttonLabel=\"Ausw\u00E4hlen\"\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [inverseColor]=\"inverseColor\"\n [resizeToWidth]=\"imageWidth\"\n [resizeToHeight]=\"imageHeight\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"aspectRatio\"\n backgroundColor=\"transparent\"></app-image-chooser>\n</p-dialog>\n-->\n\n<!--\n<p-dialog [header]=\"'Foto aufnehmen'\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\">\n <app-webcam *ngIf=\"webcamDialogVisible\" buttonLabel=\"Smile\" (shot)=\"getWebcamImage($event)\" (canceled)=\"webcamDialogVisible = false\" [inverseColor]=\"inverseColor\"></app-webcam>\n</p-dialog>\n-->\n" }]
556
556
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
557
557
  type: Self
558
558
  }, {
559
559
  type: Optional
560
- }] }, { type: i2$1.DialogService }, { type: i1.TranslateService }]; }, propDecorators: { formTemplate: [{
560
+ }] }, { type: i2$3.DialogService }, { type: i1.TranslateService }]; }, propDecorators: { formTemplate: [{
561
561
  type: Input
562
562
  }], inverseColor: [{
563
563
  type: Input
@@ -569,6 +569,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
569
569
  type: Input
570
570
  }], aspectRatio: [{
571
571
  type: Input
572
+ }], disableImageSelection: [{
573
+ type: Input
574
+ }], disableWebcamSelection: [{
575
+ type: Input
576
+ }], disableMediaSelection: [{
577
+ type: Input
578
+ }], disableDelete: [{
579
+ type: Input
580
+ }], imagePlaceholder: [{
581
+ type: Input
582
+ }], mediaType: [{
583
+ type: Input
572
584
  }], imageDeleted: [{
573
585
  type: Output
574
586
  }], imageCleared: [{
@@ -581,8 +593,9 @@ class OnshoreFormDropdownItemComponent {
581
593
  constructor(ngControl, cdr) {
582
594
  this.ngControl = ngControl;
583
595
  this.cdr = cdr;
584
- this.disabled = false;
585
596
  this.multiple = false;
597
+ this.showClear = false;
598
+ this.disabled = false;
586
599
  this.ngControl.valueAccessor = this;
587
600
  }
588
601
  // ControlValueAccessor interface
@@ -593,26 +606,15 @@ class OnshoreFormDropdownItemComponent {
593
606
  this.disabled = isDisabled;
594
607
  }
595
608
  clearSelection() {
596
- this.ngControl.control?.setValue(null);
609
+ this.ngControl.control?.reset();
610
+ //this.ngControl.control?.setValue(this.multiple ? [] : '');
611
+ this.cdr.markForCheck();
597
612
  }
598
613
  ngOnInit() {
599
- this.ngControl.control?.valueChanges.subscribe(() => {
600
- this.cdr.markForCheck();
601
- });
602
- this.ngControl.control?.statusChanges.subscribe(() => {
603
- this.cdr.markForCheck();
604
- });
605
614
  if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
606
615
  this.ngControl.control?.setValue(this.formTemplate.default);
607
616
  this.cdr.markForCheck();
608
617
  }
609
- if (this.formTemplate.enabled) {
610
- this.ngControl.control?.enable();
611
- }
612
- else {
613
- this.ngControl.control?.disable();
614
- }
615
- this.multiple = this.formTemplate.settings?.multiple;
616
618
  }
617
619
  ngOnDestroy() {
618
620
  this.ngControl.control?.disable();
@@ -622,16 +624,20 @@ class OnshoreFormDropdownItemComponent {
622
624
  }
623
625
  }
624
626
  OnshoreFormDropdownItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDropdownItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
625
- OnshoreFormDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormDropdownItemComponent, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate?.label}}\n <span *ngIf=\"formTemplate?.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate?.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate?.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <p-dropdown *ngIf=\"!multiple\"\n class=\"w-100\"\n [options]=\"formTemplate?.options\"\n [formControl]=\"ngControl.control\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [dataKey]=\"formTemplate?.optionDataKey\"\n [showClear]=\"formTemplate?.settings?.showClear\"\n (onClear)=\"clearSelection()\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n </p-dropdown>\n\n <p-multiSelect *ngIf=\"multiple\"\n class=\"w-100\"\n [options]=\"formTemplate?.options\"\n [formControl]=\"ngControl.control\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [dataKey]=\"formTemplate?.optionDataKey\"\n display=\"chip\"\n optionDisabled=\"disabled\"\n appendTo=\"body\"></p-multiSelect>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate?.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "itemSize", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$3.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
627
+ OnshoreFormDropdownItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormDropdownItemComponent, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <p-dropdown *ngIf=\"!multiple\"\n class=\"w-full\"\n [options]=\"formTemplate?.options\"\n [formControl]=\"ngControl.control\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [dataKey]=\"formTemplate?.optionDataKey\"\n [showClear]=\"showClear && formTemplate?.placeholder\"\n (onClear)=\"clearSelection()\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n </p-dropdown>\n\n <p-multiSelect *ngIf=\"multiple\"\n class=\"w-full\"\n [options]=\"formTemplate?.options\"\n [formControl]=\"ngControl.control\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [dataKey]=\"formTemplate?.optionDataKey\"\n [showClear]=\"showClear\"\n (onClear)=\"clearSelection()\"\n display=\"chip\"\n optionDisabled=\"disabled\"\n appendTo=\"body\"></p-multiSelect>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "itemSize", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i4$1.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "autoZIndex", "baseZIndex", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
626
628
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDropdownItemComponent, decorators: [{
627
629
  type: Component,
628
- args: [{ selector: 'onshore-form-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate?.label}}\n <span *ngIf=\"formTemplate?.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate?.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate?.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <p-dropdown *ngIf=\"!multiple\"\n class=\"w-100\"\n [options]=\"formTemplate?.options\"\n [formControl]=\"ngControl.control\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [dataKey]=\"formTemplate?.optionDataKey\"\n [showClear]=\"formTemplate?.settings?.showClear\"\n (onClear)=\"clearSelection()\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n </p-dropdown>\n\n <p-multiSelect *ngIf=\"multiple\"\n class=\"w-100\"\n [options]=\"formTemplate?.options\"\n [formControl]=\"ngControl.control\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [dataKey]=\"formTemplate?.optionDataKey\"\n display=\"chip\"\n optionDisabled=\"disabled\"\n appendTo=\"body\"></p-multiSelect>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate?.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n" }]
630
+ args: [{ selector: 'onshore-form-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <p-dropdown *ngIf=\"!multiple\"\n class=\"w-full\"\n [options]=\"formTemplate?.options\"\n [formControl]=\"ngControl.control\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [dataKey]=\"formTemplate?.optionDataKey\"\n [showClear]=\"showClear && formTemplate?.placeholder\"\n (onClear)=\"clearSelection()\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n </p-dropdown>\n\n <p-multiSelect *ngIf=\"multiple\"\n class=\"w-full\"\n [options]=\"formTemplate?.options\"\n [formControl]=\"ngControl.control\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [dataKey]=\"formTemplate?.optionDataKey\"\n [showClear]=\"showClear\"\n (onClear)=\"clearSelection()\"\n display=\"chip\"\n optionDisabled=\"disabled\"\n appendTo=\"body\"></p-multiSelect>\n</onshore-form-item-container>\n" }]
629
631
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
630
632
  type: Self
631
633
  }, {
632
634
  type: Optional
633
635
  }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
634
636
  type: Input
637
+ }], multiple: [{
638
+ type: Input
639
+ }], showClear: [{
640
+ type: Input
635
641
  }] } });
636
642
 
637
643
  class OnshoreFormColorpickerItemComponent {
@@ -656,23 +662,11 @@ class OnshoreFormColorpickerItemComponent {
656
662
  this.colorPickerValue = input.target?.value;
657
663
  }
658
664
  ngOnInit() {
659
- this.ngControl.control?.valueChanges.subscribe(() => {
660
- this.cdr.markForCheck();
661
- });
662
- this.ngControl.control?.statusChanges.subscribe(() => {
663
- this.cdr.markForCheck();
664
- });
665
665
  if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
666
666
  this.ngControl.control?.setValue(this.formTemplate.default);
667
667
  this.colorPickerValue = this.formTemplate.default;
668
668
  this.cdr.markForCheck();
669
669
  }
670
- if (this.formTemplate.enabled) {
671
- this.ngControl.control?.enable();
672
- }
673
- else {
674
- this.ngControl.control?.disable();
675
- }
676
670
  }
677
671
  ngOnDestroy() {
678
672
  this.ngControl.control?.disable();
@@ -683,10 +677,10 @@ class OnshoreFormColorpickerItemComponent {
683
677
  }
684
678
  }
685
679
  OnshoreFormColorpickerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormColorpickerItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
686
- OnshoreFormColorpickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormColorpickerItemComponent, selector: "onshore-form-colorpicker-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}:\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <div class=\"flex w-100\">\n <p-colorPicker [(ngModel)]=\"colorPickerValue\" format=\"hex\" [inline]=\"false\" appendTo=\"body\" [baseZIndex]=\"99999\" (onChange)=\"changeColor()\"></p-colorPicker>\n <input class=\"w-100 ml-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.label\"\n [formControl]=\"ngControl.control\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]" }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
680
+ OnshoreFormColorpickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormColorpickerItemComponent, selector: "onshore-form-colorpicker-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <div class=\"flex w-full\">\n\n <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n format=\"hex\" [inline]=\"false\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [baseZIndex]=\"99999\"\n (onChange)=\"changeColor()\">\n </p-colorPicker>\n\n <input class=\"w-full ml-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n </div>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$4.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
687
681
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormColorpickerItemComponent, decorators: [{
688
682
  type: Component,
689
- args: [{ selector: 'onshore-form-colorpicker-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}:\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <div class=\"flex w-100\">\n <p-colorPicker [(ngModel)]=\"colorPickerValue\" format=\"hex\" [inline]=\"false\" appendTo=\"body\" [baseZIndex]=\"99999\" (onChange)=\"changeColor()\"></p-colorPicker>\n <input class=\"w-100 ml-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.label\"\n [formControl]=\"ngControl.control\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n" }]
683
+ args: [{ selector: 'onshore-form-colorpicker-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <div class=\"flex w-full\">\n\n <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n format=\"hex\" [inline]=\"false\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [baseZIndex]=\"99999\"\n (onChange)=\"changeColor()\">\n </p-colorPicker>\n\n <input class=\"w-full ml-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [formControl]=\"ngControl.control\"\n [disabled]=\"disabled\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n </div>\n</onshore-form-item-container>\n" }]
690
684
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
691
685
  type: Self
692
686
  }, {
@@ -713,22 +707,10 @@ class OnshoreFormCheckboxItemComponent {
713
707
  this.ngControl.control?.setValue(value.checked);
714
708
  }
715
709
  ngOnInit() {
716
- this.ngControl.control?.valueChanges.subscribe(() => {
717
- this.cdr.markForCheck();
718
- });
719
- this.ngControl.control?.statusChanges.subscribe(() => {
720
- this.cdr.markForCheck();
721
- });
722
710
  if (this.ngControl.control?.value !== true && this.ngControl.control?.value !== false && this.formTemplate.default != undefined) {
723
711
  this.ngControl.control?.setValue(this.formTemplate.default);
724
712
  this.cdr.markForCheck();
725
713
  }
726
- if (this.formTemplate.enabled) {
727
- this.ngControl.control?.enable();
728
- }
729
- else {
730
- this.ngControl.control?.disable();
731
- }
732
714
  }
733
715
  ngOnChanges(changes) {
734
716
  this.cdr.markForCheck();
@@ -738,10 +720,10 @@ class OnshoreFormCheckboxItemComponent {
738
720
  }
739
721
  }
740
722
  OnshoreFormCheckboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormCheckboxItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
741
- OnshoreFormCheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormCheckboxItemComponent, selector: "onshore-form-checkbox-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <div class=\"p-field-checkbox flex\">\n <p-checkbox class=\"align-self-start mt-1\" [name]=\"formTemplate.name\" [formControl]=\"ngControl.control\" [binary]=\"true\" [inputId]=\"formTemplate.name\" [value]=\"ngControl.control.value\" (onChange)=\"changeCheck($event)\"></p-checkbox>\n <label class=\"mb-0 ml-2\" [for]=\"formTemplate.name\">{{formTemplate.description}}</label>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "externValidationPattern", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
723
+ OnshoreFormCheckboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormCheckboxItemComponent, selector: "onshore-form-checkbox-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n <div class=\"p-field-checkbox flex\">\n <p-checkbox\n class=\"align-self-start mt-1\"\n [name]=\"formTemplate.name\"\n [formControl]=\"ngControl.control\"\n [binary]=\"true\"\n [disabled]=\"disabled\"\n [inputId]=\"formTemplate.name\"\n [value]=\"ngControl.control.value\"\n (onChange)=\"changeCheck($event)\">\n </p-checkbox>\n\n <label class=\"mb-0 ml-2 onshore-color-gray-5\"\n [for]=\"formTemplate.name\">\n {{formTemplate.description}}\n </label>\n </div>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$5.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
742
724
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormCheckboxItemComponent, decorators: [{
743
725
  type: Component,
744
- args: [{ selector: 'onshore-form-checkbox-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-column mb-3\">\n <div class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <div class=\"p-field-checkbox flex\">\n <p-checkbox class=\"align-self-start mt-1\" [name]=\"formTemplate.name\" [formControl]=\"ngControl.control\" [binary]=\"true\" [inputId]=\"formTemplate.name\" [value]=\"ngControl.control.value\" (onChange)=\"changeCheck($event)\"></p-checkbox>\n <label class=\"mb-0 ml-2\" [for]=\"formTemplate.name\">{{formTemplate.description}}</label>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n" }]
726
+ args: [{ selector: 'onshore-form-checkbox-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n <div class=\"p-field-checkbox flex\">\n <p-checkbox\n class=\"align-self-start mt-1\"\n [name]=\"formTemplate.name\"\n [formControl]=\"ngControl.control\"\n [binary]=\"true\"\n [disabled]=\"disabled\"\n [inputId]=\"formTemplate.name\"\n [value]=\"ngControl.control.value\"\n (onChange)=\"changeCheck($event)\">\n </p-checkbox>\n\n <label class=\"mb-0 ml-2 onshore-color-gray-5\"\n [for]=\"formTemplate.name\">\n {{formTemplate.description}}\n </label>\n </div>\n\n</onshore-form-item-container>\n" }]
745
727
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
746
728
  type: Self
747
729
  }, {
@@ -751,13 +733,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
751
733
  }] } });
752
734
 
753
735
  class OnshoreFormAutocompleteItemComponent {
736
+ constructor(cdr, ngControl) {
737
+ this.cdr = cdr;
738
+ this.ngControl = ngControl;
739
+ this.multiple = false;
740
+ this.searchedData = [];
741
+ this.onSearch = new EventEmitter();
742
+ this.onSelect = new EventEmitter();
743
+ this.onClear = new EventEmitter();
744
+ this.disabled = false;
745
+ this.ngControl.valueAccessor = this;
746
+ }
747
+ selected(selectedItem) {
748
+ this.onSelect.emit(selectedItem.data);
749
+ this.cdr.markForCheck();
750
+ }
751
+ searchClear() {
752
+ this.searchedData = [];
753
+ this.ngControl.reset();
754
+ this.onClear.emit();
755
+ }
756
+ searchPrepare(term) {
757
+ if (term.query != '') {
758
+ this.search(term.query);
759
+ }
760
+ else {
761
+ this.searchedData = [];
762
+ this.ngControl.reset();
763
+ this.onClear.emit();
764
+ }
765
+ }
766
+ async search(searchTerm) {
767
+ this.onSearch.emit(searchTerm);
768
+ this.cdr.markForCheck();
769
+ }
770
+ writeValue(obj) {
771
+ if (obj) {
772
+ this.cdr.markForCheck();
773
+ }
774
+ }
775
+ registerOnChange(fn) {
776
+ if (this.ngControl.value) {
777
+ this.cdr.markForCheck();
778
+ }
779
+ }
780
+ registerOnTouched(fn) { }
781
+ setDisabledState(isDisabled) {
782
+ this.disabled = isDisabled;
783
+ }
784
+ ngOnInit() {
785
+ if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
786
+ this.ngControl.control?.setValue(this.formTemplate.default);
787
+ this.cdr.markForCheck();
788
+ }
789
+ }
790
+ ngOnDestroy() {
791
+ this.ngControl.control?.disable();
792
+ }
793
+ ngOnChanges(changes) {
794
+ this.cdr.markForCheck();
795
+ }
754
796
  }
755
- OnshoreFormAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
756
- OnshoreFormAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormAutocompleteItemComponent, selector: "onshore-form-autocomplete-item", ngImport: i0, template: "<!--<div class=\"flex flex-column mb-3\">\n <div *ngIf=\"formTemplate.label\" class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n appendTo=\"body\"\n [formControl]=\"this.ngControl.control\"\n (onSelect)=\"selected($event)\"\n (onUnselect)=\"selected($event)\"\n (onClear)=\"searchClear()\"\n [suggestions]=\"dataSearch\"\n (completeMethod)=\"searchPrepare($event)\"\n [size]=\"30\"\n [minLength]=\"2\"\n [multiple]=\"multiple\"\n [delay]=\"1000\"\n [unique]=\"true\"\n [field]=\"selectedField\"\n class=\"w-100\">\n <ng-template let-item pTemplate=\"item\">\n <div *ngIf=\"suggestionsHighlightedField\">\n <span class=\"mr-1\">\n <b>{{item[suggestionsHighlightedField]}}</b><br>\n </span>\n </div>\n <div [hidden]=\"suggestionsLineOneFields.length <= 0\"><span *ngFor=\"let field of suggestionsLineOneFields\">{{item[field]}} </span></div>\n <div [hidden]=\"suggestionsLineTwoFields.length <= 0\"><span *ngFor=\"let field of suggestionsLineTwoFields\">{{item[field]}} </span></div>\n </ng-template>\n </p-autoComplete>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n-->\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
797
+ OnshoreFormAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
798
+ OnshoreFormAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormAutocompleteItemComponent, selector: "onshore-form-autocomplete-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", searchedData: "searchedData" }, outputs: { onSearch: "onSearch", onSelect: "onSelect", onClear: "onClear" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n appendTo=\"body\"\n [formControl]=\"this.ngControl.control\"\n (onSelect)=\"selected($event)\"\n (onUnselect)=\"selected($event)\"\n (onClear)=\"searchClear()\"\n [suggestions]=\"searchedData\"\n (completeMethod)=\"searchPrepare($event)\"\n [disabled]=\"disabled\"\n [size]=\"30\"\n [minLength]=\"2\"\n [multiple]=\"multiple\"\n [delay]=\"1000\"\n [unique]=\"true\"\n field=\"firstLineLabel\"\n dataKey=\"data\"\n class=\"w-full\">\n <ng-template let-item pTemplate=\"item\">\n <div *ngIf=\"item.firstLineLabel\">\n <span class=\"mr-1\">\n <b>{{item.firstLineLabel}}</b><br>\n </span>\n </div>\n <div *ngIf=\"item.secondLineLabel\"><span>{{item.secondLineLabel}} </span></div>\n <div *ngIf=\"item.thirdLineLabel\"><span>{{item.thirdLineLabel}} </span></div>\n </ng-template>\n </p-autoComplete>\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "itemSize", "suggestions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
757
799
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, decorators: [{
758
800
  type: Component,
759
- args: [{ selector: 'onshore-form-autocomplete-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--<div class=\"flex flex-column mb-3\">\n <div *ngIf=\"formTemplate.label\" class=\"flex justify-content-between align-items-center\">\n <b [class.text-muted]=\"disabled\" class=\"mb-1 white-space-nowrap\">\n {{formTemplate.label}}\n <span *ngIf=\"formTemplate.required\" class=\"tl-color-danger\">*</span>\n </b>\n <i *ngIf=\"formTemplate.tooltip\" class=\"fa fa-info-circle tl-color-black\" [pTooltip]=\"formTemplate.tooltip\" tooltipPosition=\"left\" [escape]=\"false\"></i>\n </div>\n\n <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n appendTo=\"body\"\n [formControl]=\"this.ngControl.control\"\n (onSelect)=\"selected($event)\"\n (onUnselect)=\"selected($event)\"\n (onClear)=\"searchClear()\"\n [suggestions]=\"dataSearch\"\n (completeMethod)=\"searchPrepare($event)\"\n [size]=\"30\"\n [minLength]=\"2\"\n [multiple]=\"multiple\"\n [delay]=\"1000\"\n [unique]=\"true\"\n [field]=\"selectedField\"\n class=\"w-100\">\n <ng-template let-item pTemplate=\"item\">\n <div *ngIf=\"suggestionsHighlightedField\">\n <span class=\"mr-1\">\n <b>{{item[suggestionsHighlightedField]}}</b><br>\n </span>\n </div>\n <div [hidden]=\"suggestionsLineOneFields.length <= 0\"><span *ngFor=\"let field of suggestionsLineOneFields\">{{item[field]}} </span></div>\n <div [hidden]=\"suggestionsLineTwoFields.length <= 0\"><span *ngFor=\"let field of suggestionsLineTwoFields\">{{item[field]}} </span></div>\n </ng-template>\n </p-autoComplete>\n\n <small *ngIf=\"formTemplate.description\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n\n <div *ngIf=\"ngControl.control.touched\">\n <onshore-form-validation-output\n [validationErrors]=\"ngControl.control.errors\"\n [externValidationPattern]=\"formTemplate.validationPatternTranslation\">\n </onshore-form-validation-output>\n </div>\n\n</div>\n-->\n" }]
760
- }] });
801
+ args: [{ selector: 'onshore-form-autocomplete-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n appendTo=\"body\"\n [formControl]=\"this.ngControl.control\"\n (onSelect)=\"selected($event)\"\n (onUnselect)=\"selected($event)\"\n (onClear)=\"searchClear()\"\n [suggestions]=\"searchedData\"\n (completeMethod)=\"searchPrepare($event)\"\n [disabled]=\"disabled\"\n [size]=\"30\"\n [minLength]=\"2\"\n [multiple]=\"multiple\"\n [delay]=\"1000\"\n [unique]=\"true\"\n field=\"firstLineLabel\"\n dataKey=\"data\"\n class=\"w-full\">\n <ng-template let-item pTemplate=\"item\">\n <div *ngIf=\"item.firstLineLabel\">\n <span class=\"mr-1\">\n <b>{{item.firstLineLabel}}</b><br>\n </span>\n </div>\n <div *ngIf=\"item.secondLineLabel\"><span>{{item.secondLineLabel}} </span></div>\n <div *ngIf=\"item.thirdLineLabel\"><span>{{item.thirdLineLabel}} </span></div>\n </ng-template>\n </p-autoComplete>\n</onshore-form-item-container>\n" }]
802
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
803
+ type: Self
804
+ }, {
805
+ type: Optional
806
+ }] }]; }, propDecorators: { formTemplate: [{
807
+ type: Input
808
+ }], multiple: [{
809
+ type: Input
810
+ }], searchedData: [{
811
+ type: Input
812
+ }], onSearch: [{
813
+ type: Output
814
+ }], onSelect: [{
815
+ type: Output
816
+ }], onClear: [{
817
+ type: Output
818
+ }] } });
819
+
820
+ class OnshoreFormDatetimeItemComponent {
821
+ constructor(ngControl, cdr) {
822
+ this.ngControl = ngControl;
823
+ this.cdr = cdr;
824
+ this.OnshoreFormTemplateType = OnshoreFormTemplateType;
825
+ this.disabled = false;
826
+ this.ngControl.valueAccessor = this;
827
+ }
828
+ // ControlValueAccessor interface
829
+ writeValue(obj) { }
830
+ registerOnChange(fn) { }
831
+ registerOnTouched(fn) { }
832
+ setDisabledState(isDisabled) {
833
+ this.disabled = isDisabled;
834
+ }
835
+ selectDate(date) {
836
+ console.log(date);
837
+ }
838
+ selectTime(time) {
839
+ console.log(time);
840
+ }
841
+ ngOnInit() {
842
+ if (this.ngControl.control?.value !== true && this.ngControl.control?.value !== false && this.formTemplate.default != undefined) {
843
+ this.ngControl.control?.setValue(this.formTemplate.default);
844
+ this.cdr.markForCheck();
845
+ }
846
+ }
847
+ ngOnChanges(changes) {
848
+ this.cdr.markForCheck();
849
+ }
850
+ ngOnDestroy() {
851
+ this.ngControl.control?.disable();
852
+ }
853
+ }
854
+ OnshoreFormDatetimeItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDatetimeItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
855
+ OnshoreFormDatetimeItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormDatetimeItemComponent, selector: "onshore-form-datetime-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n <p-calendar class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? 0\"\n [disabled]=\"disabled\"\n [formControl]=\"ngControl.control\"\n dateFormat=\"dd.mm.yy\"\n dataType=\"string\"\n hourFormat=\"24\"\n [timeOnly]=\"formTemplate.type == OnshoreFormTemplateType.time ? true : false\"\n [showTime]=\"formTemplate.type == OnshoreFormTemplateType.datetime ? true : false\"\n [defaultDate]=\"formTemplate.default\"\n (onSelect)=\"selectDate($event)\">\n </p-calendar>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$6.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
856
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDatetimeItemComponent, decorators: [{
857
+ type: Component,
858
+ args: [{ selector: 'onshore-form-datetime-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n <p-calendar class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? 0\"\n [disabled]=\"disabled\"\n [formControl]=\"ngControl.control\"\n dateFormat=\"dd.mm.yy\"\n dataType=\"string\"\n hourFormat=\"24\"\n [timeOnly]=\"formTemplate.type == OnshoreFormTemplateType.time ? true : false\"\n [showTime]=\"formTemplate.type == OnshoreFormTemplateType.datetime ? true : false\"\n [defaultDate]=\"formTemplate.default\"\n (onSelect)=\"selectDate($event)\">\n </p-calendar>\n\n</onshore-form-item-container>\n" }]
859
+ }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
860
+ type: Self
861
+ }, {
862
+ type: Optional
863
+ }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
864
+ type: Input
865
+ }] } });
761
866
 
762
867
  class OnshoreFormsModule {
763
868
  }
@@ -765,13 +870,15 @@ OnshoreFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
765
870
  OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, declarations: [OnshoreFormsComponent,
766
871
  OnshoreFormInputItemComponent,
767
872
  OnshoreFormSwitchItemComponent,
768
- OnshoreFormTextareaItemComponent,
769
873
  OnshoreFormValidationOutputComponent,
770
874
  OnshoreFormImageItemComponent,
771
875
  OnshoreFormDropdownItemComponent,
772
876
  OnshoreFormColorpickerItemComponent,
773
877
  OnshoreFormCheckboxItemComponent,
774
- OnshoreFormAutocompleteItemComponent], imports: [CommonModule,
878
+ OnshoreFormAutocompleteItemComponent,
879
+ OnshoreFormItemContainer,
880
+ OnshoreFormDatetimeItemComponent], imports: [CommonModule,
881
+ BrowserAnimationsModule,
775
882
  FormsModule,
776
883
  ReactiveFormsModule,
777
884
  ButtonModule,
@@ -786,19 +893,24 @@ OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
786
893
  InputSwitchModule,
787
894
  InputTextModule,
788
895
  InputTextareaModule,
789
- DialogModule], exports: [OnshoreFormsComponent,
896
+ DialogModule,
897
+ SelectButtonModule,
898
+ ToggleButtonModule,
899
+ CalendarModule], exports: [OnshoreFormsComponent,
790
900
  OnshoreFormInputItemComponent,
791
901
  OnshoreFormSwitchItemComponent,
792
- OnshoreFormTextareaItemComponent,
793
902
  OnshoreFormValidationOutputComponent,
794
903
  OnshoreFormImageItemComponent,
795
904
  OnshoreFormDropdownItemComponent,
796
905
  OnshoreFormColorpickerItemComponent,
797
906
  OnshoreFormCheckboxItemComponent,
798
- OnshoreFormAutocompleteItemComponent] });
907
+ OnshoreFormAutocompleteItemComponent,
908
+ OnshoreFormItemContainer,
909
+ OnshoreFormDatetimeItemComponent] });
799
910
  OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, providers: [
800
911
  OnshoreFormsService
801
912
  ], imports: [CommonModule,
913
+ BrowserAnimationsModule,
802
914
  FormsModule,
803
915
  ReactiveFormsModule,
804
916
  ButtonModule,
@@ -813,7 +925,10 @@ OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
813
925
  InputSwitchModule,
814
926
  InputTextModule,
815
927
  InputTextareaModule,
816
- DialogModule] });
928
+ DialogModule,
929
+ SelectButtonModule,
930
+ ToggleButtonModule,
931
+ CalendarModule] });
817
932
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, decorators: [{
818
933
  type: NgModule,
819
934
  args: [{
@@ -821,16 +936,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
821
936
  OnshoreFormsComponent,
822
937
  OnshoreFormInputItemComponent,
823
938
  OnshoreFormSwitchItemComponent,
824
- OnshoreFormTextareaItemComponent,
825
939
  OnshoreFormValidationOutputComponent,
826
940
  OnshoreFormImageItemComponent,
827
941
  OnshoreFormDropdownItemComponent,
828
942
  OnshoreFormColorpickerItemComponent,
829
943
  OnshoreFormCheckboxItemComponent,
830
- OnshoreFormAutocompleteItemComponent
944
+ OnshoreFormAutocompleteItemComponent,
945
+ OnshoreFormItemContainer,
946
+ OnshoreFormDatetimeItemComponent
831
947
  ],
832
948
  imports: [
833
949
  CommonModule,
950
+ BrowserAnimationsModule,
834
951
  FormsModule,
835
952
  ReactiveFormsModule,
836
953
  ButtonModule,
@@ -845,19 +962,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
845
962
  InputSwitchModule,
846
963
  InputTextModule,
847
964
  InputTextareaModule,
848
- DialogModule
965
+ DialogModule,
966
+ SelectButtonModule,
967
+ ToggleButtonModule,
968
+ CalendarModule
849
969
  ],
850
970
  exports: [
851
971
  OnshoreFormsComponent,
852
972
  OnshoreFormInputItemComponent,
853
973
  OnshoreFormSwitchItemComponent,
854
- OnshoreFormTextareaItemComponent,
855
974
  OnshoreFormValidationOutputComponent,
856
975
  OnshoreFormImageItemComponent,
857
976
  OnshoreFormDropdownItemComponent,
858
977
  OnshoreFormColorpickerItemComponent,
859
978
  OnshoreFormCheckboxItemComponent,
860
- OnshoreFormAutocompleteItemComponent
979
+ OnshoreFormAutocompleteItemComponent,
980
+ OnshoreFormItemContainer,
981
+ OnshoreFormDatetimeItemComponent
861
982
  ],
862
983
  providers: [
863
984
  OnshoreFormsService
@@ -873,5 +994,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
873
994
  * Generated bundle index. Do not edit.
874
995
  */
875
996
 
876
- export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormSwitchItemComponent, OnshoreFormTemplateType, OnshoreFormTextareaItemComponent, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError };
997
+ export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError };
877
998
  //# sourceMappingURL=onshore-forms.mjs.map