onshore-forms 0.0.9 → 0.0.11

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 +30 -13
  15. package/esm2020/public-api.mjs +3 -2
  16. package/fesm2015/onshore-forms.mjs +323 -197
  17. package/fesm2015/onshore-forms.mjs.map +1 -1
  18. package/fesm2020/onshore-forms.mjs +296 -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 +27 -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,39 @@ 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 * as i2$6 from 'primeng/calendar';
40
+ import { CalendarModule } from 'primeng/calendar';
34
41
 
35
42
  var OnshoreFormTemplateType;
36
43
  (function (OnshoreFormTemplateType) {
@@ -43,13 +50,22 @@ var OnshoreFormTemplateType;
43
50
  OnshoreFormTemplateType["phone"] = "phone";
44
51
  OnshoreFormTemplateType["regexp"] = "regexp";
45
52
  OnshoreFormTemplateType["select"] = "select";
53
+ OnshoreFormTemplateType["switch"] = "switch";
46
54
  OnshoreFormTemplateType["check"] = "check";
47
55
  OnshoreFormTemplateType["radio"] = "radio";
48
56
  OnshoreFormTemplateType["image"] = "image";
49
57
  OnshoreFormTemplateType["autocomplete"] = "autocomplete";
50
58
  OnshoreFormTemplateType["color"] = "color";
59
+ OnshoreFormTemplateType["date"] = "date";
60
+ OnshoreFormTemplateType["time"] = "time";
61
+ OnshoreFormTemplateType["datetime"] = "datetime";
51
62
  OnshoreFormTemplateType["subform"] = "subform";
52
63
  })(OnshoreFormTemplateType || (OnshoreFormTemplateType = {}));
64
+ var OnshoreFormTemplateLayout;
65
+ (function (OnshoreFormTemplateLayout) {
66
+ OnshoreFormTemplateLayout["vertical"] = "vertical";
67
+ OnshoreFormTemplateLayout["horizontal"] = "horizontal";
68
+ })(OnshoreFormTemplateLayout || (OnshoreFormTemplateLayout = {}));
53
69
  var OnshoreImageError;
54
70
  (function (OnshoreImageError) {
55
71
  OnshoreImageError["none"] = "";
@@ -212,14 +228,14 @@ class OnshoreFormsComponent {
212
228
  OnshoreFormsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
213
229
  OnshoreFormsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormsComponent, selector: "lib-onshore-forms", ngImport: i0, template: `
214
230
  <p>
215
- onshore-forms works 2!
231
+ onshore-forms works!
216
232
  </p>
217
233
  `, isInline: true });
218
234
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsComponent, decorators: [{
219
235
  type: Component,
220
236
  args: [{ selector: 'lib-onshore-forms', template: `
221
237
  <p>
222
- onshore-forms works 2!
238
+ onshore-forms works!
223
239
  </p>
224
240
  ` }]
225
241
  }], ctorParameters: function () { return []; } });
@@ -233,9 +249,9 @@ class OnshoreFormValidationOutputComponent {
233
249
  }
