onshore-forms 1.1.8 → 1.1.10

package/fesm2022/onshore-forms.mjs

@@ -31,8 +31,10 @@ import { ColorPickerModule } from 'primeng/colorpicker';
 import { updatePreset } from '@primeuix/themes';
 import * as i3$3 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i5 from 'primeng/dialog';
+import * as i5$1 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
+import * as i5 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 import * as i4$2 from 'ngx-webcam';
 import { WebcamModule } from 'ngx-webcam';
@@ -49,7 +51,7 @@ 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$1 from 'primeng/inputotp';
+import * as i5$2 from 'primeng/inputotp';
 import { InputOtpModule } from 'primeng/inputotp';
 import * as i4$4 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
@@ -490,13 +492,13 @@ class OnshoreFormAutocompleteItemComponent {
     showClear = false;
     searchedData = [];
     actionButtonDisabled = false;
-    optionLabel = '';
-    optionValue = '';
-    dataKey = '_id';
+    optionLabel = 'label';
+    optionValue = 'value';
+    dataKey = 'value';
     secondOptionLabel = '';
     thirdOptionLabel = '';
     optionLabelDivider = '-';
-    hidden = false;
+    exclude = false;
     onSearch = new EventEmitter();
     onSelect = new EventEmitter();
     actionButtonClick = new EventEmitter();
@@ -511,7 +513,6 @@ class OnshoreFormAutocompleteItemComponent {
         }
     }
     unselect(event) {
-        console.log("unselect", event);
         // @ts-ignore
         const updatedItems = this.ngControl.value.filter((item) => event.value[this.dataKey] !== item[this.dataKey]) || [];
         this.ngControl.control?.setValue(updatedItems);
@@ -560,7 +561,25 @@ class OnshoreFormAutocompleteItemComponent {
     ngOnDestroy() {
         this.ngControl.control?.disable();
     }
+    checkExclude() {
+        setTimeout(() => {
+            if (this.exclude) {
+                this.ngControl.control?.disable();
+            }
+            else {
+                this.ngControl.control?.enable();
+            }
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+            this.cdr.markForCheck();
+        }, 10);
+    }
+    ngAfterViewInit() {
+        this.checkExclude();
+    }
     ngOnChanges(changes) {
+        if (changes['exclude']) {
+            this.checkExclude();
+        }
         this.cdr.markForCheck();
     }
     constructor(cdr, ngControl) {
@@ -569,11 +588,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", hidden: "hidden" }, 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]=\"hidden\">\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                    (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]=\"hidden\">\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], 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" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -600,7 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], optionLabelDivider: [{
                 type: Input
-            }], hidden: [{
+            }], exclude: [{
                 type: Input
             }], onSearch: [{
                 type: Output
@@ -615,7 +634,7 @@ class OnshoreFormCheckboxItemComponent {
     cdr;
     formTemplate;
     actionButtonDisabled = false;
-    hidden = false;
+    exclude = false;
     actionButtonClick = new EventEmitter();
     disabled = false;
     // ControlValueAccessor interface
@@ -637,7 +656,25 @@ class OnshoreFormCheckboxItemComponent {
             this.cdr.markForCheck();
         }
     }
+    checkExclude() {
+        setTimeout(() => {
+            if (this.exclude) {
+                this.ngControl.control?.disable();
+            }
+            else {
+                this.ngControl.control?.enable();
+            }
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+            this.cdr.markForCheck();
+        }, 10);
+    }
+    ngAfterViewInit() {
+        this.checkExclude();
+    }
     ngOnChanges(changes) {
+        if (changes['exclude']) {
+            this.checkExclude();
+        }
         this.cdr.markForCheck();
     }
     ngOnDestroy() {
@@ -649,11 +686,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", hidden: "hidden" }, 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]=\"hidden\">\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      [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]=\"hidden\">\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], 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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -662,7 +699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], actionButtonDisabled: [{
                 type: Input
-            }], hidden: [{
+            }], exclude: [{
                 type: Input
             }], actionButtonClick: [{
                 type: Output
@@ -673,7 +710,7 @@ class OnshoreFormColorpickerItemComponent {
     cdr;
     formTemplate;
     actionButtonDisabled = false;
-    hidden = false;
+    exclude = false;
     actionButtonClick = new EventEmitter();
     disabled = false;
     colorPickerValue = '';
@@ -717,8 +754,26 @@ class OnshoreFormColorpickerItemComponent {
     ngOnDestroy() {
         this.ngControl.control?.disable();
     }
+    checkExclude() {
+        setTimeout(() => {
+            if (this.exclude) {
+                this.ngControl.control?.disable();
+            }
+            else {
+                this.ngControl.control?.enable();
+            }
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+            this.cdr.markForCheck();
+        }, 10);
+    }
+    ngAfterViewInit() {
+        this.checkExclude();
+    }
     ngOnChanges(changes) {
         this.colorPickerValue = this.ngControl.control?.value;
+        if (changes['exclude']) {
+            this.checkExclude();
+        }
         this.cdr.markForCheck();
     }
     constructor(ngControl, cdr) {
@@ -728,11 +783,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", hidden: "hidden" }, 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]=\"hidden\">\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           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]=\"hidden\">\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], 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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -741,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], actionButtonDisabled: [{
                 type: Input
-            }], hidden: [{
+            }], exclude: [{
                 type: Input
             }], actionButtonClick: [{
                 type: Output
@@ -777,18 +832,23 @@ class OnshoreFormDropdownItemComponent {
     cdr;
     formTemplate;
     multiple = false;
+    multipleItemSeverity = 'info';
     showClear = false;
+    showMultiClear = true;
     group = false;
     selectionLimit = 0;
     minLength = 0;
     optionLabel = 'label';
     optionValue = 'value';
     dataKey = 'value';
+    secondOptionLabel = '';
+    thirdOptionLabel = '';
+    optionLabelDivider = '-';
     optionGroupLabel = '';
     actionButtonDisabled = false;
     createEnabled = false;
     options = [];
-    hidden = false;
+    exclude = false;
     valueChange = new EventEmitter();
     actionButtonClick = new EventEmitter();
     entryCreated = new EventEmitter();
@@ -816,6 +876,14 @@ class OnshoreFormDropdownItemComponent {
     get formControl() {
         return this.ngControl.control;
     }
+    findValue(item, key) {
+        let result = '';
+        const parts = key.split(' ');
+        parts.forEach(part => {
+            result += part.split('.').reduce((acc, subpart) => acc && acc[subpart], item) + ' ';
+        });
+        return result;
+    }
     ngOnInit() {
         if ((!this.ngControl.control?.value || this.ngControl.control?.value == '' || this.ngControl.control?.value == undefined) && !this.multiple) {
             this.ngControl.control?.setValue(this.formTemplate.default);
@@ -825,12 +893,40 @@ class OnshoreFormDropdownItemComponent {
     ngOnDestroy() {
         this.ngControl.control?.disable();
     }
+    checkExclude() {
+        setTimeout(() => {
+            if (this.exclude) {
+                this.ngControl.control?.disable();
+            }
+            else {
+                this.ngControl.control?.enable();
+            }
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+            this.cdr.markForCheck();
+        }, 10);
+    }
+    removeSelected(value, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // @ts-ignore
+        const selected = this.ngControl.control?.value.filter((x) => x !== value[this.optionValue]);
+        this.ngControl.control?.setValue(selected);
+        this.ngControl?.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+        this.ngControl?.control?.markAsDirty();
+        this.cdr.markForCheck();
+    }
+    ngAfterViewInit() {
+        this.checkExclude();
+    }
     ngOnChanges(changes) {
         const currentOptions = changes['options']?.currentValue ?? changes['formTemplate']?.currentValue?.options;
         //const previousOptions =  changes['options']?.previousValue ?? changes['formTemplate']?.previousValue?.options;
         if (!this.options && currentOptions) {
             this.options = currentOptions;
         }
+        if (changes['exclude']) {
+            this.checkExclude();
+        }
         this.cdr.markForCheck();
     }
     constructor(ngControl, cdr) {
@@ -840,11 +936,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: "14.0.0", version: "21.1.0", type: OnshoreFormDropdownItemComponent, isStandalone: true, selector: "onshore-form-dropdown-item", inputs: { formTemplate: "formTemplate", multiple: "multiple", showClear: "showClear", group: "group", selectionLimit: "selectionLimit", minLength: "minLength", optionLabel: "optionLabel", optionValue: "optionValue", dataKey: "dataKey", optionGroupLabel: "optionGroupLabel", actionButtonDisabled: "actionButtonDisabled", createEnabled: "createEnabled", options: "options", hidden: "hidden" }, 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]=\"hidden\">\n\n  <p-select *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"options\"\n              [formControl]=\"formControl\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [optionLabel]=\"optionLabel\"\n              [optionValue]=\"optionValue\"\n              [dataKey]=\"dataKey\"\n              [optionGroupLabel]=\"optionGroupLabel\"\n              [group]=\"group\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n    <ng-template #footer>\n      <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n        <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n        </onshore-inplace-input>\n      </div>\n    </ng-template>\n  </p-select>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"options\"\n                 [formControl]=\"formControl\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [showClear]=\"showClear\"\n                 [selectionLimit]=\"selectionLimit\"\n                 [minlength]=\"minLength\"\n                 [optionLabel]=\"optionLabel\"\n                 [optionValue]=\"optionValue\"\n                 [dataKey]=\"dataKey\"\n                 [optionGroupLabel]=\"optionGroupLabel\"\n                 [group]=\"group\"\n                 (onClear)=\"clearSelection()\"\n                 [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\">\n    <ng-template #footer>\n      <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n        <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n        </onshore-inplace-input>\n      </div>\n    </ng-template>\n  </p-multiSelect>\n</onshore-form-item-container>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: OnshoreInplaceInputComponent, selector: "onshore-inplace-input", outputs: ["created"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
 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], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"hidden\">\n\n  <p-select *ngIf=\"!multiple\"\n              class=\"w-full\"\n              [options]=\"options\"\n              [formControl]=\"formControl\"\n              [name]=\"formTemplate?.name\"\n              [placeholder]=\"formTemplate?.placeholder\"\n              [disabled]=\"disabled\"\n              [optionLabel]=\"optionLabel\"\n              [optionValue]=\"optionValue\"\n              [dataKey]=\"dataKey\"\n              [optionGroupLabel]=\"optionGroupLabel\"\n              [group]=\"group\"\n              [showClear]=\"showClear && formTemplate?.placeholder\"\n              (onClear)=\"clearSelection()\"\n              optionDisabled=\"disabled\"\n              appendTo=\"body\">\n    <ng-template #footer>\n      <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n        <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n        </onshore-inplace-input>\n      </div>\n    </ng-template>\n  </p-select>\n\n  <p-multiSelect *ngIf=\"multiple\"\n                 class=\"w-full\"\n                 [options]=\"options\"\n                 [formControl]=\"formControl\"\n                 [name]=\"formTemplate?.name\"\n                 [placeholder]=\"formTemplate?.placeholder\"\n                 [disabled]=\"disabled\"\n                 [showClear]=\"showClear\"\n                 [selectionLimit]=\"selectionLimit\"\n                 [minlength]=\"minLength\"\n                 [optionLabel]=\"optionLabel\"\n                 [optionValue]=\"optionValue\"\n                 [dataKey]=\"dataKey\"\n                 [optionGroupLabel]=\"optionGroupLabel\"\n                 [group]=\"group\"\n                 (onClear)=\"clearSelection()\"\n                 [selectedItemsLabel]=\"'form.dropdownControl.selectedItems' | translate\"\n                 optionDisabled=\"disabled\"\n                 appendTo=\"body\">\n    <ng-template #footer>\n      <div *ngIf=\"createEnabled\" class=\"flex justify-content-center\">\n        <onshore-inplace-input (created)=\"entryCreated.emit($event)\">\n        </onshore-inplace-input>\n      </div>\n    </ng-template>\n  </p-multiSelect>\n</onshore-form-item-container>\n\n" }]
+            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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -853,8 +949,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], multiple: [{
                 type: Input
+            }], multipleItemSeverity: [{
+                type: Input
             }], showClear: [{
                 type: Input
+            }], showMultiClear: [{
+                type: Input
             }], group: [{
                 type: Input
             }], selectionLimit: [{
@@ -867,6 +967,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], dataKey: [{
                 type: Input
+            }], secondOptionLabel: [{
+                type: Input
+            }], thirdOptionLabel: [{
+                type: Input
+            }], optionLabelDivider: [{
+                type: Input
             }], optionGroupLabel: [{
                 type: Input
             }], actionButtonDisabled: [{
@@ -875,7 +981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], options: [{
                 type: Input
-            }], hidden: [{
+            }], exclude: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -1068,7 +1174,7 @@ class OnshoreFormImageItemComponent {
     formTemplate;
     imageSettings = undefined;
     actionButtonDisabled = false;
-    hidden = false;
+    exclude = false;
     imageDeleted = new EventEmitter();
     imageCleared = new EventEmitter();
     imageReady = new EventEmitter();
@@ -1178,6 +1284,21 @@ class OnshoreFormImageItemComponent {
         this.ngControl?.control?.disable();
         this.image = undefined;
     }
+    checkExclude() {
+        setTimeout(() => {
+            if (this.exclude) {
+                this.ngControl.control?.disable();
+            }
+            else {
+                this.ngControl.control?.enable();
+            }
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+            this.cdr.markForCheck();
+        }, 10);
+    }
+    ngAfterViewInit() {
+        this.checkExclude();
+    }
     ngOnChanges(changes) {
         const imageSettings = changes['imageSettings']?.currentValue;
         this.imageSettings = {
@@ -1185,6 +1306,9 @@ class OnshoreFormImageItemComponent {
             ...imageSettings,
             placeholderIcon: imageSettings?.placeholderImage ? '' : (imageSettings?.placeholderIcon ?? this.defaultImageSettings.placeholderIcon)
         };
+        if (changes['exclude']) {
+            this.checkExclude();
+        }
         //this.removeImage();
         this.cdr.markForCheck();
     }
@@ -1194,11 +1318,11 @@ class OnshoreFormImageItemComponent {
         this.ngControl.valueAccessor = this;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormImageItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormImageItemComponent, isStandalone: true, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", imageSettings: "imageSettings", actionButtonDisabled: "actionButtonDisabled", hidden: "hidden" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageReady: "imageReady", selectFromMedia: "selectFromMedia", isLoading: "isLoading" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" [hidden]=\"hidden\">\n  <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n    <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n         [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n      <onshore-image-placeholder\n        class=\"w-full\"\n        [image]=\"image\"\n        [imageStyle]=\"'width: 100%; height: 100%'\"\n        [placeholderIcon]=\"imageSettings.placeholderIcon\"\n        [placeholderImage]=\"imageSettings.placeholderImage\"\n        [placeholderStyle]=\"'width: 100%; height: 100%'\">\n      </onshore-image-placeholder>\n    </div>\n\n    <div>\n      <p-fluid class=\"flex flex-column\">\n        <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-image\"\n                  [label]=\"'form.imageControl.uploadImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-camera\"\n                  [label]=\"'form.imageControl.webcamImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"webcamDialogVisible = true\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-photo-video\"\n                  [label]=\"'form.imageControl.mediaImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"selectFromMedia.emit()\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.deleteEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-eraser\"\n                  [label]=\"'form.imageControl.removeImageButton' | translate\"\n                  (click)=\"removeImage()\"\n                  class=\"w-full\"\n                  [disabled]=\"!image || disabled\">\n        </p-button>\n      </p-fluid>\n    </div>\n\n  </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-image-chooser\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [imageSettings]=\"imageSettings\">\n  </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-webcam\n    *ngIf=\"webcamDialogVisible\"\n    (shot)=\"getWebcamImage($event)\"\n    (canceled)=\"webcamDialogVisible = false\"\n    [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i4.Fluid, selector: "p-fluid" }, { kind: "component", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: ["placeholderIcon", "placeholderImage", "image", "imageStyle", "placeholderStyle", "showLoader"] }, { kind: "component", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: ["imageSettings"], outputs: ["choosen", "canceled"] }, { kind: "component", type: WebcamComponent, selector: "onshore-webcam", inputs: ["imageSettings"], outputs: ["shot", "canceled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormImageItemComponent, isStandalone: true, selector: "onshore-form-image-item", inputs: { formTemplate: "formTemplate", imageSettings: "imageSettings", actionButtonDisabled: "actionButtonDisabled", exclude: "exclude" }, outputs: { imageDeleted: "imageDeleted", imageCleared: "imageCleared", imageReady: "imageReady", selectFromMedia: "selectFromMedia", isLoading: "isLoading" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" [hidden]=\"exclude\">\n  <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n    <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n         [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n      <onshore-image-placeholder\n        class=\"w-full\"\n        [image]=\"image\"\n        [imageStyle]=\"'width: 100%; height: 100%'\"\n        [placeholderIcon]=\"imageSettings.placeholderIcon\"\n        [placeholderImage]=\"imageSettings.placeholderImage\"\n        [placeholderStyle]=\"'width: 100%; height: 100%'\">\n      </onshore-image-placeholder>\n    </div>\n\n    <div>\n      <p-fluid class=\"flex flex-column\">\n        <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-image\"\n                  [label]=\"'form.imageControl.uploadImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-camera\"\n                  [label]=\"'form.imageControl.webcamImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"webcamDialogVisible = true\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-photo-video\"\n                  [label]=\"'form.imageControl.mediaImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"selectFromMedia.emit()\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.deleteEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-eraser\"\n                  [label]=\"'form.imageControl.removeImageButton' | translate\"\n                  (click)=\"removeImage()\"\n                  class=\"w-full\"\n                  [disabled]=\"!image || disabled\">\n        </p-button>\n      </p-fluid>\n    </div>\n\n  </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-image-chooser\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [imageSettings]=\"imageSettings\">\n  </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-webcam\n    *ngIf=\"webcamDialogVisible\"\n    (shot)=\"getWebcamImage($event)\"\n    (canceled)=\"webcamDialogVisible = false\"\n    [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: FluidModule }, { kind: "component", type: i4.Fluid, selector: "p-fluid" }, { kind: "component", type: OnshoreImagePlaceholderComponent, selector: "onshore-image-placeholder", inputs: ["placeholderIcon", "placeholderImage", "image", "imageStyle", "placeholderStyle", "showLoader"] }, { kind: "component", type: OnshoreImageChooserComponent, selector: "onshore-image-chooser", inputs: ["imageSettings"], outputs: ["choosen", "canceled"] }, { kind: "component", type: WebcamComponent, selector: "onshore-webcam", inputs: ["imageSettings"], outputs: ["shot", "canceled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormImageItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-image-item', imports: [CommonModule, OnshoreFormItemContainer, FluidModule, OnshoreImagePlaceholderComponent, OnshoreImageChooserComponent, WebcamComponent, TranslateModule, ButtonModule, DialogModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" [hidden]=\"hidden\">\n  <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n    <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n         [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n      <onshore-image-placeholder\n        class=\"w-full\"\n        [image]=\"image\"\n        [imageStyle]=\"'width: 100%; height: 100%'\"\n        [placeholderIcon]=\"imageSettings.placeholderIcon\"\n        [placeholderImage]=\"imageSettings.placeholderImage\"\n        [placeholderStyle]=\"'width: 100%; height: 100%'\">\n      </onshore-image-placeholder>\n    </div>\n\n    <div>\n      <p-fluid class=\"flex flex-column\">\n        <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-image\"\n                  [label]=\"'form.imageControl.uploadImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-camera\"\n                  [label]=\"'form.imageControl.webcamImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"webcamDialogVisible = true\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-photo-video\"\n                  [label]=\"'form.imageControl.mediaImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"selectFromMedia.emit()\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.deleteEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-eraser\"\n                  [label]=\"'form.imageControl.removeImageButton' | translate\"\n                  (click)=\"removeImage()\"\n                  class=\"w-full\"\n                  [disabled]=\"!image || disabled\">\n        </p-button>\n      </p-fluid>\n    </div>\n\n  </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-image-chooser\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [imageSettings]=\"imageSettings\">\n  </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-webcam\n    *ngIf=\"webcamDialogVisible\"\n    (shot)=\"getWebcamImage($event)\"\n    (canceled)=\"webcamDialogVisible = false\"\n    [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n" }]
+            args: [{ selector: 'onshore-form-image-item', imports: [CommonModule, OnshoreFormItemContainer, FluidModule, OnshoreImagePlaceholderComponent, OnshoreImageChooserComponent, WebcamComponent, TranslateModule, ButtonModule, DialogModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\" [hidden]=\"exclude\">\n  <div class=\"w-full flex align-items-center gap-2\" [class.flex-column]=\"formTemplate.layout === OnshoreFormTemplateLayout.vertical\">\n\n    <div class=\"border-solid border-1 border-300 border-round-md overflow-hidden\"\n         [style]=\"'background-color: white; width: ' + imageSettings.containerWidth + 'px; height: ' + imageSettings.containerHeight + 'px'\">\n      <onshore-image-placeholder\n        class=\"w-full\"\n        [image]=\"image\"\n        [imageStyle]=\"'width: 100%; height: 100%'\"\n        [placeholderIcon]=\"imageSettings.placeholderIcon\"\n        [placeholderImage]=\"imageSettings.placeholderImage\"\n        [placeholderStyle]=\"'width: 100%; height: 100%'\">\n      </onshore-image-placeholder>\n    </div>\n\n    <div>\n      <p-fluid class=\"flex flex-column\">\n        <p-button *ngIf=\"imageSettings.imageSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-image\"\n                  [label]=\"'form.imageControl.uploadImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"imageChooserDialogVisible = true; cdr.detectChanges()\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.webcamSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-camera\"\n                  [label]=\"'form.imageControl.webcamImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"webcamDialogVisible = true\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.mediaSelectionEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-photo-video\"\n                  [label]=\"'form.imageControl.mediaImageButton' | translate\"\n                  class=\"mb-2 w-full\"\n                  [disabled]=\"disabled\"\n                  (click)=\"selectFromMedia.emit()\">\n        </p-button>\n\n        <p-button *ngIf=\"imageSettings.deleteEnabled\"\n                  [severity]=\"'secondary'\"\n                  icon=\"fa fa-eraser\"\n                  [label]=\"'form.imageControl.removeImageButton' | translate\"\n                  (click)=\"removeImage()\"\n                  class=\"w-full\"\n                  [disabled]=\"!image || disabled\">\n        </p-button>\n      </p-fluid>\n    </div>\n\n  </div>\n</onshore-form-item-container>\n\n<p-dialog [header]=\"'form.imageControl.uploadImageTitle' | translate\" [(visible)]=\"imageChooserDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-image-chooser\n                     (choosen)=\"getFileImage($event)\"\n                     (canceled)=\"imageChooserDialogVisible = false\"\n                     [imageSettings]=\"imageSettings\">\n  </onshore-image-chooser>\n</p-dialog>\n\n<p-dialog [header]=\"'form.imageControl.webacmImageTitle' | translate\" [(visible)]=\"webcamDialogVisible\" [modal]=\"true\" [style]=\"{'max-width': '50vw'}\" appendTo=\"body\">\n  <onshore-webcam\n    *ngIf=\"webcamDialogVisible\"\n    (shot)=\"getWebcamImage($event)\"\n    (canceled)=\"webcamDialogVisible = false\"\n    [imageSettings]=\"imageSettings\"></onshore-webcam>\n</p-dialog>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1209,7 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], actionButtonDisabled: [{
                 type: Input
-            }], hidden: [{
+            }], exclude: [{
                 type: Input
             }], imageDeleted: [{
                 type: Output
@@ -1336,7 +1460,7 @@ class OnshoreFormSwitchItemComponent {
     cdr;
     formTemplate;
     actionButtonDisabled = false;
-    hidden = false;
+    exclude = false;
     valueChange = new EventEmitter();
     actionButtonClick = new EventEmitter();
     disabled = false;
@@ -1359,7 +1483,25 @@ class OnshoreFormSwitchItemComponent {
             this.cdr.markForCheck();
         }
     }
+    checkExclude() {
+        setTimeout(() => {
+            if (this.exclude) {
+                this.ngControl.control?.disable();
+            }
+            else {
+                this.ngControl.control?.enable();
+            }
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+            this.cdr.markForCheck();
+        }, 10);
+    }
+    ngAfterViewInit() {
+        this.checkExclude();
+    }
     ngOnChanges(changes) {
+        if (changes['exclude']) {
+            this.checkExclude();
+        }
         this.cdr.markForCheck();
     }
     ngOnDestroy() {
@@ -1371,11 +1513,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", hidden: "hidden" }, 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]=\"hidden\">\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                   [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]=\"hidden\">\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], 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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1384,7 +1526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], actionButtonDisabled: [{
                 type: Input
-            }], hidden: [{
+            }], exclude: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -1397,7 +1539,7 @@ class OnshoreFormDatetimeItemComponent {
     cdr;
     formTemplate;
     actionButtonDisabled = false;
-    hidden = false;
+    exclude = false;
     actionButtonClick = new EventEmitter();
     dateFormat = 'dd.mm.yy';
     hourFormat = '24';
@@ -1420,7 +1562,25 @@ class OnshoreFormDatetimeItemComponent {
             this.cdr.markForCheck();
         }
     }
+    checkExclude() {
+        setTimeout(() => {
+            if (this.exclude) {
+                this.ngControl.control?.disable();
+            }
+            else {
+                this.ngControl.control?.enable();
+            }
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+            this.cdr.markForCheck();
+        }, 10);
+    }
+    ngAfterViewInit() {
+        this.checkExclude();
+    }
     ngOnChanges(changes) {
+        if (changes['exclude']) {
+            this.checkExclude();
+        }
         this.cdr.markForCheck();
     }
     ngOnDestroy() {
@@ -1432,11 +1592,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", hidden: "hidden", 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]=\"hidden\">\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                [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]=\"hidden\">\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], 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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1445,7 +1605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], actionButtonDisabled: [{
                 type: Input
-            }], hidden: [{
+            }], exclude: [{
                 type: Input
             }], actionButtonClick: [{
                 type: Output
@@ -1462,7 +1622,7 @@ class OnshoreFormSortItemComponent {
     cdr;
     formTemplate;
     actionButtonDisabled = false;
-    hidden = false;
+    exclude = false;
     actionButtonClick = new EventEmitter();
     sortItems = [];
     tempLockValue = [];
@@ -1513,7 +1673,25 @@ class OnshoreFormSortItemComponent {
         }
         this.cdr.markForCheck();
     }
+    checkExclude() {
+        setTimeout(() => {
+            if (this.exclude) {
+                this.ngControl.control?.disable();
+            }
+            else {
+                this.ngControl.control?.enable();
+            }
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+            this.cdr.markForCheck();
+        }, 10);
+    }
+    ngAfterViewInit() {
+        this.checkExclude();
+    }
     ngOnChanges(changes) {
+        if (changes['exclude']) {
+            this.checkExclude();
+        }
         this.cdr.markForCheck();
     }
     ngOnDestroy() {
@@ -1525,11 +1703,11 @@ class OnshoreFormSortItemComponent {
         this.ngControl.valueAccessor = this;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormSortItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormSortItemComponent, isStandalone: true, selector: "onshore-form-sort-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled", hidden: "hidden" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             (lockIsChanged)=\"lockChanged($event)\"\n                             [hidden]=\"hidden\">\n\n  <!--<div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n       class=\"w-full\" [dragula]=\"ngControl.enabled\"\n       [dragulaModel]=\"sortItems\"\n       (dragulaModelChange)=\"sortItemsChanged($event)\">\n    <div [class.cursor-move]=\"ngControl.enabled\"\n         style=\"border-radius: 3px\"\n         class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-white\" *ngFor=\"let item of sortItems\">\n      <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n      <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n    </div>\n  </div>-->\n\n</onshore-form-item-container>\n\n", styles: ["onshore-form-sort-item .onshore-sort-item{font-family:Lato-Regular!important}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80);pointer-events:none;font-family:Lato-Regular!important}.gu-hide{left:-9999px!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormSortItemComponent, isStandalone: true, selector: "onshore-form-sort-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled", 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                             (lockIsChanged)=\"lockChanged($event)\"\n                             [hidden]=\"exclude\">\n\n  <!--<div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n       class=\"w-full\" [dragula]=\"ngControl.enabled\"\n       [dragulaModel]=\"sortItems\"\n       (dragulaModelChange)=\"sortItemsChanged($event)\">\n    <div [class.cursor-move]=\"ngControl.enabled\"\n         style=\"border-radius: 3px\"\n         class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-white\" *ngFor=\"let item of sortItems\">\n      <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n      <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n    </div>\n  </div>-->\n\n</onshore-form-item-container>\n\n", styles: ["onshore-form-sort-item .onshore-sort-item{font-family:Lato-Regular!important}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80);pointer-events:none;font-family:Lato-Regular!important}.gu-hide{left:-9999px!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormSortItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-sort-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             (lockIsChanged)=\"lockChanged($event)\"\n                             [hidden]=\"hidden\">\n\n  <!--<div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n       class=\"w-full\" [dragula]=\"ngControl.enabled\"\n       [dragulaModel]=\"sortItems\"\n       (dragulaModelChange)=\"sortItemsChanged($event)\">\n    <div [class.cursor-move]=\"ngControl.enabled\"\n         style=\"border-radius: 3px\"\n         class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-white\" *ngFor=\"let item of sortItems\">\n      <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n      <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n    </div>\n  </div>-->\n\n</onshore-form-item-container>\n\n", styles: ["onshore-form-sort-item .onshore-sort-item{font-family:Lato-Regular!important}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80);pointer-events:none;font-family:Lato-Regular!important}.gu-hide{left:-9999px!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}\n"] }]
+            args: [{ selector: 'onshore-form-sort-item', imports: [CommonModule, OnshoreFormItemContainer, TranslateModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             (lockIsChanged)=\"lockChanged($event)\"\n                             [hidden]=\"exclude\">\n\n  <!--<div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n       class=\"w-full\" [dragula]=\"ngControl.enabled\"\n       [dragulaModel]=\"sortItems\"\n       (dragulaModelChange)=\"sortItemsChanged($event)\">\n    <div [class.cursor-move]=\"ngControl.enabled\"\n         style=\"border-radius: 3px\"\n         class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-white\" *ngFor=\"let item of sortItems\">\n      <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n      <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n    </div>\n  </div>-->\n\n</onshore-form-item-container>\n\n", styles: ["onshore-form-sort-item .onshore-sort-item{font-family:Lato-Regular!important}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80);pointer-events:none;font-family:Lato-Regular!important}.gu-hide{left:-9999px!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1538,7 +1716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], actionButtonDisabled: [{
                 type: Input
-            }], hidden: [{
+            }], exclude: [{
                 type: Input
             }], actionButtonClick: [{
                 type: Output
@@ -1557,7 +1735,7 @@ class OnshoreFormScannerItemComponent {
     integerOnly = true;
     autofocus = false;
     length = 4;
-    hidden = false;
+    exclude = false;
     actionButtonClick = new EventEmitter();
     webcamClick = new EventEmitter();
     scannerClick = new EventEmitter();
@@ -1584,7 +1762,25 @@ class OnshoreFormScannerItemComponent {
     ngOnDestroy() {
         this.ngControl.control?.disable();
     }
+    checkExclude() {
+        setTimeout(() => {
+            if (this.exclude) {
+                this.ngControl.control?.disable();
+            }
+            else {
+                this.ngControl.control?.enable();
+            }
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+            this.cdr.markForCheck();
+        }, 10);
+    }
+    ngAfterViewInit() {
+        this.checkExclude();
+    }
     ngOnChanges(changes) {
+        if (changes['exclude']) {
+            this.checkExclude();
+        }
         this.cdr.markForCheck();
     }
     constructor(ngControl, cdr) {
@@ -1594,11 +1790,11 @@ class OnshoreFormScannerItemComponent {
     }
     OnshoreFormTemplateType = OnshoreFormTemplateType;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormScannerItemComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormScannerItemComponent, isStandalone: true, selector: "onshore-form-scanner-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled", webcamDisabled: "webcamDisabled", scannerDisabled: "scannerDisabled", editDisabled: "editDisabled", editable: "editable", integerOnly: "integerOnly", autofocus: "autofocus", length: "length", hidden: "hidden" }, outputs: { actionButtonClick: "actionButtonClick", webcamClick: "webcamClick", scannerClick: "scannerClick" }, viewQueries: [{ propertyName: "scanPopover", first: true, predicate: ["scanPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"hidden\">\n\n  <div class=\"flex gap-2\">\n    <p-inputOtp [formControl]=\"formControl\"\n                [disabled]=\"disabled || !editable\"\n                [integerOnly]=\"integerOnly\"\n                [length]=\"length\"\n                [autofocus]=\"autofocus\">\n    </p-inputOtp>\n\n    <p-button *ngIf=\"!scannerDisabled\" (click)=\"scanPopover.toggle($event); webcamClick.emit()\" icon=\"fa fa-qrcode\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelScanner' | translate }}\" />\n    <p-button *ngIf=\"!webcamDisabled\" (click)=\"scannerClick.emit()\"  icon=\"fa fa-video\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelWebcam' | translate }}\" />\n    <p-button *ngIf=\"!editDisabled\"  icon=\"fa fa-pen\" severity=\"secondary\" (click)=\"editable = true\" label=\"{{ 'form.scannerControl.labelInput' | translate }}\" />\n  </div>\n\n</onshore-form-item-container>\n\n<p-popover #scanPopover>\n  <div class=\"flex flex-column justify-content-center align-items-center gap-2\">\n    <i *ngIf=\"!ngControl.control?.value\" class=\"fa fa-qrcode fa-2x\"></i>\n    <span *ngIf=\"!ngControl.control?.value\">{{'form.scannerControl.startScanLabel' | translate}}</span>\n    <p-chip *ngIf=\"ngControl.control?.value\" [label]=\"ngControl.control?.value\" icon=\"fa fa fa-qrcode\" />\n  </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i3$5.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i5$1.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["readonly", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: OnshoreFormScannerItemComponent, isStandalone: true, selector: "onshore-form-scanner-item", inputs: { formTemplate: "formTemplate", actionButtonDisabled: "actionButtonDisabled", webcamDisabled: "webcamDisabled", scannerDisabled: "scannerDisabled", editDisabled: "editDisabled", editable: "editable", integerOnly: "integerOnly", autofocus: "autofocus", length: "length", exclude: "exclude" }, outputs: { actionButtonClick: "actionButtonClick", webcamClick: "webcamClick", scannerClick: "scannerClick" }, viewQueries: [{ propertyName: "scanPopover", first: true, predicate: ["scanPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"exclude\">\n\n  <div class=\"flex gap-2\">\n    <p-inputOtp [formControl]=\"formControl\"\n                [disabled]=\"disabled || !editable\"\n                [integerOnly]=\"integerOnly\"\n                [length]=\"length\"\n                [autofocus]=\"autofocus\">\n    </p-inputOtp>\n\n    <p-button *ngIf=\"!scannerDisabled\" (click)=\"scanPopover.toggle($event); webcamClick.emit()\" icon=\"fa fa-qrcode\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelScanner' | translate }}\" />\n    <p-button *ngIf=\"!webcamDisabled\" (click)=\"scannerClick.emit()\"  icon=\"fa fa-video\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelWebcam' | translate }}\" />\n    <p-button *ngIf=\"!editDisabled\"  icon=\"fa fa-pen\" severity=\"secondary\" (click)=\"editable = true\" label=\"{{ 'form.scannerControl.labelInput' | translate }}\" />\n  </div>\n\n</onshore-form-item-container>\n\n<p-popover #scanPopover>\n  <div class=\"flex flex-column justify-content-center align-items-center gap-2\">\n    <i *ngIf=\"!ngControl.control?.value\" class=\"fa fa-qrcode fa-2x\"></i>\n    <span *ngIf=\"!ngControl.control?.value\">{{'form.scannerControl.startScanLabel' | translate}}</span>\n    <p-chip *ngIf=\"ngControl.control?.value\" [label]=\"ngControl.control?.value\" icon=\"fa fa fa-qrcode\" />\n  </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl", "actionButtonDisabled"], outputs: ["actionButtonClick", "lockIsChanged"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i3$5.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i5$2.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["readonly", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OnshoreFormScannerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onshore-form-scanner-item', imports: [CommonModule, TranslateModule, OnshoreFormItemContainer, ChipModule, PopoverModule, FormsModule, ReactiveFormsModule, InputOtpModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"hidden\">\n\n  <div class=\"flex gap-2\">\n    <p-inputOtp [formControl]=\"formControl\"\n                [disabled]=\"disabled || !editable\"\n                [integerOnly]=\"integerOnly\"\n                [length]=\"length\"\n                [autofocus]=\"autofocus\">\n    </p-inputOtp>\n\n    <p-button *ngIf=\"!scannerDisabled\" (click)=\"scanPopover.toggle($event); webcamClick.emit()\" icon=\"fa fa-qrcode\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelScanner' | translate }}\" />\n    <p-button *ngIf=\"!webcamDisabled\" (click)=\"scannerClick.emit()\"  icon=\"fa fa-video\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelWebcam' | translate }}\" />\n    <p-button *ngIf=\"!editDisabled\"  icon=\"fa fa-pen\" severity=\"secondary\" (click)=\"editable = true\" label=\"{{ 'form.scannerControl.labelInput' | translate }}\" />\n  </div>\n\n</onshore-form-item-container>\n\n<p-popover #scanPopover>\n  <div class=\"flex flex-column justify-content-center align-items-center gap-2\">\n    <i *ngIf=\"!ngControl.control?.value\" class=\"fa fa-qrcode fa-2x\"></i>\n    <span *ngIf=\"!ngControl.control?.value\">{{'form.scannerControl.startScanLabel' | translate}}</span>\n    <p-chip *ngIf=\"ngControl.control?.value\" [label]=\"ngControl.control?.value\" icon=\"fa fa fa-qrcode\" />\n  </div>\n</p-popover>\n" }]
+            args: [{ selector: 'onshore-form-scanner-item', imports: [CommonModule, TranslateModule, OnshoreFormItemContainer, ChipModule, PopoverModule, FormsModule, ReactiveFormsModule, InputOtpModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\"\n                             [ngControl]=\"ngControl\"\n                             (actionButtonClick)=\"actionButtonClick.emit()\"\n                             [actionButtonDisabled]=\"actionButtonDisabled\"\n                             [hidden]=\"exclude\">\n\n  <div class=\"flex gap-2\">\n    <p-inputOtp [formControl]=\"formControl\"\n                [disabled]=\"disabled || !editable\"\n                [integerOnly]=\"integerOnly\"\n                [length]=\"length\"\n                [autofocus]=\"autofocus\">\n    </p-inputOtp>\n\n    <p-button *ngIf=\"!scannerDisabled\" (click)=\"scanPopover.toggle($event); webcamClick.emit()\" icon=\"fa fa-qrcode\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelScanner' | translate }}\" />\n    <p-button *ngIf=\"!webcamDisabled\" (click)=\"scannerClick.emit()\"  icon=\"fa fa-video\" severity=\"secondary\" label=\"{{ 'form.scannerControl.labelWebcam' | translate }}\" />\n    <p-button *ngIf=\"!editDisabled\"  icon=\"fa fa-pen\" severity=\"secondary\" (click)=\"editable = true\" label=\"{{ 'form.scannerControl.labelInput' | translate }}\" />\n  </div>\n\n</onshore-form-item-container>\n\n<p-popover #scanPopover>\n  <div class=\"flex flex-column justify-content-center align-items-center gap-2\">\n    <i *ngIf=\"!ngControl.control?.value\" class=\"fa fa-qrcode fa-2x\"></i>\n    <span *ngIf=\"!ngControl.control?.value\">{{'form.scannerControl.startScanLabel' | translate}}</span>\n    <p-chip *ngIf=\"ngControl.control?.value\" [label]=\"ngControl.control?.value\" icon=\"fa fa fa-qrcode\" />\n  </div>\n</p-popover>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -1624,7 +1820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 type: Input
             }], length: [{
                 type: Input
-            }], hidden: [{
+            }], exclude: [{
                 type: Input
             }], actionButtonClick: [{
                 type: Output