onshore-forms 1.1.14 → 1.1.16

package/fesm2022/onshore-forms.mjs

@@ -21,16 +21,17 @@ import * as i4$1 from 'primeng/multiselect';
 import { MultiSelect, MultiSelectModule } from 'primeng/multiselect';
 import * as i3$5 from 'primeng/chip';
 import { ChipModule } from 'primeng/chip';
-import * as i3$1 from 'primeng/api';
 import * as i2$3 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
+import { Checkbox, CheckboxModule } from 'primeng/checkbox';
+import * as i3$1 from 'primeng/api';
+import { DatePicker } from 'primeng/datepicker';
 import * as i2$4 from 'primeng/inputtext';
 import { InputTextModule, InputText } from 'primeng/inputtext';
 import * as i3$2 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import { updatePreset } from '@primeuix/themes';
 import * as i3$3 from 'primeng/select';
-import { SelectModule } from 'primeng/select';
+import { SelectModule, Select } from 'primeng/select';
 import * as i5$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i5 from 'primeng/tag';
@@ -50,7 +51,6 @@ import * as i3$4 from 'primeng/keyfilter';
 import { KeyFilterModule } from 'primeng/keyfilter';
 import * as i2$5 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
-import { DatePicker } from 'primeng/datepicker';
 import * as i5$2 from 'primeng/inputotp';
 import { InputOtpModule } from 'primeng/inputotp';
 import * as i4$4 from 'primeng/popover';
@@ -93,6 +93,12 @@ var OnshoreImageError;
     OnshoreImageError["ratio"] = "ratio";
     OnshoreImageError["size"] = "size";
 })(OnshoreImageError || (OnshoreImageError = {}));
+var OnshoreFormTemplateSize;
+(function (OnshoreFormTemplateSize) {
+    OnshoreFormTemplateSize["small"] = "small";
+    OnshoreFormTemplateSize["medium"] = "medium";
+    OnshoreFormTemplateSize["large"] = "large";
+})(OnshoreFormTemplateSize || (OnshoreFormTemplateSize = {}));
 
 class OnshoreFormsService {
     _form;
@@ -461,12 +467,13 @@ class OnshoreFormItemContainer {
     constructor(cdr) {
         this.cdr = cdr;
     }
+    OnshoreFormTemplateSize = OnshoreFormTemplateSize;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    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 });
+    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         [class.text-2xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"\n         [class.text-sm]=\"formTemplate.size === OnshoreFormTemplateSize.small\">\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\"\n           [pTooltip]=\"formTemplate.tooltip\"\n           [escape]=\"false\"\n           [tooltipPosition]=\"'left'\"\n           appendTo=\"body\">\n        <i class=\"fa fa-circle-question text-color\"\n           [class.text-xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"></i>\n      </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\" [class.text-xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"></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\"\n           [class.text-xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"\n           [class.text-sm]=\"formTemplate.size === OnshoreFormTemplateSize.small\">\n      <i class=\"fa fa-info-circle primary-color\"\n         [class.text-xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"></i>\n      {{formTemplate.description}}\n    </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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-item-container', imports: [CommonModule, OnshoreFormValidationOutputComponent, TranslateModule, ToggleButtonModule, TooltipModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'onshore-form-item-container', imports: [CommonModule, OnshoreFormValidationOutputComponent, TranslateModule, ToggleButtonModule, TooltipModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, 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         [class.text-2xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"\n         [class.text-sm]=\"formTemplate.size === OnshoreFormTemplateSize.small\">\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\"\n           [pTooltip]=\"formTemplate.tooltip\"\n           [escape]=\"false\"\n           [tooltipPosition]=\"'left'\"\n           appendTo=\"body\">\n        <i class=\"fa fa-circle-question text-color\"\n           [class.text-xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"></i>\n      </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\" [class.text-xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"></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\"\n           [class.text-xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"\n           [class.text-sm]=\"formTemplate.size === OnshoreFormTemplateSize.small\">\n      <i class=\"fa fa-info-circle primary-color\"\n         [class.text-xl]=\"formTemplate.size === OnshoreFormTemplateSize.large\"></i>\n      {{formTemplate.description}}\n    </small>\n  </div>\n\n</div>\n", styles: ["::ng-deep .p-togglebutton-content{gap:0!important;width:20px;padding-left:5px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formTemplate: [{
                 type: Input
             }], ngControl: [{
@@ -594,11 +601,11 @@ class OnshoreFormAutocompleteItemComponent {
         this.ngControl.valueAccessor = this;
     }
     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 });
