@testgorilla/tgo-ui 11.22.3 → 12.0.1

package/fesm2022/testgorilla-tgo-ui-components-multi-input.mjs

@@ -1,364 +1,754 @@
-import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, booleanAttribute, computed, EventEmitter, effect, HostBinding, Output, Input, Optional, Self, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
-import { Validators, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatHint } from '@angular/material/form-field';
-import { HasValidationErrorPipe, DigitsOnlyDirective } from '@testgorilla/tgo-ui/components/core';
-import { DropdownComponent, DropdownComponentModule } from '@testgorilla/tgo-ui/components/dropdown';
-import { FieldComponent, FieldComponentModule } from '@testgorilla/tgo-ui/components/field';
-import * as i2 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import * as i3 from '@testgorilla/tgo-ui/components/validation-error';
-import { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';
-import { CommonModule } from '@angular/common';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { DividerComponentModule } from '@testgorilla/tgo-ui/components/divider';
-
-/* eslint-disable @typescript-eslint/unbound-method */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, NgModule, Optional, Output, Self, booleanAttribute, computed, effect, inject, input } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
+import { MatHint } from "@angular/material/form-field";
+import { DigitsOnlyDirective, HasValidationErrorPipe } from "@testgorilla/tgo-ui/components/core";
+import { DropdownComponent, DropdownComponentModule } from "@testgorilla/tgo-ui/components/dropdown";
+import { FieldComponent, FieldComponentModule } from "@testgorilla/tgo-ui/components/field";
+import * as i2 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import * as i3 from "@testgorilla/tgo-ui/components/validation-error";
+import { ValidationErrorModule } from "@testgorilla/tgo-ui/components/validation-error";
+import { CommonModule } from "@angular/common";
+import { MatInputModule } from "@angular/material/input";
+import { MatSelectModule } from "@angular/material/select";
+import { DividerComponentModule } from "@testgorilla/tgo-ui/components/divider";
 const requiredMultiInput = (control) => {
-    const controlValue = control.value;
-    const hasRequired = control.hasValidator(Validators.required);
-    if (hasRequired && controlValue) {
-        const anyFalsy = Object.values(controlValue).some(v => !v);
-        if (anyFalsy) {
-            return { required: true };
-        }
-    }
-    return null;
+	const controlValue = control.value;
+	if (control.hasValidator(Validators.required) && controlValue) {
+		if (Object.values(controlValue).some((v) => !v)) return { required: true };
+	}
+	return null;
 };