234
250
  ngOnChanges(changes) {
235
251
  this.validationTranslation = '';
236
- if (changes['validationErrors'].currentValue) {
252
+ if (changes['validationErrors'].currentValue && this.validationErrors) {
237
253
  Object.keys(this.validationErrors).forEach(error => {
238
- const exists = Object.values(this.validationItems).filter(validationItem => validationItem.key == error);
254
+ const exists = Object.values(this.validationItems ?? []).filter(validationItem => validationItem.key == error);
239
255
  if (exists && exists.length > 0) {
240
256
  this.validationTranslation += this.translate.instant('request.error.' + error) + '<br>';
241
257
  }
@@ -249,10 +265,10 @@ class OnshoreFormValidationOutputComponent {
249
265
  }
250
266
  }
251
267
  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 });
268
+ 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
269
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormValidationOutputComponent, decorators: [{
254
270
  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" }]
271
+ 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
272
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { validationErrors: [{
257
273
  type: Input
258
274
  }], externValidationPattern: [{
@@ -261,21 +277,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
261
277
  type: Input
262
278
  }] } });
263
279
 
264
- class OnshoreFormInputItemComponent {
265
- constructor(ngControl, cdr) {
266
- this.ngControl = ngControl;
280
+ class OnshoreFormItemContainer {
281
+ constructor(cdr) {
267
282
  this.cdr = cdr;
268
- this.FormTemplateItemType = OnshoreFormTemplateType;
269
- this.passwordVisible = false;
270
- this.disabled = false;
271
- this.ngControl.valueAccessor = this;
283
+ this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
272
284
  }
273
- // ControlValueAccessor interface
274
- writeValue(obj) { }
275
- registerOnChange(fn) { }
276
- registerOnTouched(fn) { }
277
- setDisabledState(isDisabled) {
278
- this.disabled = isDisabled;
285
+ enabled(enable) {
286
+ setTimeout(() => {
287
+ if (enable) {
288
+ this.ngControl.control.enable();
289
+ }
290
+ else {
291
+ this.ngControl.control.disable();
292
+ }
293
+ this.cdr.markForCheck();
294
+ }, 100);
279
295
  }
280
296
  ngOnInit() {
281
297
  this.ngControl.control?.valueChanges.subscribe(() => {
@@ -284,42 +300,48 @@ class OnshoreFormInputItemComponent {
284
300
  this.ngControl.control?.statusChanges.subscribe(() => {
285
301
  this.cdr.markForCheck();
286
302
  });
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();
303
+ this.enabled(this.formTemplate.enabled);
304
+ if (this.formTemplate.locked) {
305
+ this.enabled(false);
296
306
  }
297
307
  }
298
308
  ngOnChanges(changes) {
299
- this.cdr.markForCheck();
300
- }
301
- ngOnDestroy() {
302
- this.ngControl.control?.disable();
309
+ const previousValue = changes['formTemplate'].previousValue;
310
+ const currentValue = changes['formTemplate'].currentValue;
311
+ if (currentValue) {
312
+ if (previousValue?.enabled !== currentValue?.enabled) {
313
+ this.enabled(currentValue?.enabled);
314
+ }
315
+ if (previousValue?.locked !== currentValue?.locked) {
316
+ if (currentValue.locked) {
317
+ this.enabled(false);
318
+ }
319
+ else {
320
+ this.enabled(currentValue.enabled);
321
+ }
322
+ }
323
+ this.cdr.markForCheck();
324
+ }
303
325
  }
304
326
  }
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: [{
327
+ OnshoreFormItemContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
328
+ 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 });
329
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
308
330
  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: [{
331
+ 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" }]
332
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
333
+ type: Input
334
+ }], ngControl: [{
315
335
  type: Input
316
336
  }] } });
317
337
 
318
- class OnshoreFormSwitchItemComponent {
338
+ class OnshoreFormInputItemComponent {
319
339
  constructor(ngControl, cdr) {
320
340
  this.ngControl = ngControl;
321
341
  this.cdr = cdr;
322
- this.valueChange = new EventEmitter();
342
+ this.OnshoreFormTemplateType = OnshoreFormTemplateType;
343
+ this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
344
+ this.passwordVisible = false;
323
345
  this.disabled = false;
324
346
  this.ngControl.valueAccessor = this;
325
347
  }
@@ -331,25 +353,10 @@ class OnshoreFormSwitchItemComponent {
331
353
  this.disabled = isDisabled;
332
354
  }
333
355
  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) {
356
+ if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
344
357
  this.ngControl.control?.setValue(this.formTemplate.default);
345
358
  this.cdr.markForCheck();
346
359
  }
347
- if (this.formTemplate.enabled) {
348
- this.ngControl.control?.enable();
349
- }
350
- else {
351
- this.ngControl.control?.disable();
352
- }
353
360
  }
354
361
  ngOnChanges(changes) {
355
362
  this.cdr.markForCheck();
@@ -358,26 +365,34 @@ class OnshoreFormSwitchItemComponent {
358
365
  this.ngControl.control?.disable();
359
366
  }
360
367
  }
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: [{
368
+ 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 });
369
+ 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 });
370
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
364
371
  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" }]
372
+ 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
373
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
367
374
  type: Self
368
375
  }, {
369
376
  type: Optional
370
377
  }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
371
378
  type: Input
372
- }], valueChange: [{
373
- type: Output
379
+ }], step: [{
380
+ type: Input
381
+ }], min: [{
382
+ type: Input
383
+ }], max: [{
384
+ type: Input
385
+ }], minLength: [{
386
+ type: Input
387
+ }], maxLength: [{
388
+ type: Input
374
389
  }] } });