-    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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 });
+    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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                    [size]=\"formTemplate.size\"\n                    [size]=\"formTemplate.size\"\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormAutocompleteItemComponent, decorators: [{
             type: Component,
-            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                             [hidden]=\"exclude\">\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" }]
+            args: [{ selector: 'onshore-form-autocomplete-item', imports: [CommonModule, OnshoreFormItemContainer, AutoCompleteModule, ChipModule, FormsModule, ReactiveFormsModule, FluidModule, MultiSelect, Checkbox], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"exclude\">\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                    [size]=\"formTemplate.size\"\n                    [size]=\"formTemplate.size\"\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" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -697,11 +704,11 @@ class OnshoreFormCheckboxItemComponent {
         this.ngControl.valueAccessor = this;
     }
     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 });
-    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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 });
+    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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      [size]=\"formTemplate.size\"\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormCheckboxItemComponent, decorators: [{
             type: Component,
-            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                             [hidden]=\"exclude\">\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" }]
+            args: [{ selector: 'onshore-form-checkbox-item', imports: [CommonModule, OnshoreFormItemContainer, CheckboxModule, FormsModule, ReactiveFormsModule, DatePicker], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"exclude\">\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      [size]=\"formTemplate.size\"\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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -799,11 +806,11 @@ class OnshoreFormColorpickerItemComponent {
         this.changeLayoutPreset();
     }
     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 });
-    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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 });
+    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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           [size]=\"formTemplate.size\"\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormColorpickerItemComponent, decorators: [{
             type: Component,
