@testgorilla/tgo-ui 3.13.0 → 3.13.2

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -24512,21 +24512,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class MultiInputComponent {
-    /**
-     *
-     * @description The Value of the multi input
-     * @type {MultiInputValue}
-     * @memberof MultiInputComponent
-     */
-    set value(v) {
-        this._value = v;
-        this.addDropdownControl();
-        this.multiInputForm.patchValue(v);
+/* eslint-disable @typescript-eslint/unbound-method */
+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 };
+        }
     }
-    constructor(ngControl, defaultAppTheme, fb) {
+    return null;
+};
+
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable @typescript-eslint/unbound-method */
+class MultiInputComponent {
+    constructor(ngControl, fb) {
         this.ngControl = ngControl;
-        this.defaultAppTheme = defaultAppTheme;
         this.fb = fb;
         /**
          *
@@ -24534,105 +24539,105 @@ class MultiInputComponent {
          * @type {Record<string, string | null | number>[]}
          * @memberof MultiInputComponent
          */
-        this.itemsList = [];
+        this.itemsList = input.required();
         /**
          *
          * @description The field to be displayed in the dropdown
          * @type {string}
          * @memberof MultiInputComponent
          */
-        this.itemTextField = '';
+        this.itemTextField = input.required();
         /**
          *
          * @description The value to be displayed in the droddown
          * @type {string}
          * @memberof MultiInputComponent
          */
-        this.itemValueField = '';
+        this.itemValueField = input.required();
+        /**
+         *
+         * @description The Value of the multi input
+         * @type {MultiInputValue}
+         * @memberof MultiInputComponent
+         */
+        this.value = input();
         /**
          *
          * @description Disables the multi input
          * @type {boolean}
          * @memberof MultiInputComponent
          */
-        this.disabled = false;
+        this.disabled = input(false, { transform: booleanAttribute });
         /**
          *
          * @description Defines if the multi input is required
          * @type {boolean}
          * @memberof MultiInputComponent
          */
-        this.required = false;
+        this.required = input(false, { transform: booleanAttribute });
         /**
          *
          * @description Defines the label of the multi input
          * @type {string}
          * @memberof MultiInputComponent
          */
-        this.label = '';
+        this.label = input('');
         /**
          *
          * @description Defines the placeholder of the multi input
          * @type {string}
          * @memberof MultiInputComponent
          */
-        this.placeholder = '';
+        this.placeholder = input('');
         /**
          *
          * @description Allow decimal values in the multi input
          * @type {boolean}
          * @memberof MultiInputComponent
          */
-        this.allowDecimal = true;
+        this.allowDecimal = input(true, { transform: booleanAttribute });
         /**
          *
          * @description Allow negative values in the multi input
          * @type {boolean}
          * @memberof MultiInputComponent
          */
-        this.allowNegative = true;
-        /**
-         *
-         * @description The theme of the application
-         * @type {ApplicationTheme}
-         * @memberof MultiInputComponent
-         */
-        this.applicationTheme = 'light';
+        this.allowNegative = input(true, { transform: booleanAttribute });
         /**
          *
          * @description The errors of the multi input
          * @type {string[]}
          * @memberof MultiInputComponent
          */
-        this.errors = [];
+        this.errors = input([]);
         /**
          *
          * @description Hide built in errors for Reactive Forms
          * @type {boolean}
          * @memberof MultiInputComponent
          */
-        this.hideBuiltInErrors = false;
+        this.hideBuiltInErrors = input(false, { transform: booleanAttribute });
         /**
          *
          * @description Hide label in errors
          * @type {boolean}
          * @memberof MultiInputComponent
          */
-        this.hideLabelInErrors = false;
+        this.hideLabelInErrors = input(false, { transform: booleanAttribute });
         /**
          *
          * @description The maximum characters allowed in the multi input
          * @type {number}
          * @memberof MultiInputComponent
          */
-        this.maxCharacters = 0;
+        this.maxCharacters = input(0);
         /**
          *
          * @description The validators to apply to input field
          * @type {Validators[]}
          * @memberof MultiInputComponent
          */
-        this.validators = [];
+        this.validators = input([]);
         /**
          *
          * @description The width of the multi input
@@ -24650,44 +24655,60 @@ class MultiInputComponent {
          * @ignore
          */
         this.onTouch = () => { };
-        this.showError = false;
         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();
+            }
+        });
+        effect(() => {
+            const inputValidators = this.validators();
+            if (inputValidators?.length) {
+                this.inputControl?.addValidators(inputValidators);
+                this.inputControl?.updateValueAndValidity();
+            }
+        });
+        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;
         }