375
390
 
376
- class OnshoreFormTextareaItemComponent {
391
+ class OnshoreFormSwitchItemComponent {
377
392
  constructor(ngControl, cdr) {
378
393
  this.ngControl = ngControl;
379
394
  this.cdr = cdr;
380
- this.FormTemplateItemType = OnshoreFormTemplateType;
395
+ this.valueChange = new EventEmitter();
381
396
  this.disabled = false;
382
397
  this.ngControl.valueAccessor = this;
383
398
  }
@@ -389,41 +404,34 @@ class OnshoreFormTextareaItemComponent {
389
404
  this.disabled = isDisabled;
390
405
  }
391
406
  ngOnInit() {
392
- this.ngControl.control?.valueChanges.subscribe(() => {
393
- this.cdr.markForCheck();
394
- });
395
- this.ngControl.control?.statusChanges.subscribe(() => {
396
- this.cdr.markForCheck();
407
+ this.ngControl.control?.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), skip(1)).subscribe(newValue => {
408
+ this.valueChange.emit(this.ngControl.control?.value);
397
409
  });
398
- if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
410
+ if (this.ngControl.control?.value == undefined && this.formTemplate.default != undefined) {
399
411
  this.ngControl.control?.setValue(this.formTemplate.default);
400
412
  this.cdr.markForCheck();
401
413
  }
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
414
  }
412
415
  ngOnChanges(changes) {
413
416
  this.cdr.markForCheck();
414
417
  }
418
+ ngOnDestroy() {
419
+ this.ngControl.control?.disable();
420
+ }
415
421
  }
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: [{
422
+ 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 });
423
+ 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 });
424
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
419
425
  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" }]
426
+ 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
427
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
422
428
  type: Self
423
429
  }, {
424
430
  type: Optional
425
431
  }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
426
432
  type: Input
433
+ }], valueChange: [{
434
+ type: Output
427
435
  }] } });
428
436
 