-            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                             [hidden]=\"exclude\">\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" }]
+            args: [{ selector: 'onshore-form-colorpicker-item', imports: [CommonModule, OnshoreFormItemContainer, InputTextModule, ColorPickerModule, FormsModule, ReactiveFormsModule, Checkbox], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"exclude\">\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           [size]=\"formTemplate.size\"\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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -965,11 +972,11 @@ class OnshoreFormDropdownItemComponent {
     }
     OnshoreFormTemplateType = OnshoreFormTemplateType;
     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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: OnshoreFormDropdownItemComponent, isStandalone: true, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", multipleItemSeverity: "multipleItemSeverity", showClear: "showClear", showMultiClear: "showMultiClear", group: "group", selectionLimit: "selectionLimit", minLength: "minLength", optionLabel: "optionLabel", optionValue: "optionValue", dataKey: "dataKey", secondOptionLabel: "secondOptionLabel", thirdOptionLabel: "thirdOptionLabel", optionLabelDivider: "optionLabelDivider", optionGroupLabel: "optionGroupLabel", actionButtonDisabled: "actionButtonDisabled", createEnabled: "createEnabled", options: "options", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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 let-selectedItem #selectedItem>\n      <div class=\"flex gap-1\">\n        @if (optionLabel) {\n          <span>{{ findValue(selectedItem, optionLabel) }}</span>\n        } @else {\n          <span>{{ selectedItem }}</span>\n        }\n        @if (secondOptionLabel) {\n          @if (optionLabelDivider) {\n            <span>{{optionLabelDivider}}</span>\n          }\n          <span>{{ findValue(selectedItem, secondOptionLabel) }}</span>\n        }\n        @if (thirdOptionLabel) {\n          @if (optionLabelDivider) {\n            <span>{{optionLabelDivider}}</span>\n          }\n          <span>{{ findValue(selectedItem, thirdOptionLabel) }}</span>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item #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\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 let-selectedItems #selecteditems>\n      <div class=\"flex gap-2\">\n        @for (selectedItem of selectedItems; track selectedItem) {\n          <p-tag [severity]=\"multipleItemSeverity\">\n            <div class=\"flex gap-1 align-items-center\">\n              @if (optionLabel) {\n                <span>{{ findValue(selectedItem, optionLabel) }}</span>\n              } @else {\n                <span>{{ selectedItem }}</span>\n              }\n              @if (secondOptionLabel) {\n                @if (optionLabelDivider) {\n                  <span>{{optionLabelDivider}}</span>\n                }\n                <span>{{ findValue(selectedItem, secondOptionLabel) }}</span>\n              }\n              @if (thirdOptionLabel) {\n                @if (optionLabelDivider) {\n                  <span>{{optionLabelDivider}}</span>\n                }\n                <span>{{ findValue(selectedItem, thirdOptionLabel) }}</span>\n              }\n              @if (showMultiClear) {\n                <i class=\"fa fa-times cursor-pointer\" (click)=\"removeSelected(selectedItem, $event)\"></i>\n              }\n            </div>\n          </p-tag>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item #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\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: "ngmodule", type: TagModule }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: OnshoreFormDropdownItemComponent, isStandalone: true, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", multipleItemSeverity: "multipleItemSeverity", showClear: "showClear", showMultiClear: "showMultiClear", group: "group", selectionLimit: "selectionLimit", minLength: "minLength", optionLabel: "optionLabel", optionValue: "optionValue", dataKey: "dataKey", secondOptionLabel: "secondOptionLabel", thirdOptionLabel: "thirdOptionLabel", optionLabelDivider: "optionLabelDivider", optionGroupLabel: "optionGroupLabel", actionButtonDisabled: "actionButtonDisabled", createEnabled: "createEnabled", options: "options", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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              [size]=\"size\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n    <ng-template let-selectedItem #selectedItem>\n      <div class=\"flex gap-1\">\n        @if (optionLabel) {\n          <span>{{ findValue(selectedItem, optionLabel) }}</span>\n        } @else {\n          <span>{{ selectedItem }}</span>\n        }\n        @if (secondOptionLabel) {\n          @if (optionLabelDivider) {\n            <span>{{optionLabelDivider}}</span>\n          }\n          <span>{{ findValue(selectedItem, secondOptionLabel) }}</span>\n        }\n        @if (thirdOptionLabel) {\n          @if (optionLabelDivider) {\n            <span>{{optionLabelDivider}}</span>\n          }\n          <span>{{ findValue(selectedItem, thirdOptionLabel) }}</span>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item #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\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                 [size]=\"formTemplate.size\"\n                 (onClear)=\"clearSelection()\"\n                 [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\">\n    <ng-template let-selectedItems #selecteditems>\n      <div class=\"flex gap-2\">\n        @for (selectedItem of selectedItems; track selectedItem) {\n          <p-tag [severity]=\"multipleItemSeverity\">\n            <div class=\"flex gap-1 align-items-center\">\n              @if (optionLabel) {\n                <span>{{ findValue(selectedItem, optionLabel) }}</span>\n              } @else {\n                <span>{{ selectedItem }}</span>\n              }\n              @if (secondOptionLabel) {\n                @if (optionLabelDivider) {\n                  <span>{{optionLabelDivider}}</span>\n                }\n                <span>{{ findValue(selectedItem, secondOptionLabel) }}</span>\n              }\n              @if (thirdOptionLabel) {\n                @if (optionLabelDivider) {\n                  <span>{{optionLabelDivider}}</span>\n                }\n                <span>{{ findValue(selectedItem, thirdOptionLabel) }}</span>\n              }\n              @if (showMultiClear) {\n                <i class=\"fa fa-times cursor-pointer\" (click)=\"removeSelected(selectedItem, $event)\"></i>\n              }\n            </div>\n          </p-tag>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item #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\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: "ngmodule", type: TagModule }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormDropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-dropdown-item', imports: [CommonModule, ButtonModule, OnshoreFormItemContainer, TranslateModule, SelectModule, MultiSelectModule, FormsModule, ReactiveFormsModule, DialogModule, OnshoreInplaceInputComponent, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"exclude\">\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 let-selectedItem #selectedItem>\n      <div class=\"flex gap-1\">\n        @if (optionLabel) {\n          <span>{{ findValue(selectedItem, optionLabel) }}</span>\n        } @else {\n          <span>{{ selectedItem }}</span>\n        }\n        @if (secondOptionLabel) {\n          @if (optionLabelDivider) {\n            <span>{{optionLabelDivider}}</span>\n          }\n          <span>{{ findValue(selectedItem, secondOptionLabel) }}</span>\n        }\n        @if (thirdOptionLabel) {\n          @if (optionLabelDivider) {\n            <span>{{optionLabelDivider}}</span>\n          }\n          <span>{{ findValue(selectedItem, thirdOptionLabel) }}</span>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item #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\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 let-selectedItems #selecteditems>\n      <div class=\"flex gap-2\">\n        @for (selectedItem of selectedItems; track selectedItem) {\n          <p-tag [severity]=\"multipleItemSeverity\">\n            <div class=\"flex gap-1 align-items-center\">\n              @if (optionLabel) {\n                <span>{{ findValue(selectedItem, optionLabel) }}</span>\n              } @else {\n                <span>{{ selectedItem }}</span>\n              }\n              @if (secondOptionLabel) {\n                @if (optionLabelDivider) {\n                  <span>{{optionLabelDivider}}</span>\n                }\n                <span>{{ findValue(selectedItem, secondOptionLabel) }}</span>\n              }\n              @if (thirdOptionLabel) {\n                @if (optionLabelDivider) {\n                  <span>{{optionLabelDivider}}</span>\n                }\n                <span>{{ findValue(selectedItem, thirdOptionLabel) }}</span>\n              }\n              @if (showMultiClear) {\n                <i class=\"fa fa-times cursor-pointer\" (click)=\"removeSelected(selectedItem, $event)\"></i>\n              }\n            </div>\n          </p-tag>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item #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\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" }]