-        if (this.defaultAppTheme) {
-            this.applicationTheme = this.defaultAppTheme;
-        }
         this.multiInputForm.valueChanges.pipe(takeUntilDestroyed()).subscribe(formValue => {
             this.valueChanged(formValue);
-            this.checkFormErrors();
-            if (!formValue.value && !formValue[this.itemValueField]) {
-                this.showError = true;
-            }
         });
     }
     ngOnInit() {
         this.addDropdownControl();
-        this.addValidation();
-        if (this.ngControl && this.hasRequiredValidator) {
-            this.inputControl?.addValidators(Validators.required);
-            this.dropdownControl?.addValidators(Validators.required);
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes['disabled']) {
-            this.updateDisableState(this.disabled);
+        if (this.ngControl) {
+            this.ngControl.control?.addValidators(requiredMultiInput);
         }
     }
     writeValue(value) {
-        this.value = value;
         this.addDropdownControl();
-        this.multiInputForm.patchValue(value);
+        this.patchForm(value);
+    }
+    patchForm(value) {
+        if (value) {
+            this.multiInputForm.patchValue(value);
+        }
+        else {
+            this.multiInputForm.reset();
+        }
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
         this.updateDisableState(isDisabled);
     }
     registerOnChange(fn) {
@@ -24700,60 +24721,32 @@ class MultiInputComponent {
         this.valueChange.emit(value);
         this.onChange(value);
     }
-    get value() {
-        return this._value;
-    }
-    get hasRequiredValidator() {
-        return !!this.ngControl.control?.hasValidator(Validators.required);
-    }
     get dropdownControl() {
-        return this.multiInputForm.get(this.itemValueField);
+        return this.multiInputForm.controls[this.itemValueField()];
     }
     get inputControl() {
-        return this.multiInputForm.get('value');
-    }
-    checkFormErrors() {
-        const hasErrors = this.inputControl?.errors || this.dropdownControl?.errors;
-        if (this.ngControl) {
-            this.ngControl.control?.setErrors(!!hasErrors ? { ...this.inputControl?.errors, ...this.dropdownControl?.errors } : null);
-        }
-        this.showError = !!hasErrors;
+        return this.multiInputForm.controls.value;
     }
     markAsTouched() {
         this.onTouch();
-        if (this.ngControl &&
-            ((this.inputControl?.touched && this.dropdownControl?.touched) ||
-                (!this.inputControl?.value && !this.dropdownControl?.value))) {
-            this.ngControl.control?.markAsTouched();
-        }
     }
     addDropdownControl() {
-        if (!this.multiInputForm.value[this.itemValueField]) {
-            this.multiInputForm.addControl(this.itemValueField, new FormControl(null), { emitEvent: false });
-            this.updateDisableState(this.disabled);
+        if (!this.multiInputForm.value[this.itemValueField()]) {
+            this.multiInputForm.addControl(this.itemValueField(), new FormControl(null), { emitEvent: false });
+            this.updateDisableState(this.disabled());
         }
     }
     get controlHasError() {
-        return this.ngControl
-            ? (this.showError && !!this.ngControl.control?.touched) ||
-                (!this.inputControl?.valid && !!this.inputControl?.touched) ||
-                (!this.dropdownControl?.valid && !!this.dropdownControl?.touched)
-            : this.showError ||
-                !!this.errors.length ||
-                (!this.inputControl?.valid && !!this.inputControl?.touched) ||
-                (!this.dropdownControl?.valid && !!this.dropdownControl?.touched);
+        if (this.ngControl) {
+            return !!(this.ngControl.errors && this.ngControl.touched);
+        }
+        else {
+            return this.errors()?.length > 0;
+        }
     }
     getValueLength() {
         return this.inputControl?.value?.toString().length || 0;
     }
-    addValidation() {
-        if (this.maxCharacters) {
-            this.inputControl?.addValidators(Validators.maxLength(this.maxCharacters));
-        }
-        if (this.validators?.length) {
-            this.inputControl?.addValidators(this.validators);
-        }
-    }
     updateDisableState(state) {
         if (state) {
             this.multiInputForm.disable({ emitEvent: false });
@@ -24762,66 +24755,17 @@ class MultiInputComponent {
             this.multiInputForm.enable({ emitEvent: false });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MultiInputComponent, selector: "ui-multi-input", inputs: { itemsList: "itemsList", itemTextField: "itemTextField", itemValueField: "itemValueField", value: "value", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], label: "label", placeholder: "placeholder", allowDecimal: ["allowDecimal", "allowDecimal", booleanAttribute], allowNegative: ["allowNegative", "allowNegative", booleanAttribute], applicationTheme: "applicationTheme", errors: "errors", hideBuiltInErrors: ["hideBuiltInErrors", "hideBuiltInErrors", booleanAttribute], hideLabelInErrors: ["hideLabelInErrors", "hideLabelInErrors", booleanAttribute], maxCharacters: "maxCharacters", validators: "validators", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.theme": "this.applicationTheme", "class.full-width": "this.fullWidth", "class": "this.class" } }, usesOnChanges: true, 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      (closed)=\"markAsTouched(); checkFormErrors()\"\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      (focusout)=\"markAsTouched(); checkFormErrors()\"\n    ></ui-field>\n  </div>\n\n  <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters && !errors?.length\">{{ getValueLength() }} / {{ maxCharacters }}</mat-hint>\n\n  @if (errors?.length || (ngControl?.errors | hasValidationError)) {\n    <mat-hint class=\"error\">\n      @for (error of errors; track error) {\n        <ui-icon\n          [applicationTheme]=\"applicationTheme\"\n          [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n        ></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</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: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: DropdownComponent, selector: "ui-dropdown", inputs: ["label", "labelIcon", "isAIVariant", "name", "placeholder", "id", "value", "errors", "disabled", "valueList", "allowClear", "allowMultipleSelection", "required", "showBottomContent", "applicationTheme", "hideBuiltInErrors", "hideLabelInErrors", "textField", "valueField", "hasError", "companyColor", "panelClass"], outputs: ["closed", "opened"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { 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", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MultiInputComponent, 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 }, 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 } }, 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      (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      (focusout)=\"markAsTouched()\"\n    ></ui-field>\n  </div>\n\n  <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters() && !errors()?.length\"\n    >{{ 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  <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: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: DropdownComponent, selector: "ui-dropdown", inputs: ["label", "labelIcon", "isAIVariant", "name", "placeholder", "id", "value", "errors", "disabled", "valueList", "allowClear", "allowMultipleSelection", "required", "showBottomContent", "applicationTheme", "hideBuiltInErrors", "hideLabelInErrors", "textField", "valueField", "hasError", "companyColor", "panelClass"], outputs: ["closed", "opened"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { 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", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-multi-input', 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      (closed)=\"markAsTouched(); checkFormErrors()\"\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      (focusout)=\"markAsTouched(); checkFormErrors()\"\n    ></ui-field>\n  </div>\n\n  <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters && !errors?.length\">{{ getValueLength() }} / {{ maxCharacters }}</mat-hint>\n\n  @if (errors?.length || (ngControl?.errors | hasValidationError)) {\n    <mat-hint class=\"error\">\n      @for (error of errors; track error) {\n        <ui-icon\n          [applicationTheme]=\"applicationTheme\"\n          [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n        ></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</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"] }]
+            args: [{ selector: 'ui-multi-input', 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      (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      (focusout)=\"markAsTouched()\"\n    ></ui-field>\n  </div>\n\n  <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters() && !errors()?.length\"\n    >{{ 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  <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$2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i1$2.FormBuilder }], propDecorators: { itemsList: [{
-                type: Input,
-                args: [{ required: true }]
-            }], itemTextField: [{
-                type: Input,
-                args: [{ required: true }]
-            }], itemValueField: [{
-                type: Input,
-                args: [{ required: true }]
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], allowDecimal: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], allowNegative: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], applicationTheme: [{
-                type: HostBinding,
-                args: ['attr.theme']
-            }, {
-                type: Input
-            }], errors: [{
-                type: Input
-            }], hideBuiltInErrors: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hideLabelInErrors: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], maxCharacters: [{
-                type: Input
-            }], validators: [{
-                type: Input
-            }], fullWidth: [{
+                }] }, { type: i1$2.FormBuilder }], propDecorators: { fullWidth: [{
                 type: HostBinding,
                 args: ['class.full-width']
             }, {
@@ -24878,6 +24822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const SIDE_PANEL_DATA = new InjectionToken('SIDE_PANEL_DATA');
 
+/* eslint-disable no-underscore-dangle */
 var SidePanelAnimationState;
 (function (SidePanelAnimationState) {
     SidePanelAnimationState["Open"] = "open";
@@ -24900,6 +24845,34 @@ const SIDE_PANEL_CONFIG = new InjectionToken('SIDE_PANEL_CONFIG', {
     providedIn: 'root',
     factory: () => defaultSidePanelConfig,
 });
+/**
+ * Reference to a side panel opened via the SidePanelService.
+ * Similar to MatDialogRef from Angular Material.
+ */
+class SidePanelRef {
+    constructor() {
+        this._afterClosed = new Subject();
+    }
+    /**
+     * Observable that emits when the side panel is closed.
+     * Emits the result passed to the close method, or undefined if no result was provided.
+     */
+    afterClosed() {
+        return this._afterClosed.asObservable();
+    }
+    /**
+     * Closes the side panel with an optional result.
+     * @param result Optional data to be emitted via afterClosed()
+     */
+    close(result) {
+        // This will be overridden by the service
+    }
+    /** @internal */
+    _emitClose(result) {
+        this._afterClosed.next(result);
+        this._afterClosed.complete();
+    }
+}
 
 const sidePanelAnimationDuration = 150;
 const sidePanelAnimation = [
@@ -24933,6 +24906,11 @@ class SidePanelService {
     }
     open(content, config, parentInjector) {
         const panelConfig = { ...this.defaultSidePanelConfig, ...config };
+        const sidePanelRef = new SidePanelRef();
+        this.currentSidePanelRef = sidePanelRef;
+        sidePanelRef.close = (result) => {
+            this.close(result);
+        };
         if (!this.SidePanelComponentRef) {
             const injector = this.createSidePanelInjector(panelConfig, parentInjector);
             const SidePanelComponentRef = this.createSidePanelComponent(panelConfig.position, injector);
@@ -24942,16 +24920,21 @@ class SidePanelService {
             this.loadTemplate(content);
         }
         else {
-            this.loadComponent(content);
+            this.loadComponent(content, sidePanelRef);
         }
         this.SidePanelComponentRef.instance.open();
+        return sidePanelRef;
     }
-    close() {
+    close(result) {
         if (this.SidePanelComponentRef) {
-            this.SidePanelComponentRef.instance.close();
+            this.SidePanelComponentRef.instance.close(result);
         }
     }
-    destroyComponent() {
+    destroyComponent(result) {
+        if (this.currentSidePanelRef) {
+            this.currentSidePanelRef._emitClose(result);
+            this.currentSidePanelRef = undefined;
+        }
         if (this.SidePanelComponentRef) {
             this.appRef.detachView(this.SidePanelComponentRef.hostView);
             this.SidePanelComponentRef.destroy();
@@ -24982,11 +24965,13 @@ class SidePanelService {
         document.body.appendChild(sidePanelEl);
         return sidePanelComponentRef;
     }
-    loadComponent(component) {
+    loadComponent(component, sidePanelRef) {
         const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;
         if (viewContainerRef) {
             viewContainerRef().clear();
             this.contentComponentRef = viewContainerRef().createComponent(component);
+            // Set the component instance on the SidePanelRef
+            sidePanelRef.componentInstance = this.contentComponentRef.instance;
         }
     }
     loadTemplate(template) {
@@ -25036,10 +25021,10 @@ class SidePanelComponent {
             this.isOpen.set(true);
         });
     }
-    close() {
+    close(result) {
         this.isOpen.set(false);
         setTimeout(() => {
-            this.sidePanelService.destroyComponent();
+            this.sidePanelService.destroyComponent(result);
         }, sidePanelAnimationDuration);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -26654,5 +26639,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AMOUNT_TAG_WIDTH, AccordionComponent, AccordionComponentModule, AiFeedbackComponent, AiFeedbackModule, AlertBannerComponent, AlertBannerComponentModule, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, AvatarBackgroundColor, AvatarComponent, AvatarComponentModule, AvatarSize, BadgeColorEnum, BadgeComponent, BadgeComponentModule, BadgeVariantEnum, BreadcrumbComponent, BreadcrumbComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ChecklistComponent, Color, ColumnAlignment, ColumnAlignmentEnum, ColumnType, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DeprecatedPaginatorComponent, DeprecatedPaginatorComponentModule, DialogComponent, DialogComponentModule, DialogService, DividerComponent, DividerComponentModule, DonutChartComponent, DonutChartComponentModule, DropdownComponent, DropdownComponentModule, DropdownVariation, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, EmptyStateComponent, EmptyStateComponentModule, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, FilterButtonComponent, FilterButtonComponentModule, GaussianChartComponent, GaussianChartComponentModule, IS_MOBILE_TOKEN, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, IconsService, InlineFieldComponent, InlineFieldComponentModule, Language, LanguageService, LargeSpiderChartSize, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, MediaCardComponent, MediaDialogComponent, MemoizeFuncPipe, MultiInputComponent, MultiInputComponentModule, NavbarComponent, NavbarComponentModule, OverflowMenuComponent, OverflowMenuComponentModule, Padding, PageHeaderComponent, PageHeaderModule, PaginatorComponent, PaginatorComponentModule, PasswordComponent, PasswordComponentModule, PasswordStrengthComponent, PasswordStrengthComponentModule, PhoneInputComponent, PhoneInputComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadialProgressComponent, RadialProgressComponentModule, RadialProgressSizeEnum, RadialProgressSizeValue, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, RebrandBadgeColorEnum, SIDE_PANEL_CONFIG, SIDE_PANEL_DATA, ScaleComponent, ScaleComponentModule, ScaleTableComponent, SegmentedBarComponent, SegmentedBarComponentModule, SegmentedButtonComponent, SegmentedButtonComponentModule, SelectableCardComponent, SelectableCardComponentModule, SidePanelAnimationState, SidePanelComponent, SidePanelConfig, SidePanelService, SideSheetComponent, SideSheetComponentModule, SideSheetService, SkeletonComponent, SkillAreaGroupTypes, SkillAreaTypes, SliderComponent, SliderComponentModule, SmallSpiderChartSize, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpiderChartComponent, SpiderChartComponentModule, SpinnerComponent, SpinnerComponentModule, StepComponent, StepComponentModule, StepperComponent, StepperComponentModule, TabDirective, TableComponent, TableComponentModule, TabsComponent, TabsComponentModule, TagComponent, TagComponentModule, Timeout, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, TooltipTemplateDirective, UniversalSkillsReportComponent, UniversalSkillsReportComponentModule, UniversalSkillsService, UniversalSkillsSpiderChartsComponent, UniversalSkillsSpiderChartsComponentModule, ValidationErrorComponent, ValidationErrorModule, defaultSidePanelConfig, fieldID, getAvailableLangs, iconSize, inlineFieldID };
+export { AMOUNT_TAG_WIDTH, AccordionComponent, AccordionComponentModule, AiFeedbackComponent, AiFeedbackModule, AlertBannerComponent, AlertBannerComponentModule, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, AvatarBackgroundColor, AvatarComponent, AvatarComponentModule, AvatarSize, BadgeColorEnum, BadgeComponent, BadgeComponentModule, BadgeVariantEnum, BreadcrumbComponent, BreadcrumbComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ChecklistComponent, Color, ColumnAlignment, ColumnAlignmentEnum, ColumnType, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DeprecatedPaginatorComponent, DeprecatedPaginatorComponentModule, DialogComponent, DialogComponentModule, DialogService, DividerComponent, DividerComponentModule, DonutChartComponent, DonutChartComponentModule, DropdownComponent, DropdownComponentModule, DropdownVariation, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, EmptyStateComponent, EmptyStateComponentModule, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, FilterButtonComponent, FilterButtonComponentModule, GaussianChartComponent, GaussianChartComponentModule, IS_MOBILE_TOKEN, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, IconsService, InlineFieldComponent, InlineFieldComponentModule, Language, LanguageService, LargeSpiderChartSize, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, MediaCardComponent, MediaDialogComponent, MemoizeFuncPipe, MultiInputComponent, MultiInputComponentModule, NavbarComponent, NavbarComponentModule, OverflowMenuComponent, OverflowMenuComponentModule, Padding, PageHeaderComponent, PageHeaderModule, PaginatorComponent, PaginatorComponentModule, PasswordComponent, PasswordComponentModule, PasswordStrengthComponent, PasswordStrengthComponentModule, PhoneInputComponent, PhoneInputComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadialProgressComponent, RadialProgressComponentModule, RadialProgressSizeEnum, RadialProgressSizeValue, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, RebrandBadgeColorEnum, SIDE_PANEL_CONFIG, SIDE_PANEL_DATA, ScaleComponent, ScaleComponentModule, ScaleTableComponent, SegmentedBarComponent, SegmentedBarComponentModule, SegmentedButtonComponent, SegmentedButtonComponentModule, SelectableCardComponent, SelectableCardComponentModule, SidePanelAnimationState, SidePanelComponent, SidePanelConfig, SidePanelRef, SidePanelService, SideSheetComponent, SideSheetComponentModule, SideSheetService, SkeletonComponent, SkillAreaGroupTypes, SkillAreaTypes, SliderComponent, SliderComponentModule, SmallSpiderChartSize, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpiderChartComponent, SpiderChartComponentModule, SpinnerComponent, SpinnerComponentModule, StepComponent, StepComponentModule, StepperComponent, StepperComponentModule, TabDirective, TableComponent, TableComponentModule, TabsComponent, TabsComponentModule, TagComponent, TagComponentModule, Timeout, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, TooltipTemplateDirective, UniversalSkillsReportComponent, UniversalSkillsReportComponentModule, UniversalSkillsService, UniversalSkillsSpiderChartsComponent, UniversalSkillsSpiderChartsComponentModule, ValidationErrorComponent, ValidationErrorModule, defaultSidePanelConfig, fieldID, getAvailableLangs, iconSize, inlineFieldID };
 //# sourceMappingURL=testgorilla-tgo-ui.mjs.map