-
-/* eslint-disable @typescript-eslint/no-inferrable-types */
-class MultiInputComponent {
-    /**
-     * `controlHasError` reads `ngControl.touched`/`errors` — mutable state OnPush
-     * never re-checks on its own (e.g. an external `markAllAsTouched()` on submit).
-     * ngDoCheck runs whenever an ancestor is checked, so mark the view when the
-     * error state moves (same pattern as validation-error/autocomplete-v2).
-     */
-    ngDoCheck() {
-        const hasError = this.controlHasError;
-        if (hasError !== this.lastControlHasError) {
-            this.lastControlHasError = hasError;
-            this.cdr.markForCheck();
-        }
-    }
-    constructor(ngControl, fb) {
-        this.ngControl = ngControl;
-        this.fb = fb;
-        this.cdr = inject(ChangeDetectorRef);
-        /**
-         *
-         * @description List of items to be displayed in the dropdown list
-         * @type {Record<string, string | null | number>[]}
-         * @memberof MultiInputComponent
-         */
-        this.itemsList = input.required(...(ngDevMode ? [{ debugName: "itemsList" }] : /* istanbul ignore next */ []));
-        /**
-         *
-         * @description The field to be displayed in the dropdown
-         * @type {string}
-         * @memberof MultiInputComponent
-         */
-        this.itemTextField = input.required(...(ngDevMode ? [{ debugName: "itemTextField" }] : /* istanbul ignore next */ []));
-        /**
-         *
-         * @description The value to be displayed in the droddown
-         * @type {string}
-         * @memberof MultiInputComponent
-         */
-        this.itemValueField = input.required(...(ngDevMode ? [{ debugName: "itemValueField" }] : /* istanbul ignore next */ []));
-        /**
-         *
-         * @description The Value of the multi input
-         * @type {MultiInputValue}
-         * @memberof MultiInputComponent
-         */
-        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-        /**
-         *
-         * @description Disables the multi input
-         * @type {boolean}
-         * @memberof MultiInputComponent
-         */
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         *
-         * @description Defines if the multi input is required
-         * @type {boolean}
-         * @memberof MultiInputComponent
-         */
-        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         *
-         * @description Defines the label of the multi input
-         * @type {string}
-         * @memberof MultiInputComponent
-         */
-        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /**
-         *
-         * @description Defines the placeholder of the multi input
-         * @type {string}
-         * @memberof MultiInputComponent
-         */
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
-        this.unitTestId = computed(() => (this.testId() ? `${this.testId()}-unit` : null), ...(ngDevMode ? [{ debugName: "unitTestId" }] : /* istanbul ignore next */ []));
-        this.valueTestId = computed(() => (this.testId() ? `${this.testId()}-value` : null), ...(ngDevMode ? [{ debugName: "valueTestId" }] : /* istanbul ignore next */ []));
-        /**
-         *
-         * @description Allow decimal values in the multi input
-         * @type {boolean}
-         * @memberof MultiInputComponent
-         */
-        this.allowDecimal = input(true, { ...(ngDevMode ? { debugName: "allowDecimal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         *
-         * @description Allow negative values in the multi input
-         * @type {boolean}
-         * @memberof MultiInputComponent
-         */
-        this.allowNegative = input(true, { ...(ngDevMode ? { debugName: "allowNegative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         *
-         * @description The errors of the multi input
-         * @type {string[]}
-         * @memberof MultiInputComponent
-         */
-        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-        /**
-         *
-         * @description Hide built in errors for Reactive Forms
-         * @type {boolean}
-         * @memberof MultiInputComponent
-         */
-        this.hideBuiltInErrors = input(false, { ...(ngDevMode ? { debugName: "hideBuiltInErrors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         *
-         * @description Hide label in errors
-         * @type {boolean}
-         * @memberof MultiInputComponent
-         */
-        this.hideLabelInErrors = input(false, { ...(ngDevMode ? { debugName: "hideLabelInErrors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         *
-         * @description The maximum characters allowed in the multi input
-         * @type {number}
-         * @memberof MultiInputComponent
-         */
-        this.maxCharacters = input(0, ...(ngDevMode ? [{ debugName: "maxCharacters" }] : /* istanbul ignore next */ []));
-        /**
-         *
-         * @description The validators to apply to input field
-         * @type {Validators[]}
-         * @memberof MultiInputComponent
-         */
-        this.validators = input([], ...(ngDevMode ? [{ debugName: "validators" }] : /* istanbul ignore next */ []));
-        /**
-         *
-         * @description The width of the multi input
-         * @type {boolean}
-         * @memberof MultiInputComponent
-         */
-        this.fullWidth = false;
-        this.valueChange = new EventEmitter();
-        this.class = 'ui-multi-input';
-        /**
-         * @description Indicates that custom errors are provided via content projection.
-         * When true, the built-in error hints will be hidden.
-         * @type {boolean}
-         * @memberof MultiInputComponent
-         */
-        this.hasCustomErrors = input(false, { ...(ngDevMode ? { debugName: "hasCustomErrors" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * @ignore
-         */
-        this.onChange = (_value) => { };
-        /**
-         * @ignore
-         */
-        this.onTouch = () => { };
-        this.multiInputForm = this.fb.group({
-            value: null,
-        });
-        effect(() => {
-            this.updateDisableState(this.disabled());
-        });
-        effect(() => {
-            const maxCharacters = this.maxCharacters();
-            if (maxCharacters) {
-                this.inputControl?.addValidators(Validators.maxLength(maxCharacters));
-                this.inputControl?.updateValueAndValidity({ emitEvent: false });
-            }
-        });
-        effect(() => {
-            const inputValidators = this.validators();
-            if (inputValidators?.length) {
-                this.inputControl?.addValidators(inputValidators);
-                this.inputControl?.updateValueAndValidity({ emitEvent: false });
-            }
-        });
-        effect(() => {
-            const value = this.value();
-            // skip in the context of angular Forms
-            if (!this.ngControl) {
-                this.addDropdownControl();
-                this.patchForm(value);
-            }
-        });
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-        this.multiInputForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(formValue => {
-            this.valueChanged(formValue);
-        });
-    }
-    ngOnInit() {
-        this.addDropdownControl();
-        if (this.ngControl) {
-            this.ngControl.control?.addValidators(requiredMultiInput);
-        }
-    }
-    writeValue(value) {
-        this.addDropdownControl();
-        this.patchForm(value);
-    }
-    patchForm(value) {
-        if (value) {
-            this.multiInputForm.patchValue(value, { emitEvent: false });
-        }
-        else {
-            this.multiInputForm.reset(undefined, { emitEvent: false });
-        }
-    }
-    setDisabledState(isDisabled) {
-        this.updateDisableState(isDisabled);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    valueChanged(value) {
-        this.valueChange.emit(value);
-        this.onChange(value);
-    }
-    get dropdownControl() {
-        return this.multiInputForm.controls[this.itemValueField()];
-    }
-    get inputControl() {
-        return this.multiInputForm.controls.value;
-    }
-    markAsTouched() {
-        this.onTouch();
-    }
-    addDropdownControl() {
-        if (!this.multiInputForm.value[this.itemValueField()]) {
-            this.multiInputForm.addControl(this.itemValueField(), new FormControl(null), { emitEvent: false });
-            this.updateDisableState(this.disabled());
-        }
-    }
-    get controlHasError() {
-        if (this.ngControl) {
-            return Boolean(this.ngControl.errors && this.ngControl.touched);
-        }
-        else {
-            return this.errors()?.length > 0;
-        }
-    }
-    getValueLength() {
-        return this.inputControl?.value?.toString().length ?? 0;
-    }
-    updateDisableState(state) {
-        if (state) {
-            this.multiInputForm.disable({ emitEvent: false });
-        }
-        else {
-            this.multiInputForm.enable({ emitEvent: false });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MultiInputComponent, isStandalone: true, selector: "ui-multi-input", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: true, transformFunction: null }, itemTextField: { classPropertyName: "itemTextField", publicName: "itemTextField", isSignal: true, isRequired: true, transformFunction: null }, itemValueField: { classPropertyName: "itemValueField", publicName: "itemValueField", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, allowDecimal: { classPropertyName: "allowDecimal", publicName: "allowDecimal", isSignal: true, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, hideBuiltInErrors: { classPropertyName: "hideBuiltInErrors", publicName: "hideBuiltInErrors", isSignal: true, isRequired: false, transformFunction: null }, hideLabelInErrors: { classPropertyName: "hideLabelInErrors", publicName: "hideLabelInErrors", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, hasCustomErrors: { classPropertyName: "hasCustomErrors", publicName: "hasCustomErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidth", "class": "this.class" } }, ngImport: i0, template: "<div [formGroup]=\"multiInputForm\">\n  <div class=\"controls-wrapper\">\n    <ui-dropdown\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"itemValueField()\"\n      [valueList]=\"itemsList()\"\n      [textField]=\"itemTextField()\"\n      [valueField]=\"itemValueField()\"\n      [showBottomContent]=\"false\"\n      [allowClear]=\"false\"\n      [testId]=\"unitTestId()\"\n      (closed)=\"markAsTouched()\"\n    ></ui-dropdown>\n\n    <ui-field\n      [hasError]=\"controlHasError\"\n      formControlName=\"value\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [hideBuiltInErrors]=\"true\"\n      [showBottomContent]=\"false\"\n      [allowOnlyDigits]=\"true\"\n      [fullWidth]=\"fullWidth\"\n      [allowNegative]=\"allowNegative()\"\n      [testId]=\"valueTestId()\"\n      (focusout)=\"markAsTouched()\"\n    ></ui-field>\n  </div>\n\n  @if (!hasCustomErrors()) {\n    @if (!controlHasError && maxCharacters() && !errors()?.length) {\n      <mat-hint class=\"info\">{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint>\n    }\n\n    @if (errors()?.length || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @for (error of errors(); track error) {\n          <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n        }\n        @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors()) {\n          <ui-validation-error\n            [touchedOn]=\"!controlHasError\"\n            [ngControl]=\"ngControl\"\n            [label]=\"hideLabelInErrors() ? null : label()\"\n          ></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  }\n  <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-text-field-wrapper,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading,:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-text-field-wrapper{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DropdownComponent, selector: "ui-dropdown", inputs: ["label", "labelIcon", "isAIVariant", "name", "placeholder", "id", "testId", "ariaLabel", "value", "errors", "disabled", "valueList", "allowClear", "allowMultipleSelection", "required", "showBottomContent", "applicationTheme", "hideBuiltInErrors", "hideLabelInErrors", "textField", "valueField", "hasError", "companyColor", "panelClass"], outputs: ["closed", "opened"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "testId", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i3.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MultiInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-multi-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        DropdownComponent,
-                        FieldComponent,
-                        MatHint,
-                        IconComponentModule,
-                        ValidationErrorModule,
-                        HasValidationErrorPipe,
-                    ], template: "<div [formGroup]=\"multiInputForm\">\n  <div class=\"controls-wrapper\">\n    <ui-dropdown\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"itemValueField()\"\n      [valueList]=\"itemsList()\"\n      [textField]=\"itemTextField()\"\n      [valueField]=\"itemValueField()\"\n      [showBottomContent]=\"false\"\n      [allowClear]=\"false\"\n      [testId]=\"unitTestId()\"\n      (closed)=\"markAsTouched()\"\n    ></ui-dropdown>\n\n    <ui-field\n      [hasError]=\"controlHasError\"\n      formControlName=\"value\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [hideBuiltInErrors]=\"true\"\n      [showBottomContent]=\"false\"\n      [allowOnlyDigits]=\"true\"\n      [fullWidth]=\"fullWidth\"\n      [allowNegative]=\"allowNegative()\"\n      [testId]=\"valueTestId()\"\n      (focusout)=\"markAsTouched()\"\n    ></ui-field>\n  </div>\n\n  @if (!hasCustomErrors()) {\n    @if (!controlHasError && maxCharacters() && !errors()?.length) {\n      <mat-hint class=\"info\">{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint>\n    }\n\n    @if (errors()?.length || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @for (error of errors(); track error) {\n          <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n        }\n        @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors()) {\n          <ui-validation-error\n            [touchedOn]=\"!controlHasError\"\n            [ngControl]=\"ngControl\"\n            [label]=\"hideLabelInErrors() ? null : label()\"\n          ></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  }\n  <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-text-field-wrapper,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading,:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-text-field-wrapper{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i1.FormBuilder }], propDecorators: { itemsList: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsList", required: true }] }], itemTextField: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTextField", required: true }] }], itemValueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemValueField", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], allowDecimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDecimal", required: false }] }], allowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNegative", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], hideBuiltInErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideBuiltInErrors", required: false }] }], hideLabelInErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabelInErrors", required: false }] }], maxCharacters: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCharacters", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], fullWidth: [{
-                type: HostBinding,
-                args: ['class.full-width']
-            }, {
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], class: [{
-                type: HostBinding
-            }], hasCustomErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCustomErrors", required: false }] }] } });
-
-class MultiInputComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MultiInputComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: MultiInputComponentModule, imports: [CommonModule,
-            MatInputModule,
-            MatSelectModule,
-            DividerComponentModule,
-            IconComponentModule,
-            DropdownComponentModule,
-            ReactiveFormsModule,
-            DigitsOnlyDirective,
-            HasValidationErrorPipe,
-            ValidationErrorModule,
-            FieldComponentModule,
-            MultiInputComponent], exports: [MultiInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MultiInputComponentModule, imports: [CommonModule,
-            MatInputModule,
-            MatSelectModule,
-            DividerComponentModule,
-            IconComponentModule,
-            DropdownComponentModule,
-            ReactiveFormsModule,
-            ValidationErrorModule,
-            FieldComponentModule,
-            MultiInputComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MultiInputComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        DividerComponentModule,
-                        IconComponentModule,
-                        DropdownComponentModule,
-                        ReactiveFormsModule,
-                        DigitsOnlyDirective,
-                        HasValidationErrorPipe,
-                        ValidationErrorModule,
-                        FieldComponentModule,
-                        MultiInputComponent,
-                    ],
-                    exports: [MultiInputComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var MultiInputComponent = class MultiInputComponent {
+	ngDoCheck() {
+		const hasError = this.controlHasError;
+		if (hasError !== this.lastControlHasError) {
+			this.lastControlHasError = hasError;
+			this.cdr.markForCheck();
+		}
+	}
+	constructor(ngControl, fb) {
+		this.ngControl = ngControl;
+		this.fb = fb;
+		this.cdr = inject(ChangeDetectorRef);
+		this.itemsList = input.required(...ngDevMode ? [{ debugName: "itemsList" }] : /* istanbul ignore next */ []);
+		this.itemTextField = input.required(...ngDevMode ? [{ debugName: "itemTextField" }] : /* istanbul ignore next */ []);
+		this.itemValueField = input.required(...ngDevMode ? [{ debugName: "itemValueField" }] : /* istanbul ignore next */ []);
+		this.value = input(...ngDevMode ? [void 0, { debugName: "value" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.required = input(false, {
+			...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.testId = input(null, ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.unitTestId = computed(() => this.testId() ? `${this.testId()}-unit` : null, ...ngDevMode ? [{ debugName: "unitTestId" }] : /* istanbul ignore next */ []);
+		this.valueTestId = computed(() => this.testId() ? `${this.testId()}-value` : null, ...ngDevMode ? [{ debugName: "valueTestId" }] : /* istanbul ignore next */ []);
+		this.allowDecimal = input(true, {
+			...ngDevMode ? { debugName: "allowDecimal" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.allowNegative = input(true, {
+			...ngDevMode ? { debugName: "allowNegative" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+		this.hideBuiltInErrors = input(false, {
+			...ngDevMode ? { debugName: "hideBuiltInErrors" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.hideLabelInErrors = input(false, {
+			...ngDevMode ? { debugName: "hideLabelInErrors" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.maxCharacters = input(0, ...ngDevMode ? [{ debugName: "maxCharacters" }] : /* istanbul ignore next */ []);
+		this.validators = input([], ...ngDevMode ? [{ debugName: "validators" }] : /* istanbul ignore next */ []);
+		this.fullWidth = false;
+		this.valueChange = new EventEmitter();
+		this.class = "ui-multi-input";
+		this.hasCustomErrors = input(false, {
+			...ngDevMode ? { debugName: "hasCustomErrors" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.onChange = (_value) => {};
+		this.onTouch = () => {};
+		this.multiInputForm = this.fb.group({ value: null });
+		effect(() => {
+			this.updateDisableState(this.disabled());
+		});
+		effect(() => {
+			const maxCharacters = this.maxCharacters();
+			if (maxCharacters) {
+				this.inputControl?.addValidators(Validators.maxLength(maxCharacters));
+				this.inputControl?.updateValueAndValidity({ emitEvent: false });
+			}
+		});
+		effect(() => {
+			const inputValidators = this.validators();
+			if (inputValidators?.length) {
+				this.inputControl?.addValidators(inputValidators);
+				this.inputControl?.updateValueAndValidity({ emitEvent: false });
+			}
+		});
+		effect(() => {
+			const value = this.value();
+			if (!this.ngControl) {
+				this.addDropdownControl();
+				this.patchForm(value);
+			}
+		});
+		if (this.ngControl) this.ngControl.valueAccessor = this;
+		this.multiInputForm.valueChanges.pipe(takeUntilDestroyed()).subscribe((formValue) => {
+			this.valueChanged(formValue);
+		});
+	}
+	ngOnInit() {
+		this.addDropdownControl();
+		if (this.ngControl) this.ngControl.control?.addValidators(requiredMultiInput);
+	}
+	writeValue(value) {
+		this.addDropdownControl();
+		this.patchForm(value);
+	}
+	patchForm(value) {
+		if (value) this.multiInputForm.patchValue(value, { emitEvent: false });
+		else this.multiInputForm.reset(void 0, { emitEvent: false });
+	}
+	setDisabledState(isDisabled) {
+		this.updateDisableState(isDisabled);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouch = fn;
+	}
+	valueChanged(value) {
+		this.valueChange.emit(value);
+		this.onChange(value);
+	}
+	get dropdownControl() {
+		return this.multiInputForm.controls[this.itemValueField()];
+	}
+	get inputControl() {
+		return this.multiInputForm.controls.value;
+	}
+	markAsTouched() {
+		this.onTouch();
+	}
+	addDropdownControl() {
+		if (!this.multiInputForm.value[this.itemValueField()]) {
+			this.multiInputForm.addControl(this.itemValueField(), new FormControl(null), { emitEvent: false });
+			this.updateDisableState(this.disabled());
+		}
+	}
+	get controlHasError() {
+		if (this.ngControl) return Boolean(this.ngControl.errors && this.ngControl.touched);
+		else return this.errors()?.length > 0;
+	}
+	getValueLength() {
+		return this.inputControl?.value?.toString().length ?? 0;
+	}
+	updateDisableState(state) {
+		if (state) this.multiInputForm.disable({ emitEvent: false });
+		else this.multiInputForm.enable({ emitEvent: false });
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: MultiInputComponent,
+			deps: [{
+				token: i1.NgControl,
+				optional: true,
+				self: true
+			}, { token: i1.FormBuilder }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: MultiInputComponent,
+			isStandalone: true,
+			selector: "ui-multi-input",
+			inputs: {
+				itemsList: {
+					classPropertyName: "itemsList",
+					publicName: "itemsList",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				itemTextField: {
+					classPropertyName: "itemTextField",
+					publicName: "itemTextField",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				itemValueField: {
+					classPropertyName: "itemValueField",
+					publicName: "itemValueField",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				required: {
+					classPropertyName: "required",
+					publicName: "required",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowDecimal: {
+					classPropertyName: "allowDecimal",
+					publicName: "allowDecimal",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowNegative: {
+					classPropertyName: "allowNegative",
+					publicName: "allowNegative",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				errors: {
+					classPropertyName: "errors",
+					publicName: "errors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hideBuiltInErrors: {
+					classPropertyName: "hideBuiltInErrors",
+					publicName: "hideBuiltInErrors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hideLabelInErrors: {
+					classPropertyName: "hideLabelInErrors",
+					publicName: "hideLabelInErrors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxCharacters: {
+					classPropertyName: "maxCharacters",
+					publicName: "maxCharacters",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				validators: {
+					classPropertyName: "validators",
+					publicName: "validators",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fullWidth: {
+					classPropertyName: "fullWidth",
+					publicName: "fullWidth",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				hasCustomErrors: {
+					classPropertyName: "hasCustomErrors",
+					publicName: "hasCustomErrors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { valueChange: "valueChange" },
+			host: { properties: {
+				"class.full-width": "this.fullWidth",
+				"class": "this.class"
+			} },
+			ngImport: i0,
+			template: "<div [formGroup]=\"multiInputForm\">\n  <div class=\"controls-wrapper\">\n    <ui-dropdown\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"itemValueField()\"\n      [valueList]=\"itemsList()\"\n      [textField]=\"itemTextField()\"\n      [valueField]=\"itemValueField()\"\n      [showBottomContent]=\"false\"\n      [allowClear]=\"false\"\n      [testId]=\"unitTestId()\"\n      (closed)=\"markAsTouched()\"\n    ></ui-dropdown>\n\n    <ui-field\n      [hasError]=\"controlHasError\"\n      formControlName=\"value\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [hideBuiltInErrors]=\"true\"\n      [showBottomContent]=\"false\"\n      [allowOnlyDigits]=\"true\"\n      [fullWidth]=\"fullWidth\"\n      [allowNegative]=\"allowNegative()\"\n      [testId]=\"valueTestId()\"\n      (focusout)=\"markAsTouched()\"\n    ></ui-field>\n  </div>\n\n  @if (!hasCustomErrors()) {\n    @if (!controlHasError && maxCharacters() && !errors()?.length) {\n      <mat-hint class=\"info\">{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint>\n    }\n\n    @if (errors()?.length || ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @for (error of errors(); track error) {\n          <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n        }\n        @if (($safeNavigationMigration(ngControl?.errors) | hasValidationError) && !hideBuiltInErrors()) {\n          <ui-validation-error\n            [touchedOn]=\"!controlHasError\"\n            [ngControl]=\"ngControl\"\n            [label]=\"hideLabelInErrors() ? null : label()\"\n          ></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  }\n  <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-text-field-wrapper,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading,:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-text-field-wrapper{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatusGroup,
+					selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+				},
+				{
+					kind: "directive",
+					type: i1.RequiredValidator,
+					selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",
+					inputs: ["required"]
+				},
+				{
+					kind: "ngmodule",
+					type: ReactiveFormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.FormGroupDirective,
+					selector: "[formGroup]",
+					inputs: ["formGroup"],
+					outputs: ["ngSubmit"],
+					exportAs: ["ngForm"]
+				},
+				{
+					kind: "directive",
+					type: i1.FormControlName,
+					selector: "[formControlName]",
+					inputs: [
+						"formControlName",
+						"disabled",
+						"ngModel"
+					],
+					outputs: ["ngModelChange"]
+				},
+				{
+					kind: "component",
+					type: DropdownComponent,
+					selector: "ui-dropdown",
+					inputs: [
+						"label",
+						"labelIcon",
+						"isAIVariant",
+						"name",
+						"placeholder",
+						"id",
+						"testId",
+						"ariaLabel",
+						"value",
+						"errors",
+						"disabled",
+						"valueList",
+						"allowClear",
+						"allowMultipleSelection",
+						"required",
+						"showBottomContent",
+						"applicationTheme",
+						"hideBuiltInErrors",
+						"hideLabelInErrors",
+						"textField",
+						"valueField",
+						"hasError",
+						"companyColor",
+						"panelClass"
+					],
+					outputs: ["closed", "opened"]
+				},
+				{
+					kind: "component",
+					type: FieldComponent,
+					selector: "ui-field",
+					inputs: [
+						"fullWidth",
+						"fullHeight",
+						"label",
+						"labelHtml",
+						"labelIcon",
+						"fieldName",
+						"placeholder",
+						"id",
+						"value",
+						"badgeVariant",
+						"errors",
+						"disabled",
+						"required",
+						"readOnly",
+						"hintMessage",
+						"type",
+						"updateOnBlur",
+						"allowOnlyDigits",
+						"isAutocompleteOff",
+						"allowNegative",
+						"showBottomContent",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"loading",
+						"isValid",
+						"maxCharacters",
+						"trimOnBlur",
+						"trimOnSubmit",
+						"maxRows",
+						"hasTextAreaCounter",
+						"hideBuiltInErrors",
+						"hideLabelInErrors",
+						"max",
+						"min",
+						"textareaHeight",
+						"borderless",
+						"autosizableTextarea",
+						"isAIVariant",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"hasError"
+					],
+					outputs: ["validateEvent", "fieldBlur"]
+				},
+				{
+					kind: "directive",
+					type: MatHint,
+					selector: "mat-hint",
+					inputs: ["align", "id"]
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i2.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: ValidationErrorModule
+				},
+				{
+					kind: "component",
+					type: i3.ValidationErrorComponent,
+					selector: "ui-validation-error",
+					inputs: [
+						"ngControl",
+						"touchedOn",
+						"errorMessage",
+						"label",
+						"applicationTheme",
+						"customErrors"
+					]
+				},
+				{
+					kind: "pipe",
+					type: HasValidationErrorPipe,
+					name: "hasValidationError"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: MultiInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-multi-input",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				ReactiveFormsModule,
+				DropdownComponent,
+				FieldComponent,
+				MatHint,
+				IconComponentModule,
+				ValidationErrorModule,
+				HasValidationErrorPipe
+			],
+			template: "<div [formGroup]=\"multiInputForm\">\n  <div class=\"controls-wrapper\">\n    <ui-dropdown\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"itemValueField()\"\n      [valueList]=\"itemsList()\"\n      [textField]=\"itemTextField()\"\n      [valueField]=\"itemValueField()\"\n      [showBottomContent]=\"false\"\n      [allowClear]=\"false\"\n      [testId]=\"unitTestId()\"\n      (closed)=\"markAsTouched()\"\n    ></ui-dropdown>\n\n    <ui-field\n      [hasError]=\"controlHasError\"\n      formControlName=\"value\"\n      [label]=\"label()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [hideBuiltInErrors]=\"true\"\n      [showBottomContent]=\"false\"\n      [allowOnlyDigits]=\"true\"\n      [fullWidth]=\"fullWidth\"\n      [allowNegative]=\"allowNegative()\"\n      [testId]=\"valueTestId()\"\n      (focusout)=\"markAsTouched()\"\n    ></ui-field>\n  </div>\n\n  @if (!hasCustomErrors()) {\n    @if (!controlHasError && maxCharacters() && !errors()?.length) {\n      <mat-hint class=\"info\">{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint>\n    }\n\n    @if (errors()?.length || ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @for (error of errors(); track error) {\n          <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n        }\n        @if (($safeNavigationMigration(ngControl?.errors) | hasValidationError) && !hideBuiltInErrors()) {\n          <ui-validation-error\n            [touchedOn]=\"!controlHasError\"\n            [ngControl]=\"ngControl\"\n            [label]=\"hideLabelInErrors() ? null : label()\"\n          ></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  }\n  <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-text-field-wrapper,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading,:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-text-field-wrapper{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: i1.NgControl,
+		decorators: [{ type: Optional }, { type: Self }]
+	}, { type: i1.FormBuilder }],
+	propDecorators: {
+		itemsList: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemsList",
+				required: true
+			}]
+		}],
+		itemTextField: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemTextField",
+				required: true
+			}]
+		}],
+		itemValueField: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemValueField",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
+		allowDecimal: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowDecimal",
+				required: false
+			}]
+		}],
+		allowNegative: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowNegative",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}],
+		hideBuiltInErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideBuiltInErrors",
+				required: false
+			}]
+		}],
+		hideLabelInErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideLabelInErrors",
+				required: false
+			}]
+		}],
+		maxCharacters: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxCharacters",
+				required: false
+			}]
+		}],
+		validators: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validators",
+				required: false
+			}]
+		}],
+		fullWidth: [{
+			type: HostBinding,
+			args: ["class.full-width"]
+		}, { type: Input }],
+		valueChange: [{ type: Output }],
+		class: [{ type: HostBinding }],
+		hasCustomErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasCustomErrors",
+				required: false
+			}]
+		}]
+	}
+});
+var MultiInputComponentModule = class MultiInputComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: MultiInputComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: MultiInputComponentModule,
+			imports: [
+				CommonModule,
+				MatInputModule,
+				MatSelectModule,
+				DividerComponentModule,
+				IconComponentModule,
+				DropdownComponentModule,
+				ReactiveFormsModule,
+				DigitsOnlyDirective,
+				HasValidationErrorPipe,
+				ValidationErrorModule,
+				FieldComponentModule,
+				MultiInputComponent
+			],
+			exports: [MultiInputComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: MultiInputComponentModule,
+			imports: [
+				CommonModule,
+				MatInputModule,
+				MatSelectModule,
+				DividerComponentModule,
+				IconComponentModule,
+				DropdownComponentModule,
+				ReactiveFormsModule,
+				ValidationErrorModule,
+				FieldComponentModule,
+				MultiInputComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: MultiInputComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				MatInputModule,
+				MatSelectModule,
+				DividerComponentModule,
+				IconComponentModule,
+				DropdownComponentModule,
+				ReactiveFormsModule,
+				DigitsOnlyDirective,
+				HasValidationErrorPipe,
+				ValidationErrorModule,
+				FieldComponentModule,
+				MultiInputComponent
+			],
+			exports: [MultiInputComponent]
+		}]
+	}]
+});
 export { MultiInputComponent, MultiInputComponentModule, requiredMultiInput };
-//# sourceMappingURL=testgorilla-tgo-ui-components-multi-input.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-multi-input.mjs.map