+            args: [{ selector: 'onshore-form-dropdown-item', imports: [CommonModule, ButtonModule, OnshoreFormItemContainer, TranslateModule, SelectModule, MultiSelectModule, FormsModule, ReactiveFormsModule, DialogModule, OnshoreInplaceInputComponent, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"exclude\">\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              [size]=\"size\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n    <ng-template let-selectedItem #selectedItem>\n      <div class=\"flex gap-1\">\n        @if (optionLabel) {\n          <span>{{ findValue(selectedItem, optionLabel) }}</span>\n        } @else {\n          <span>{{ selectedItem }}</span>\n        }\n        @if (secondOptionLabel) {\n          @if (optionLabelDivider) {\n            <span>{{optionLabelDivider}}</span>\n          }\n          <span>{{ findValue(selectedItem, secondOptionLabel) }}</span>\n        }\n        @if (thirdOptionLabel) {\n          @if (optionLabelDivider) {\n            <span>{{optionLabelDivider}}</span>\n          }\n          <span>{{ findValue(selectedItem, thirdOptionLabel) }}</span>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item #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\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                 [size]=\"formTemplate.size\"\n                 (onClear)=\"clearSelection()\"\n                 [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\">\n    <ng-template let-selectedItems #selecteditems>\n      <div class=\"flex gap-2\">\n        @for (selectedItem of selectedItems; track selectedItem) {\n          <p-tag [severity]=\"multipleItemSeverity\">\n            <div class=\"flex gap-1 align-items-center\">\n              @if (optionLabel) {\n                <span>{{ findValue(selectedItem, optionLabel) }}</span>\n              } @else {\n                <span>{{ selectedItem }}</span>\n              }\n              @if (secondOptionLabel) {\n                @if (optionLabelDivider) {\n                  <span>{{optionLabelDivider}}</span>\n                }\n                <span>{{ findValue(selectedItem, secondOptionLabel) }}</span>\n              }\n              @if (thirdOptionLabel) {\n                @if (optionLabelDivider) {\n                  <span>{{optionLabelDivider}}</span>\n                }\n                <span>{{ findValue(selectedItem, thirdOptionLabel) }}</span>\n              }\n              @if (showMultiClear) {\n                <i class=\"fa fa-times cursor-pointer\" (click)=\"removeSelected(selectedItem, $event)\"></i>\n              }\n            </div>\n          </p-tag>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template let-item #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\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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1457,11 +1464,11 @@ class OnshoreFormInputItemComponent {
         this.ngControl.valueAccessor = this;
     }
     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 });