429
437
  class OnshoreFormImageItemComponent {
@@ -438,6 +446,12 @@ class OnshoreFormImageItemComponent {
438
446
  this.imageHeight = 400;
439
447
  this.containWithinAspectRatio = false;
440
448
  this.aspectRatio = 1 / 1;
449
+ this.disableImageSelection = false;
450
+ this.disableWebcamSelection = false;
451
+ this.disableMediaSelection = false;
452
+ this.disableDelete = false;
453
+ this.imagePlaceholder = '';
454
+ this.mediaType = '';
441
455
  this.imageDeleted = new EventEmitter();
442
456
  this.imageCleared = new EventEmitter();
443
457
  this.imageSelectedFromMedia = new EventEmitter();
@@ -475,7 +489,7 @@ class OnshoreFormImageItemComponent {
475
489
  styleClass: 'p-dialog-background-white',
476
490
  modal: true,
477
491
  header: this.translate.instant('search.media.dialogTitle'),
478
- data: { targetType: this.formSettings.mediaType }
492
+ data: { targetType: this.mediaType }
479
493
  }).onClose.subscribe((result) => {
480
494
  if(result) {
481
495
  this.image = result.url;
@@ -520,25 +534,10 @@ class OnshoreFormImageItemComponent {
520
534
  this.cdr.markForCheck();
521
535
  }
522
536
  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
537
  if (this.ngControl.control.value == '' && this.formTemplate.default != undefined) {
530
538
  this.ngControl.control.setValue(this.formTemplate.default);
531
539
  this.cdr.markForCheck();
532
540
  }
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
541
  }
543
542
  ngOnDestroy() {
544
543
  this.subscriptions.forEach((subscription) => {
@@ -548,16 +547,16 @@ class OnshoreFormImageItemComponent {
548
547
  this.image = null;
549
548
  }
550
549
  }
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 });
550
+ 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 });
551
+ 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
552
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
554
553
  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" }]
554
+ 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
555
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
557
556
  type: Self
558
557
  }, {
559
558
  type: Optional
560
- }] }, { type: i2$1.DialogService }, { type: i1.TranslateService }]; }, propDecorators: { formTemplate: [{
559
+ }] }, { type: i2$3.DialogService }, { type: i1.TranslateService }]; }, propDecorators: { formTemplate: [{
561
560
  type: Input
562
561
  }], inverseColor: [{
563
562
  type: Input
@@ -569,6 +568,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
569
568
  type: Input
570
569
  }], aspectRatio: [{
571
570
  type: Input
571
+ }], disableImageSelection: [{
572
+ type: Input
573
+ }], disableWebcamSelection: [{
574
+ type: Input
575
+ }], disableMediaSelection: [{
576
+ type: Input
577
+ }], disableDelete: [{
578
+ type: Input
579
+ }], imagePlaceholder: [{
580
+ type: Input
581
+ }], mediaType: [{
582
+ type: Input
572
583
  }], imageDeleted: [{
573
584
  type: Output
574
585
  }], imageCleared: [{
@@ -581,8 +592,9 @@ class OnshoreFormDropdownItemComponent {
581
592
  constructor(ngControl, cdr) {
582
593
  this.ngControl = ngControl;
583
594
  this.cdr = cdr;
584
- this.disabled = false;
585
595
  this.multiple = false;
596
+ this.showClear = false;
597
+ this.disabled = false;
586
598
  this.ngControl.valueAccessor = this;
587
599
  }
588
600
  // ControlValueAccessor interface
@@ -593,26 +605,15 @@ class OnshoreFormDropdownItemComponent {
593
605
  this.disabled = isDisabled;
594
606
  }
595
607
  clearSelection() {
596
- this.ngControl.control?.setValue(null);
608
+ this.ngControl.control?.reset();
609
+ //this.ngControl.control?.setValue(this.multiple ? [] : '');
610
+ this.cdr.markForCheck();
597
611
  }
598
612
  ngOnInit() {
599
- this.ngControl.control?.valueChanges.subscribe(() => {
600
- this.cdr.markForCheck();
601
- });
602
- this.ngControl.control?.statusChanges.subscribe(() => {
603
- this.cdr.markForCheck();
604
- });
605
613
  if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
606
614
  this.ngControl.control?.setValue(this.formTemplate.default);
607
615
  this.cdr.markForCheck();
608
616
  }
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
617
  }
617
618
  ngOnDestroy() {
618
619
  this.ngControl.control?.disable();
@@ -622,16 +623,20 @@ class OnshoreFormDropdownItemComponent {
622
623
  }
623
624
  }
624
625
  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 });
626
+ 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
627
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDropdownItemComponent, decorators: [{
627
628
  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" }]
629
+ 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
630
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
630
631
  type: Self
631
632
  }, {
632
633
  type: Optional
633
634
  }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
634
635
  type: Input
636
+ }], multiple: [{
637
+ type: Input
638
+ }], showClear: [{
639
+ type: Input
635
640
  }] } });
636
641
 
