@js-smart/ng-kit 21.4.0 → 21.6.0

package/fesm2022/js-smart-ng-kit.mjs

@@ -1,23 +1,22 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, signal, output, effect, ChangeDetectionStrategy, Component, Pipe, Injectable, HostListener, ViewChild, forwardRef, Input, Optional, DOCUMENT, Directive, ElementRef, ViewContainerRef, Inject, computed } from '@angular/core';
+import { inject, ChangeDetectorRef, input, signal, output, effect, ChangeDetectionStrategy, Component, Pipe, Injectable, HostListener, ViewChild, viewChild, computed, forwardRef, DOCUMENT, Input, Directive, ElementRef, ViewContainerRef, Inject } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { BehaviorSubject, Subject, throttleTime } from 'rxjs';
-import { filter, takeUntil, startWith, map } from 'rxjs/operators';
+import { filter, takeUntil } from 'rxjs/operators';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { AsyncPipe } from '@angular/common';
+import { NgClass } from '@angular/common';
 import * as i1$2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i3 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i1$3 from '@angular/material/button';
+import * as i2 from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i1$4 from '@angular/material/button';
 import { MatButtonModule, MatAnchor, MatButton } from '@angular/material/button';
-import * as i2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i1$4 from '@angular/material/icon';
+import * as i1$3 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import * as i4 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$5 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -420,74 +419,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
  */
 class AutocompleteComponent {
     constructor() {
-        this.cdRef = inject(ChangeDetectorRef);
-        /**
-         * Internal form control for the autocomplete
-         */
-        this.control = new FormControl('');
-        /**
-         * Label of the AutoComplete
-         */
-        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-        /**
-         * Placeholder of the AutoComplete
-         */
-        this.placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
-        /**
-         * Appearance of the AutoComplete, defaults to `fill`
-         */
-        this.appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-        /**
-         * List of CSS classes that need to applied to autocomplete
-         */
+        /** Gets reference to the MatAutocompleteTrigger to programmatically open/close the panel */
+        this.autocompleteTrigger = viewChild.required(MatAutocompleteTrigger);
+        /** Gets reference to the input element for re-focusing after clear */
+        this.inputElement = viewChild.required('inputEl');
+        /** Label of the autocomplete form field */
+        this.label = input('Select Value', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        /** Placeholder text displayed inside the input when empty */
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        /** Appearance of the form field. Defaults to `outline` */
+        this.appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+        /** List of CSS classes to apply to the form field */
         this.classes = input('', ...(ngDevMode ? [{ debugName: "classes" }] : []));
+        /** List of options to display in the dropdown */
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
         /**
-         * Attribute of the Object whose value would be shown when searching for data. Defaults to `ID`
+         * Function that maps an option to its display string.
+         * Used for rendering options in the dropdown and showing the selected value in the input.
+         * Defaults to `String(value)` which works for primitive string options.
          */
-        this.bindLabel = input('', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
-        /**
-         * Attribute of the Object whose value would be used for search
-         */
-        this.bindValue = input('id', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
-        /**
-         * Function that maps an option's control value to its display value in the trigger.
-         */
-        this.displayWith = null;
-        /**
-         * Specifies if the autocomplete is required. Default is not required.
-         */
-        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
-        /**
-         * Specifies if the autocomplete is disabled. Default is not required.
-         */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        /**
-         * List of Objects that need to be bind and searched for
-         */
-        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
-        /**
-         * Emit selected value on selection changes
-         */
-        this.onSelectionChange = output();
-        /**
-         * BehaviorSubject that shows the current active arrow icon
-         */
-        this.arrowIconSubject = new BehaviorSubject('arrow_drop_down');
-        // ControlValueAccessor implementation
-        this.onChange = () => { };
-        this.onTouched = () => { };
+        this.displayWith = input((value) => String(value), ...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+        /** Whether the autocomplete is in a loading state. Shows a spinner instead of options */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        /** Text displayed when the autocomplete is in a loading state. Defaults to 'Loading...' */
+        this.loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
+        /** Text displayed when no options match the filter input. Defaults to 'No values found' */
+        this.noOptionsText = input('No values found', ...(ngDevMode ? [{ debugName: "noOptionsText" }] : []));
+        /** Emits the selected value when an option is picked from the dropdown */
+        this.selectionChange = output();
+        /** Internal form control for the autocomplete input */
+        this.control = new FormControl('');
+        /** Signal that tracks whether the autocomplete panel is currently open */
+        this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+        /** Signal that tracks the current filter text typed by the user */
+        this.filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
+        /**
+         * Computed signal that filters options based on the current filter text.
+         * Uses the `displayWith` function to extract searchable text from each option.
+         * Returns all options when filter text is empty.
+         */
+        this.filteredOptions = computed(() => {
+            const filterValue = this.filterText().toLowerCase();
+            const displayFn = this.displayWith();
+            return this.options().filter((option) => displayFn(option).toLowerCase().includes(filterValue));
+        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+        /**
+         * Display function passed to mat-autocomplete's [displayWith] to render the
+         * selected value in the input field. Returns empty string for null/undefined values.
+         */
+        this.displayFn = (value) => {
+            if (value == null) {
+                return '';
+            }
+            return this.displayWith()(value);
+        };
+        /** Callback function registered by the parent form to propagate value changes */
+        this.onChange = (_) => {
+            /* noop */
+        };
+        /** Callback function registered by the parent form to propagate touched state */
+        this.onTouched = () => {
+            /* noop */
+        };
     }
+    /**
+     * Writes a new value to the internal control. Called by the parent form
+     * when the form control value is set programmatically.
+     */
     writeValue(value) {
-        this.control.setValue(value, { emitEvent: false });
+        this.control.setValue(value ?? '', { emitEvent: false });
     }
+    /**
+     * Registers a callback function that is called when the control's value
+     * changes in the UI (option selected or input cleared).
+     */
     registerOnChange(fn) {
         this.onChange = fn;
-        // Forward value changes from internal control to parent form
-        this.control.valueChanges.subscribe((value) => fn(value));
     }
+    /**
+     * Registers a callback function that is called when the control is
+     * first interacted with (blur or selection).
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /**
+     * Sets the disabled state of the internal control. Called by the parent form
+     * when `control.disable()` or `control.enable()` is invoked.
+     */
     setDisabledState(isDisabled) {
         if (isDisabled) {
             this.control.disable();
@@ -496,77 +515,65 @@ class AutocompleteComponent {
             this.control.enable();
         }
     }
-    ngAfterContentChecked() {
-        this.cdRef.detectChanges();
+    /** Updates the filter text signal as the user types in the input */
+    onInput(event) {
+        const value = event.target.value;
+        this.filterText.set(value);
     }
-    ngOnInit() {
-        this.filteredOptions = this.control.valueChanges.pipe(startWith(''), map((value) => (typeof value === 'string' ? value : value !== null ? value[this.bindLabel()] : '')), map((propertyName) => this.data()?.filter((option) => {
-            return typeof option === 'string'
-                ? option?.toLowerCase().startsWith(propertyName.toLowerCase())
-                : option[this.bindLabel()]?.toLowerCase().indexOf(propertyName.toLowerCase()) === 0;
-        }) ?? this.data()?.slice()));
-    }
-    ngOnChanges(_changes) {
-        this.displayFn = this.displayFn.bind(this);
-    }
-    clearInput(evt) {
-        evt.stopPropagation();
-        this.control.reset();
+    /**
+     * Clears the input value, resets the filter, notifies the parent form,
+     * and re-focuses the input element.
+     */
+    clearInput(event) {
+        this.control.setValue('');
+        this.filterText.set('');
         this.onChange(null);
-        this.inputAutoComplete?.nativeElement.focus();
-    }
-    openOrClosePanel(evt, trigger) {
-        evt.stopPropagation();
-        if (trigger.panelOpen) {
-            trigger.closePanel();
-        }
-        else {
-            trigger.openPanel();
-        }
+        this.onTouched();
+        event.stopPropagation();
+        this.inputElement().nativeElement.focus();
     }
-    displayFn(object) {
-        if (this.displayWith !== undefined && this.displayWith !== null && typeof this.displayWith === 'function') {
-            this.displayFn = this.displayWith.bind(this);
-            return this.displayWith(object);
-        }
-        else {
-            if (typeof object === 'string') {
-                return object;
-            }
-            return object?.[this.bindLabel()] ? object[this.bindLabel()] : '';
-        }
+    /** Opens the autocomplete panel programmatically */
+    openPanel() {
+        this.autocompleteTrigger().openPanel();
     }
-    emitSelectedValue($event) {
-        this.onSelectionChange.emit($event.source.value);
-        this.onChange($event.source.value);
+    /**
+     * Handles option selection from the dropdown. Resets the filter text,
+     * notifies the parent form of the new value, and emits the selectionChange output.
+     */
+    onOptionSelected(value) {
+        this.filterText.set('');
+        this.onChange(value);
         this.onTouched();
+        this.selectionChange.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AutocompleteComponent, isStandalone: true, selector: "autocomplete, lib-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AutocompleteComponent, isStandalone: true, selector: "autocomplete, lib-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputAutoComplete", first: true, predicate: ["inputAutoComplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }, { propertyName: "inputElement", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field\n\t#origin=\"matAutocompleteOrigin\"\n\t[appearance]=\"appearance()\"\n\t[ngClass]=\"classes()\"\n\tclass=\"autocomplete-width\"\n\tmatAutocompleteOrigin\n\tsubscriptSizing=\"dynamic\">\n\t<mat-label>{{ label() }}</mat-label>\n\n\t<input\n\t\t#inputEl\n\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t(click)=\"trigger.openPanel()\"\n\t\t(input)=\"onInput($event)\"\n\t\t[formControl]=\"control\"\n\t\t[matAutocompleteConnectedTo]=\"origin\"\n\t\t[matAutocomplete]=\"auto\"\n\t\t[placeholder]=\"placeholder()\"\n\t\tmatInput\n\t\ttype=\"text\" />\n\n\t<div matSuffix style=\"display: flex; align-items: center\">\n\t\t@if (control.value) {\n\t\t\t<button (click)=\"clearInput($event)\" mat-icon-button>\n\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t</button>\n\t\t}\n\t\t@if (isExpanded()) {\n\t\t\t<mat-icon>arrow_drop_up</mat-icon>\n\t\t} @else {\n\t\t\t<mat-icon>arrow_drop_down</mat-icon>\n\t\t}\n\t</div>\n\n\t<mat-autocomplete\n\t\t#auto=\"matAutocomplete\"\n\t\t(closed)=\"isExpanded.set(false)\"\n\t\t(opened)=\"isExpanded.set(true)\"\n\t\t(optionSelected)=\"onOptionSelected($event.option.value)\"\n\t\t[displayWith]=\"displayFn\">\n\t\t@if (loading()) {\n\t\t\t<mat-option disabled>\n\t\t\t\t<div style=\"display: flex; align-items: center; gap: 8px\">\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t<span>{{ loadingText() }}</span>\n\t\t\t\t</div>\n\t\t\t</mat-option>\n\t\t} @else {\n\t\t\t@for (option of filteredOptions(); track option) {\n\t\t\t\t<mat-option [value]=\"option\">{{ displayWith()(option) }}</mat-option>\n\t\t\t} @empty {\n\t\t\t\t<mat-option disabled>{{ noOptionsText() }}</mat-option>\n\t\t\t}\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [".autocomplete-width{width:100%;max-width:400px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'autocomplete, lib-autocomplete', imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatButtonModule, MatIconModule, AsyncPipe], providers: [
+            args: [{ selector: 'autocomplete, lib-autocomplete', imports: [
+                        NgClass,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatProgressSpinnerModule,
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n" }]
-        }], propDecorators: { inputAutoComplete: [{
-                type: ViewChild,
-                args: ['inputAutoComplete']
-            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], displayWith: [{
-                type: Input
-            }, {
-                type: Optional
-            }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
+                    ], template: "<mat-form-field\n\t#origin=\"matAutocompleteOrigin\"\n\t[appearance]=\"appearance()\"\n\t[ngClass]=\"classes()\"\n\tclass=\"autocomplete-width\"\n\tmatAutocompleteOrigin\n\tsubscriptSizing=\"dynamic\">\n\t<mat-label>{{ label() }}</mat-label>\n\n\t<input\n\t\t#inputEl\n\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t(click)=\"trigger.openPanel()\"\n\t\t(input)=\"onInput($event)\"\n\t\t[formControl]=\"control\"\n\t\t[matAutocompleteConnectedTo]=\"origin\"\n\t\t[matAutocomplete]=\"auto\"\n\t\t[placeholder]=\"placeholder()\"\n\t\tmatInput\n\t\ttype=\"text\" />\n\n\t<div matSuffix style=\"display: flex; align-items: center\">\n\t\t@if (control.value) {\n\t\t\t<button (click)=\"clearInput($event)\" mat-icon-button>\n\t\t\t\t<mat-icon>close</mat-icon>\n\t\t\t</button>\n\t\t}\n\t\t@if (isExpanded()) {\n\t\t\t<mat-icon>arrow_drop_up</mat-icon>\n\t\t} @else {\n\t\t\t<mat-icon>arrow_drop_down</mat-icon>\n\t\t}\n\t</div>\n\n\t<mat-autocomplete\n\t\t#auto=\"matAutocomplete\"\n\t\t(closed)=\"isExpanded.set(false)\"\n\t\t(opened)=\"isExpanded.set(true)\"\n\t\t(optionSelected)=\"onOptionSelected($event.option.value)\"\n\t\t[displayWith]=\"displayFn\">\n\t\t@if (loading()) {\n\t\t\t<mat-option disabled>\n\t\t\t\t<div style=\"display: flex; align-items: center; gap: 8px\">\n\t\t\t\t\t<mat-spinner diameter=\"20\"></mat-spinner>\n\t\t\t\t\t<span>{{ loadingText() }}</span>\n\t\t\t\t</div>\n\t\t\t</mat-option>\n\t\t} @else {\n\t\t\t@for (option of filteredOptions(); track option) {\n\t\t\t\t<mat-option [value]=\"option\">{{ displayWith()(option) }}</mat-option>\n\t\t\t} @empty {\n\t\t\t\t<mat-option disabled>{{ noOptionsText() }}</mat-option>\n\t\t\t}\n\t\t}\n\t</mat-autocomplete>\n</mat-form-field>\n", styles: [".autocomplete-width{width:100%;max-width:400px}\n"] }]
+        }], propDecorators: { autocompleteTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }], inputElement: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class PrintOptions {
     constructor(options) {
@@ -1155,7 +1162,7 @@ class DeleteButtonComponent extends BaseButtonComponent {
 			}
 			{{ loading() ? loadingLabel() : label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DeleteButtonComponent, decorators: [{
             type: Component,
@@ -1209,8 +1216,8 @@ class EditSolidSvgComponent {
     constructor(iconRegistry, sanitizer) {
         iconRegistry.addSvgIconLiteral('edit-solid', sanitizer.bypassSecurityTrustHtml(EDIT_ICON));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditSolidSvgComponent, deps: [{ token: i1$4.MatIconRegistry }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: EditSolidSvgComponent, isStandalone: true, selector: "edit-solid-svg", ngImport: i0, template: ` <mat-icon aria-hidden="false" aria-label="Edit" svgIcon="edit-solid" class="pe-2 align-bottom"></mat-icon> `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditSolidSvgComponent, deps: [{ token: i1$3.MatIconRegistry }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: EditSolidSvgComponent, isStandalone: true, selector: "edit-solid-svg", ngImport: i0, template: ` <mat-icon aria-hidden="false" aria-label="Edit" svgIcon="edit-solid" class="pe-2 align-bottom"></mat-icon> `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditSolidSvgComponent, decorators: [{
             type: Component,
@@ -1219,7 +1226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                     imports: [MatIconModule],
                     template: ` <mat-icon aria-hidden="false" aria-label="Edit" svgIcon="edit-solid" class="pe-2 align-bottom"></mat-icon> `,
                 }]
-        }], ctorParameters: () => [{ type: i1$4.MatIconRegistry }, { type: i1.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$3.MatIconRegistry }, { type: i1.DomSanitizer }] });
 
 class EditBsButtonComponent extends BaseButtonComponent {
     constructor() {
@@ -1246,7 +1253,7 @@ class EditBsButtonComponent extends BaseButtonComponent {
 			<edit-solid-svg></edit-solid-svg>
 			{{ label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: EditSolidSvgComponent, selector: "edit-solid-svg" }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: EditSolidSvgComponent, selector: "edit-solid-svg" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditBsButtonComponent, decorators: [{
             type: Component,
@@ -1459,7 +1466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
 class ExcelExportButtonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExcelExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ExcelExportButtonComponent, isStandalone: true, selector: "excel-export-button", ngImport: i0, template: ` <button class="excel-export-button" mat-raised-button type="button" data-cy="excel-export-button">Excel</button> `, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n", ".excel-export-button{margin-left:20px!important;margin-right:20px!important;width:100px;color:#fff!important;background-color:#006400!important;border-radius:24px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: ExcelExportButtonComponent, isStandalone: true, selector: "excel-export-button", ngImport: i0, template: ` <button class="excel-export-button" mat-raised-button type="button" data-cy="excel-export-button">Excel</button> `, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n", ".excel-export-button{margin-left:20px!important;margin-right:20px!important;width:100px;color:#fff!important;background-color:#006400!important;border-radius:24px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExcelExportButtonComponent, decorators: [{
             type: Component,
@@ -1553,7 +1560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
 
 class PdfExportButtonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PdfExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: PdfExportButtonComponent, isStandalone: true, selector: "pdf-export-button", ngImport: i0, template: ` <button class="pdf-export-button" mat-raised-button type="button" data-cy="pdf-export-button">PDF</button> `, isInline: true, styles: [".pdf-export-button{margin-left:20px!important;width:100px;color:#fff!important;background-color:#a3071b!important;border-radius:24px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: PdfExportButtonComponent, isStandalone: true, selector: "pdf-export-button", ngImport: i0, template: ` <button class="pdf-export-button" mat-raised-button type="button" data-cy="pdf-export-button">PDF</button> `, isInline: true, styles: [".pdf-export-button{margin-left:20px!important;width:100px;color:#fff!important;background-color:#a3071b!important;border-radius:24px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PdfExportButtonComponent, decorators: [{
             type: Component,
@@ -1765,7 +1772,7 @@ class SearchButtonComponent extends BaseButtonComponent {
 			}
 			{{ loading() ? loadingLabel() : label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SearchButtonComponent, decorators: [{
             type: Component,
@@ -2022,7 +2029,7 @@ class ConfirmDialogComponent {
 			<button (click)="onDismiss()" mat-raised-button>No</button>
 			<button (click)="onConfirm()" class="primary-button" mat-raised-button>Yes</button>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+	`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -2069,7 +2076,7 @@ class ErrorSnackBarComponent {
 				<mat-icon>close</mat-icon>
 			</button>
 		</div>
-	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{--mdc-snackbar-container-color: var(--success-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.success-snackbar .mdc-snackbar__surface{background-color:var(--success-color)!important;color:#fff!important}.success-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.error-snackbar{--mdc-snackbar-container-color: var(--delete-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.error-snackbar .mdc-snackbar__surface{background-color:var(--delete-color)!important;color:#fff!important}.error-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.light-success-snackbar{--mdc-snackbar-container-color: #d4edda !important;--mat-mdc-snack-bar-button-color: darkgreen !important}.light-success-snackbar .mdc-snackbar__surface{background-color:#d4edda!important;color:#155724!important}.light-success-snackbar .mat-mdc-snack-bar-action{color:#006400!important}.light-error-snackbar{--mdc-snackbar-container-color: #f8d7da !important;--mat-mdc-snack-bar-button-color: darkred !important}.light-error-snackbar .mdc-snackbar__surface{background-color:#f8d7da!important;color:#721c24!important;border:1px solid #f5c6cb}.info-snackbar{--mdc-snackbar-container-color: #0dcaf0 !important;--mat-mdc-snack-bar-button-color: white !important}.info-snackbar .mdc-snackbar__surface{background-color:#0dcaf0!important;color:#fff!important}.warning-snackbar{--mdc-snackbar-container-color: #ffc107 !important;--mat-mdc-snack-bar-button-color: #000 !important}.warning-snackbar .mdc-snackbar__surface{background-color:#ffc107!important;color:#000!important}.primary-snackbar{--mdc-snackbar-container-color: var(--primary-color) !important;--mat-mdc-snack-bar-button-color: white !important}.primary-snackbar .mdc-snackbar__surface{background-color:var(--primary-color)!important;color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
+	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{--mdc-snackbar-container-color: var(--success-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.success-snackbar .mdc-snackbar__surface{background-color:var(--success-color)!important;color:#fff!important}.success-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.error-snackbar{--mdc-snackbar-container-color: var(--delete-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.error-snackbar .mdc-snackbar__surface{background-color:var(--delete-color)!important;color:#fff!important}.error-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.light-success-snackbar{--mdc-snackbar-container-color: #d4edda !important;--mat-mdc-snack-bar-button-color: darkgreen !important}.light-success-snackbar .mdc-snackbar__surface{background-color:#d4edda!important;color:#155724!important}.light-success-snackbar .mat-mdc-snack-bar-action{color:#006400!important}.light-error-snackbar{--mdc-snackbar-container-color: #f8d7da !important;--mat-mdc-snack-bar-button-color: darkred !important}.light-error-snackbar .mdc-snackbar__surface{background-color:#f8d7da!important;color:#721c24!important;border:1px solid #f5c6cb}.info-snackbar{--mdc-snackbar-container-color: #0dcaf0 !important;--mat-mdc-snack-bar-button-color: white !important}.info-snackbar .mdc-snackbar__surface{background-color:#0dcaf0!important;color:#fff!important}.warning-snackbar{--mdc-snackbar-container-color: #ffc107 !important;--mat-mdc-snack-bar-button-color: #000 !important}.warning-snackbar .mdc-snackbar__surface{background-color:#ffc107!important;color:#000!important}.primary-snackbar{--mdc-snackbar-container-color: var(--primary-color) !important;--mat-mdc-snack-bar-button-color: white !important}.primary-snackbar .mdc-snackbar__surface{background-color:var(--primary-color)!important;color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ErrorSnackBarComponent, decorators: [{
             type: Component,
@@ -2110,7 +2117,7 @@ class SuccessSnackBarComponent {
 				<mat-icon>close</mat-icon>
 			</button>
 		</div>
-	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{--mdc-snackbar-container-color: var(--success-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.success-snackbar .mdc-snackbar__surface{background-color:var(--success-color)!important;color:#fff!important}.success-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.error-snackbar{--mdc-snackbar-container-color: var(--delete-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.error-snackbar .mdc-snackbar__surface{background-color:var(--delete-color)!important;color:#fff!important}.error-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.light-success-snackbar{--mdc-snackbar-container-color: #d4edda !important;--mat-mdc-snack-bar-button-color: darkgreen !important}.light-success-snackbar .mdc-snackbar__surface{background-color:#d4edda!important;color:#155724!important}.light-success-snackbar .mat-mdc-snack-bar-action{color:#006400!important}.light-error-snackbar{--mdc-snackbar-container-color: #f8d7da !important;--mat-mdc-snack-bar-button-color: darkred !important}.light-error-snackbar .mdc-snackbar__surface{background-color:#f8d7da!important;color:#721c24!important;border:1px solid #f5c6cb}.info-snackbar{--mdc-snackbar-container-color: #0dcaf0 !important;--mat-mdc-snack-bar-button-color: white !important}.info-snackbar .mdc-snackbar__surface{background-color:#0dcaf0!important;color:#fff!important}.warning-snackbar{--mdc-snackbar-container-color: #ffc107 !important;--mat-mdc-snack-bar-button-color: #000 !important}.warning-snackbar .mdc-snackbar__surface{background-color:#ffc107!important;color:#000!important}.primary-snackbar{--mdc-snackbar-container-color: var(--primary-color) !important;--mat-mdc-snack-bar-button-color: white !important}.primary-snackbar .mdc-snackbar__surface{background-color:var(--primary-color)!important;color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{--mdc-snackbar-container-color: var(--success-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.success-snackbar .mdc-snackbar__surface{background-color:var(--success-color)!important;color:#fff!important}.success-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.error-snackbar{--mdc-snackbar-container-color: var(--delete-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.error-snackbar .mdc-snackbar__surface{background-color:var(--delete-color)!important;color:#fff!important}.error-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.light-success-snackbar{--mdc-snackbar-container-color: #d4edda !important;--mat-mdc-snack-bar-button-color: darkgreen !important}.light-success-snackbar .mdc-snackbar__surface{background-color:#d4edda!important;color:#155724!important}.light-success-snackbar .mat-mdc-snack-bar-action{color:#006400!important}.light-error-snackbar{--mdc-snackbar-container-color: #f8d7da !important;--mat-mdc-snack-bar-button-color: darkred !important}.light-error-snackbar .mdc-snackbar__surface{background-color:#f8d7da!important;color:#721c24!important;border:1px solid #f5c6cb}.info-snackbar{--mdc-snackbar-container-color: #0dcaf0 !important;--mat-mdc-snack-bar-button-color: white !important}.info-snackbar .mdc-snackbar__surface{background-color:#0dcaf0!important;color:#fff!important}.warning-snackbar{--mdc-snackbar-container-color: #ffc107 !important;--mat-mdc-snack-bar-button-color: #000 !important}.warning-snackbar .mdc-snackbar__surface{background-color:#ffc107!important;color:#000!important}.primary-snackbar{--mdc-snackbar-container-color: var(--primary-color) !important;--mat-mdc-snack-bar-button-color: white !important}.primary-snackbar .mdc-snackbar__surface{background-color:var(--primary-color)!important;color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SuccessSnackBarComponent, decorators: [{
             type: Component,