-    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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 });
+    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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                 [pSize]=\"formTemplate.size\"\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               [pSize]=\"formTemplate.size\"\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               [pSize]=\"formTemplate.size\"\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormInputItemComponent, decorators: [{
             type: Component,
-            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                             [hidden]=\"exclude\">\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" }]
+            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                             [hidden]=\"exclude\">\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                 [pSize]=\"formTemplate.size\"\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               [pSize]=\"formTemplate.size\"\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               [pSize]=\"formTemplate.size\"\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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1557,11 +1564,11 @@ class OnshoreFormSwitchItemComponent {
         this.ngControl.valueAccessor = this;
     }
     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 });
-    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\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 });
+    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", exclude: "exclude" }, 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                             [hidden]=\"exclude\">\n  <div class=\"h-full align-items-center mt-1\">\n    <p-toggleswitch [name]=\"formTemplate.name\"\n                   [formControl]=\"formControl\"\n                   [disabled]=\"disabled\"\n                   [size]=\"formTemplate.size\"\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormSwitchItemComponent, decorators: [{
             type: Component,
-            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                             [hidden]=\"exclude\">\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" }]
+            args: [{ selector: 'onshore-form-switch-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, ToggleSwitchModule, FormsModule, ReactiveFormsModule, Checkbox], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"exclude\">\n  <div class=\"h-full align-items-center mt-1\">\n    <p-toggleswitch [name]=\"formTemplate.name\"\n                   [formControl]=\"formControl\"\n                   [disabled]=\"disabled\"\n                   [size]=\"formTemplate.size\"\n                   [inputId]=\"formTemplate.name\">\n    </p-toggleswitch>\n  </div>\n\n</onshore-form-item-container>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1641,11 +1648,11 @@ class OnshoreFormDatetimeItemComponent {
         this.ngControl.valueAccessor = this;
     }
     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 });
-    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", exclude: "exclude", 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                             [hidden]=\"exclude\">\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 });
+    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", exclude: "exclude", 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                             [hidden]=\"exclude\">\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                [size]=\"formTemplate.size\"\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormDatetimeItemComponent, decorators: [{
             type: Component,
-            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                             [hidden]=\"exclude\">\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" }]
+            args: [{ selector: 'onshore-form-datetime-item', imports: [CommonModule, OnshoreFormItemContainer, DatePicker, FormsModule, ReactiveFormsModule, FluidModule, Select], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"exclude\">\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                [size]=\"formTemplate.size\"\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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1897,5 +1904,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormScannerItemComponent, OnshoreFormSortItemComponent, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsService, OnshoreImageChooserComponent, OnshoreImageError, OnshoreImagePlaceholderComponent, OnshoreValidators, WebcamComponent };
+export { OnshoreFormAutocompleteItemComponent, OnshoreFormCheckboxItemComponent, OnshoreFormColorpickerItemComponent, OnshoreFormDatetimeItemComponent, OnshoreFormDropdownItemComponent, OnshoreFormImageItemComponent, OnshoreFormInputItemComponent, OnshoreFormItemContainer, OnshoreFormScannerItemComponent, OnshoreFormSortItemComponent, OnshoreFormSwitchItemComponent, OnshoreFormTemplateLayout, OnshoreFormTemplateSize, OnshoreFormTemplateType, OnshoreFormValidationOutputComponent, OnshoreFormsService, OnshoreImageChooserComponent, OnshoreImageError, OnshoreImagePlaceholderComponent, OnshoreValidators, WebcamComponent };
 //# sourceMappingURL=onshore-forms.mjs.map