onshore-forms 1.1.1 → 1.1.2

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 (4) hide show
  1. package/fesm2022/onshore-forms.mjs +69 -62
  2. package/fesm2022/onshore-forms.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/onshore-forms.d.ts +8 -6
package/fesm2022/onshore-forms.mjs CHANGED
@@ -1,57 +1,57 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, Input, ChangeDetectionStrategy, Component, EventEmitter, HostListener, ViewChild, Output, Self, Optional } from '@angular/core';
3
- import * as i1$1 from '@angular/forms';
3
+ import * as i1$2 from '@angular/forms';
4
4
  import { FormGroup, FormArray, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
5
5
  import { Subject, debounceTime, distinctUntilChanged, skip } from 'rxjs';
6
- import * as i2 from '@angular/common';
6
+ import * as i1$1 from '@angular/common';
7
7
  import { CommonModule } from '@angular/common';
8
8
  import * as i1 from '@ngx-translate/core';
9
9
  import { TranslateModule } from '@ngx-translate/core';
10
- import * as i2$1 from 'primeng/togglebutton';
10
+ import * as i2 from 'primeng/togglebutton';
11
11
  import { ToggleButtonModule } from 'primeng/togglebutton';
12
12
  import * as i3 from 'primeng/tooltip';
13
13
  import { TooltipModule } from 'primeng/tooltip';
14
- import * as i2$2 from 'primeng/button';
14
+ import * as i2$1 from 'primeng/button';
15
15
  import { ButtonModule, Button } from 'primeng/button';
16
- import * as i3$1 from 'primeng/autocomplete';
16
+ import * as i2$2 from 'primeng/autocomplete';
17
17
  import { AutoCompleteModule } from 'primeng/autocomplete';
18
- import * as i6 from 'primeng/fluid';
18
+ import * as i4 from 'primeng/fluid';
19
19
  import { FluidModule } from 'primeng/fluid';
20
- import * as i4 from 'primeng/multiselect';
20
+ import * as i4$1 from 'primeng/multiselect';
21
21
  import { MultiSelect, MultiSelectModule } from 'primeng/multiselect';
22
- import * as i5 from 'primeng/chip';
22
+ import * as i3$5 from 'primeng/chip';
23
23
  import { ChipModule } from 'primeng/chip';
24
- import * as i3$2 from 'primeng/api';
24
+ import * as i3$1 from 'primeng/api';
25
25
  import * as i2$3 from 'primeng/checkbox';
26
26
  import { CheckboxModule } from 'primeng/checkbox';
27
27
  import * as i2$4 from 'primeng/inputtext';
28
28
  import { InputTextModule, InputText } from 'primeng/inputtext';
29
- import * as i3$3 from 'primeng/colorpicker';
29
+ import * as i3$2 from 'primeng/colorpicker';
30
30
  import { ColorPickerModule } from 'primeng/colorpicker';
31
31
  import { updatePreset } from '@primeuix/themes';
32
- import * as i3$4 from 'primeng/select';
32
+ import * as i3$3 from 'primeng/select';
33
33
  import { SelectModule } from 'primeng/select';
34
- import * as i5$1 from 'primeng/dialog';
34
+ import * as i5 from 'primeng/dialog';
35
35
  import { DialogModule } from 'primeng/dialog';
36
36
  import { ImageCropperComponent } from 'ngx-image-cropper';
37
- import * as i4$1 from 'ngx-webcam';
37
+ import * as i4$2 from 'ngx-webcam';
38
38
  import { WebcamModule } from 'ngx-webcam';
39
- import * as i4$2 from 'primeng/textarea';
39
+ import * as i4$3 from 'primeng/textarea';
40
40
  import { TextareaModule } from 'primeng/textarea';
41
- import * as i6$1 from 'primeng/inputnumber';
41
+ import * as i6 from 'primeng/inputnumber';
42
42
  import { InputNumberModule } from 'primeng/inputnumber';
43
43
  import * as i7 from 'primeng/inputgroup';
44
44
  import { InputGroupModule } from 'primeng/inputgroup';
45
45
  import * as i8 from 'primeng/inputgroupaddon';
46
46
  import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
47
- import * as i3$5 from 'primeng/keyfilter';
47
+ import * as i3$4 from 'primeng/keyfilter';
48
48
  import { KeyFilterModule } from 'primeng/keyfilter';
49
49
  import * as i2$5 from 'primeng/toggleswitch';
50
50
  import { ToggleSwitchModule } from 'primeng/toggleswitch';
51
51
  import { DatePicker } from 'primeng/datepicker';
52
- import * as i5$2 from 'primeng/inputotp';
52
+ import * as i5$1 from 'primeng/inputotp';
53
53
  import { InputOtpModule } from 'primeng/inputotp';
54
- import * as i4$3 from 'primeng/popover';
54
+ import * as i4$4 from 'primeng/popover';
55
55
  import { PopoverModule } from 'primeng/popover';
56
56
 
57
57
  var OnshoreFormTemplateType;
@@ -161,7 +161,6 @@ class OnshoreFormsService {
161
161
  return formGroupOrArray?.get(name);
162
162
  }
163
163
  formArray(name) {
164
- console.log("formArray", name, this._form?.get(name));
165
164
  return this._form?.get(name);
166
165
  }
167
166
  formGroup(form, name) {
@@ -345,7 +344,7 @@ class OnshoreFormValidationOutputComponent {
345
344
  this.translate = translate;
346
345
  }
347
346
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormValidationOutputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
348
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormValidationOutputComponent, isStandalone: true, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\"\n *ngIf=\"validationTranslation\"\n [innerHTML]=\"validationTranslation\">\n</small>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
347
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormValidationOutputComponent, isStandalone: true, selector: "onshore-form-validation-output", inputs: { validationErrors: "validationErrors", validationItems: "validationItems" }, usesOnChanges: true, ngImport: i0, template: "<small [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\"\n *ngIf=\"validationTranslation\"\n [innerHTML]=\"validationTranslation\">\n</small>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
349
348
  }
350
349
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormValidationOutputComponent, decorators: [{
351
350
  type: Component,
@@ -460,7 +459,7 @@ class OnshoreFormItemContainer {
460
459
  this.cdr = cdr;
461
460
  }
462
461
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
463
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormItemContainer, isStandalone: true, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick", lockIsChanged: "lockIsChanged" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class.mb-4]=\"!formTemplate.noGap\" #formContainer>\n <div class=\"flex w-full\"\n [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n [hidden]=\"!formTemplate.label || formTemplate.label == ''\"\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px; max-height: 36px'\">\n\n <span *ngIf=\"formTemplate.label && formTemplate.label != ''\" [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.align-self-center]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\"\n [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\">*</small>\n </span>\n\n <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" [tooltipPosition]=\"'left'\" appendTo=\"body\"><i class=\"fa fa-circle-question text-color\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"lockChanged($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n onLabel=\"\"\n offLabel=\"\"\n class=\"mr-2\"\n [disabled]=\"!formTemplate.enabled\">\n </p-toggleButton>\n\n <div class=\"w-full overflow-hidden align-self-center\">\n <ng-content></ng-content>\n </div>\n\n <button *ngIf=\"formTemplate.actionButton\"\n class=\"ml-2 onshore-button-light\"\n [style]=\"{'height': '37px', 'min-width': '38px'}\"\n pButton\n [disabled]=\"actionButtonDisabled\"\n [icon]=\"formTemplate.actionButtonIcon\"\n (click)=\"actionButtonClick.emit()\">\n </button>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [tooltipPosition]=\"'left'\" [escape]=\"false\"><i class=\"fa fa-circle-question primary-color\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched || ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 60 : 0)) + 'px' : (formTemplate.locked ? 60 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\">\n </onshore-form-validation-output>\n </div>\n\n <div *ngIf=\"formTemplate.description\" class=\"mt-2\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 60 : 0)) + 'px' : (formTemplate.locked ? 60 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n <small class=\"text-color\"><i class=\"fa fa-info-circle primary-color\"></i> {{formTemplate.description}}</small>\n </div>\n\n</div>\n", styles: ["::ng-deep .p-togglebutton-content{gap:0!important;width:20px;padding-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "validationItems"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i2$1.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
462
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormItemContainer, isStandalone: true, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick", lockIsChanged: "lockIsChanged" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class.mb-4]=\"!formTemplate.noGap\" #formContainer>\n <div class=\"flex w-full\"\n [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n [hidden]=\"!formTemplate.label || formTemplate.label == ''\"\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px; max-height: 36px'\">\n\n <span *ngIf=\"formTemplate.label && formTemplate.label != ''\" [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.align-self-center]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\"\n [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\">*</small>\n </span>\n\n <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" [tooltipPosition]=\"'left'\" appendTo=\"body\"><i class=\"fa fa-circle-question text-color\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"lockChanged($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n onLabel=\"\"\n offLabel=\"\"\n class=\"mr-2\"\n [disabled]=\"!formTemplate.enabled\">\n </p-toggleButton>\n\n <div class=\"w-full overflow-hidden align-self-center\">\n <ng-content></ng-content>\n </div>\n\n <button *ngIf=\"formTemplate.actionButton\"\n class=\"ml-2 onshore-button-light\"\n [style]=\"{'height': '37px', 'min-width': '38px'}\"\n pButton\n [disabled]=\"actionButtonDisabled\"\n [icon]=\"formTemplate.actionButtonIcon\"\n (click)=\"actionButtonClick.emit()\">\n </button>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [tooltipPosition]=\"'left'\" [escape]=\"false\"><i class=\"fa fa-circle-question primary-color\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched || ngControl.control.dirty\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 60 : 0)) + 'px' : (formTemplate.locked ? 60 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\">\n </onshore-form-validation-output>\n </div>\n\n <div *ngIf=\"formTemplate.description\" class=\"mt-2\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? (formLabel?.clientWidth + (formTemplate.locked ? 60 : 0)) + 'px' : (formTemplate.locked ? 60 : 0) + 'px', 'margin-right': formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal ? '16px' : '0px'}\">\n <small class=\"text-color\"><i class=\"fa fa-info-circle primary-color\"></i> {{formTemplate.description}}</small>\n </div>\n\n</div>\n", styles: ["::ng-deep .p-togglebutton-content{gap:0!important;width:20px;padding-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "validationItems"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i2.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
464
463
  }
465
464
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
466
465
  type: Component,
@@ -491,9 +490,12 @@ class OnshoreFormAutocompleteItemComponent {
491
490
  showClear = false;
492
491
  searchedData = [];
493
492
  actionButtonDisabled = false;
494
- optionLabel = 'value';
495
- optionValue = 'data';
496
- dataKey = 'value';
493
+ optionLabel = '';
494
+ optionValue = '';
495
+ dataKey = '_id';
496
+ secondOptionLabel = '';
497
+ thirdOptionLabel = '';
498
+ optionLabelDivider = '-';
497
499
  onSearch = new EventEmitter();
498
500
  onSelect = new EventEmitter();
499
501
  actionButtonClick = new EventEmitter();
@@ -507,9 +509,10 @@ class OnshoreFormAutocompleteItemComponent {
507
509
  this.ngControl.reset();
508
510
  }
509
511
  }
510
- unselect(selectedItem = {}) {
512
+ unselect(event) {
513
+ console.log("unselect", event);
511
514
  // @ts-ignore
512
- const updatedItems = this.ngControl.value.filter((item) => selectedItem[this.dataKey] !== item[this.dataKey]) || [];
515
+ const updatedItems = this.ngControl.value.filter((item) => event.value[this.dataKey] !== item[this.dataKey]) || [];
513
516
  this.ngControl.control?.setValue(updatedItems);
514
517
  this.ngControl?.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
515
518
  this.ngControl?.control?.markAsDirty();
@@ -559,13 +562,13 @@ class OnshoreFormAutocompleteItemComponent {
559
562
  this.ngControl = ngControl;
560
563
  this.ngControl.valueAccessor = this;
561
564
  }
562
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
563
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormAutocompleteItemComponent, isStandalone: true, selector: "onshore-form-autocomplete-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear", searchedData: "searchedData", actionButtonDisabled: "actionButtonDisabled", optionLabel: "optionLabel", optionValue: "optionValue", dataKey: "dataKey" }, outputs: { onSearch: "onSearch", onSelect: "onSelect", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n appendTo=\"body\"\n [formControl]=\"formControl\"\n [suggestions]=\"searchedData\"\n (completeMethod)=\"searchPrepare($event)\"\n [disabled]=\"disabled\"\n [showClear]=\"showClear\"\n [minLength]=\"2\"\n [multiple]=\"multiple\"\n [delay]=\"1000\"\n [unique]=\"true\"\n [dataKey]=\"dataKey\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n class=\"w-full\">\n <ng-template let-selectedItem pTemplate=\"selectedItem\">\n <p-chip [label]=\"findValue(selectedItem, optionLabel)\" [removable]=\"true\" (onRemove)=\"unselect(selectedItem)\"/>\n </ng-template>\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 </p-fluid>\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i3$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i5.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i6.Fluid, selector: "p-fluid" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
565
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
566
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: OnshoreFormAutocompleteItemComponent, isStandalone: true, selector: "onshore-form-autocomplete-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear", searchedData: "searchedData", actionButtonDisabled: "actionButtonDisabled", optionLabel: "optionLabel", optionValue: "optionValue", dataKey: "dataKey", secondOptionLabel: "secondOptionLabel", thirdOptionLabel: "thirdOptionLabel", optionLabelDivider: "optionLabelDivider" }, outputs: { onSearch: "onSearch", onSelect: "onSelect", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n appendTo=\"body\"\n [formControl]=\"formControl\"\n [suggestions]=\"searchedData\"\n (completeMethod)=\"searchPrepare($event)\"\n [disabled]=\"disabled\"\n [showClear]=\"showClear\"\n [minLength]=\"2\"\n [multiple]=\"multiple\"\n [delay]=\"1000\"\n [unique]=\"true\"\n [dataKey]=\"dataKey\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n (onUnselect)=\"unselect($event)\"\n class=\"w-full\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex gap-1\">\n @if (optionLabel) {\n <span>{{ findValue(item, optionLabel) }}</span>\n } @else {\n <span>{{ item }}</span>\n }\n @if (secondOptionLabel) {\n @if (optionLabelDivider) {\n <span>{{optionLabelDivider}}</span>\n }\n <span>{{ findValue(item, secondOptionLabel) }}</span>\n }\n @if (thirdOptionLabel) {\n @if (optionLabelDivider) {\n <span>{{optionLabelDivider}}</span>\n }\n <span>{{ findValue(item, thirdOptionLabel) }}</span>\n }\n </div>\n </ng-template>\n </p-autoComplete>\n </p-fluid>\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i4.Fluid, selector: "p-fluid" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
564
567
  }
565
568
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, decorators: [{
566
569
  type: Component,
567
- args: [{ selector: 'onshore-form-autocomplete-item', imports: [CommonModule, OnshoreFormItemContainer, AutoCompleteModule, ChipModule, FormsModule, ReactiveFormsModule, FluidModule, MultiSelect], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n appendTo=\"body\"\n [formControl]=\"formControl\"\n [suggestions]=\"searchedData\"\n (completeMethod)=\"searchPrepare($event)\"\n [disabled]=\"disabled\"\n [showClear]=\"showClear\"\n [minLength]=\"2\"\n [multiple]=\"multiple\"\n [delay]=\"1000\"\n [unique]=\"true\"\n [dataKey]=\"dataKey\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n class=\"w-full\">\n <ng-template let-selectedItem pTemplate=\"selectedItem\">\n <p-chip [label]=\"findValue(selectedItem, optionLabel)\" [removable]=\"true\" (onRemove)=\"unselect(selectedItem)\"/>\n </ng-template>\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 </p-fluid>\n</onshore-form-item-container>\n" }]
568
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
570
+ args: [{ selector: 'onshore-form-autocomplete-item', imports: [CommonModule, OnshoreFormItemContainer, AutoCompleteModule, ChipModule, FormsModule, ReactiveFormsModule, FluidModule, MultiSelect], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-autoComplete [placeholder]=\"formTemplate.placeholder\"\n appendTo=\"body\"\n [formControl]=\"formControl\"\n [suggestions]=\"searchedData\"\n (completeMethod)=\"searchPrepare($event)\"\n [disabled]=\"disabled\"\n [showClear]=\"showClear\"\n [minLength]=\"2\"\n [multiple]=\"multiple\"\n [delay]=\"1000\"\n [unique]=\"true\"\n [dataKey]=\"dataKey\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n (onUnselect)=\"unselect($event)\"\n class=\"w-full\">\n <ng-template let-item pTemplate=\"item\">\n <div class=\"flex gap-1\">\n @if (optionLabel) {\n <span>{{ findValue(item, optionLabel) }}</span>\n } @else {\n <span>{{ item }}</span>\n }\n @if (secondOptionLabel) {\n @if (optionLabelDivider) {\n <span>{{optionLabelDivider}}</span>\n }\n <span>{{ findValue(item, secondOptionLabel) }}</span>\n }\n @if (thirdOptionLabel) {\n @if (optionLabelDivider) {\n <span>{{optionLabelDivider}}</span>\n }\n <span>{{ findValue(item, thirdOptionLabel) }}</span>\n }\n </div>\n </ng-template>\n </p-autoComplete>\n </p-fluid>\n</onshore-form-item-container>\n" }]
571
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
569
572
  type: Self
570
573
  }, {
571
574
  type: Optional
@@ -585,6 +588,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
585
588
  type: Input
586
589
  }], dataKey: [{
587
590
  type: Input
591
+ }], secondOptionLabel: [{
592
+ type: Input
593
+ }], thirdOptionLabel: [{
594
+ type: Input
595
+ }], optionLabelDivider: [{
596
+ type: Input
588
597
  }], onSearch: [{
589
598
  type: Output
590
599
  }], onSelect: [{
@@ -630,13 +639,13 @@ class OnshoreFormCheckboxItemComponent {
630
639
  this.cdr = cdr;
631
640
  this.ngControl.valueAccessor = this;
632
641
  }
633
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormCheckboxItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
634
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormCheckboxItemComponent, isStandalone: true, selector: "onshore-form-checkbox-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n\n <div class=\"p-field-checkbox flex\">\n <p-checkbox\n class=\"align-self-start mt-1\"\n [name]=\"formTemplate.name\"\n [formControl]=\"formControl\"\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 text-color\"\n [for]=\"formTemplate.name\">\n {{formTemplate.hint}}\n </label>\n </div>\n\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
642
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormCheckboxItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
643
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormCheckboxItemComponent, isStandalone: true, selector: "onshore-form-checkbox-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n\n <div class=\"p-field-checkbox flex\">\n <p-checkbox\n class=\"align-self-start mt-1\"\n [name]=\"formTemplate.name\"\n [formControl]=\"formControl\"\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 text-color\"\n [for]=\"formTemplate.name\">\n {{formTemplate.hint}}\n </label>\n </div>\n\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
635
644
  }
636
645
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormCheckboxItemComponent, decorators: [{
637
646
  type: Component,
638
647
  args: [{ selector: 'onshore-form-checkbox-item', imports: [CommonModule, OnshoreFormItemContainer, CheckboxModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n\n <div class=\"p-field-checkbox flex\">\n <p-checkbox\n class=\"align-self-start mt-1\"\n [name]=\"formTemplate.name\"\n [formControl]=\"formControl\"\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 text-color\"\n [for]=\"formTemplate.name\">\n {{formTemplate.hint}}\n </label>\n </div>\n\n</onshore-form-item-container>\n" }]
639
- }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
648
+ }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
640
649
  type: Self
641
650
  }, {
642
651
  type: Optional
@@ -675,7 +684,6 @@ class OnshoreFormColorpickerItemComponent {
675
684
  return this.ngControl.control;
676
685
  }
677
686
  changeLayoutPreset() {
678
- console.log("changeLayoutPreset");
679
687
  updatePreset({
680
688
  components: {
681
689
  colorpicker: {
@@ -707,13 +715,13 @@ class OnshoreFormColorpickerItemComponent {
707
715
  this.ngControl.valueAccessor = this;
708
716
  this.changeLayoutPreset();
709
717
  }
710
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormColorpickerItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
711
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormColorpickerItemComponent, isStandalone: true, selector: "onshore-form-colorpicker-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <div class=\"flex w-full\">\n\n <input class=\"w-full mr-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [formControl]=\"formControl\"\n [disabled]=\"disabled\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n\n <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n format=\"hex\" [inline]=\"false\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [autoZIndex]=\"true\"\n (onChange)=\"changeColor()\">\n </p-colorPicker>\n </div>\n</onshore-form-item-container>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i3$3.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
718
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormColorpickerItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
719
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormColorpickerItemComponent, isStandalone: true, selector: "onshore-form-colorpicker-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <div class=\"flex w-full\">\n\n <input class=\"w-full mr-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [formControl]=\"formControl\"\n [disabled]=\"disabled\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n\n <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n format=\"hex\" [inline]=\"false\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [autoZIndex]=\"true\"\n (onChange)=\"changeColor()\">\n </p-colorPicker>\n </div>\n</onshore-form-item-container>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i3$2.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
712
720
  }
713
721
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormColorpickerItemComponent, decorators: [{
714
722
  type: Component,
715
723
  args: [{ selector: 'onshore-form-colorpicker-item', imports: [CommonModule, OnshoreFormItemContainer, InputTextModule, ColorPickerModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <div class=\"flex w-full\">\n\n <input class=\"w-full mr-2\"\n type=\"text\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [formControl]=\"formControl\"\n [disabled]=\"disabled\"\n pInputText\n [value]=\"ngControl.control.value\"\n (input)=\"changeInput($event)\"/>\n\n <p-colorPicker [(ngModel)]=\"colorPickerValue\"\n format=\"hex\" [inline]=\"false\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [autoZIndex]=\"true\"\n (onChange)=\"changeColor()\">\n </p-colorPicker>\n </div>\n</onshore-form-item-container>\n\n" }]
716
- }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
724
+ }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
717
725
  type: Self
718
726
  }, {
719
727
  type: Optional
@@ -734,7 +742,7 @@ class OnshoreInplaceInputComponent {
734
742
  this.cdr = cdr;
735
743
  }
736
744
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreInplaceInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
737
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreInplaceInputComponent, isStandalone: true, selector: "onshore-inplace-input", outputs: { created: "created" }, ngImport: i0, template: "<div class=\"p-1\">\n <p-button *ngIf=\"!inputVisible\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-plus\"\n [label]=\"'form.dropdownControl.addNewButton' | translate\"\n class=\"w-full\"\n (click)=\"inputVisible = true\">\n </p-button>\n <div *ngIf=\"inputVisible\" class=\"flex gap-2 align-items-center\">\n <input [(ngModel)]=\"inputText\"\n [placeholder]=\"'form.dropdownControl.addNewInputPlaceholder' | translate\"\n pInputText/>\n <p-button [icon]=\"'fa fa-plus'\" severity=\"secondary\" (click)=\"created.emit(inputText); inputVisible = false; inputText = ''\" />\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
745
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreInplaceInputComponent, isStandalone: true, selector: "onshore-inplace-input", outputs: { created: "created" }, ngImport: i0, template: "<div class=\"p-1\">\n <p-button *ngIf=\"!inputVisible\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-plus\"\n [label]=\"'form.dropdownControl.addNewButton' | translate\"\n class=\"w-full\"\n (click)=\"inputVisible = true\">\n </p-button>\n <div *ngIf=\"inputVisible\" class=\"flex gap-2 align-items-center\">\n <input [(ngModel)]=\"inputText\"\n [placeholder]=\"'form.dropdownControl.addNewInputPlaceholder' | translate\"\n pInputText/>\n <p-button [icon]=\"'fa fa-plus'\" severity=\"secondary\" (click)=\"created.emit(inputText); inputVisible = false; inputText = ''\" />\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
738
746
  }
739
747
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreInplaceInputComponent, decorators: [{
740
748
  type: Component,
@@ -816,13 +824,13 @@ class OnshoreFormDropdownItemComponent {
816
824
  this.ngControl.valueAccessor = this;
817
825
  }
818
826
  OnshoreFormTemplateType = OnshoreFormTemplateType;
819
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormDropdownItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
820
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormDropdownItemComponent, isStandalone: true, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear", group: "group", selectionLimit: "selectionLimit", minLength: "minLength", optionLabel: "optionLabel", optionValue: "optionValue", dataKey: "dataKey", optionGroupLabel: "optionGroupLabel", actionButtonDisabled: "actionButtonDisabled", createEnabled: "createEnabled", options: "options" }, outputs: { valueChange: "valueChange", actionButtonClick: "actionButtonClick", entryCreated: "entryCreated" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n\n <p-select *ngIf=\"!multiple\"\n class=\"w-full\"\n [options]=\"options\"\n [formControl]=\"formControl\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [dataKey]=\"dataKey\"\n [optionGroupLabel]=\"optionGroupLabel\"\n [group]=\"group\"\n [showClear]=\"showClear && formTemplate?.placeholder\"\n (onClear)=\"clearSelection()\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n <ng-template #footer>\n <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n </onshore-inplace-input>\n </div>\n </ng-template>\n </p-select>\n\n <p-multiSelect *ngIf=\"multiple\"\n class=\"w-full\"\n [options]=\"options\"\n [formControl]=\"formControl\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [showClear]=\"showClear\"\n [selectionLimit]=\"selectionLimit\"\n [minlength]=\"minLength\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [dataKey]=\"dataKey\"\n [optionGroupLabel]=\"optionGroupLabel\"\n [group]=\"group\"\n (onClear)=\"clearSelection()\"\n [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n <ng-template #footer>\n <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n </onshore-inplace-input>\n </div>\n </ng-template>\n </p-multiSelect>\n</onshore-form-item-container>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: OnshoreInplaceInputComponent, selector: "onshore-inplace-input", outputs: ["created"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
827
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormDropdownItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
828
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormDropdownItemComponent, isStandalone: true, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear", group: "group", selectionLimit: "selectionLimit", minLength: "minLength", optionLabel: "optionLabel", optionValue: "optionValue", dataKey: "dataKey", optionGroupLabel: "optionGroupLabel", actionButtonDisabled: "actionButtonDisabled", createEnabled: "createEnabled", options: "options" }, outputs: { valueChange: "valueChange", actionButtonClick: "actionButtonClick", entryCreated: "entryCreated" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n\n <p-select *ngIf=\"!multiple\"\n class=\"w-full\"\n [options]=\"options\"\n [formControl]=\"formControl\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [dataKey]=\"dataKey\"\n [optionGroupLabel]=\"optionGroupLabel\"\n [group]=\"group\"\n [showClear]=\"showClear && formTemplate?.placeholder\"\n (onClear)=\"clearSelection()\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n <ng-template #footer>\n <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n </onshore-inplace-input>\n </div>\n </ng-template>\n </p-select>\n\n <p-multiSelect *ngIf=\"multiple\"\n class=\"w-full\"\n [options]=\"options\"\n [formControl]=\"formControl\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [showClear]=\"showClear\"\n [selectionLimit]=\"selectionLimit\"\n [minlength]=\"minLength\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [dataKey]=\"dataKey\"\n [optionGroupLabel]=\"optionGroupLabel\"\n [group]=\"group\"\n (onClear)=\"clearSelection()\"\n [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n <ng-template #footer>\n <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n </onshore-inplace-input>\n </div>\n </ng-template>\n </p-multiSelect>\n</onshore-form-item-container>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: OnshoreInplaceInputComponent, selector: "onshore-inplace-input", outputs: ["created"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
821
829
  }
822
830
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormDropdownItemComponent, decorators: [{
823
831
  type: Component,
824
832
  args: [{ selector: 'onshore-form-dropdown-item', imports: [CommonModule, ButtonModule, OnshoreFormItemContainer, TranslateModule, SelectModule, MultiSelectModule, FormsModule, ReactiveFormsModule, DialogModule, OnshoreInplaceInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n\n <p-select *ngIf=\"!multiple\"\n class=\"w-full\"\n [options]=\"options\"\n [formControl]=\"formControl\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [dataKey]=\"dataKey\"\n [optionGroupLabel]=\"optionGroupLabel\"\n [group]=\"group\"\n [showClear]=\"showClear && formTemplate?.placeholder\"\n (onClear)=\"clearSelection()\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n <ng-template #footer>\n <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n </onshore-inplace-input>\n </div>\n </ng-template>\n </p-select>\n\n <p-multiSelect *ngIf=\"multiple\"\n class=\"w-full\"\n [options]=\"options\"\n [formControl]=\"formControl\"\n [name]=\"formTemplate?.name\"\n [placeholder]=\"formTemplate?.placeholder\"\n [disabled]=\"disabled\"\n [showClear]=\"showClear\"\n [selectionLimit]=\"selectionLimit\"\n [minlength]=\"minLength\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [dataKey]=\"dataKey\"\n [optionGroupLabel]=\"optionGroupLabel\"\n [group]=\"group\"\n (onClear)=\"clearSelection()\"\n [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n optionDisabled=\"disabled\"\n appendTo=\"body\">\n <ng-template #footer>\n <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n </onshore-inplace-input>\n </div>\n </ng-template>\n </p-multiSelect>\n</onshore-form-item-container>\n\n" }]
825
- }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
833
+ }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
826
834
  type: Self
827
835
  }, {
828
836
  type: Optional
@@ -878,7 +886,7 @@ class OnshoreImagePlaceholderComponent {
878
886
  }
879
887
  constructor() { }
880
888
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreImagePlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
881
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreImagePlaceholderComponent, isStandalone: true, selector: "onshore-image-placeholder", inputs: { placeholderIcon: "placeholderIcon", placeholderImage: "placeholderImage", image: "image", imageStyle: "imageStyle", placeholderStyle: "placeholderStyle", showLoader: "showLoader" }, ngImport: i0, template: "<div [hidden]=\"!imageLoaded || !image\">\n <img [style]=\"imageStyle\" [src]=\"image\" (load)=\"loadReady()\" (abort)=\"abort()\" />\n</div>\n\n<div *ngIf=\"!imageLoaded || !image\" class=\"flex justify-content-center align-items-center\" [style]=\"placeholderStyle\" [class.p-2]=\"placeholderIcon\">\n <i *ngIf=\"placeholderIcon\" [class]=\"'text-color fa ' + placeholderIcon\" [class.opacity-20]=\"showLoader && image\"></i>\n <img *ngIf=\"placeholderImage\" [src]=\"placeholderImage\" [class.opacity-20]=\"showLoader && image\" class=\"h-full\" />\n <i *ngIf=\"showLoader && image\" class=\"fas fa-circle-notch fa-spin fa-2x absolute\"></i>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
889
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreImagePlaceholderComponent, isStandalone: true, selector: "onshore-image-placeholder", inputs: { placeholderIcon: "placeholderIcon", placeholderImage: "placeholderImage", image: "image", imageStyle: "imageStyle", placeholderStyle: "placeholderStyle", showLoader: "showLoader" }, ngImport: i0, template: "<div [hidden]=\"!imageLoaded || !image\">\n <img [style]=\"imageStyle\" [src]=\"image\" (load)=\"loadReady()\" (abort)=\"abort()\" />\n</div>\n\n<div *ngIf=\"!imageLoaded || !image\" class=\"flex justify-content-center align-items-center\" [style]=\"placeholderStyle\" [class.p-2]=\"placeholderIcon\">\n <i *ngIf=\"placeholderIcon\" [class]=\"'text-color fa ' + placeholderIcon\" [class.opacity-20]=\"showLoader && image\"></i>\n <img *ngIf=\"placeholderImage\" [src]=\"placeholderImage\" [class.opacity-20]=\"showLoader && image\" class=\"h-full\" />\n <i *ngIf=\"showLoader && image\" class=\"fas fa-circle-notch fa-spin fa-2x absolute\"></i>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
882
890
  }
883
891
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreImagePlaceholderComponent, decorators: [{
884
892
  type: Component,
@@ -971,7 +979,7 @@ class OnshoreImageChooserComponent {
971
979
  this.cdr = cdr;
972
980
  }
973
981
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreImageChooserComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
974
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreImageChooserComponent, isStandalone: true, selector: "onshore-image-chooser", inputs: { imageSettings: "imageSettings" }, outputs: { choosen: "choosen", canceled: "canceled" }, ngImport: i0, template: "<div class=\"flex flex-column justify-content-center align-items-center w-full\">\n\n <div *ngIf=\"!image\" class=\"flex justify-content-center flex-column align-items-center w-full\">\n <div\n class=\"onshore-image-upload flex flex-column justify-content-between align-items-center rounded-lg px-4 pb-4 relative m-3\"\n [class.onshore-border-gray-3]=\"drag\"\n [class.onshore-border-danger]=\"imageError != imageErrorType.none\">\n <i class=\"fa fa-image fa-5x text-color\"></i>\n <small class=\"text-color mb-4\">{{'form.imageControl.dropImageLabel' | translate}}</small>\n\n <p-button [severity]=\"'primary'\"\n [label]=\"'form.imageControl.imageChooserFileButton' | translate\">\n </p-button>\n\n <input\n (change)=\"fileChange($event)\"\n *ngIf=\"!image\"\n accept=\"image/png, image/jpeg, image/webp\"\n class=\"absolute w-full h-full bottom-0 cursor-pointer\"\n style=\"opacity: 0\"\n type=\"file\"\n (dragenter)=\"drag = true\"\n (dragleave)=\"drag = false\"\n (dragend)=\"drag = false\"\n />\n </div>\n </div>\n\n <div class=\"flex flex-column relative align-items-center w-full\" *ngIf=\"image\">\n <image-cropper\n class=\"m-3\"\n [style]=\"'align-items: center; height: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + 'px'\"\n [class.onshore-cropper-circle]=\"this.imageSettings.circleCropper\"\n (imageCropped)=\"imageCropped($event)\"\n [imageBase64]=\"image\"\n [imageQuality]=\"this.imageSettings.imageQuality\"\n [alignImage]=\"this.imageSettings.alignImage\"\n [backgroundColor]=\"this.imageSettings.backgroundColor\"\n [containWithinAspectRatio]=\"this.imageSettings.containWithinAspectRatio\"\n [format]=\"this.imageSettings.format\"\n [aspectRatio]=\"this.imageSettings.aspectRatio\"\n [resizeToHeight]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageHeight * this.imageSettings.aspectRatio\">\n </image-cropper>\n </div>\n\n <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center\"\n [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\">\n <small *ngIf=\"imageError == imageErrorType.ratio\">{{'form.imageControl.imageErrorRatio' | translate: {resizeToWidth: this.imageSettings.imageWidth, resizeToHeight: this.imageSettings.imageHeight} }}</small>\n <small *ngIf=\"imageError == imageErrorType.fileType\">{{'form.imageControl.imageErrorFileType' | translate}}</small>\n <small *ngIf=\"imageError == imageErrorType.size\">{{'form.imageControl.imageErrorSize' | translate}}</small>\n </div>\n</div>\n\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center mt-2 gap-2\">\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n (click)=\"clear(); canceled.emit(true)\">\n </p-button>\n\n <p-button [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n icon=\"fa fa-check\"\n [disabled]=\"!image\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$2.Footer, selector: "p-footer" }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
982
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreImageChooserComponent, isStandalone: true, selector: "onshore-image-chooser", inputs: { imageSettings: "imageSettings" }, outputs: { choosen: "choosen", canceled: "canceled" }, ngImport: i0, template: "<div class=\"flex flex-column justify-content-center align-items-center w-full\">\n\n <div *ngIf=\"!image\" class=\"flex justify-content-center flex-column align-items-center w-full\">\n <div\n class=\"onshore-image-upload flex flex-column justify-content-between align-items-center rounded-lg px-4 pb-4 relative m-3\"\n [class.onshore-border-gray-3]=\"drag\"\n [class.onshore-border-danger]=\"imageError != imageErrorType.none\">\n <i class=\"fa fa-image fa-5x text-color\"></i>\n <small class=\"text-color mb-4\">{{'form.imageControl.dropImageLabel' | translate}}</small>\n\n <p-button [severity]=\"'primary'\"\n [label]=\"'form.imageControl.imageChooserFileButton' | translate\">\n </p-button>\n\n <input\n (change)=\"fileChange($event)\"\n *ngIf=\"!image\"\n accept=\"image/png, image/jpeg, image/webp\"\n class=\"absolute w-full h-full bottom-0 cursor-pointer\"\n style=\"opacity: 0\"\n type=\"file\"\n (dragenter)=\"drag = true\"\n (dragleave)=\"drag = false\"\n (dragend)=\"drag = false\"\n />\n </div>\n </div>\n\n <div class=\"flex flex-column relative align-items-center w-full\" *ngIf=\"image\">\n <image-cropper\n class=\"m-3\"\n [style]=\"'align-items: center; height: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + 'px'\"\n [class.onshore-cropper-circle]=\"this.imageSettings.circleCropper\"\n (imageCropped)=\"imageCropped($event)\"\n [imageBase64]=\"image\"\n [imageQuality]=\"this.imageSettings.imageQuality\"\n [alignImage]=\"this.imageSettings.alignImage\"\n [backgroundColor]=\"this.imageSettings.backgroundColor\"\n [containWithinAspectRatio]=\"this.imageSettings.containWithinAspectRatio\"\n [format]=\"this.imageSettings.format\"\n [aspectRatio]=\"this.imageSettings.aspectRatio\"\n [resizeToHeight]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageHeight * this.imageSettings.aspectRatio\">\n </image-cropper>\n </div>\n\n <div *ngIf=\"imageError\"class=\"pb-2 text-wrap text-center\"\n [style]=\"{color: 'var(--inputtext-invalid-placeholder-color)' }\">\n <small *ngIf=\"imageError == imageErrorType.ratio\">{{'form.imageControl.imageErrorRatio' | translate: {resizeToWidth: this.imageSettings.imageWidth, resizeToHeight: this.imageSettings.imageHeight} }}</small>\n <small *ngIf=\"imageError == imageErrorType.fileType\">{{'form.imageControl.imageErrorFileType' | translate}}</small>\n <small *ngIf=\"imageError == imageErrorType.size\">{{'form.imageControl.imageErrorSize' | translate}}</small>\n </div>\n</div>\n\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center mt-2 gap-2\">\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [label]=\"'form.imageControl.imageChooserCancelButton' | translate\"\n (click)=\"clear(); canceled.emit(true)\">\n </p-button>\n\n <p-button [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'form.imageControl.imageChooserSelectButton' | translate\"\n icon=\"fa fa-check\"\n [disabled]=\"!image\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Footer, selector: "p-footer" }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
975
983
  }
976
984
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreImageChooserComponent, decorators: [{
977
985
  type: Component,
@@ -1024,7 +1032,7 @@ class WebcamComponent {
1024
1032
  this.cdr = cdr;
1025
1033
  }
1026
1034
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WebcamComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1027
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: WebcamComponent, isStandalone: true, selector: "onshore-webcam", inputs: { imageSettings: "imageSettings" }, outputs: { shot: "shot", canceled: "canceled" }, ngImport: i0, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\">\n <webcam *ngIf=\"!image || image == ''\"\n [mirrorImage]=\"'never'\"\n [height]=\"imageSettings.webcamWidth * this.imageSettings.aspectRatio\"\n [width]=\"imageSettings.webcamHeight * this.imageSettings.aspectRatio\"\n [allowCameraSwitch]=\"true\"\n [trigger]=\"triggerObservable\"\n [imageQuality]=\"imageSettings.imageQuality / 100\"\n (imageCapture)=\"camImageShot($event)\">\n </webcam>\n\n <image-cropper *ngIf=\"image && image != ''\"\n class=\"m-3\" [style]=\"'height: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px'\"\n [class.onshore-cropper-circle]=\"imageSettings.circleCropper\"\n (imageCropped)=\"imageCropped($event)\"\n [imageBase64]=\"image\"\n [imageQuality]=\"imageSettings.imageQuality\"\n [alignImage]=\"imageSettings.alignImage\"\n [backgroundColor]=\"imageSettings?.backgroundColor\"\n [containWithinAspectRatio]=\"imageSettings?.containWithinAspectRatio\"\n [format]=\"imageSettings.format\"\n [aspectRatio]=\"imageSettings.aspectRatio\"\n [resizeToHeight]=\"imageSettings.imageHeight * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\">\n </image-cropper>\n</div>\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center gap-2 mt-2\">\n\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [label]=\"'global.cancel' | translate\"\n (click)=\"canceled.emit(true)\">\n </p-button>\n\n <p-button *ngIf=\"!image || image == ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'form.imageControl.webcamSmileButton' | translate\"\n icon=\"fa fa-laugh-wink\"\n (click)=\"triggerSnapshot()\">\n </p-button>\n\n <p-button *ngIf=\"image && image != ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'global.use' | translate\"\n icon=\"fa fa-check\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$2.Footer, selector: "p-footer" }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: WebcamModule }, { kind: "component", type: i4$1.WebcamComponent, selector: "webcam", inputs: ["width", "height", "videoOptions", "allowCameraSwitch", "mirrorImage", "captureImageData", "imageType", "imageQuality", "trigger", "switchCamera"], outputs: ["imageCapture", "initError", "imageClick", "cameraSwitched"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1035
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: WebcamComponent, isStandalone: true, selector: "onshore-webcam", inputs: { imageSettings: "imageSettings" }, outputs: { shot: "shot", canceled: "canceled" }, ngImport: i0, template: "<div class=\"flex w-full justify-content-center align-items-center overflow-hidden p-2\">\n <webcam *ngIf=\"!image || image == ''\"\n [mirrorImage]=\"'never'\"\n [height]=\"imageSettings.webcamWidth * this.imageSettings.aspectRatio\"\n [width]=\"imageSettings.webcamHeight * this.imageSettings.aspectRatio\"\n [allowCameraSwitch]=\"true\"\n [trigger]=\"triggerObservable\"\n [imageQuality]=\"imageSettings.imageQuality / 100\"\n (imageCapture)=\"camImageShot($event)\">\n </webcam>\n\n <image-cropper *ngIf=\"image && image != ''\"\n class=\"m-3\" [style]=\"'height: ' + (imageSettings.cropperPreviewWidth * this.imageSettings.aspectRatio) + 'px; width: ' + (imageSettings.cropperPreviewHeight * this.imageSettings.aspectRatio) + 'px'\"\n [class.onshore-cropper-circle]=\"imageSettings.circleCropper\"\n (imageCropped)=\"imageCropped($event)\"\n [imageBase64]=\"image\"\n [imageQuality]=\"imageSettings.imageQuality\"\n [alignImage]=\"imageSettings.alignImage\"\n [backgroundColor]=\"imageSettings?.backgroundColor\"\n [containWithinAspectRatio]=\"imageSettings?.containWithinAspectRatio\"\n [format]=\"imageSettings.format\"\n [aspectRatio]=\"imageSettings.aspectRatio\"\n [resizeToHeight]=\"imageSettings.imageHeight * this.imageSettings.aspectRatio\"\n [resizeToWidth]=\"this.imageSettings.imageWidth * this.imageSettings.aspectRatio\">\n </image-cropper>\n</div>\n\n<p-footer>\n <div class=\"flex justify-content-end align-items-center gap-2 mt-2\">\n\n <p-button [severity]=\"'secondary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n icon=\"fa fa-times\"\n [label]=\"'global.cancel' | translate\"\n (click)=\"canceled.emit(true)\">\n </p-button>\n\n <p-button *ngIf=\"!image || image == ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'form.imageControl.webcamSmileButton' | translate\"\n icon=\"fa fa-laugh-wink\"\n (click)=\"triggerSnapshot()\">\n </p-button>\n\n <p-button *ngIf=\"image && image != ''\"\n [severity]=\"'primary'\"\n [raised]=\"true\"\n [rounded]=\"true\"\n [label]=\"'global.use' | translate\"\n icon=\"fa fa-check\"\n (click)=\"imageCroppedReady()\">\n </p-button>\n </div>\n</p-footer>\n\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Footer, selector: "p-footer" }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "ngmodule", type: WebcamModule }, { kind: "component", type: i4$2.WebcamComponent, selector: "webcam", inputs: ["width", "height", "videoOptions", "allowCameraSwitch", "mirrorImage", "captureImageData", "imageType", "imageQuality", "trigger", "switchCamera"], outputs: ["imageCapture", "initError", "imageClick", "cameraSwitched"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1028
1036
  }
1029
1037
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WebcamComponent, decorators: [{
1030
1038
  type: Component,
@@ -1167,13 +1175,13 @@ class OnshoreFormImageItemComponent {
1167
1175
  this.ngControl = ngControl;
1168
1176
  this.ngControl.valueAccessor = this;
1169
1177
  }
1170
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
1171
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormImageItemComponent, isStandalone: true, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", imageSettings: "imageSettings", actionButtonDisabled: "actionButtonDisabled" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageReady: "imageReady", selectFromMedia: "selectFromMedia", isLoading: "isLoading" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n <onshore-image-placeholder\n class=\"w-full\"\n [image]=\"image\"\n [imageStyle]=\"'width: 100%; height: 100%'\"\n [placeholderIcon]=\"imageSettings.placeholderIcon\"\n [placeholderImage]=\"imageSettings.placeholderImage\"\n [placeholderStyle]=\"'width: 100%; height: 100%'\">\n </onshore-image-placeholder>\n </div>\n\n <div>\n <p-fluid class=\"flex flex-column\">\n <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-image\"\n [label]=\"'form.imageControl.uploadImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-camera\"\n [label]=\"'form.imageControl.webcamImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-photo-video\"\n [label]=\"'form.imageControl.mediaImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"selectFromMedia.emit()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.deleteEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-eraser\"\n [label]=\"'form.imageControl.removeImageButton' | translate\"\n (click)=\"removeImage()\"\n class=\"w-full\"\n [disabled]=\"!image || disabled\">\n </p-button>\n </p-fluid>\n </div>\n\n </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n <onshore-image-chooser\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [imageSettings]=\"imageSettings\">\n </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n <onshore-webcam\n *ngIf=\"webcamDialogVisible\"\n (shot)=\"getWebcamImage($event)\"\n (canceled)=\"webcamDialogVisible = false\"\n [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i6.Fluid, selector: "p-fluid" }, { kind: "component", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: ["placeholderIcon", "placeholderImage", "image", "imageStyle", "placeholderStyle", "showLoader"] }, { kind: "component", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: ["imageSettings"], outputs: ["choosen", "canceled"] }, { kind: "component", type: WebcamComponent, selector: "onshore-webcam", inputs: ["imageSettings"], outputs: ["shot", "canceled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1178
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
1179
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormImageItemComponent, isStandalone: true, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", imageSettings: "imageSettings", actionButtonDisabled: "actionButtonDisabled" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageReady: "imageReady", selectFromMedia: "selectFromMedia", isLoading: "isLoading" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n <onshore-image-placeholder\n class=\"w-full\"\n [image]=\"image\"\n [imageStyle]=\"'width: 100%; height: 100%'\"\n [placeholderIcon]=\"imageSettings.placeholderIcon\"\n [placeholderImage]=\"imageSettings.placeholderImage\"\n [placeholderStyle]=\"'width: 100%; height: 100%'\">\n </onshore-image-placeholder>\n </div>\n\n <div>\n <p-fluid class=\"flex flex-column\">\n <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-image\"\n [label]=\"'form.imageControl.uploadImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-camera\"\n [label]=\"'form.imageControl.webcamImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-photo-video\"\n [label]=\"'form.imageControl.mediaImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"selectFromMedia.emit()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.deleteEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-eraser\"\n [label]=\"'form.imageControl.removeImageButton' | translate\"\n (click)=\"removeImage()\"\n class=\"w-full\"\n [disabled]=\"!image || disabled\">\n </p-button>\n </p-fluid>\n </div>\n\n </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n <onshore-image-chooser\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [imageSettings]=\"imageSettings\">\n </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n <onshore-webcam\n *ngIf=\"webcamDialogVisible\"\n (shot)=\"getWebcamImage($event)\"\n (canceled)=\"webcamDialogVisible = false\"\n [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i4.Fluid, selector: "p-fluid" }, { kind: "component", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: ["placeholderIcon", "placeholderImage", "image", "imageStyle", "placeholderStyle", "showLoader"] }, { kind: "component", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: ["imageSettings"], outputs: ["choosen", "canceled"] }, { kind: "component", type: WebcamComponent, selector: "onshore-webcam", inputs: ["imageSettings"], outputs: ["shot", "canceled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1172
1180
  }
1173
1181
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
1174
1182
  type: Component,
1175
1183
  args: [{ selector: 'onshore-form-image-item', imports: [CommonModule, OnshoreFormItemContainer, FluidModule, OnshoreImagePlaceholderComponent, OnshoreImageChooserComponent, WebcamComponent, TranslateModule, ButtonModule, DialogModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n <onshore-image-placeholder\n class=\"w-full\"\n [image]=\"image\"\n [imageStyle]=\"'width: 100%; height: 100%'\"\n [placeholderIcon]=\"imageSettings.placeholderIcon\"\n [placeholderImage]=\"imageSettings.placeholderImage\"\n [placeholderStyle]=\"'width: 100%; height: 100%'\">\n </onshore-image-placeholder>\n </div>\n\n <div>\n <p-fluid class=\"flex flex-column\">\n <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-image\"\n [label]=\"'form.imageControl.uploadImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-camera\"\n [label]=\"'form.imageControl.webcamImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"webcamDialogVisible = true\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-photo-video\"\n [label]=\"'form.imageControl.mediaImageButton' | translate\"\n class=\"mb-2 w-full\"\n [disabled]=\"disabled\"\n (click)=\"selectFromMedia.emit()\">\n </p-button>\n\n <p-button *ngIf=\"imageSettings.deleteEnabled\"\n [severity]=\"'secondary'\"\n icon=\"fa fa-eraser\"\n [label]=\"'form.imageControl.removeImageButton' | translate\"\n (click)=\"removeImage()\"\n class=\"w-full\"\n [disabled]=\"!image || disabled\">\n </p-button>\n </p-fluid>\n </div>\n\n </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n <onshore-image-chooser\n (choosen)=\"getFileImage($event)\"\n (canceled)=\"imageChooserDialogVisible = false\"\n [imageSettings]=\"imageSettings\">\n </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n <onshore-webcam\n *ngIf=\"webcamDialogVisible\"\n (shot)=\"getWebcamImage($event)\"\n (canceled)=\"webcamDialogVisible = false\"\n [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n" }]
1176
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
1184
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
1177
1185
  type: Self
1178
1186
  }, {
1179
1187
  type: Optional
@@ -1218,7 +1226,6 @@ class OnshoreFormInputItemComponent {
1218
1226
  registerOnChange(fn) { }
1219
1227
  registerOnTouched(fn) { }
1220
1228
  setDisabledState(isDisabled) {
1221
- console.log("isDisabled", isDisabled);
1222
1229
  this.disabled = isDisabled;
1223
1230
  }
1224
1231
  ngOnInit() {
@@ -1247,13 +1254,13 @@ class OnshoreFormInputItemComponent {
1247
1254
  this.cdr = cdr;
1248
1255
  this.ngControl.valueAccessor = this;
1249
1256
  }
1250
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormInputItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1251
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormInputItemComponent, isStandalone: true, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", currency: "currency", mode: "mode", useGrouping: "useGrouping", actionButtonDisabled: "actionButtonDisabled", keyFilter: "keyFilter" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-inputgroup>\n\n <textarea *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [rows]=\"3\"\n [cols]=\"30\"\n pTextarea\n [autoResize]=\"true\"\n [formControl]=\"formControl\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"></textarea>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n [type]=\"formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"formControl\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"\n [pKeyFilter]=\"keyFilter\"/>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"formControl\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"/>\n\n <p-inputgroup-addon *ngIf=\"formTemplate.inputAddon\">\n <i [class]=\"formTemplate.inputAddon\"></i>\n </p-inputgroup-addon>\n\n <p-inputgroup-addon *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\" class=\"cursor-pointer\" (click)=\"passwordVisible = !passwordVisible\">\n <i [class]=\"passwordVisible ? 'fa fa-eye' : 'fa fa-eye-slash'\"></i>\n </p-inputgroup-addon>\n\n </p-inputgroup>\n\n <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [formControl]=\"formControl\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [step]=\"step ?? 1\"\n [min]=\"min\"\n [max]=\"max\"\n [showButtons]=\"true\"\n [mode]=\"mode\"\n [useGrouping]=\"useGrouping\"\n [currency]=\"currency\"\n style=\"min-width: 120px\"\n [buttonLayout]=\"formTemplate.inputNumberVertical ? 'vertical' : 'horizontal'\"\n spinnerMode=\"horizontal\"\n (onInput)=\"onNumberInput($event)\">\n <ng-template #incrementbuttonicon>\n <span class=\"fa fa-plus\"></span>\n </ng-template>\n <ng-template #decrementbuttonicon>\n <span class=\"fa fa-minus\"></span>\n </ng-template>\n </p-inputNumber>\n </p-fluid>\n\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i3$5.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i6$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i7.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i8.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i6.Fluid, selector: "p-fluid" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1257
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormInputItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1258
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormInputItemComponent, isStandalone: true, selector: "onshore-form-input-item", inputs: { formTemplate: "formTemplate", step: "step", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", currency: "currency", mode: "mode", useGrouping: "useGrouping", actionButtonDisabled: "actionButtonDisabled", keyFilter: "keyFilter" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-inputgroup>\n\n <textarea *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [rows]=\"3\"\n [cols]=\"30\"\n pTextarea\n [autoResize]=\"true\"\n [formControl]=\"formControl\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"></textarea>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n [type]=\"formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"formControl\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"\n [pKeyFilter]=\"keyFilter\"/>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"formControl\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"/>\n\n <p-inputgroup-addon *ngIf=\"formTemplate.inputAddon\">\n <i [class]=\"formTemplate.inputAddon\"></i>\n </p-inputgroup-addon>\n\n <p-inputgroup-addon *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\" class=\"cursor-pointer\" (click)=\"passwordVisible = !passwordVisible\">\n <i [class]=\"passwordVisible ? 'fa fa-eye' : 'fa fa-eye-slash'\"></i>\n </p-inputgroup-addon>\n\n </p-inputgroup>\n\n <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [formControl]=\"formControl\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [step]=\"step ?? 1\"\n [min]=\"min\"\n [max]=\"max\"\n [showButtons]=\"true\"\n [mode]=\"mode\"\n [useGrouping]=\"useGrouping\"\n [currency]=\"currency\"\n style=\"min-width: 120px\"\n [buttonLayout]=\"formTemplate.inputNumberVertical ? 'vertical' : 'horizontal'\"\n spinnerMode=\"horizontal\"\n (onInput)=\"onNumberInput($event)\">\n <ng-template #incrementbuttonicon>\n <span class=\"fa fa-plus\"></span>\n </ng-template>\n <ng-template #decrementbuttonicon>\n <span class=\"fa fa-minus\"></span>\n </ng-template>\n </p-inputNumber>\n </p-fluid>\n\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KeyFilterModule }, { kind: "directive", type: i3$4.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i7.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i8.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i4.Fluid, selector: "p-fluid" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1252
1259
  }
1253
1260
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
1254
1261
  type: Component,
1255
1262
  args: [{ selector: 'onshore-form-input-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, KeyFilterModule, TextareaModule, InputTextModule, InputNumberModule, FormsModule, ReactiveFormsModule, InputGroupModule, InputGroupAddonModule, ButtonModule, FluidModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-inputgroup>\n\n <textarea *ngIf=\"formTemplate.type == OnshoreFormTemplateType.textarea\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [rows]=\"3\"\n [cols]=\"30\"\n pTextarea\n [autoResize]=\"true\"\n [formControl]=\"formControl\"\n [class.p-invalid]=\"ngControl.control?.touched && ngControl.control?.invalid\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"></textarea>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.text || formTemplate.type == OnshoreFormTemplateType.email || formTemplate.type == OnshoreFormTemplateType.phone\"\n [type]=\"formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"formControl\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"\n [pKeyFilter]=\"keyFilter\"/>\n\n <input *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\"\n [type]=\"passwordVisible ? 'text' : formTemplate.type\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n pInputText\n [formControl]=\"formControl\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"/>\n\n <p-inputgroup-addon *ngIf=\"formTemplate.inputAddon\">\n <i [class]=\"formTemplate.inputAddon\"></i>\n </p-inputgroup-addon>\n\n <p-inputgroup-addon *ngIf=\"formTemplate.type == OnshoreFormTemplateType.password\" class=\"cursor-pointer\" (click)=\"passwordVisible = !passwordVisible\">\n <i [class]=\"passwordVisible ? 'fa fa-eye' : 'fa fa-eye-slash'\"></i>\n </p-inputgroup-addon>\n\n </p-inputgroup>\n\n <p-inputNumber *ngIf=\"formTemplate.type == OnshoreFormTemplateType.number\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [formControl]=\"formControl\"\n [autocomplete]=\"'prevent-template-' + formTemplate.name\"\n [step]=\"step ?? 1\"\n [min]=\"min\"\n [max]=\"max\"\n [showButtons]=\"true\"\n [mode]=\"mode\"\n [useGrouping]=\"useGrouping\"\n [currency]=\"currency\"\n style=\"min-width: 120px\"\n [buttonLayout]=\"formTemplate.inputNumberVertical ? 'vertical' : 'horizontal'\"\n spinnerMode=\"horizontal\"\n (onInput)=\"onNumberInput($event)\">\n <ng-template #incrementbuttonicon>\n <span class=\"fa fa-plus\"></span>\n </ng-template>\n <ng-template #decrementbuttonicon>\n <span class=\"fa fa-minus\"></span>\n </ng-template>\n </p-inputNumber>\n </p-fluid>\n\n</onshore-form-item-container>\n" }]
1256
- }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
1263
+ }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
1257
1264
  type: Self
1258
1265
  }, {
1259
1266
  type: Optional
@@ -1321,13 +1328,13 @@ class OnshoreFormSwitchItemComponent {
1321
1328
  this.cdr = cdr;
1322
1329
  this.ngControl.valueAccessor = this;
1323
1330
  }
1324
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormSwitchItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1325
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormSwitchItemComponent, isStandalone: true, selector: "onshore-form-switch-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { valueChange: "valueChange", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <div class=\"h-full align-items-center mt-1\">\n <p-toggleswitch [name]=\"formTemplate.name\"\n [formControl]=\"formControl\"\n [disabled]=\"disabled\"\n [inputId]=\"formTemplate.name\">\n </p-toggleswitch>\n </div>\n\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i2$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1331
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormSwitchItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1332
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormSwitchItemComponent, isStandalone: true, selector: "onshore-form-switch-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { valueChange: "valueChange", actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <div class=\"h-full align-items-center mt-1\">\n <p-toggleswitch [name]=\"formTemplate.name\"\n [formControl]=\"formControl\"\n [disabled]=\"disabled\"\n [inputId]=\"formTemplate.name\">\n </p-toggleswitch>\n </div>\n\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i2$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1326
1333
  }
1327
1334
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
1328
1335
  type: Component,
1329
1336
  args: [{ selector: 'onshore-form-switch-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, ToggleSwitchModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <div class=\"h-full align-items-center mt-1\">\n <p-toggleswitch [name]=\"formTemplate.name\"\n [formControl]=\"formControl\"\n [disabled]=\"disabled\"\n [inputId]=\"formTemplate.name\">\n </p-toggleswitch>\n </div>\n\n</onshore-form-item-container>\n" }]
1330
- }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
1337
+ }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
1331
1338
  type: Self
1332
1339
  }, {
1333
1340
  type: Optional
@@ -1379,13 +1386,13 @@ class OnshoreFormDatetimeItemComponent {
1379
1386
  this.cdr = cdr;
1380
1387
  this.ngControl.valueAccessor = this;
1381
1388
  }
1382
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormDatetimeItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1383
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormDatetimeItemComponent, isStandalone: true, selector: "onshore-form-datetime-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled", dateFormat: "dateFormat", hourFormat: "hourFormat", dataType: "dataType" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-datePicker class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [formControl]=\"formControl\"\n [dateFormat]=\"dateFormat\"\n [dataType]=\"dataType\"\n [hourFormat]=\"hourFormat\"\n [timeOnly]=\"formTemplate.type == OnshoreFormTemplateType.time\"\n [showTime]=\"formTemplate.type == OnshoreFormTemplateType.datetime\"\n [defaultDate]=\"formTemplate.default\"\n appendTo=\"body\">\n </p-datePicker>\n </p-fluid>\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i6.Fluid, selector: "p-fluid" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1389
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormDatetimeItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1390
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormDatetimeItemComponent, isStandalone: true, selector: "onshore-form-datetime-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled", dateFormat: "dateFormat", hourFormat: "hourFormat", dataType: "dataType" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-datePicker class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [formControl]=\"formControl\"\n [dateFormat]=\"dateFormat\"\n [dataType]=\"dataType\"\n [hourFormat]=\"hourFormat\"\n [timeOnly]=\"formTemplate.type == OnshoreFormTemplateType.time\"\n [showTime]=\"formTemplate.type == OnshoreFormTemplateType.datetime\"\n [defaultDate]=\"formTemplate.default\"\n appendTo=\"body\">\n </p-datePicker>\n </p-fluid>\n</onshore-form-item-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i4.Fluid, selector: "p-fluid" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1384
1391
  }
1385
1392
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormDatetimeItemComponent, decorators: [{
1386
1393
  type: Component,
1387
1394
  args: [{ selector: 'onshore-form-datetime-item', imports: [CommonModule, OnshoreFormItemContainer, DatePicker, FormsModule, ReactiveFormsModule, FluidModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n <p-fluid>\n <p-datePicker class=\"w-full\"\n [name]=\"formTemplate.name\"\n [placeholder]=\"formTemplate.placeholder ?? ''\"\n [disabled]=\"disabled\"\n [formControl]=\"formControl\"\n [dateFormat]=\"dateFormat\"\n [dataType]=\"dataType\"\n [hourFormat]=\"hourFormat\"\n [timeOnly]=\"formTemplate.type == OnshoreFormTemplateType.time\"\n [showTime]=\"formTemplate.type == OnshoreFormTemplateType.datetime\"\n [defaultDate]=\"formTemplate.default\"\n appendTo=\"body\">\n </p-datePicker>\n </p-fluid>\n</onshore-form-item-container>\n" }]
1388
- }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
1395
+ }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
1389
1396
  type: Self
1390
1397
  }, {
1391
1398
  type: Optional
@@ -1469,13 +1476,13 @@ class OnshoreFormSortItemComponent {
1469
1476
  this.cdr = cdr;
1470
1477
  this.ngControl.valueAccessor = this;
1471
1478
  }
1472
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormSortItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1479
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormSortItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1473
1480
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormSortItemComponent, isStandalone: true, selector: "onshore-form-sort-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\"\n (lockIsChanged)=\"lockChanged($event)\">\n\n <!--<div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n class=\"w-full\" [dragula]=\"ngControl.enabled\"\n [dragulaModel]=\"sortItems\"\n (dragulaModelChange)=\"sortItemsChanged($event)\">\n <div [class.cursor-move]=\"ngControl.enabled\"\n style=\"border-radius: 3px\"\n class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-white\" *ngFor=\"let item of sortItems\">\n <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n </div>\n </div>-->\n\n</onshore-form-item-container>\n\n", styles: ["onshore-form-sort-item .onshore-sort-item{font-family:Lato-Regular!important}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80);pointer-events:none;font-family:Lato-Regular!important}.gu-hide{left:-9999px!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1474
1481
  }
1475
1482
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormSortItemComponent, decorators: [{
1476
1483
  type: Component,
1477
1484
  args: [{ selector: 'onshore-form-sort-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\"\n (lockIsChanged)=\"lockChanged($event)\">\n\n <!--<div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n class=\"w-full\" [dragula]=\"ngControl.enabled\"\n [dragulaModel]=\"sortItems\"\n (dragulaModelChange)=\"sortItemsChanged($event)\">\n <div [class.cursor-move]=\"ngControl.enabled\"\n style=\"border-radius: 3px\"\n class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-white\" *ngFor=\"let item of sortItems\">\n <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n </div>\n </div>-->\n\n</onshore-form-item-container>\n\n", styles: ["onshore-form-sort-item .onshore-sort-item{font-family:Lato-Regular!important}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80);pointer-events:none;font-family:Lato-Regular!important}.gu-hide{left:-9999px!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}\n"] }]
1478
- }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
1485
+ }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
1479
1486
  type: Self
1480
1487
  }, {
1481
1488
  type: Optional
@@ -1535,13 +1542,13 @@ class OnshoreFormScannerItemComponent {
1535
1542
  this.ngControl.valueAccessor = this;
1536
1543
  }
1537
1544
  OnshoreFormTemplateType = OnshoreFormTemplateType;
1538
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormScannerItemComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1539
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormScannerItemComponent, isStandalone: true, selector: "onshore-form-scanner-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled", webcamDisabled: "webcamDisabled", scannerDisabled: "scannerDisabled", editDisabled: "editDisabled", editable: "editable", integerOnly: "integerOnly", autofocus: "autofocus", length: "length" }, outputs: { actionButtonClick: "actionButtonClick", webcamClick: "webcamClick", scannerClick: "scannerClick" }, viewQueries: [{ propertyName: "scanPopover", first: true, predicate: ["scanPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n\n <div class=\"flex gap-2\">\n <p-inputOtp [formControl]=\"formControl\"\n [disabled]=\"disabled || !editable\"\n [integerOnly]=\"integerOnly\"\n [length]=\"length\"\n [autofocus]=\"autofocus\">\n </p-inputOtp>\n\n <p-button *ngIf=\"!scannerDisabled\" (click)=\"scanPopover.toggle($event); webcamClick.emit()\" icon=\"fa fa-qrcode\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelScanner' | translate }}\" />\n <p-button *ngIf=\"!webcamDisabled\" (click)=\"scannerClick.emit()\" icon=\"fa fa-video\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelWebcam' | translate }}\" />\n <p-button *ngIf=\"!editDisabled\" icon=\"fa fa-pen\" severity=\"secondary\" (click)=\"editable = true\" label=\"{{ 'form.scannerControl.labelInput' | translate }}\" />\n </div>\n\n</onshore-form-item-container>\n\n<p-popover #scanPopover>\n <div class=\"flex flex-column justify-content-center align-items-center gap-2\">\n <i *ngIf=\"!ngControl.control?.value\" class=\"fa fa-qrcode fa-2x\"></i>\n <span *ngIf=\"!ngControl.control?.value\">{{'form.scannerControl.startScanLabel' | translate}}</span>\n <p-chip *ngIf=\"ngControl.control?.value\" [label]=\"ngControl.control?.value\" icon=\"fa fa fa-qrcode\" />\n </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i5.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i5$2.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["readonly", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1545
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormScannerItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1546
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormScannerItemComponent, isStandalone: true, selector: "onshore-form-scanner-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled", webcamDisabled: "webcamDisabled", scannerDisabled: "scannerDisabled", editDisabled: "editDisabled", editable: "editable", integerOnly: "integerOnly", autofocus: "autofocus", length: "length" }, outputs: { actionButtonClick: "actionButtonClick", webcamClick: "webcamClick", scannerClick: "scannerClick" }, viewQueries: [{ propertyName: "scanPopover", first: true, predicate: ["scanPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n\n <div class=\"flex gap-2\">\n <p-inputOtp [formControl]=\"formControl\"\n [disabled]=\"disabled || !editable\"\n [integerOnly]=\"integerOnly\"\n [length]=\"length\"\n [autofocus]=\"autofocus\">\n </p-inputOtp>\n\n <p-button *ngIf=\"!scannerDisabled\" (click)=\"scanPopover.toggle($event); webcamClick.emit()\" icon=\"fa fa-qrcode\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelScanner' | translate }}\" />\n <p-button *ngIf=\"!webcamDisabled\" (click)=\"scannerClick.emit()\" icon=\"fa fa-video\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelWebcam' | translate }}\" />\n <p-button *ngIf=\"!editDisabled\" icon=\"fa fa-pen\" severity=\"secondary\" (click)=\"editable = true\" label=\"{{ 'form.scannerControl.labelInput' | translate }}\" />\n </div>\n\n</onshore-form-item-container>\n\n<p-popover #scanPopover>\n <div class=\"flex flex-column justify-content-center align-items-center gap-2\">\n <i *ngIf=\"!ngControl.control?.value\" class=\"fa fa-qrcode fa-2x\"></i>\n <span *ngIf=\"!ngControl.control?.value\">{{'form.scannerControl.startScanLabel' | translate}}</span>\n <p-chip *ngIf=\"ngControl.control?.value\" [label]=\"ngControl.control?.value\" icon=\"fa fa fa-qrcode\" />\n </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i3$5.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i5$1.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["readonly", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1540
1547
  }
1541
1548
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormScannerItemComponent, decorators: [{
1542
1549
  type: Component,
1543
1550
  args: [{ selector: 'onshore-form-scanner-item', imports: [CommonModule, TranslateModule, OnshoreFormItemContainer, ChipModule, PopoverModule, FormsModule, ReactiveFormsModule, InputOtpModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n [ngControl]=\"ngControl\"\n (actionButtonClick)=\"actionButtonClick.emit()\"\n [actionButtonDisabled]=\"actionButtonDisabled\">\n\n <div class=\"flex gap-2\">\n <p-inputOtp [formControl]=\"formControl\"\n [disabled]=\"disabled || !editable\"\n [integerOnly]=\"integerOnly\"\n [length]=\"length\"\n [autofocus]=\"autofocus\">\n </p-inputOtp>\n\n <p-button *ngIf=\"!scannerDisabled\" (click)=\"scanPopover.toggle($event); webcamClick.emit()\" icon=\"fa fa-qrcode\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelScanner' | translate }}\" />\n <p-button *ngIf=\"!webcamDisabled\" (click)=\"scannerClick.emit()\" icon=\"fa fa-video\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelWebcam' | translate }}\" />\n <p-button *ngIf=\"!editDisabled\" icon=\"fa fa-pen\" severity=\"secondary\" (click)=\"editable = true\" label=\"{{ 'form.scannerControl.labelInput' | translate }}\" />\n </div>\n\n</onshore-form-item-container>\n\n<p-popover #scanPopover>\n <div class=\"flex flex-column justify-content-center align-items-center gap-2\">\n <i *ngIf=\"!ngControl.control?.value\" class=\"fa fa-qrcode fa-2x\"></i>\n <span *ngIf=\"!ngControl.control?.value\">{{'form.scannerControl.startScanLabel' | translate}}</span>\n <p-chip *ngIf=\"ngControl.control?.value\" [label]=\"ngControl.control?.value\" icon=\"fa fa fa-qrcode\" />\n </div>\n</p-popover>\n" }]
1544
- }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
1551
+ }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
1545
1552
  type: Self
1546
1553
  }, {
1547
1554
  type: Optional