637
642
  class OnshoreFormColorpickerItemComponent {
@@ -656,23 +661,11 @@ class OnshoreFormColorpickerItemComponent {
656
661
  this.colorPickerValue = input.target?.value;
657
662
  }
658
663
  ngOnInit() {
659
- this.ngControl.control?.valueChanges.subscribe(() => {
660
- this.cdr.markForCheck();
661
- });
662
- this.ngControl.control?.statusChanges.subscribe(() => {
663
- this.cdr.markForCheck();
664
- });
665
664
  if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
666
665
  this.ngControl.control?.setValue(this.formTemplate.default);
667
666
  this.colorPickerValue = this.formTemplate.default;
668
667
  this.cdr.markForCheck();
669
668
  }
670
- if (this.formTemplate.enabled) {
671
- this.ngControl.control?.enable();
672
- }
673
- else {
674
- this.ngControl.control?.disable();
675
- }
676
669
  }
677
670
  ngOnDestroy() {
678
671
  this.ngControl.control?.disable();
@@ -683,10 +676,10 @@ class OnshoreFormColorpickerItemComponent {
683
676
  }
684
677
  }
685
678
  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 });
679
+ 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
680
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormColorpickerItemComponent, decorators: [{
688
681
  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" }]
682
+ 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
683
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
691
684
  type: Self
692
685
  }, {
@@ -713,22 +706,10 @@ class OnshoreFormCheckboxItemComponent {
713
706
  this.ngControl.control?.setValue(value.checked);
714
707
  }
715
708
  ngOnInit() {
716
- this.ngControl.control?.valueChanges.subscribe(() => {
717
- this.cdr.markForCheck();
718
- });
719
- this.ngControl.control?.statusChanges.subscribe(() => {
720
- this.cdr.markForCheck();
721
- });
722
709
  if (this.ngControl.control?.value !== true && this.ngControl.control?.value !== false && this.formTemplate.default != undefined) {
723
710
  this.ngControl.control?.setValue(this.formTemplate.default);
724
711
  this.cdr.markForCheck();
725
712
  }
726
- if (this.formTemplate.enabled) {
727
- this.ngControl.control?.enable();
728
- }
729
- else {
730
- this.ngControl.control?.disable();
731
- }
732
713
  }
733
714
  ngOnChanges(changes) {
734
715
  this.cdr.markForCheck();
@@ -738,10 +719,10 @@ class OnshoreFormCheckboxItemComponent {
738
719
  }
739
720
  }
740
721
  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 });
722
+ 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
723
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormCheckboxItemComponent, decorators: [{
743
724
  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" }]
725
+ 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
726
  }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
746
727
  type: Self
747
728
  }, {
@@ -751,13 +732,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
751
732
  }] } });
752
733
 
753
734
  class OnshoreFormAutocompleteItemComponent {
735
+ constructor(cdr, ngControl) {
736
+ this.cdr = cdr;
737
+ this.ngControl = ngControl;
738
+ this.multiple = false;
739
+ this.searchedData = [];
740
+ this.onSearch = new EventEmitter();
741
+ this.onSelect = new EventEmitter();
742
+ this.onClear = new EventEmitter();
743
+ this.disabled = false;
744
+ this.ngControl.valueAccessor = this;
745
+ }
746
+ selected(selectedItem) {
747
+ this.onSelect.emit(selectedItem.data);
748
+ this.cdr.markForCheck();
749
+ }
750
+ searchClear() {
751
+ this.searchedData = [];
752
+ this.ngControl.reset();
753
+ this.onClear.emit();
754
+ }
755
+ searchPrepare(term) {
756
+ if (term.query != '') {
757
+ this.search(term.query);
758
+ }
759
+ else {
760
+ this.searchedData = [];
761
+ this.ngControl.reset();
762
+ this.onClear.emit();
763
+ }
764
+ }
765
+ async search(searchTerm) {
766
+ this.onSearch.emit(searchTerm);
767
+ this.cdr.markForCheck();
768
+ }
769
+ writeValue(obj) {
770
+ if (obj) {
771
+ this.cdr.markForCheck();
772
+ }
773
+ }
774
+ registerOnChange(fn) {
775
+ if (this.ngControl.value) {
776
+ this.cdr.markForCheck();
777
+ }
778
+ }
779
+ registerOnTouched(fn) { }
780
+ setDisabledState(isDisabled) {
781
+ this.disabled = isDisabled;
782
+ }
783
+ ngOnInit() {
784
+ if (this.ngControl.control?.value == '' && this.formTemplate.default != undefined) {
785
+ this.ngControl.control?.setValue(this.formTemplate.default);
786
+ this.cdr.markForCheck();
787
+ }
788
+ }
789
+ ngOnDestroy() {
790
+ this.ngControl.control?.disable();
791
+ }
792
+ ngOnChanges(changes) {
793
+ this.cdr.markForCheck();
794
+ }
754
795
  }
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 });
796
+ 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 });
797
+ 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
798
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, decorators: [{
758
799
  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
- }] });
800
+ 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" }]
801
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
802
+ type: Self
803
+ }, {
804
+ type: Optional
805
+ }] }]; }, propDecorators: { formTemplate: [{
806
+ type: Input
807
+ }], multiple: [{
808
+ type: Input
809
+ }], searchedData: [{
810
+ type: Input
811
+ }], onSearch: [{
812
+ type: Output
813
+ }], onSelect: [{
814
+ type: Output
815
+ }], onClear: [{
816
+ type: Output
817
+ }] } });
818
+
819
+ class OnshoreFormDatetimeItemComponent {
820
+ constructor(ngControl, cdr) {
821
+ this.ngControl = ngControl;
822
+ this.cdr = cdr;
823
+ this.OnshoreFormTemplateType = OnshoreFormTemplateType;
824
+ this.disabled = false;
825
+ this.ngControl.valueAccessor = this;
826
+ }
827
+ // ControlValueAccessor interface
828
+ writeValue(obj) { }
829
+ registerOnChange(fn) { }
830
+ registerOnTouched(fn) { }
831
+ setDisabledState(isDisabled) {
832
+ this.disabled = isDisabled;
833
+ }
834
+ selectDate(date) {
835
+ console.log(date);
836
+ }
837
+ selectTime(time) {
838
+ console.log(time);
839
+ }
840
+ ngOnInit() {
841
+ if (this.ngControl.control?.value !== true && this.ngControl.control?.value !== false && this.formTemplate.default != undefined) {
842
+ this.ngControl.control?.setValue(this.formTemplate.default);
843
+ this.cdr.markForCheck();
844
+ }
845
+ }
846
+ ngOnChanges(changes) {
847
+ this.cdr.markForCheck();
848
+ }
849
+ ngOnDestroy() {
850
+ this.ngControl.control?.disable();
851
+ }
852
+ }
853
+ 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 });
854
+ 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 });
855
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormDatetimeItemComponent, decorators: [{
856
+ type: Component,
857
+ 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" }]
858
+ }], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
859
+ type: Self
860
+ }, {
861
+ type: Optional
862
+ }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
863
+ type: Input
864
+ }] } });
761
865
 
762
866
  class OnshoreFormsModule {
763
867
  }
@@ -765,13 +869,14 @@ OnshoreFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
765
869
  OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, declarations: [OnshoreFormsComponent,
766
870
  OnshoreFormInputItemComponent,
767
871
  OnshoreFormSwitchItemComponent,
768
- OnshoreFormTextareaItemComponent,
769
872
  OnshoreFormValidationOutputComponent,
770
873
  OnshoreFormImageItemComponent,
771
874
  OnshoreFormDropdownItemComponent,
772
875
  OnshoreFormColorpickerItemComponent,
773
876
  OnshoreFormCheckboxItemComponent,
774
- OnshoreFormAutocompleteItemComponent], imports: [CommonModule,
877
+ OnshoreFormAutocompleteItemComponent,
878
+ OnshoreFormItemContainer,
879
+ OnshoreFormDatetimeItemComponent], imports: [CommonModule,
775
880
  FormsModule,
776
881
  ReactiveFormsModule,
777
882
  ButtonModule,
@@ -786,16 +891,20 @@ OnshoreFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
786
891
  InputSwitchModule,
787
892
  InputTextModule,
788
893
  InputTextareaModule,
789
- DialogModule], exports: [OnshoreFormsComponent,
894
+ DialogModule,
895
+ SelectButtonModule,
896
+ ToggleButtonModule,
897
+ CalendarModule], exports: [OnshoreFormsComponent,
790
898
  OnshoreFormInputItemComponent,
791
899
  OnshoreFormSwitchItemComponent,
792
- OnshoreFormTextareaItemComponent,
793
900
  OnshoreFormValidationOutputComponent,
794
901
  OnshoreFormImageItemComponent,
795
902
  OnshoreFormDropdownItemComponent,
796
903
  OnshoreFormColorpickerItemComponent,
797
904
  OnshoreFormCheckboxItemComponent,
798
- OnshoreFormAutocompleteItemComponent] });
905
+ OnshoreFormAutocompleteItemComponent,
906
+ OnshoreFormItemContainer,
907
+ OnshoreFormDatetimeItemComponent] });
799
908
  OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, providers: [
800
909
  OnshoreFormsService
801
910
  ], imports: [CommonModule,
@@ -813,7 +922,10 @@ OnshoreFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
813
922
  InputSwitchModule,
814
923
  InputTextModule,
815
924
  InputTextareaModule,
816
- DialogModule] });
925
+ DialogModule,
926
+ SelectButtonModule,
927
+ ToggleButtonModule,
928
+ CalendarModule] });
817
929
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormsModule, decorators: [{
818
930
  type: NgModule,
819
931
  args: [{
@@ -821,13 +933,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
821
933
  OnshoreFormsComponent,
822
934
  OnshoreFormInputItemComponent,
823
935
  OnshoreFormSwitchItemComponent,
824
- OnshoreFormTextareaItemComponent,
825
936
  OnshoreFormValidationOutputComponent,
826
937
  OnshoreFormImageItemComponent,
827
938
  OnshoreFormDropdownItemComponent,
828
939
  OnshoreFormColorpickerItemComponent,
829
940
  OnshoreFormCheckboxItemComponent,
830
- OnshoreFormAutocompleteItemComponent
941
+ OnshoreFormAutocompleteItemComponent,
942
+ OnshoreFormItemContainer,
943
+ OnshoreFormDatetimeItemComponent
831
944
  ],
832
945
  imports: [
833
946
  CommonModule,
@@ -845,19 +958,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
845
958
  InputSwitchModule,
846
959
  InputTextModule,
847
960
  InputTextareaModule,
848
- DialogModule
961
+ DialogModule,
962
+ SelectButtonModule,
963
+ ToggleButtonModule,
964
+ CalendarModule
849
965
  ],
850
966
  exports: [
851
967
  OnshoreFormsComponent,
852
968
  OnshoreFormInputItemComponent,
853
969
  OnshoreFormSwitchItemComponent,
854
- OnshoreFormTextareaItemComponent,
855
970
  OnshoreFormValidationOutputComponent,
856
971
  OnshoreFormImageItemComponent,
857
972
  OnshoreFormDropdownItemComponent,
858
973
  OnshoreFormColorpickerItemComponent,
859
974
  OnshoreFormCheckboxItemComponent,
860
- OnshoreFormAutocompleteItemComponent
975
+ OnshoreFormAutocompleteItemComponent,
976
+ OnshoreFormItemContainer,
977
+ OnshoreFormDatetimeItemComponent
861
978
  ],
862
979
  providers: [
863
980
  OnshoreFormsService
@@ -873,5 +990,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
873
990
  * Generated bundle index. Do not edit.
874
991
  */
875
992
 
876
- export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormSwitchItemComponent, OnshoreFormTemplateType, OnshoreFormTextareaItemComponent, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError };
993
+ export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsComponent, OnshoreFormsModule, OnshoreFormsService, OnshoreImageError };
877
994
  //# sourceMappingURL=onshore-forms.mjs.map