ngx-t-forms 2.0.25 → 2.0.26

package/fesm2022/{ngx-t-forms-ngx-t-forms-A9_4GxP6.mjs → ngx-t-forms-ngx-t-forms-CD9InaXz.mjs}

@@ -29,15 +29,15 @@ import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i3$2 from '@angular/material/card';
+import * as i3$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i5$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i3$4 from '@angular/material/stepper';
+import * as i3$3 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i3$3 from '@angular/material/datepicker';
+import * as i3$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i4$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -46,21 +46,21 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3$1 from '@angular/material/input';
+import * as i13 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i6 from '@angular/material/list';
+import * as i7 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i2$6 from '@angular/material/menu';
+import * as i2$4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i6$1 from '@angular/material/core';
+import * as i6 from '@angular/material/core';
 import { MatNativeDateModule, MatRippleModule, provideNativeDateAdapter } from '@angular/material/core';
-import * as i7 from '@angular/material/paginator';
+import * as i7$1 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
 import * as i4$3 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i7$1 from '@angular/material/radio';
+import * as i7$2 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i2$5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -84,7 +84,7 @@ import { MatTreeModule, MatTreeFlattener, MatTreeFlatDataSource } from '@angular
 import * as i10$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
-import * as i2$4 from '@angular/material/autocomplete';
+import * as i2$6 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { ComponentStore } from '@ngrx/component-store';
 import * as i1$3 from '@angular/router';
@@ -5991,6 +5991,7 @@ function formBuilderStoreActions(store) {
             const old = (formClone?.submissionHandle[key] || []);
             const newApis = old.filter((a) => a._id !== api._id);
             assignDeepPropertyToObject(formClone, ['submissionHandle', key], newApis);
+            console.error("---------------------", keyInEdit, formClone);
             store.actions.handleEditorUpdateFormInEdit(of({ form: formClone }));
             store.refreshExternalFormStates?.(formClone);
             store.showMessage("API configuration removed. Update your integrations accordingly.", HintType.CRITICAL);
@@ -6211,9 +6212,9 @@ class FormBuilderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormBuilderComponent, isStandalone: true, selector: "app-form-builder", inputs: { formId: "formId" }, providers: [
             FormsStoreService
-        ], ngImport: i0, template: "<header>\r\n    <mat-toolbar color=\"primary\">\r\n        @if (closeButton) {\r\n        <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n            <mat-icon>{{closeButton.icon}}</mat-icon>\r\n        </button>\r\n        }\r\n\r\n        <!-- Navigation group -->\r\n        <div class=\"nav-group\">\r\n            <button mat-button routerLink=\"/\">Forms</button>\r\n            <mat-icon>navigate_next</mat-icon>\r\n        </div>\r\n\r\n        <!-- Title input with optimized binding -->\r\n        @if (selectHasFormId()) {\r\n        <input [(ngModel)]=\"titleValue\" class=\"section-title-input\" placeholder=\"Enter Form Title\">\r\n        }\r\n\r\n        <span class=\"spacer\"></span>\r\n\r\n        @defer (on viewport) {\r\n        <app-forms-builder-menu />\r\n        } @placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n        </div>\r\n\r\n        }\r\n\r\n        <span class=\"divider\">|</span>\r\n\r\n        <!-- Save/Update button with optimized reactive state -->\r\n        <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\" (click)=\"saveForm()\">\r\n\r\n            <mat-icon>\r\n                {{(isNewForm()) ? 'save' : 'update'}}\r\n            </mat-icon>\r\n\r\n            @if (selectFormBuilderIsBusy()) {\r\n            {{(isNewForm()) ? '..Saving new form' : '..Updating Form'}}\r\n            } @else {\r\n            {{(isNewForm()) ? 'Save' : 'Update'}}\r\n            }\r\n        </button>\r\n\r\n        <!-- Updated time info -->\r\n        @if (!(isNewForm())) {\r\n        <div class=\"updated-time\">\r\n            <mat-icon>update</mat-icon>\r\n            <span>Updated {{ selectFormUpdated() }}</span>\r\n        </div>\r\n        }\r\n    </mat-toolbar>\r\n</header>\r\n\r\n<!-- Main content with optimized loading -->\r\n@defer (on viewport) {\r\n<div class=\"container\">\r\n    <div class=\"middle\">\r\n        <br>\r\n        @if (selectLoadingForm()) {\r\n        <div class=\"loading-container\">\r\n            <mat-spinner />\r\n        </div>\r\n        } @else {\r\n        <app-form-section-stepper />\r\n        }\r\n        <br>\r\n        @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n        <app-missing-form-configs />\r\n        }\r\n    </div>\r\n\r\n    @if (elementEditorOpen()) {\r\n    <app-input-editor style=\"max-width:480px;height:calc(100vh - 76px);\r\n    position:sticky;\r\n    top:76px;\r\n    z-index:1\" cdkDrag cdkDragBoundary=\"container\" class=\"middle editor-container\" />\r\n    }\r\n    <!-- Missing fields section -->`\r\n\r\n\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n    <mat-spinner diameter=\"50\" />\r\n</div>\r\n}", styles: [".container{display:flex;width:100%;height:calc(100% - 64px);background-color:var(--mat-sys-surface-container-high)}.side{width:100px;background-color:#f8d7da}.middle{flex-grow:1;height:calc(100vh - 52px);overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:.8575em;font-weight:600;color:#fff;padding-top:12px;padding-bottom:12px;outline:none;width:100%;min-width:268px;transition:border-bottom-color .3s ease-in-out}.section-title-input:focus{border-bottom:1px solid #ffffff}.missing-fields{position:fixed;bottom:0}.updated-time{display:flex;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));gap:8px;align-items:center;line-height:normal;font-size:.875em;bottom:0;position:absolute;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:4px}.nav-group{display:flex;align-items:center;gap:8px}.save-button{margin-left:8px;min-width:168px}.loading-container{display:flex;height:calc(100% - 150px);justify-content:center;align-items:center}.editor-container{max-width:500px}.divider{margin:0 8px;opacity:.5}app-missing-form-configs{position:absolute;bottom:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-jn9-yVbI.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i3.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-DyQBfgio.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-Bg9eGmgN.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-sJVu5SkY.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
+        ], ngImport: i0, template: "<header style=\"position:fixed;width:100%;left:0px;top:0px\">\r\n    <mat-toolbar color=\"primary\">\r\n        @if (closeButton) {\r\n        <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n            <mat-icon>{{closeButton.icon}}</mat-icon>\r\n        </button>\r\n        }\r\n\r\n        <!-- Navigation group -->\r\n        <div class=\"nav-group\">\r\n            <button mat-button routerLink=\"/\">Forms</button>\r\n            <mat-icon>navigate_next</mat-icon>\r\n        </div>\r\n\r\n        <!-- Title input with optimized binding -->\r\n        @if (selectHasFormId()) {\r\n        <input [(ngModel)]=\"titleValue\" class=\"section-title-input\" placeholder=\"Enter Form Title\">\r\n        }\r\n\r\n        <span class=\"spacer\"></span>\r\n\r\n        @defer (on viewport) {\r\n        <app-forms-builder-menu />\r\n        } @placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n        </div>\r\n\r\n        }\r\n\r\n        <span class=\"divider\">|</span>\r\n\r\n        <!-- Save/Update button with optimized reactive state -->\r\n        <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\" (click)=\"saveForm()\">\r\n\r\n            <mat-icon>\r\n                {{(isNewForm()) ? 'save' : 'update'}}\r\n            </mat-icon>\r\n\r\n            @if (selectFormBuilderIsBusy()) {\r\n            {{(isNewForm()) ? '..Saving new form' : '..Updating Form'}}\r\n            } @else {\r\n            {{(isNewForm()) ? 'Save' : 'Update'}}\r\n            }\r\n        </button>\r\n\r\n    \r\n    </mat-toolbar>\r\n</header>\r\n\r\n<!-- Main content with optimized loading -->\r\n@defer (on viewport) {\r\n<div class=\"container\">\r\n    <div class=\"middle\">\r\n        <br>\r\n        @if (selectLoadingForm()) {\r\n        <div class=\"loading-container\">\r\n            <mat-spinner />\r\n        </div>\r\n        } @else {\r\n        <app-form-section-stepper />\r\n        }\r\n        <br>\r\n        @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n        <app-missing-form-configs />\r\n        }\r\n            <!-- Updated time info -->\r\n        @if (!(isNewForm())) {\r\n        <div class=\"updated-time\">\r\n            <mat-icon>update</mat-icon>\r\n            <span>Updated {{ selectFormUpdated() }}</span>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if (elementEditorOpen()) {\r\n    <app-input-editor style=\"max-width:480px;height:calc(100vh - 76px);\r\n    position:sticky;\r\n    top:76px;\r\n    z-index:1\" cdkDrag cdkDragBoundary=\"container\" class=\"middle editor-container\" />\r\n    }\r\n    <!-- Missing fields section -->`\r\n\r\n\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n    <mat-spinner diameter=\"50\" />\r\n</div>\r\n}", styles: [".container{display:flex;width:100%;height:calc(100% - 64px);padding-top:4em}.side{width:100px;background-color:#f8d7da}.middle{flex-grow:1;height:calc(100vh - 68px);overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:.8575em;font-weight:600;color:#fff;padding-top:12px;padding-bottom:12px;outline:none;width:100%;min-width:268px;transition:border-bottom-color .3s ease-in-out}.section-title-input:focus{border-bottom:1px solid #ffffff}.missing-fields{position:fixed;bottom:0}.updated-time{display:flex;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));gap:8px;align-items:center;line-height:normal;font-size:.875em;bottom:0;position:absolute;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:4px}.nav-group{display:flex;align-items:center;gap:8px}.save-button{margin-left:8px;min-width:168px}.loading-container{display:flex;height:calc(100% - 150px);justify-content:center;align-items:center}.editor-container{max-width:500px}.divider{margin:0 8px;opacity:.5}app-missing-form-configs{position:absolute;bottom:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-G3Agd-vE.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i2$2.MatIcon, i3.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-B12zbXE1.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-CJz0yr78.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-CsPMQZqg.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-jn9-yVbI.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-DyQBfgio.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-Bg9eGmgN.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-sJVu5SkY.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-G3Agd-vE.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-B12zbXE1.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-CJz0yr78.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-CsPMQZqg.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'app-form-builder', standalone: true, imports: [CommonModule,
                             MatModulesModule,
@@ -6224,13 +6225,13 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", n
                             MissingFormConfigsComponent,
                             RouterModule], providers: [
                             FormsStoreService
-                        ], template: "<header>\r\n    <mat-toolbar color=\"primary\">\r\n        @if (closeButton) {\r\n        <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n            <mat-icon>{{closeButton.icon}}</mat-icon>\r\n        </button>\r\n        }\r\n\r\n        <!-- Navigation group -->\r\n        <div class=\"nav-group\">\r\n            <button mat-button routerLink=\"/\">Forms</button>\r\n            <mat-icon>navigate_next</mat-icon>\r\n        </div>\r\n\r\n        <!-- Title input with optimized binding -->\r\n        @if (selectHasFormId()) {\r\n        <input [(ngModel)]=\"titleValue\" class=\"section-title-input\" placeholder=\"Enter Form Title\">\r\n        }\r\n\r\n        <span class=\"spacer\"></span>\r\n\r\n        @defer (on viewport) {\r\n        <app-forms-builder-menu />\r\n        } @placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n        </div>\r\n\r\n        }\r\n\r\n        <span class=\"divider\">|</span>\r\n\r\n        <!-- Save/Update button with optimized reactive state -->\r\n        <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\" (click)=\"saveForm()\">\r\n\r\n            <mat-icon>\r\n                {{(isNewForm()) ? 'save' : 'update'}}\r\n            </mat-icon>\r\n\r\n            @if (selectFormBuilderIsBusy()) {\r\n            {{(isNewForm()) ? '..Saving new form' : '..Updating Form'}}\r\n            } @else {\r\n            {{(isNewForm()) ? 'Save' : 'Update'}}\r\n            }\r\n        </button>\r\n\r\n        <!-- Updated time info -->\r\n        @if (!(isNewForm())) {\r\n        <div class=\"updated-time\">\r\n            <mat-icon>update</mat-icon>\r\n            <span>Updated {{ selectFormUpdated() }}</span>\r\n        </div>\r\n        }\r\n    </mat-toolbar>\r\n</header>\r\n\r\n<!-- Main content with optimized loading -->\r\n@defer (on viewport) {\r\n<div class=\"container\">\r\n    <div class=\"middle\">\r\n        <br>\r\n        @if (selectLoadingForm()) {\r\n        <div class=\"loading-container\">\r\n            <mat-spinner />\r\n        </div>\r\n        } @else {\r\n        <app-form-section-stepper />\r\n        }\r\n        <br>\r\n        @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n        <app-missing-form-configs />\r\n        }\r\n    </div>\r\n\r\n    @if (elementEditorOpen()) {\r\n    <app-input-editor style=\"max-width:480px;height:calc(100vh - 76px);\r\n    position:sticky;\r\n    top:76px;\r\n    z-index:1\" cdkDrag cdkDragBoundary=\"container\" class=\"middle editor-container\" />\r\n    }\r\n    <!-- Missing fields section -->`\r\n\r\n\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n    <mat-spinner diameter=\"50\" />\r\n</div>\r\n}", styles: [".container{display:flex;width:100%;height:calc(100% - 64px);background-color:var(--mat-sys-surface-container-high)}.side{width:100px;background-color:#f8d7da}.middle{flex-grow:1;height:calc(100vh - 52px);overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:.8575em;font-weight:600;color:#fff;padding-top:12px;padding-bottom:12px;outline:none;width:100%;min-width:268px;transition:border-bottom-color .3s ease-in-out}.section-title-input:focus{border-bottom:1px solid #ffffff}.missing-fields{position:fixed;bottom:0}.updated-time{display:flex;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));gap:8px;align-items:center;line-height:normal;font-size:.875em;bottom:0;position:absolute;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:4px}.nav-group{display:flex;align-items:center;gap:8px}.save-button{margin-left:8px;min-width:168px}.loading-container{display:flex;height:calc(100% - 150px);justify-content:center;align-items:center}.editor-container{max-width:500px}.divider{margin:0 8px;opacity:.5}app-missing-form-configs{position:absolute;bottom:0;right:0}\n"] }]
+                        ], template: "<header style=\"position:fixed;width:100%;left:0px;top:0px\">\r\n    <mat-toolbar color=\"primary\">\r\n        @if (closeButton) {\r\n        <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n            <mat-icon>{{closeButton.icon}}</mat-icon>\r\n        </button>\r\n        }\r\n\r\n        <!-- Navigation group -->\r\n        <div class=\"nav-group\">\r\n            <button mat-button routerLink=\"/\">Forms</button>\r\n            <mat-icon>navigate_next</mat-icon>\r\n        </div>\r\n\r\n        <!-- Title input with optimized binding -->\r\n        @if (selectHasFormId()) {\r\n        <input [(ngModel)]=\"titleValue\" class=\"section-title-input\" placeholder=\"Enter Form Title\">\r\n        }\r\n\r\n        <span class=\"spacer\"></span>\r\n\r\n        @defer (on viewport) {\r\n        <app-forms-builder-menu />\r\n        } @placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n        </div>\r\n\r\n        }\r\n\r\n        <span class=\"divider\">|</span>\r\n\r\n        <!-- Save/Update button with optimized reactive state -->\r\n        <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\" (click)=\"saveForm()\">\r\n\r\n            <mat-icon>\r\n                {{(isNewForm()) ? 'save' : 'update'}}\r\n            </mat-icon>\r\n\r\n            @if (selectFormBuilderIsBusy()) {\r\n            {{(isNewForm()) ? '..Saving new form' : '..Updating Form'}}\r\n            } @else {\r\n            {{(isNewForm()) ? 'Save' : 'Update'}}\r\n            }\r\n        </button>\r\n\r\n    \r\n    </mat-toolbar>\r\n</header>\r\n\r\n<!-- Main content with optimized loading -->\r\n@defer (on viewport) {\r\n<div class=\"container\">\r\n    <div class=\"middle\">\r\n        <br>\r\n        @if (selectLoadingForm()) {\r\n        <div class=\"loading-container\">\r\n            <mat-spinner />\r\n        </div>\r\n        } @else {\r\n        <app-form-section-stepper />\r\n        }\r\n        <br>\r\n        @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n        <app-missing-form-configs />\r\n        }\r\n            <!-- Updated time info -->\r\n        @if (!(isNewForm())) {\r\n        <div class=\"updated-time\">\r\n            <mat-icon>update</mat-icon>\r\n            <span>Updated {{ selectFormUpdated() }}</span>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if (elementEditorOpen()) {\r\n    <app-input-editor style=\"max-width:480px;height:calc(100vh - 76px);\r\n    position:sticky;\r\n    top:76px;\r\n    z-index:1\" cdkDrag cdkDragBoundary=\"container\" class=\"middle editor-container\" />\r\n    }\r\n    <!-- Missing fields section -->`\r\n\r\n\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n    <mat-spinner diameter=\"50\" />\r\n</div>\r\n}", styles: [".container{display:flex;width:100%;height:calc(100% - 64px);padding-top:4em}.side{width:100px;background-color:#f8d7da}.middle{flex-grow:1;height:calc(100vh - 68px);overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:.8575em;font-weight:600;color:#fff;padding-top:12px;padding-bottom:12px;outline:none;width:100%;min-width:268px;transition:border-bottom-color .3s ease-in-out}.section-title-input:focus{border-bottom:1px solid #ffffff}.missing-fields{position:fixed;bottom:0}.updated-time{display:flex;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));gap:8px;align-items:center;line-height:normal;font-size:.875em;bottom:0;position:absolute;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:4px}.nav-group{display:flex;align-items:center;gap:8px}.save-button{margin-left:8px;min-width:168px}.loading-container{display:flex;height:calc(100% - 150px);justify-content:center;align-items:center}.editor-container{max-width:500px}.divider{margin:0 8px;opacity:.5}app-missing-form-configs{position:absolute;bottom:0;right:0}\n"] }]
             }], ctorParameters: () => [], propDecorators: { formId: [{
                     type: Input
                 }] } }) });
 
 function getAvatar(name) {
-    return `https://ui-avatars.com/api/?font-size=0.36&bold=true&name=${name}&background=random`;
+    return `https://ui-avatars.com/api/?font-size=0.36&bold=true&name=${encodeURIComponent(name)}&background=random`;
 }
 
 class DaysAgoPipe {
@@ -6297,6 +6298,34 @@ var daysAgo_pipe = /*#__PURE__*/Object.freeze({
     DaysAgoPipe: DaysAgoPipe
 });
 
+/**
+ * Escapes special characters in a string to be used in a regex.
+ * e.g. "C++" -> "C\+\+"
+ */
+function escapeRegExp(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/**
+ * Converts a string into a fuzzy regex pattern.
+ * e.g. "ts" -> /t.*s/i
+ */
+function createFuzzyRegExp(query) {
+    // 1. Escape the query to prevent invalid regex errors
+    const escapedQuery = escapeRegExp(query);
+    // 2. Insert ".*" between every character
+    //    "ts" -> ['t', 's'] -> "t.*s"
+    const pattern = escapedQuery.split('').join('.*');
+    // 3. Create the RegExp (case-insensitive)
+    return new RegExp(pattern, 'i');
+}
+/**
+ * Performs the fuzzy search against a target string.
+ */
+function fuzzySearch(query, text) {
+    const regex = createFuzzyRegExp(query);
+    return regex.test(text);
+}
+
 class FormsComponent {
     constructor(route, store, document) {
         this.route = route;
@@ -6311,6 +6340,23 @@ class FormsComponent {
             acc[key].push(curr);
             return acc;
         }, { system: [], custom: [] })));
+        this.searchQuerySubject = new BehaviorSubject('');
+        this.searchQuery$ = this.searchQuerySubject.asObservable();
+        this.selectHasActiveSearch$ = this.searchQuery$.pipe(map(q => !!(q?.trim())));
+        this.selectFilteredGroupedForms$ = combineLatest([
+            this.selectGroupedForms$,
+            this.searchQuerySubject
+        ]).pipe(map(([groups, query]) => {
+            if (!groups)
+                return groups;
+            const q = (query ?? '').trim();
+            if (!q)
+                return groups;
+            return {
+                custom: (groups['custom'] ?? []).filter(f => fuzzySearch(q, f.formTitle ?? '')),
+                system: (groups['system'] ?? []).filter(f => fuzzySearch(q, f.formTitle ?? ''))
+            };
+        }));
         this.selectLoadingForms$ = this.store.selectors.selectLoadingForms$;
         this.selectErrors$ = this.store.selectors.selectErrors$;
         this.selectFormListSection$ = this.store.selectors.selectFormListSection$;
@@ -6339,7 +6385,6 @@ class FormsComponent {
             const params = routeState.queryParams;
             this.store.actions.handleRouterStateChange(of(data['route']));
             this.store.effects.setListSection$(of(params['section']));
-            // Use formId here
         }));
         this.viewportWidth = this.document.documentElement.clientWidth;
     }
@@ -6402,16 +6447,25 @@ class FormsComponent {
     addNewForm() {
         this.NGX_T_FORMS_CONFIG.formBuilder.addNewForm();
     }
+    clearSearch() {
+        this.searchQuerySubject.next('');
+    }
+    get searchQuery() {
+        return this.searchQuerySubject.value;
+    }
+    set searchQuery(v) {
+        this.searchQuerySubject.next(v ?? '');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormsComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: FormsStoreService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormsComponent, isStandalone: true, selector: "app-forms", providers: [
             FormsStoreService,
-        ], ngImport: i0, template: "<header>\r\n  <mat-toolbar class=\"app-header\" color=\"primary\">\r\n    @if(closeButton){\r\n    <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n      <mat-icon>{{closeButton.icon}}</mat-icon>\r\n    </button>\r\n    }\r\n    <span class=\"app-title\">Form List</span>\r\n\r\n\r\n    <span class=\"flex-spacer\"></span>\r\n    @for (section of formListSections; track section.value) {\r\n    @if(section.value === (selectFormListSection$|async)){\r\n    <button mat-flat-button (click)=\"setSection(section.value)\">\r\n      <span>{{section.label}}</span>\r\n    </button>\r\n    }@else {\r\n    <button mat-button (click)=\"setSection(section.value)\">\r\n      <span>{{section.label}}</span>\r\n    </button>\r\n    }\r\n    }\r\n    <span class=\"flex-spacer\"></span>\r\n    <button mat-raised-button color=\"accent\" (click)=\"addNewForm()\" class=\"action-button\" aria-label=\"Create new form\">\r\n      <mat-icon>add</mat-icon>\r\n      <span>Add Form</span>\r\n    </button>\r\n  </mat-toolbar>\r\n</header>\r\n\r\n<div class=\"content-container\">\r\n\r\n  @if((selectErrors$ |async)?.['LoadForms']){\r\n  <div class=\"error-container mat-elevation-z2\">\r\n    <div class=\"error-content\">\r\n      <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n      <span class=\"error-message\">{{(selectErrors$ |async)?.['LoadForms']}}</span>\r\n      <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n\r\n  @if (selectLoadingForms$ | async) {\r\n  <div class=\"loading-container\">\r\n\r\n    <span>\r\n      <mat-spinner style=\"    margin: auto;\"></mat-spinner>\r\n      <span style=\"position: relative;text-align: center;\">\r\n        <br>\r\n        Loading forms...\r\n\r\n      </span>\r\n\r\n\r\n\r\n    </span>\r\n\r\n\r\n  </div>\r\n  } @else {\r\n  <mat-accordion multi=\"true\" *ngIf=\"selectGroupedForms$ | async as groups\">\r\n\r\n    <mat-expansion-panel [expanded]=\"true\">\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>Local Forms</mat-panel-title>\r\n        <mat-panel-description>Forms created by you</mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"formListOptions\" [ngTemplateOutletContext]=\"{ forms: groups['custom'] }\">\r\n      </ng-container>\r\n    </mat-expansion-panel>\r\n\r\n    <mat-expansion-panel>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>Global Forms</mat-panel-title>\r\n        <mat-panel-description>Standard system templates</mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"formListOptions\" [ngTemplateOutletContext]=\"{ forms: groups['system'] }\">\r\n      </ng-container>\r\n    </mat-expansion-panel>\r\n\r\n  </mat-accordion>\r\n\r\n  }\r\n\r\n</div>\r\n\r\n<ng-template #formListOptions let-forms=\"forms\">\r\n  @if ((forms)?.length === 0) {\r\n  <div class=\"empty-container\">\r\n    <img src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\"\r\n      alt=\"\">\r\n    <p style=\"font-style: italic;\">\r\n      <strong>\r\n        No forms available.\r\n      </strong>\r\n\r\n    </p>\r\n  </div>\r\n\r\n\r\n\r\n  }\r\n  <mat-nav-list class=\"forms-list\">\r\n\r\n    @for (form of forms ?? []; track form._id) {\r\n\r\n    <mat-list-item (click)=\"editForm(form)\" [disabled]=\"form.busy\" [class.archived]=\"form.archived\"\r\n      [class.mat-elevation-z1]=\"activeForm !== form._id\" [class.mat-elevation-z2]=\"activeForm === form._id\"\r\n      (mouseover)=\"activeForm = form._id\"\r\n      [style.border]=\"form.errors.length > 0? '1px solid var(--mat-sys-error) !important':''\"\r\n      (mouseleave)=\"activeForm = null\" class=\"form-list-item\">\r\n      @if (form.busy) {\r\n      <mat-spinner style=\"position: absolute;    margin-left: 12px;\" matListItemAvatar [diameter]=\"48\"></mat-spinner>\r\n      }\r\n\r\n      <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n        [alt]=\"'form image ' + form.formTitle\">\r\n      <div matListItemTitle class=\"form-item-content\" [style.color]=\"form.errors.length>0? 'var(--mat-sys-error)':''\">\r\n        <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n        <div class=\"form-metadata\">\r\n\r\n          @if(form.errors.length > 0) {\r\n          <span style=\"color:var(--mat-sys-error)\"><mat-icon\r\n              [matTooltip]=\"form.errors.length + ' error(s) found in this form'\">error</mat-icon> <small>{{\r\n              form.errors.length}}</small></span>\r\n          <span class=\"metadata-divider\">\u2022</span>\r\n          }\r\n          <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n          <span class=\"metadata-divider\">\u2022</span>\r\n          <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n\r\n\r\n\r\n        </div>\r\n      </div>\r\n      @if (activeForm === form._id) {\r\n      <span class=\"form-actions\" matListItemMeta>\r\n\r\n        @if(!form.archived){\r\n        <button mat-icon-button color=\"warn\" (click)=\"archive(form,$event)\"\r\n          matTooltip=\"Archiving a form will affect all the workflows it is linked to. Make sure to review and update all workflow configurations accordingly.\"\r\n          aria-label=\"Archive form\">\r\n\r\n          <mat-icon>archive</mat-icon>\r\n        </button>\r\n        }@else {\r\n        <button mat-icon-button (click)=\"delete(form,$event)\" color=\"warn\"\r\n          matTooltip=\"Permanently delete a form. This action cannot be undone.\" aria-label=\"Restore form\">\r\n          <mat-icon>\r\n            delete_forever\r\n          </mat-icon>\r\n        </button>\r\n        <button mat-icon-button color=\"primary\" (click)=\"unarchive(form,$event)\"\r\n          matTooltip=\"Restore a form will make it available for use in workflows.\" aria-label=\"Restore form\">\r\n          <mat-icon>unarchive</mat-icon>\r\n        </button>\r\n        }\r\n\r\n\r\n      </span>\r\n      }\r\n    </mat-list-item>\r\n    }\r\n  </mat-nav-list>\r\n</ng-template>", styles: [".app-header{box-shadow:0 2px 4px #0000001f;position:fixed;top:0;z-index:1000}.app-title{margin-left:4px;font-weight:500}.content-container{max-width:1440px;margin:84px auto 0;padding:0 24px}.page-toolbar{background:none;padding:0;height:64px;margin-bottom:24px}.action-button .mat-icon{margin-right:8px}.forms-list{background:none;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(312px,1fr));grid-auto-rows:min-content;gap:12px;padding:16px;width:100%}.form-list-item{margin:0;border-radius:8px!important;border:solid 1px var(--mat-divider-color, var(--mat-sys-outline))!important;transition:background-color .2s ease;background:var(--mat-sys-surface-container-lowest);height:fit-content!important;min-width:280px;max-width:none}.form-item-content{padding:16px 0}.form-title{margin-bottom:0}.form-metadata{color:#0009;font-size:.875em;line-height:normal;display:flex}.form-metadata .metadata-divider{margin:0 8px}.form-metadata span{display:inline-flex;gap:4px}.form-metadata span mat-icon{font-size:.875em;height:14px;width:14px}.loading-container{display:flex;justify-content:center;align-items:center;padding:48px 0}.flex-spacer{flex:1 1 auto}.active-link{background-color:#0000000d}@media screen and (max-width: 599px){.forms-list{grid-template-columns:1fr;padding:8px}.form-list-item{width:100%;max-width:100%}.content-container{padding:0 16px}}.error{border:solid #f44336 1px}.error-container{background-color:#fef2f2;border-radius:8px;border-left:4px solid #ef4444;padding:16px;margin:16px 0;transition:all .2s ease-in-out;position:relative}.error-container:hover{transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.error-content{display:flex;align-items:center;gap:12px}.error-icon{flex-shrink:0;font-size:1.5em;height:24px;width:24px}.error-message{flex-grow:1;color:#f44336;font-size:.875em;line-height:1.5;margin:0}.refresh-button{flex-shrink:0;color:#f44336;opacity:.8;transition:opacity .2s ease-in-out}.refresh-button:hover{opacity:1;background-color:#991b1b0a}.archived{opacity:.6!important}.archived:hover{opacity:1!important}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;max-width:500px;margin:auto;gap:16px;background:#ffffff52;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(8.2px);-webkit-backdrop-filter:blur(8.2px);border:1px solid rgba(255,255,255,.77);aspect-ratio:1;width:350px;height:430px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i6.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }, { kind: "ngmodule", type: RouterModule }] }); }
+        ], ngImport: i0, template: "<header style=\"position: fixed;left: 0px;top:0px;width:100%;z-index: 1;\">\r\n  <mat-toolbar class=\"forms-toolbar\" color=\"primary\">\r\n    @if (closeButton) {\r\n    <button mat-mini-fab class=\"close-button\" (click)=\"closeButton.onClick()\" aria-label=\"Close\">\r\n      <mat-icon>{{ closeButton.icon }}</mat-icon>\r\n    </button>\r\n    }\r\n    <span class=\"spacer\"></span>\r\n\r\n    <div class=\"section-switcher\" role=\"tablist\">\r\n      @for (section of formListSections; track section.value) {\r\n      @if(section.value === (selectFormListSection$ | async)){\r\n      <button \r\n        mat-raised-button (click)=\"setSection(section.value)\">\r\n        {{ section.label }}\r\n      </button>\r\n      } @else{\r\n      <button \r\n\r\n         role=\"tab\" \r\n        mat-button (click)=\"setSection(section.value)\">\r\n        {{ section.label }}\r\n      </button>\r\n      }\r\n\r\n      }\r\n    </div>\r\n    <span class=\"spacer\"></span>\r\n    <button mat-flat-button color=\"primary\" (click)=\"addNewForm()\" class=\"add-form-button\" aria-label=\"Create new form\">\r\n      <mat-icon>add</mat-icon>\r\n      <span>Add Form</span>\r\n    </button>\r\n\r\n\r\n  </mat-toolbar>\r\n</header>\r\n<div class=\"forms-wrapper\">\r\n\r\n  <br>\r\n  <div class=\"content-container\">\r\n    <div class=\"search-container\">\r\n\r\n\r\n      <mat-form-field appearance=\"outline\" class=\"search-field toolbar-search\" subscriptSizing=\"dynamic\">\r\n        <mat-label>Search forms</mat-label>\r\n        <input matInput type=\"search \" [(ngModel)]=\"searchQuery\" placeholder=\"Type to filter by form name...\"\r\n          aria-label=\"Search forms by name\" autocomplete=\"off\" />\r\n        <mat-icon matPrefix aria-hidden=\"true\">search</mat-icon>\r\n        @if (searchQuery.trim()) {\r\n        <button mat-icon-button matSuffix (click)=\"clearSearch()\" aria-label=\"Clear search\" type=\"button\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n        }\r\n      </mat-form-field>\r\n\r\n\r\n    </div>\r\n\r\n    @if ((selectErrors$ | async)?.['LoadForms']) {\r\n    <div class=\"error-container mat-elevation-z2\" role=\"alert\">\r\n      <div class=\"error-content\">\r\n        <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n        <span class=\"error-message\">{{ (selectErrors$ | async)?.['LoadForms'] }}</span>\r\n        <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry loading forms\">\r\n          <mat-icon>refresh</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    @if (selectLoadingForms$ | async) {\r\n    <div class=\"loading-container\">\r\n      <mat-spinner diameter=\"48\"></mat-spinner>\r\n      <span class=\"loading-text\">Loading forms...</span>\r\n    </div>\r\n    } @else {\r\n    @if (selectFilteredGroupedForms$ | async; as groups) {\r\n    <div class=\"form-sections\">\r\n      <section class=\"form-section\" aria-labelledby=\"local-forms-heading\">\r\n        <div class=\"section-header\">\r\n          <h2 id=\"local-forms-heading\" class=\"section-title\">Local Forms</h2>\r\n          <span class=\"section-subtitle\">Forms created by you</span>\r\n        </div>\r\n        <ng-container [ngTemplateOutlet]=\"formListOptions\"\r\n          [ngTemplateOutletContext]=\"{ forms: groups['custom'], hasActiveSearch: (selectHasActiveSearch$ | async) }\"></ng-container>\r\n      </section>\r\n\r\n      <section class=\"form-section\" aria-labelledby=\"global-forms-heading\">\r\n        <div class=\"section-header\">\r\n          <h2 id=\"global-forms-heading\" class=\"section-title\">Global Forms</h2>\r\n          <span class=\"section-subtitle\">Standard system templates</span>\r\n        </div>\r\n        <ng-container [ngTemplateOutlet]=\"formListOptions\"\r\n          [ngTemplateOutletContext]=\"{ forms: groups['system'], hasActiveSearch: (selectHasActiveSearch$ | async) }\"></ng-container>\r\n      </section>\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #formListOptions let-forms=\"forms\" let-hasActiveSearch=\"hasActiveSearch\">\r\n  @if ((forms)?.length === 0) {\r\n  <div class=\"empty-container\">\r\n    <img src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\"\r\n      alt=\"\" class=\"empty-illustration\" />\r\n    <p class=\"empty-message\">\r\n      @if (hasActiveSearch) {\r\n      <strong>No forms match your search.</strong>\r\n      <br />\r\n      <span class=\"empty-hint\">Try a different search term.</span>\r\n      } @else {\r\n      <strong>No forms available.</strong>\r\n      }\r\n    </p>\r\n  </div>\r\n  }\r\n\r\n  <mat-nav-list class=\"forms-list\">\r\n    @for (form of forms ?? []; track form._id) {\r\n    <mat-list-item (click)=\"editForm(form)\" [disabled]=\"form.busy\" [class.archived]=\"form.archived\"\r\n      [class.has-errors]=\"form.errors.length > 0\" [class.elevated]=\"activeForm === form._id\"\r\n      (mouseover)=\"activeForm = form._id\" (mouseleave)=\"activeForm = null\" class=\"form-list-item\"\r\n      [attr.aria-busy]=\"form.busy\">\r\n      @if (form.busy) {\r\n      <mat-spinner matListItemAvatar [diameter]=\"48\" class=\"form-item-spinner\"></mat-spinner>\r\n      }\r\n\r\n      <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n        [alt]=\"'Form preview: ' + form.formTitle\" />\r\n      <div matListItemTitle class=\"form-item-content\" [class.has-errors]=\"form.errors.length > 0\">\r\n        <div class=\"form-title-row\">\r\n          <span class=\"form-title\">{{ form.formTitle | titlecase }}</span>\r\n\r\n        </div>\r\n        <div class=\"form-metadata\">\r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">add_circle_outline</mat-icon>\r\n            <small>Created {{ form.createdAt | daysAgo }}</small>\r\n          </span>\r\n          <span class=\"metadata-divider\" aria-hidden=\"true\">\u00B7</span>\r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">update</mat-icon>\r\n            <small>Updated {{ form.updatedAt | daysAgo }}</small>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <span class=\"form-actions\" matListItemMeta>\r\n        @if (form.errors.length > 0) {\r\n        <span class=\"error-badge\" [matTooltip]=\"form.errors.length + ' error(s) found in this form'\">\r\n          <mat-icon>error</mat-icon>\r\n          <span>{{ form.errors.length }}</span>\r\n        </span>\r\n        }\r\n        <button mat-icon-button [matMenuTriggerFor]=\"formActionsMenu\" [matMenuTriggerData]=\"{ form: form }\"\r\n          class=\"form-actions-trigger\" aria-label=\"Form actions\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n      </span>\r\n    </mat-list-item>\r\n    }\r\n  </mat-nav-list>\r\n</ng-template>\r\n\r\n<mat-menu #formActionsMenu=\"matMenu\" xPosition=\"before\">\r\n  <ng-template matMenuContent let-form=\"form\">\r\n    @if (!form.archived) {\r\n    <button mat-menu-item (click)=\"archive(form, $event)\" aria-label=\"Archive form\">\r\n      <mat-icon>archive</mat-icon>\r\n      <span>Archive</span>\r\n    </button>\r\n    } @else {\r\n    <button mat-menu-item (click)=\"unarchive(form, $event)\" aria-label=\"Restore form\">\r\n      <mat-icon>unarchive</mat-icon>\r\n      <span>Restore</span>\r\n    </button>\r\n    <button mat-menu-item class=\"menu-item-destructive\" (click)=\"delete(form, $event)\"\r\n      aria-label=\"Permanently delete form\">\r\n      <mat-icon>delete_forever</mat-icon>\r\n      <span>Delete permanently</span>\r\n    </button>\r\n    }\r\n  </ng-template>\r\n</mat-menu>", styles: [":host{display:block}.search-container{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;width:100%;max-width:85rem;margin-top:4em;margin-bottom:12px}.forms-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;height:fit-content;min-height:3.25rem;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.toolbar-search{flex:1 1 12rem;min-width:10rem;max-width:28rem}.toolbar-search .mat-mdc-form-field-flex{align-items:center}.toolbar-search .mat-mdc-form-field-infix{padding-top:.5rem;padding-bottom:.5rem;min-height:2.25rem}.section-switcher{display:flex;gap:.5rem;align-items:center}.section-preset{padding:.4rem .75rem;min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mat-sys-outline, #79747e);border-radius:6px;font-size:.8125rem;font-weight:500;background:var(--mat-sys-surface, #fef7ff);color:var(--mat-sys-on-surface-variant, #49454f);cursor:pointer;transition:all .15s ease}.section-preset:hover{border-color:var(--mat-sys-primary, #6750a4);color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.section-preset:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.section-active{border-color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent);color:var(--mat-sys-primary, #6750a4);font-weight:600}.add-form-button .mat-icon{margin-right:.35rem;font-size:1.25rem;height:1.25rem;width:1.25rem}.close-button{flex-shrink:0}.search-field{width:100%;font-size:.875rem}.search-field .mat-mdc-form-field-subscript-wrapper{display:none}.search-field .mat-mdc-text-field-wrapper{background:var(--mat-sys-surface-container-high, var(--mat-sys-surface));border-radius:8px;transition:border-color .15s ease,box-shadow .15s ease}.search-field .mat-mdc-form-field-focus-overlay{background:transparent}.search-field input{min-height:2.25rem}.search-field input::placeholder{color:color-mix(in srgb,var(--mat-sys-on-surface-variant, #49454f) 60%,transparent)}.search-field .mat-icon[matPrefix]{color:var(--mat-sys-on-surface-variant, #49454f)}.search-field .mat-mdc-form-field-focus-overlay{display:none}.search-field .mdc-notched-outline__leading,.search-field .mdc-notched-outline__notch,.search-field .mdc-notched-outline__trailing{border-color:color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent)}.search-field:hover .mdc-notched-outline__leading,.search-field:hover .mdc-notched-outline__notch,.search-field:hover .mdc-notched-outline__trailing{border-color:var(--mat-sys-outline, #79747e)}.search-field.mat-focused .mdc-notched-outline__leading,.search-field.mat-focused .mdc-notched-outline__notch,.search-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--mat-sys-primary, #6750a4);border-width:2px}.search-field.mat-focused .mdc-notched-outline{box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.search-field button[matSuffix]{color:var(--mat-sys-on-surface-variant, #49454f);transition:color .15s ease,background-color .15s ease}.search-field button[matSuffix]:hover{color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.empty-hint{font-weight:400;font-size:.8125rem;opacity:.9}.content-container{max-width:90rem;margin:0 auto;padding:1rem 1.25rem;background:var(--mat-sys-surface, #fef7ff);min-height:12rem}.forms-list{background:none;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));grid-auto-rows:min-content;gap:.75rem;padding:.5rem 0;width:100%}.form-list-item{margin:0;border-radius:12px!important;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;background:var(--mat-sys-surface-container, var(--mat-sys-surface));min-height:3.25rem;min-width:0;height:auto!important;cursor:pointer}.form-list-item:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.form-list-item.elevated{box-shadow:0 2px 8px #00000014;border-color:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}@media (prefers-color-scheme: dark){.form-list-item.elevated{box-shadow:0 1px 3px #0000004d}}.form-list-item.has-errors{border-color:var(--mat-sys-error, #b3261e)}.form-list-item:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.form-item-spinner{position:absolute;margin-left:.75rem}.form-item-content{padding:.5rem .75rem .5rem 0;min-width:0;flex:1}.form-item-content.has-errors .form-title{color:var(--mat-sys-error, #b3261e)}.form-title-row{display:flex;align-items:flex-start;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem}.form-title{margin-bottom:0;font-weight:500;font-size:.9375rem;flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}.error-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:color-mix(in srgb,var(--mat-sys-error, #b3261e) 15%,transparent);border-radius:8px;font-size:.8125rem;font-weight:600;color:var(--mat-sys-error, #b3261e);flex-shrink:0}.error-badge mat-icon{font-size:1rem;height:1rem;width:1rem}.form-metadata{color:var(--mat-sys-on-surface-variant, #49454f);font-size:.8125rem;line-height:1.35;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.25rem}.form-metadata .metadata-divider{margin:0 .25rem;color:var(--mat-sys-outline-variant, var(--mat-sys-outline));font-weight:600}.form-metadata .metadata-item{display:inline-flex;align-items:center;gap:.25rem}.form-metadata .metadata-item mat-icon{font-size:.875rem;height:1rem;width:1rem;opacity:.8}.form-actions{opacity:.7;transition:opacity .15s ease}.form-list-item:hover .form-actions,.form-list-item:focus-within .form-actions{opacity:1}.form-actions-trigger{min-width:2.5rem;min-height:2.5rem}:host ::ng-deep .form-list-item .mat-mdc-list-item-content{padding:0 1rem!important;min-height:3.25rem!important;align-items:center!important;overflow:visible!important}:host ::ng-deep .form-list-item .mdc-list-item__primary-text{overflow:visible!important;white-space:normal!important}:host ::ng-deep .menu-item-destructive{color:var(--mat-sys-error, #b3261e)!important}:host ::ng-deep .menu-item-destructive .mat-icon{color:inherit}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem 1.5rem}.loading-text{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f)}.error-container{background:color-mix(in srgb,var(--mat-sys-error, #b3261e) 8%,transparent);border-radius:8px;border-left:4px solid var(--mat-sys-error, #b3261e);padding:1rem 1.25rem;margin:1rem 0;transition:border-color .2s ease,background-color .2s ease}.error-content{display:flex;align-items:center;gap:.75rem}.error-icon{flex-shrink:0;font-size:1.5rem;height:1.5rem;width:1.5rem}.error-message{flex-grow:1;color:var(--mat-sys-error, #b3261e);font-size:.875rem;line-height:1.5;margin:0}.refresh-button{flex-shrink:0;color:var(--mat-sys-error, #b3261e);opacity:.8;transition:opacity .15s ease}.refresh-button:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-error, #b3261e) 12%,transparent)}.archived{opacity:.6}.archived:hover{opacity:1}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem 1.25rem;margin:1rem auto;max-width:28rem;background:var(--mat-sys-surface-container, var(--mat-sys-surface));border-radius:12px;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);box-shadow:0 2px 8px #00000014}@media (prefers-color-scheme: dark){.empty-container{box-shadow:0 1px 3px #0000004d}}.empty-illustration{width:12rem;height:auto;object-fit:contain}.empty-message{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);margin:0;line-height:1.4;text-align:center}.form-list-item img.error{border:2px solid var(--mat-sys-error, #b3261e);border-radius:6px}.form-sections{display:flex;flex-direction:column;gap:1.5rem}.form-section{display:flex;flex-direction:column;gap:.75rem}.section-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;padding:.5rem 0;border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.section-title{margin:0;font-weight:600;font-size:.9375rem;color:var(--mat-sys-on-surface, #1c1b1f);letter-spacing:-.01em}.section-subtitle{font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.35}@media screen and (max-width: 599px){.forms-list{grid-template-columns:1fr;padding:.25rem 0}.content-container{padding:.75rem 1rem}.forms-toolbar{padding:.5rem 1rem;gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i7.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i7.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i7.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i2$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i2$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i13.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: "pipe", type: DaysAgoPipe, name: "daysAgo" }, { kind: "ngmodule", type: RouterModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-forms', standalone: true, imports: [CommonModule, MatModulesModule, DaysAgoPipe, RouterModule], providers: [
+            args: [{ selector: 'app-forms', standalone: true, imports: [CommonModule, FormsModule, MatModulesModule, DaysAgoPipe, RouterModule], providers: [
                         FormsStoreService,
-                    ], template: "<header>\r\n  <mat-toolbar class=\"app-header\" color=\"primary\">\r\n    @if(closeButton){\r\n    <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n      <mat-icon>{{closeButton.icon}}</mat-icon>\r\n    </button>\r\n    }\r\n    <span class=\"app-title\">Form List</span>\r\n\r\n\r\n    <span class=\"flex-spacer\"></span>\r\n    @for (section of formListSections; track section.value) {\r\n    @if(section.value === (selectFormListSection$|async)){\r\n    <button mat-flat-button (click)=\"setSection(section.value)\">\r\n      <span>{{section.label}}</span>\r\n    </button>\r\n    }@else {\r\n    <button mat-button (click)=\"setSection(section.value)\">\r\n      <span>{{section.label}}</span>\r\n    </button>\r\n    }\r\n    }\r\n    <span class=\"flex-spacer\"></span>\r\n    <button mat-raised-button color=\"accent\" (click)=\"addNewForm()\" class=\"action-button\" aria-label=\"Create new form\">\r\n      <mat-icon>add</mat-icon>\r\n      <span>Add Form</span>\r\n    </button>\r\n  </mat-toolbar>\r\n</header>\r\n\r\n<div class=\"content-container\">\r\n\r\n  @if((selectErrors$ |async)?.['LoadForms']){\r\n  <div class=\"error-container mat-elevation-z2\">\r\n    <div class=\"error-content\">\r\n      <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n      <span class=\"error-message\">{{(selectErrors$ |async)?.['LoadForms']}}</span>\r\n      <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry\">\r\n        <mat-icon>refresh</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n\r\n  @if (selectLoadingForms$ | async) {\r\n  <div class=\"loading-container\">\r\n\r\n    <span>\r\n      <mat-spinner style=\"    margin: auto;\"></mat-spinner>\r\n      <span style=\"position: relative;text-align: center;\">\r\n        <br>\r\n        Loading forms...\r\n\r\n      </span>\r\n\r\n\r\n\r\n    </span>\r\n\r\n\r\n  </div>\r\n  } @else {\r\n  <mat-accordion multi=\"true\" *ngIf=\"selectGroupedForms$ | async as groups\">\r\n\r\n    <mat-expansion-panel [expanded]=\"true\">\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>Local Forms</mat-panel-title>\r\n        <mat-panel-description>Forms created by you</mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"formListOptions\" [ngTemplateOutletContext]=\"{ forms: groups['custom'] }\">\r\n      </ng-container>\r\n    </mat-expansion-panel>\r\n\r\n    <mat-expansion-panel>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>Global Forms</mat-panel-title>\r\n        <mat-panel-description>Standard system templates</mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"formListOptions\" [ngTemplateOutletContext]=\"{ forms: groups['system'] }\">\r\n      </ng-container>\r\n    </mat-expansion-panel>\r\n\r\n  </mat-accordion>\r\n\r\n  }\r\n\r\n</div>\r\n\r\n<ng-template #formListOptions let-forms=\"forms\">\r\n  @if ((forms)?.length === 0) {\r\n  <div class=\"empty-container\">\r\n    <img src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\"\r\n      alt=\"\">\r\n    <p style=\"font-style: italic;\">\r\n      <strong>\r\n        No forms available.\r\n      </strong>\r\n\r\n    </p>\r\n  </div>\r\n\r\n\r\n\r\n  }\r\n  <mat-nav-list class=\"forms-list\">\r\n\r\n    @for (form of forms ?? []; track form._id) {\r\n\r\n    <mat-list-item (click)=\"editForm(form)\" [disabled]=\"form.busy\" [class.archived]=\"form.archived\"\r\n      [class.mat-elevation-z1]=\"activeForm !== form._id\" [class.mat-elevation-z2]=\"activeForm === form._id\"\r\n      (mouseover)=\"activeForm = form._id\"\r\n      [style.border]=\"form.errors.length > 0? '1px solid var(--mat-sys-error) !important':''\"\r\n      (mouseleave)=\"activeForm = null\" class=\"form-list-item\">\r\n      @if (form.busy) {\r\n      <mat-spinner style=\"position: absolute;    margin-left: 12px;\" matListItemAvatar [diameter]=\"48\"></mat-spinner>\r\n      }\r\n\r\n      <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n        [alt]=\"'form image ' + form.formTitle\">\r\n      <div matListItemTitle class=\"form-item-content\" [style.color]=\"form.errors.length>0? 'var(--mat-sys-error)':''\">\r\n        <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n        <div class=\"form-metadata\">\r\n\r\n          @if(form.errors.length > 0) {\r\n          <span style=\"color:var(--mat-sys-error)\"><mat-icon\r\n              [matTooltip]=\"form.errors.length + ' error(s) found in this form'\">error</mat-icon> <small>{{\r\n              form.errors.length}}</small></span>\r\n          <span class=\"metadata-divider\">\u2022</span>\r\n          }\r\n          <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n          <span class=\"metadata-divider\">\u2022</span>\r\n          <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n\r\n\r\n\r\n        </div>\r\n      </div>\r\n      @if (activeForm === form._id) {\r\n      <span class=\"form-actions\" matListItemMeta>\r\n\r\n        @if(!form.archived){\r\n        <button mat-icon-button color=\"warn\" (click)=\"archive(form,$event)\"\r\n          matTooltip=\"Archiving a form will affect all the workflows it is linked to. Make sure to review and update all workflow configurations accordingly.\"\r\n          aria-label=\"Archive form\">\r\n\r\n          <mat-icon>archive</mat-icon>\r\n        </button>\r\n        }@else {\r\n        <button mat-icon-button (click)=\"delete(form,$event)\" color=\"warn\"\r\n          matTooltip=\"Permanently delete a form. This action cannot be undone.\" aria-label=\"Restore form\">\r\n          <mat-icon>\r\n            delete_forever\r\n          </mat-icon>\r\n        </button>\r\n        <button mat-icon-button color=\"primary\" (click)=\"unarchive(form,$event)\"\r\n          matTooltip=\"Restore a form will make it available for use in workflows.\" aria-label=\"Restore form\">\r\n          <mat-icon>unarchive</mat-icon>\r\n        </button>\r\n        }\r\n\r\n\r\n      </span>\r\n      }\r\n    </mat-list-item>\r\n    }\r\n  </mat-nav-list>\r\n</ng-template>", styles: [".app-header{box-shadow:0 2px 4px #0000001f;position:fixed;top:0;z-index:1000}.app-title{margin-left:4px;font-weight:500}.content-container{max-width:1440px;margin:84px auto 0;padding:0 24px}.page-toolbar{background:none;padding:0;height:64px;margin-bottom:24px}.action-button .mat-icon{margin-right:8px}.forms-list{background:none;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(312px,1fr));grid-auto-rows:min-content;gap:12px;padding:16px;width:100%}.form-list-item{margin:0;border-radius:8px!important;border:solid 1px var(--mat-divider-color, var(--mat-sys-outline))!important;transition:background-color .2s ease;background:var(--mat-sys-surface-container-lowest);height:fit-content!important;min-width:280px;max-width:none}.form-item-content{padding:16px 0}.form-title{margin-bottom:0}.form-metadata{color:#0009;font-size:.875em;line-height:normal;display:flex}.form-metadata .metadata-divider{margin:0 8px}.form-metadata span{display:inline-flex;gap:4px}.form-metadata span mat-icon{font-size:.875em;height:14px;width:14px}.loading-container{display:flex;justify-content:center;align-items:center;padding:48px 0}.flex-spacer{flex:1 1 auto}.active-link{background-color:#0000000d}@media screen and (max-width: 599px){.forms-list{grid-template-columns:1fr;padding:8px}.form-list-item{width:100%;max-width:100%}.content-container{padding:0 16px}}.error{border:solid #f44336 1px}.error-container{background-color:#fef2f2;border-radius:8px;border-left:4px solid #ef4444;padding:16px;margin:16px 0;transition:all .2s ease-in-out;position:relative}.error-container:hover{transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.error-content{display:flex;align-items:center;gap:12px}.error-icon{flex-shrink:0;font-size:1.5em;height:24px;width:24px}.error-message{flex-grow:1;color:#f44336;font-size:.875em;line-height:1.5;margin:0}.refresh-button{flex-shrink:0;color:#f44336;opacity:.8;transition:opacity .2s ease-in-out}.refresh-button:hover{opacity:1;background-color:#991b1b0a}.archived{opacity:.6!important}.archived:hover{opacity:1!important}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;max-width:500px;margin:auto;gap:16px;background:#ffffff52;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(8.2px);-webkit-backdrop-filter:blur(8.2px);border:1px solid rgba(255,255,255,.77);aspect-ratio:1;width:350px;height:430px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
+                    ], template: "<header style=\"position: fixed;left: 0px;top:0px;width:100%;z-index: 1;\">\r\n  <mat-toolbar class=\"forms-toolbar\" color=\"primary\">\r\n    @if (closeButton) {\r\n    <button mat-mini-fab class=\"close-button\" (click)=\"closeButton.onClick()\" aria-label=\"Close\">\r\n      <mat-icon>{{ closeButton.icon }}</mat-icon>\r\n    </button>\r\n    }\r\n    <span class=\"spacer\"></span>\r\n\r\n    <div class=\"section-switcher\" role=\"tablist\">\r\n      @for (section of formListSections; track section.value) {\r\n      @if(section.value === (selectFormListSection$ | async)){\r\n      <button \r\n        mat-raised-button (click)=\"setSection(section.value)\">\r\n        {{ section.label }}\r\n      </button>\r\n      } @else{\r\n      <button \r\n\r\n         role=\"tab\" \r\n        mat-button (click)=\"setSection(section.value)\">\r\n        {{ section.label }}\r\n      </button>\r\n      }\r\n\r\n      }\r\n    </div>\r\n    <span class=\"spacer\"></span>\r\n    <button mat-flat-button color=\"primary\" (click)=\"addNewForm()\" class=\"add-form-button\" aria-label=\"Create new form\">\r\n      <mat-icon>add</mat-icon>\r\n      <span>Add Form</span>\r\n    </button>\r\n\r\n\r\n  </mat-toolbar>\r\n</header>\r\n<div class=\"forms-wrapper\">\r\n\r\n  <br>\r\n  <div class=\"content-container\">\r\n    <div class=\"search-container\">\r\n\r\n\r\n      <mat-form-field appearance=\"outline\" class=\"search-field toolbar-search\" subscriptSizing=\"dynamic\">\r\n        <mat-label>Search forms</mat-label>\r\n        <input matInput type=\"search \" [(ngModel)]=\"searchQuery\" placeholder=\"Type to filter by form name...\"\r\n          aria-label=\"Search forms by name\" autocomplete=\"off\" />\r\n        <mat-icon matPrefix aria-hidden=\"true\">search</mat-icon>\r\n        @if (searchQuery.trim()) {\r\n        <button mat-icon-button matSuffix (click)=\"clearSearch()\" aria-label=\"Clear search\" type=\"button\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n        }\r\n      </mat-form-field>\r\n\r\n\r\n    </div>\r\n\r\n    @if ((selectErrors$ | async)?.['LoadForms']) {\r\n    <div class=\"error-container mat-elevation-z2\" role=\"alert\">\r\n      <div class=\"error-content\">\r\n        <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n        <span class=\"error-message\">{{ (selectErrors$ | async)?.['LoadForms'] }}</span>\r\n        <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry loading forms\">\r\n          <mat-icon>refresh</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    @if (selectLoadingForms$ | async) {\r\n    <div class=\"loading-container\">\r\n      <mat-spinner diameter=\"48\"></mat-spinner>\r\n      <span class=\"loading-text\">Loading forms...</span>\r\n    </div>\r\n    } @else {\r\n    @if (selectFilteredGroupedForms$ | async; as groups) {\r\n    <div class=\"form-sections\">\r\n      <section class=\"form-section\" aria-labelledby=\"local-forms-heading\">\r\n        <div class=\"section-header\">\r\n          <h2 id=\"local-forms-heading\" class=\"section-title\">Local Forms</h2>\r\n          <span class=\"section-subtitle\">Forms created by you</span>\r\n        </div>\r\n        <ng-container [ngTemplateOutlet]=\"formListOptions\"\r\n          [ngTemplateOutletContext]=\"{ forms: groups['custom'], hasActiveSearch: (selectHasActiveSearch$ | async) }\"></ng-container>\r\n      </section>\r\n\r\n      <section class=\"form-section\" aria-labelledby=\"global-forms-heading\">\r\n        <div class=\"section-header\">\r\n          <h2 id=\"global-forms-heading\" class=\"section-title\">Global Forms</h2>\r\n          <span class=\"section-subtitle\">Standard system templates</span>\r\n        </div>\r\n        <ng-container [ngTemplateOutlet]=\"formListOptions\"\r\n          [ngTemplateOutletContext]=\"{ forms: groups['system'], hasActiveSearch: (selectHasActiveSearch$ | async) }\"></ng-container>\r\n      </section>\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #formListOptions let-forms=\"forms\" let-hasActiveSearch=\"hasActiveSearch\">\r\n  @if ((forms)?.length === 0) {\r\n  <div class=\"empty-container\">\r\n    <img src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\"\r\n      alt=\"\" class=\"empty-illustration\" />\r\n    <p class=\"empty-message\">\r\n      @if (hasActiveSearch) {\r\n      <strong>No forms match your search.</strong>\r\n      <br />\r\n      <span class=\"empty-hint\">Try a different search term.</span>\r\n      } @else {\r\n      <strong>No forms available.</strong>\r\n      }\r\n    </p>\r\n  </div>\r\n  }\r\n\r\n  <mat-nav-list class=\"forms-list\">\r\n    @for (form of forms ?? []; track form._id) {\r\n    <mat-list-item (click)=\"editForm(form)\" [disabled]=\"form.busy\" [class.archived]=\"form.archived\"\r\n      [class.has-errors]=\"form.errors.length > 0\" [class.elevated]=\"activeForm === form._id\"\r\n      (mouseover)=\"activeForm = form._id\" (mouseleave)=\"activeForm = null\" class=\"form-list-item\"\r\n      [attr.aria-busy]=\"form.busy\">\r\n      @if (form.busy) {\r\n      <mat-spinner matListItemAvatar [diameter]=\"48\" class=\"form-item-spinner\"></mat-spinner>\r\n      }\r\n\r\n      <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n        [alt]=\"'Form preview: ' + form.formTitle\" />\r\n      <div matListItemTitle class=\"form-item-content\" [class.has-errors]=\"form.errors.length > 0\">\r\n        <div class=\"form-title-row\">\r\n          <span class=\"form-title\">{{ form.formTitle | titlecase }}</span>\r\n\r\n        </div>\r\n        <div class=\"form-metadata\">\r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">add_circle_outline</mat-icon>\r\n            <small>Created {{ form.createdAt | daysAgo }}</small>\r\n          </span>\r\n          <span class=\"metadata-divider\" aria-hidden=\"true\">\u00B7</span>\r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">update</mat-icon>\r\n            <small>Updated {{ form.updatedAt | daysAgo }}</small>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <span class=\"form-actions\" matListItemMeta>\r\n        @if (form.errors.length > 0) {\r\n        <span class=\"error-badge\" [matTooltip]=\"form.errors.length + ' error(s) found in this form'\">\r\n          <mat-icon>error</mat-icon>\r\n          <span>{{ form.errors.length }}</span>\r\n        </span>\r\n        }\r\n        <button mat-icon-button [matMenuTriggerFor]=\"formActionsMenu\" [matMenuTriggerData]=\"{ form: form }\"\r\n          class=\"form-actions-trigger\" aria-label=\"Form actions\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n      </span>\r\n    </mat-list-item>\r\n    }\r\n  </mat-nav-list>\r\n</ng-template>\r\n\r\n<mat-menu #formActionsMenu=\"matMenu\" xPosition=\"before\">\r\n  <ng-template matMenuContent let-form=\"form\">\r\n    @if (!form.archived) {\r\n    <button mat-menu-item (click)=\"archive(form, $event)\" aria-label=\"Archive form\">\r\n      <mat-icon>archive</mat-icon>\r\n      <span>Archive</span>\r\n    </button>\r\n    } @else {\r\n    <button mat-menu-item (click)=\"unarchive(form, $event)\" aria-label=\"Restore form\">\r\n      <mat-icon>unarchive</mat-icon>\r\n      <span>Restore</span>\r\n    </button>\r\n    <button mat-menu-item class=\"menu-item-destructive\" (click)=\"delete(form, $event)\"\r\n      aria-label=\"Permanently delete form\">\r\n      <mat-icon>delete_forever</mat-icon>\r\n      <span>Delete permanently</span>\r\n    </button>\r\n    }\r\n  </ng-template>\r\n</mat-menu>", styles: [":host{display:block}.search-container{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;width:100%;max-width:85rem;margin-top:4em;margin-bottom:12px}.forms-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;height:fit-content;min-height:3.25rem;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.toolbar-search{flex:1 1 12rem;min-width:10rem;max-width:28rem}.toolbar-search .mat-mdc-form-field-flex{align-items:center}.toolbar-search .mat-mdc-form-field-infix{padding-top:.5rem;padding-bottom:.5rem;min-height:2.25rem}.section-switcher{display:flex;gap:.5rem;align-items:center}.section-preset{padding:.4rem .75rem;min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mat-sys-outline, #79747e);border-radius:6px;font-size:.8125rem;font-weight:500;background:var(--mat-sys-surface, #fef7ff);color:var(--mat-sys-on-surface-variant, #49454f);cursor:pointer;transition:all .15s ease}.section-preset:hover{border-color:var(--mat-sys-primary, #6750a4);color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.section-preset:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.section-active{border-color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent);color:var(--mat-sys-primary, #6750a4);font-weight:600}.add-form-button .mat-icon{margin-right:.35rem;font-size:1.25rem;height:1.25rem;width:1.25rem}.close-button{flex-shrink:0}.search-field{width:100%;font-size:.875rem}.search-field .mat-mdc-form-field-subscript-wrapper{display:none}.search-field .mat-mdc-text-field-wrapper{background:var(--mat-sys-surface-container-high, var(--mat-sys-surface));border-radius:8px;transition:border-color .15s ease,box-shadow .15s ease}.search-field .mat-mdc-form-field-focus-overlay{background:transparent}.search-field input{min-height:2.25rem}.search-field input::placeholder{color:color-mix(in srgb,var(--mat-sys-on-surface-variant, #49454f) 60%,transparent)}.search-field .mat-icon[matPrefix]{color:var(--mat-sys-on-surface-variant, #49454f)}.search-field .mat-mdc-form-field-focus-overlay{display:none}.search-field .mdc-notched-outline__leading,.search-field .mdc-notched-outline__notch,.search-field .mdc-notched-outline__trailing{border-color:color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent)}.search-field:hover .mdc-notched-outline__leading,.search-field:hover .mdc-notched-outline__notch,.search-field:hover .mdc-notched-outline__trailing{border-color:var(--mat-sys-outline, #79747e)}.search-field.mat-focused .mdc-notched-outline__leading,.search-field.mat-focused .mdc-notched-outline__notch,.search-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--mat-sys-primary, #6750a4);border-width:2px}.search-field.mat-focused .mdc-notched-outline{box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.search-field button[matSuffix]{color:var(--mat-sys-on-surface-variant, #49454f);transition:color .15s ease,background-color .15s ease}.search-field button[matSuffix]:hover{color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.empty-hint{font-weight:400;font-size:.8125rem;opacity:.9}.content-container{max-width:90rem;margin:0 auto;padding:1rem 1.25rem;background:var(--mat-sys-surface, #fef7ff);min-height:12rem}.forms-list{background:none;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));grid-auto-rows:min-content;gap:.75rem;padding:.5rem 0;width:100%}.form-list-item{margin:0;border-radius:12px!important;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;background:var(--mat-sys-surface-container, var(--mat-sys-surface));min-height:3.25rem;min-width:0;height:auto!important;cursor:pointer}.form-list-item:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.form-list-item.elevated{box-shadow:0 2px 8px #00000014;border-color:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}@media (prefers-color-scheme: dark){.form-list-item.elevated{box-shadow:0 1px 3px #0000004d}}.form-list-item.has-errors{border-color:var(--mat-sys-error, #b3261e)}.form-list-item:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.form-item-spinner{position:absolute;margin-left:.75rem}.form-item-content{padding:.5rem .75rem .5rem 0;min-width:0;flex:1}.form-item-content.has-errors .form-title{color:var(--mat-sys-error, #b3261e)}.form-title-row{display:flex;align-items:flex-start;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem}.form-title{margin-bottom:0;font-weight:500;font-size:.9375rem;flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}.error-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:color-mix(in srgb,var(--mat-sys-error, #b3261e) 15%,transparent);border-radius:8px;font-size:.8125rem;font-weight:600;color:var(--mat-sys-error, #b3261e);flex-shrink:0}.error-badge mat-icon{font-size:1rem;height:1rem;width:1rem}.form-metadata{color:var(--mat-sys-on-surface-variant, #49454f);font-size:.8125rem;line-height:1.35;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.25rem}.form-metadata .metadata-divider{margin:0 .25rem;color:var(--mat-sys-outline-variant, var(--mat-sys-outline));font-weight:600}.form-metadata .metadata-item{display:inline-flex;align-items:center;gap:.25rem}.form-metadata .metadata-item mat-icon{font-size:.875rem;height:1rem;width:1rem;opacity:.8}.form-actions{opacity:.7;transition:opacity .15s ease}.form-list-item:hover .form-actions,.form-list-item:focus-within .form-actions{opacity:1}.form-actions-trigger{min-width:2.5rem;min-height:2.5rem}:host ::ng-deep .form-list-item .mat-mdc-list-item-content{padding:0 1rem!important;min-height:3.25rem!important;align-items:center!important;overflow:visible!important}:host ::ng-deep .form-list-item .mdc-list-item__primary-text{overflow:visible!important;white-space:normal!important}:host ::ng-deep .menu-item-destructive{color:var(--mat-sys-error, #b3261e)!important}:host ::ng-deep .menu-item-destructive .mat-icon{color:inherit}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem 1.5rem}.loading-text{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f)}.error-container{background:color-mix(in srgb,var(--mat-sys-error, #b3261e) 8%,transparent);border-radius:8px;border-left:4px solid var(--mat-sys-error, #b3261e);padding:1rem 1.25rem;margin:1rem 0;transition:border-color .2s ease,background-color .2s ease}.error-content{display:flex;align-items:center;gap:.75rem}.error-icon{flex-shrink:0;font-size:1.5rem;height:1.5rem;width:1.5rem}.error-message{flex-grow:1;color:var(--mat-sys-error, #b3261e);font-size:.875rem;line-height:1.5;margin:0}.refresh-button{flex-shrink:0;color:var(--mat-sys-error, #b3261e);opacity:.8;transition:opacity .15s ease}.refresh-button:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-error, #b3261e) 12%,transparent)}.archived{opacity:.6}.archived:hover{opacity:1}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem 1.25rem;margin:1rem auto;max-width:28rem;background:var(--mat-sys-surface-container, var(--mat-sys-surface));border-radius:12px;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);box-shadow:0 2px 8px #00000014}@media (prefers-color-scheme: dark){.empty-container{box-shadow:0 1px 3px #0000004d}}.empty-illustration{width:12rem;height:auto;object-fit:contain}.empty-message{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);margin:0;line-height:1.4;text-align:center}.form-list-item img.error{border:2px solid var(--mat-sys-error, #b3261e);border-radius:6px}.form-sections{display:flex;flex-direction:column;gap:1.5rem}.form-section{display:flex;flex-direction:column;gap:.75rem}.section-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;padding:.5rem 0;border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.section-title{margin:0;font-weight:600;font-size:.9375rem;color:var(--mat-sys-on-surface, #1c1b1f);letter-spacing:-.01em}.section-subtitle{font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.35}@media screen and (max-width: 599px){.forms-list{grid-template-columns:1fr;padding:.25rem 0}.content-container{padding:.75rem 1rem}.forms-toolbar{padding:.5rem 1rem;gap:.5rem}}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: FormsStoreService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -6991,7 +7045,7 @@ class DataTreeComponent {
         this.pathChanged.emit(path);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DataTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DataTreeComponent, isStandalone: true, selector: "app-data-tree", inputs: { data: "data", value: "value", formInputs: "formInputs" }, outputs: { pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-accordion multi>\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">dataset_linked</mat-icon>\n        <span style=\"font-size: 0.75em;line-height:normal\">\n          Navigate and select data fields for mapping\n        </span>\n\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <div class=\"tree-instructions\">\n        <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n        <span>Click checkboxes to select fields for mapping. Selected paths will be highlighted.</span>\n      </div>\n      <mat-divider></mat-divider>\n\n      <mat-tree [dataSource]=\"treeClass.dataSource\" [treeControl]=\"treeClass.treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\n          <button disabled class=\"node-spacer\" aria-hidden=\"true\" mat-icon-button>\n\n          </button>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" class=\"node-checkbox\"\n            [matTooltip]=\"'Map data field: ' + node.key\">\n            <span class=\"node-key\" [attr.aria-label]=\"'Field name: ' + node.key\">{{ node.key }}:</span>\n            <span [attr.aria-label]=\"'Field value: ' + node.value\" style=\"    white-space: nowrap;\" class=\"node-value\"\n              [style.color]=\"getNodeValueColor(node.value)\">\n              {{ node.value }}\n            </span>\n          </mat-checkbox>\n        </mat-tree-node>\n\n        <mat-tree-node *matTreeNodeDef=\"let node; when: treeClass.hasChild\" matTreeNodePadding>\n          <button style=\"padding: 0px;    \n      width: 24px;\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.key\">\n            <mat-icon>\n              {{ treeClass.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" [matTooltip]=\"'Select ' + node.key\">\n            <span class=\"node-key\">{{ node.key }}</span>\n          </mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n  </mat-expansion-panel>\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">rebase_edit</mat-icon>\n        <span style=\"font-size: 0.75em;line-height:normal\">\n          Configure and transform your data path\n        </span>\n\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <div class=\"tree-instructions\" *ngIf=\"treeClass.activePath.length === 0\">\n        <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n        <span>Select a node from the tree above to begin mapping data</span>\n      </div>\n      <mat-divider></mat-divider>\n      <mat-toolbar style=\"    height: fit-content; background: inherit;\">\n        <div class=\"breadcrumb-container\">\n\n          <ng-container *ngFor=\"let path of treeClass.activePath; trackBy: trackByFn; last as isLast; index as i\">\n            <button *ngIf=\"!path.inEdit\" matTooltip=\"Click to edit\" (click)=\"setupPath(path)\" mat-button\n              [disabled]=\"!path.keyIsArrayIndex\" [color]=\"path.functions.length> 0 ? 'accent' : ''\"\n              class=\"breadcrumb-item\">\n              <mat-icon>{{ path.keyIsArrayIndex ? 'filter_none' : 'folder' }}</mat-icon>\n              <span>{{ path.key }}</span>\n            </button>\n\n\n            <button *ngIf=\"!!path.inEdit\" matTooltip=\"Currently editing\" (click)=\"removeFunction(path.key)\"\n              mat-raised-button color=\"primary\" class=\"breadcrumb-item\">\n              <mat-icon>check_circle</mat-icon>\n              <span>{{ path.key }}</span>\n            </button>\n            <mat-icon *ngIf=\"!isLast\" class=\"breadcrumb-separator\">chevron_right</mat-icon>\n          </ng-container>\n        </div>\n      </mat-toolbar>\n      <div *ngIf=\"!!hasANodeInEdit()\">\n\n        <mat-nav-list>\n\n          <ng-container *ngFor=\"let function of this.treeClass.pathInEdit?.functions;index as i\">\n            <mat-list-item [activated]=\"!!function.inEdit\" class=\"functions\" style=\"height: fit-content;\">\n              <span matListItemIcon class=\"function-number\">\n                <strong> {{i+1}} </strong>\n              </span>\n              <a (click)=\"editFunction(function.id)\"\n                style=\"font-size: 0.875em; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\" matListItemTitle>\n                {{ (function.function |titlecase) ||\n                'Function configurations required'}}</a>\n              <button mat-icon-button (click)=\"removeFunction(function.id)\" matListItemMeta>\n\n                <mat-icon [color]=\"function.function && function.expression?'':'warn'\">{{!function.inEdit?\n                  'close':'check_circle'}}</mat-icon>\n              </button>\n\n\n            </mat-list-item>\n\n            <div class=\"function-edit-container\" *ngIf=\"function.inEdit\">\n              <mat-divider></mat-divider>\n              <mat-form-field subscriptSizing=\"dynamic\" style=\"  margin-bottom: 8px;\" appearance=\"outline\"\n                *ngIf=\"this.treeClass.pathInEdit?.functions\">\n                <mat-label>Array function</mat-label>\n                <mat-select matNativeControl [value]=\"getFunctionInEdit()?.function\"\n                  (selectionChange)=\"functionChanged($event)\" placeholder=\"ChooseFunctionToRun\">\n                  <mat-option value=\"filter\">filter</mat-option>\n                  <mat-option value=\"find\">find</mat-option>\n                  <mat-option value=\"map\">map</mat-option>\n                </mat-select>\n                <mat-hint>\n                  Choose a function to run on the array\n                </mat-hint>\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" *ngIf=\"this.treeClass.pathInEdit?.functions\">\n                <mat-label>Condition expression</mat-label>\n                <textarea matInput #textarea [value]=\"getFunctionInEdit()?.expression\" (input)=\"onTextChange($event)\"\n                  (focus)=\"onFocus($event)\" placeholder=\"Enter a validation string for the function\"></textarea>\n                <mat-hint>\n                  {{ showSuggestions ? 'Suggestions are enabled' : 'Enter a condition expression to transform the array'\n                  }}\n                </mat-hint>\n              </mat-form-field>\n              <section *ngIf=\"showSuggestions\" class=\"showSuggestionContainer\">\n                <!-- <mat-toolbar class=\"search-container\"  style=\"background: inherit;\">\n                \n           \n                  <input type=\"search\" \n                  placeholder=\"Search api\" \n                  class=\"search-field\"\n                  (change)=\"onSearchChange($event)\"> \n  \n                  <mat-icon>\n                    search\n                  </mat-icon>\n                </mat-toolbar> -->\n                <mat-divider></mat-divider>\n                <div style=\"padding: 8px;\" class=\"\">\n                  <div class=\"suggestion-container\">\n                    <div class=\"suggestion-column\">\n                      <h5>Logical Operators</h5>\n                      <div class=\"button-container\">\n                        <button color=\"primary\" mat-flat-button *ngFor=\"let method of getMethods()\"\n                          (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\n                          {{ method.label | titlecase }}\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"suggestion-column\">\n                      <h5>Add Input as a Variable</h5>\n                      <div class=\"button-container\">\n                        <button *ngFor=\"let input of getAllInputs()\" mat-flat-button\n                          (click)=\"selectSuggestionInput(input.formControlName)\" class=\"suggestion-button\">\n                          {{ input.label | titlecase }}\n                        </button>\n                      </div>\n                    </div>\n                    <!-- <div class=\"suggestion-column\">\n                      <h5>Array path Object </h5>\n                      <div class=\"button-container\">\n                        <button *ngFor=\"let input of getValueVariables()\"\n                        color=\"accent\"\n                        mat-flat-button\n                          (click)=\"selectSuggestionInput(input)\" class=\"suggestion-button\">\n                          {{ input}}\n                        </button>\n                      </div>\n                    </div> -->\n                  </div>\n                  <div class=\"suggestion-container\">\n\n                  </div>\n\n                </div>\n              </section>\n\n\n              <mat-toolbar style=\"background:none\">\n                <span class=\"spacer\"></span>\n\n                <button (click)=\"reset()\" mat-flat-button>\n                  reset\n                </button>\n                <button (click)=\"saveNodeInEdit()\" [disabled]=\"!function.expression && !function.function\"\n                  mat-flat-button color=\"primary\">\n                  save\n                </button>\n\n              </mat-toolbar>\n            </div>\n            <mat-divider></mat-divider>\n          </ng-container>\n\n        </mat-nav-list>\n        <ol>\n\n        </ol>\n        <button (click)=\"addNewFunction()\" mat-button>+ Add function </button>\n      </div>\n    </div>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">dataset</mat-icon>\n        <span style=\"font-size: 0.75em;line-height:normal\">\n          Mapped Data Value Based on the Active Path\n        </span>\n\n      </mat-panel-title>\n\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <mat-divider></mat-divider>\n\n      <div style=\"padding: 16px;background: black;\n      color: cadetblue; border-radius:8px;min-width:fit-content\">\n        <pre>{{getValue|json}}</pre>\n      </div>\n    </div>\n  </mat-expansion-panel>\n\n\n</mat-accordion>", styles: ["mat-tree{min-width:fit-content;background:azure}mat-tree-node{min-height:28px!important;height:32px!important}.breadcrumb-container{display:flex;align-items:center;flex-wrap:wrap;padding:8px 0}.breadcrumb-item{display:inline-flex;align-items:center;margin:0;transition:background-color .3s ease}.breadcrumb-separator{margin:0}.breadcrumb-separator .mat-icon{font-size:1em;width:16px;height:16px}.info-icon{min-width:38px}mat-expansion-panel-header{padding-left:16px;padding-right:16px}mat-expansion-panel{background:var(--mat-sys-surface-container, var(--mat-app-surface))}.tree-instructions{display:flex;align-items:center;gap:8px;font-size:.75em;line-height:normal;padding:12px;background:var(--mat-sys-tertiary-container);border-radius:4px;margin-bottom:16px}.node-spacer{width:24px;padding:0}.node-checkbox{width:100%}.node-key{font-weight:500;color:#2c2c2c}.node-value{font-family:monospace;padding:2px 6px;background:#f8f9fa;border-radius:3px;font-size:.9em}.suggestion-container{display:flex;width:100%;gap:14px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-transform:capitalize;margin:2px;padding:8px;line-height:normal;text-align:left;font-size:.8em}h5{margin-bottom:8px;font-size:1em}.title-icon{margin-right:8px;vertical-align:middle;width:38px}mat-form-field{width:100%;background:azure}.functions{color:var(--mat-full-pseudo-checkbox-selected-icon-color)}.function-number{font-size:smaller;display:flex;align-items:center;justify-content:center;margin-right:8px;margin-left:8px}.search-field{width:100%;padding:8px;border:1px solid var(--mat-divider-color, var(--mat-app-outline));border-radius:4px;margin-left:0}.search-container{padding-left:8px;padding-right:8px;height:48px;background:inherit;margin-top:0;height:fit-content}.showSuggestionContainer{background:azure}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.JsonPipe, name: "json" }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i6.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2$5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i12.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i12.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i12.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i12.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i12.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i3$1.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: FormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DataTreeComponent, isStandalone: true, selector: "app-data-tree", inputs: { data: "data", value: "value", formInputs: "formInputs" }, outputs: { pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-accordion multi>\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">dataset_linked</mat-icon>\n        <span style=\"font-size: 0.75em;line-height:normal\">\n          Navigate and select data fields for mapping\n        </span>\n\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <div class=\"tree-instructions\">\n        <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n        <span>Click checkboxes to select fields for mapping. Selected paths will be highlighted.</span>\n      </div>\n      <mat-divider></mat-divider>\n\n      <mat-tree [dataSource]=\"treeClass.dataSource\" [treeControl]=\"treeClass.treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\n          <button disabled class=\"node-spacer\" aria-hidden=\"true\" mat-icon-button>\n\n          </button>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" class=\"node-checkbox\"\n            [matTooltip]=\"'Map data field: ' + node.key\">\n            <span class=\"node-key\" [attr.aria-label]=\"'Field name: ' + node.key\">{{ node.key }}:</span>\n            <span [attr.aria-label]=\"'Field value: ' + node.value\" style=\"    white-space: nowrap;\" class=\"node-value\"\n              [style.color]=\"getNodeValueColor(node.value)\">\n              {{ node.value }}\n            </span>\n          </mat-checkbox>\n        </mat-tree-node>\n\n        <mat-tree-node *matTreeNodeDef=\"let node; when: treeClass.hasChild\" matTreeNodePadding>\n          <button style=\"padding: 0px;    \n      width: 24px;\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.key\">\n            <mat-icon>\n              {{ treeClass.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" [matTooltip]=\"'Select ' + node.key\">\n            <span class=\"node-key\">{{ node.key }}</span>\n          </mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n  </mat-expansion-panel>\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">rebase_edit</mat-icon>\n        <span style=\"font-size: 0.75em;line-height:normal\">\n          Configure and transform your data path\n        </span>\n\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <div class=\"tree-instructions\" *ngIf=\"treeClass.activePath.length === 0\">\n        <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n        <span>Select a node from the tree above to begin mapping data</span>\n      </div>\n      <mat-divider></mat-divider>\n      <mat-toolbar style=\"    height: fit-content; background: inherit;\">\n        <div class=\"breadcrumb-container\">\n\n          <ng-container *ngFor=\"let path of treeClass.activePath; trackBy: trackByFn; last as isLast; index as i\">\n            <button *ngIf=\"!path.inEdit\" matTooltip=\"Click to edit\" (click)=\"setupPath(path)\" mat-button\n              [disabled]=\"!path.keyIsArrayIndex\" [color]=\"path.functions.length> 0 ? 'accent' : ''\"\n              class=\"breadcrumb-item\">\n              <mat-icon>{{ path.keyIsArrayIndex ? 'filter_none' : 'folder' }}</mat-icon>\n              <span>{{ path.key }}</span>\n            </button>\n\n\n            <button *ngIf=\"!!path.inEdit\" matTooltip=\"Currently editing\" (click)=\"removeFunction(path.key)\"\n              mat-raised-button color=\"primary\" class=\"breadcrumb-item\">\n              <mat-icon>check_circle</mat-icon>\n              <span>{{ path.key }}</span>\n            </button>\n            <mat-icon *ngIf=\"!isLast\" class=\"breadcrumb-separator\">chevron_right</mat-icon>\n          </ng-container>\n        </div>\n      </mat-toolbar>\n      <div *ngIf=\"!!hasANodeInEdit()\">\n\n        <mat-nav-list>\n\n          <ng-container *ngFor=\"let function of this.treeClass.pathInEdit?.functions;index as i\">\n            <mat-list-item [activated]=\"!!function.inEdit\" class=\"functions\" style=\"height: fit-content;\">\n              <span matListItemIcon class=\"function-number\">\n                <strong> {{i+1}} </strong>\n              </span>\n              <a (click)=\"editFunction(function.id)\"\n                style=\"font-size: 0.875em; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\" matListItemTitle>\n                {{ (function.function |titlecase) ||\n                'Function configurations required'}}</a>\n              <button mat-icon-button (click)=\"removeFunction(function.id)\" matListItemMeta>\n\n                <mat-icon [color]=\"function.function && function.expression?'':'warn'\">{{!function.inEdit?\n                  'close':'check_circle'}}</mat-icon>\n              </button>\n\n\n            </mat-list-item>\n\n            <div class=\"function-edit-container\" *ngIf=\"function.inEdit\">\n              <mat-divider></mat-divider>\n              <mat-form-field subscriptSizing=\"dynamic\" style=\"  margin-bottom: 8px;\" appearance=\"outline\"\n                *ngIf=\"this.treeClass.pathInEdit?.functions\">\n                <mat-label>Array function</mat-label>\n                <mat-select matNativeControl [value]=\"getFunctionInEdit()?.function\"\n                  (selectionChange)=\"functionChanged($event)\" placeholder=\"ChooseFunctionToRun\">\n                  <mat-option value=\"filter\">filter</mat-option>\n                  <mat-option value=\"find\">find</mat-option>\n                  <mat-option value=\"map\">map</mat-option>\n                </mat-select>\n                <mat-hint>\n                  Choose a function to run on the array\n                </mat-hint>\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" *ngIf=\"this.treeClass.pathInEdit?.functions\">\n                <mat-label>Condition expression</mat-label>\n                <textarea matInput #textarea [value]=\"getFunctionInEdit()?.expression\" (input)=\"onTextChange($event)\"\n                  (focus)=\"onFocus($event)\" placeholder=\"Enter a validation string for the function\"></textarea>\n                <mat-hint>\n                  {{ showSuggestions ? 'Suggestions are enabled' : 'Enter a condition expression to transform the array'\n                  }}\n                </mat-hint>\n              </mat-form-field>\n              <section *ngIf=\"showSuggestions\" class=\"showSuggestionContainer\">\n                <!-- <mat-toolbar class=\"search-container\"  style=\"background: inherit;\">\n                \n           \n                  <input type=\"search\" \n                  placeholder=\"Search api\" \n                  class=\"search-field\"\n                  (change)=\"onSearchChange($event)\"> \n  \n                  <mat-icon>\n                    search\n                  </mat-icon>\n                </mat-toolbar> -->\n                <mat-divider></mat-divider>\n                <div style=\"padding: 8px;\" class=\"\">\n                  <div class=\"suggestion-container\">\n                    <div class=\"suggestion-column\">\n                      <h5>Logical Operators</h5>\n                      <div class=\"button-container\">\n                        <button color=\"primary\" mat-flat-button *ngFor=\"let method of getMethods()\"\n                          (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\n                          {{ method.label | titlecase }}\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"suggestion-column\">\n                      <h5>Add Input as a Variable</h5>\n                      <div class=\"button-container\">\n                        <button *ngFor=\"let input of getAllInputs()\" mat-flat-button\n                          (click)=\"selectSuggestionInput(input.formControlName)\" class=\"suggestion-button\">\n                          {{ input.label | titlecase }}\n                        </button>\n                      </div>\n                    </div>\n                    <!-- <div class=\"suggestion-column\">\n                      <h5>Array path Object </h5>\n                      <div class=\"button-container\">\n                        <button *ngFor=\"let input of getValueVariables()\"\n                        color=\"accent\"\n                        mat-flat-button\n                          (click)=\"selectSuggestionInput(input)\" class=\"suggestion-button\">\n                          {{ input}}\n                        </button>\n                      </div>\n                    </div> -->\n                  </div>\n                  <div class=\"suggestion-container\">\n\n                  </div>\n\n                </div>\n              </section>\n\n\n              <mat-toolbar style=\"background:none\">\n                <span class=\"spacer\"></span>\n\n                <button (click)=\"reset()\" mat-flat-button>\n                  reset\n                </button>\n                <button (click)=\"saveNodeInEdit()\" [disabled]=\"!function.expression && !function.function\"\n                  mat-flat-button color=\"primary\">\n                  save\n                </button>\n\n              </mat-toolbar>\n            </div>\n            <mat-divider></mat-divider>\n          </ng-container>\n\n        </mat-nav-list>\n        <ol>\n\n        </ol>\n        <button (click)=\"addNewFunction()\" mat-button>+ Add function </button>\n      </div>\n    </div>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">dataset</mat-icon>\n        <span style=\"font-size: 0.75em;line-height:normal\">\n          Mapped Data Value Based on the Active Path\n        </span>\n\n      </mat-panel-title>\n\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <mat-divider></mat-divider>\n\n      <div style=\"padding: 16px;background: black;\n      color: cadetblue; border-radius:8px;min-width:fit-content\">\n        <pre>{{getValue|json}}</pre>\n      </div>\n    </div>\n  </mat-expansion-panel>\n\n\n</mat-accordion>", styles: ["mat-tree{min-width:fit-content;background:azure}mat-tree-node{min-height:28px!important;height:32px!important}.breadcrumb-container{display:flex;align-items:center;flex-wrap:wrap;padding:8px 0}.breadcrumb-item{display:inline-flex;align-items:center;margin:0;transition:background-color .3s ease}.breadcrumb-separator{margin:0}.breadcrumb-separator .mat-icon{font-size:1em;width:16px;height:16px}.info-icon{min-width:38px}mat-expansion-panel-header{padding-left:16px;padding-right:16px}mat-expansion-panel{background:var(--mat-sys-surface-container, var(--mat-app-surface))}.tree-instructions{display:flex;align-items:center;gap:8px;font-size:.75em;line-height:normal;padding:12px;background:var(--mat-sys-tertiary-container);border-radius:4px;margin-bottom:16px}.node-spacer{width:24px;padding:0}.node-checkbox{width:100%}.node-key{font-weight:500;color:#2c2c2c}.node-value{font-family:monospace;padding:2px 6px;background:#f8f9fa;border-radius:3px;font-size:.9em}.suggestion-container{display:flex;width:100%;gap:14px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-transform:capitalize;margin:2px;padding:8px;line-height:normal;text-align:left;font-size:.8em}h5{margin-bottom:8px;font-size:1em}.title-icon{margin-right:8px;vertical-align:middle;width:38px}mat-form-field{width:100%;background:azure}.functions{color:var(--mat-full-pseudo-checkbox-selected-icon-color)}.function-number{font-size:smaller;display:flex;align-items:center;justify-content:center;margin-right:8px;margin-left:8px}.search-field{width:100%;padding:8px;border:1px solid var(--mat-divider-color, var(--mat-app-outline));border-radius:4px;margin-left:0}.search-container{padding-left:8px;padding-right:8px;height:48px;background:inherit;margin-top:0;height:fit-content}.showSuggestionContainer{background:azure}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.JsonPipe, name: "json" }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i7.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i7.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i7.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2$5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i12.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i12.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i12.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i12.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i12.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i13.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: FormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DataTreeComponent, decorators: [{
             type: Component,
@@ -7734,7 +7788,7 @@ class ValidationExpressioCreatorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ValidationExpressioCreatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ValidationExpressioCreatorComponent, isStandalone: true, selector: "lib-validation-expressio-creator", inputs: { hint: "hint", label: "label", formInputs: "formInputs", data: "data", expression: "expression", valueAccessRules: "valueAccessRules" }, outputs: { expressionChange: "expressionChange" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;\" floatLabel=\"always\"\r\n    id=\"validationExpressionCreator\">\r\n    <mat-label>Condition expression</mat-label>\r\n    <textarea [formControl]=\"expressionControl\" matInput #textarea (focus)=\"onFocus($event)\"\r\n        placeholder=\"Enter a validation string for the function\"></textarea>\r\n\r\n\r\n    <mat-hint\r\n        [style.color]=\"expressionControl.invalid && !showSuggestions? 'var(--mat-form-field-error-text-color, var(--mat-sys-error))':''\">\r\n        @if (expressionControl.invalid && errorMessage !== null && !showSuggestions) {\r\n        {{errorMessage}}\r\n        }@else {\r\n        {{ showSuggestions ? 'Click a suggestion to apply it' : 'Enter a filter condition. Type $ for options' }}\r\n        @if (showSuggestions) {\r\n        <section class=\"showSuggestionContainer\">\r\n            <mat-divider></mat-divider>\r\n            <div style=\"padding: 0px;margin-top:8px\" class=\"\">\r\n                <div class=\"suggestion-container\">\r\n                    <div class=\"suggestion-column\">\r\n                        <div class=\"suggestion-heading\">\r\n                            Logical Operators\r\n                        </div>\r\n                        <div class=\"button-container\">\r\n                            <button matTooltipPosition=\"left\" [matTooltip]=\"method.hint\" color=\"primary\" mat-button\r\n                                *ngFor=\"let method of getMethods()|searchList:optionsSearch\"\r\n                                (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\r\n                                {{ method.label | titlecase }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"suggestion-column\">\r\n                        <div class=\"suggestion-heading\">\r\n                            Add Input as a Variable\r\n                        </div>\r\n                        <div class=\"button-container\">\r\n                            <button *ngFor=\"let input of getAllInputs|searchList:optionsSearch\" mat-button\r\n                                matTooltipPosition=\"right\" [matTooltip]=\"'Add Variable - '+ input.label  \"\r\n                                (click)=\"selectSuggestionInput(input.formControlName)\" class=\"suggestion-button\">\r\n                                {{ input.label | titlecase }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"suggestion-column\">\r\n                      <h5>Array path Object </h5>\r\n                      <div class=\"button-container\">\r\n                        <button *ngFor=\"let input of getValueVariables()\"\r\n                        color=\"accent\"\r\n                        mat-flat-button\r\n                          (click)=\"selectSuggestionInput(input)\" class=\"suggestion-button\">\r\n                          {{ input}}\r\n                        </button>\r\n                      </div>\r\n                    </div> -->\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </section>\r\n\r\n\r\n        }\r\n        }\r\n\r\n\r\n    </mat-hint>\r\n\r\n\r\n</mat-form-field>\r\n\r\n@if(valueAccessOptions.length>0){\r\n\r\n\r\n<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;margin-top:12px\" floatLabel=\"always\"\r\n    id=\"Value access options\">\r\n    <mat-label>\r\n        Form Fields for expression\r\n    </mat-label>\r\n    <mat-chip-grid #chipGrid aria-label=\"value access options\">\r\n        @for (variable of valueAccessOptions; track variable) {\r\n        <mat-chip-option  \r\n        [selected]=\"variableInEdit === variable\"\r\n        \r\n        (click)=\"variableInEdit === variable ? variableInEdit = null : variableInEdit = variable\"\r\n            [aria-description]=\"'press enter to edit ' + variable\">\r\n            {{variable}}\r\n\r\n        </mat-chip-option >\r\n\r\n        }\r\n        <input placeholder=\"\" style=\"display: none;\" [matChipInputFor]=\"chipGrid\" />\r\n    </mat-chip-grid>\r\n    @if(variableInEdit !== null ){\r\n            <app-api-value-access-rules \r\n             [value]=\"valueAccessRules[variableInEdit]||[]\"\r\n            [errors]=\"[]\" [formInputs]=\"formInputs ||[]\"\r\n             [mapToData]=\"data\"\r\n            (valueChanged)=\"activeVariableChanged($event)\">\r\n        </app-api-value-access-rules>\r\n       \r\n        \r\n\r\n\r\n    }\r\n    <mat-hint>\r\n        Click a field to define how to process its value. You can filter a list, count its items, or access specific\r\n        data within a complex object.\r\n    </mat-hint>\r\n</mat-form-field>}", styles: [".suggestion-container{display:flex;width:100%;gap:8px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-align:left;font-size:10.5px;border-radius:4px!important;margin-bottom:4px!important;line-height:normal!important;padding:4px;white-space:nowrap;overflow:hidden;display:inline-block;text-overflow:ellipsis}.suggestion-heading{margin-bottom:8px;font-size:1em;font-size:.6875em;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.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: 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: "pipe", type: SearchListPipe, name: "searchList" }, { kind: "component", type: ApiValueAccessRulesComponent, selector: "app-api-value-access-rules", inputs: ["disabled", "multipleBind", "errors", "value", "formInputs", "mapToData", "postmanCollectionConfig"], outputs: ["valueChanged", "reload"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ValidationExpressioCreatorComponent, isStandalone: true, selector: "lib-validation-expressio-creator", inputs: { hint: "hint", label: "label", formInputs: "formInputs", data: "data", expression: "expression", valueAccessRules: "valueAccessRules" }, outputs: { expressionChange: "expressionChange" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;\" floatLabel=\"always\"\r\n    id=\"validationExpressionCreator\">\r\n    <mat-label>Condition expression</mat-label>\r\n    <textarea [formControl]=\"expressionControl\" matInput #textarea (focus)=\"onFocus($event)\"\r\n        placeholder=\"Enter a validation string for the function\"></textarea>\r\n\r\n\r\n    <mat-hint\r\n        [style.color]=\"expressionControl.invalid && !showSuggestions? 'var(--mat-form-field-error-text-color, var(--mat-sys-error))':''\">\r\n        @if (expressionControl.invalid && errorMessage !== null && !showSuggestions) {\r\n        {{errorMessage}}\r\n        }@else {\r\n        {{ showSuggestions ? 'Click a suggestion to apply it' : 'Enter a filter condition. Type $ for options' }}\r\n        @if (showSuggestions) {\r\n        <section class=\"showSuggestionContainer\">\r\n            <mat-divider></mat-divider>\r\n            <div style=\"padding: 0px;margin-top:8px\" class=\"\">\r\n                <div class=\"suggestion-container\">\r\n                    <div class=\"suggestion-column\">\r\n                        <div class=\"suggestion-heading\">\r\n                            Logical Operators\r\n                        </div>\r\n                        <div class=\"button-container\">\r\n                            <button matTooltipPosition=\"left\" [matTooltip]=\"method.hint\" color=\"primary\" mat-button\r\n                                *ngFor=\"let method of getMethods()|searchList:optionsSearch\"\r\n                                (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\r\n                                {{ method.label | titlecase }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"suggestion-column\">\r\n                        <div class=\"suggestion-heading\">\r\n                            Add Input as a Variable\r\n                        </div>\r\n                        <div class=\"button-container\">\r\n                            <button *ngFor=\"let input of getAllInputs|searchList:optionsSearch\" mat-button\r\n                                matTooltipPosition=\"right\" [matTooltip]=\"'Add Variable - '+ input.label  \"\r\n                                (click)=\"selectSuggestionInput(input.formControlName)\" class=\"suggestion-button\">\r\n                                {{ input.label | titlecase }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <!-- <div class=\"suggestion-column\">\r\n                      <h5>Array path Object </h5>\r\n                      <div class=\"button-container\">\r\n                        <button *ngFor=\"let input of getValueVariables()\"\r\n                        color=\"accent\"\r\n                        mat-flat-button\r\n                          (click)=\"selectSuggestionInput(input)\" class=\"suggestion-button\">\r\n                          {{ input}}\r\n                        </button>\r\n                      </div>\r\n                    </div> -->\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </section>\r\n\r\n\r\n        }\r\n        }\r\n\r\n\r\n    </mat-hint>\r\n\r\n\r\n</mat-form-field>\r\n\r\n@if(valueAccessOptions.length>0){\r\n\r\n\r\n<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;margin-top:12px\" floatLabel=\"always\"\r\n    id=\"Value access options\">\r\n    <mat-label>\r\n        Form Fields for expression\r\n    </mat-label>\r\n    <mat-chip-grid #chipGrid aria-label=\"value access options\">\r\n        @for (variable of valueAccessOptions; track variable) {\r\n        <mat-chip-option  \r\n        [selected]=\"variableInEdit === variable\"\r\n        \r\n        (click)=\"variableInEdit === variable ? variableInEdit = null : variableInEdit = variable\"\r\n            [aria-description]=\"'press enter to edit ' + variable\">\r\n            {{variable}}\r\n\r\n        </mat-chip-option >\r\n\r\n        }\r\n        <input placeholder=\"\" style=\"display: none;\" [matChipInputFor]=\"chipGrid\" />\r\n    </mat-chip-grid>\r\n    @if(variableInEdit !== null ){\r\n            <app-api-value-access-rules \r\n             [value]=\"valueAccessRules[variableInEdit]||[]\"\r\n            [errors]=\"[]\" [formInputs]=\"formInputs ||[]\"\r\n             [mapToData]=\"data\"\r\n            (valueChanged)=\"activeVariableChanged($event)\">\r\n        </app-api-value-access-rules>\r\n       \r\n        \r\n\r\n\r\n    }\r\n    <mat-hint>\r\n        Click a field to define how to process its value. You can filter a list, count its items, or access specific\r\n        data within a complex object.\r\n    </mat-hint>\r\n</mat-form-field>}", styles: [".suggestion-container{display:flex;width:100%;gap:8px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-align:left;font-size:10.5px;border-radius:4px!important;margin-bottom:4px!important;line-height:normal!important;padding:4px;white-space:nowrap;overflow:hidden;display:inline-block;text-overflow:ellipsis}.suggestion-heading{margin-bottom:8px;font-size:1em;font-size:.6875em;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i13.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: 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: "pipe", type: SearchListPipe, name: "searchList" }, { kind: "component", type: ApiValueAccessRulesComponent, selector: "app-api-value-access-rules", inputs: ["disabled", "multipleBind", "errors", "value", "formInputs", "mapToData", "postmanCollectionConfig"], outputs: ["valueChanged", "reload"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ValidationExpressioCreatorComponent, decorators: [{
             type: Component,
@@ -8017,9 +8071,9 @@ class TDynamicDataEditComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TDynamicDataEditComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: "editorConfig", formInputs: "formInputs", data: "data", validationErrors: "validationErrors" }, outputs: { valueChange: "valueChange", blur: "blur" }, ngImport: i0, template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\r\n        @switch ((vm. editorConfigValue)?.editType) {\r\n        @default {\r\n            <lib-input-custom \r\n             [id]=\"((vm.editorConfigValue)?.id)\"\r\n             [inputConfig]=\"vm.inputConfig\"\r\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\r\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\r\n            [disabled]=\"!!(vm.disabled)\"\r\n             [ngModel]=\"(vm.value)\"\r\n             (blur)=\"elementBlur($event)\"\r\n            (input)=\"inputChange($event)\" ></lib-input-custom>\r\n     \r\n\r\n        }\r\n        @case ( elementEditorTypes.Toggle) {\r\n        <lib-mat-slider-toggle-editor\r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\r\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n        </lib-mat-slider-toggle-editor>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.Range) {\r\n\r\n\r\n        <lib-mat-slider-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\r\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\"\r\n            tickInterval=\"(  vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n        </lib-mat-slider-editor>\r\n\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.ChipSelect) {\r\n        <lib-mat-chip-list-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [disabled]=\"(vm.disabled)||false\"\r\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.OptionSelect) {\r\n\r\n        <mat-select \r\n        \r\n        [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n            [disabled]=\"(vm.disabled)||false\">\r\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n            }\r\n        </mat-select>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.RichTextEditor) {\r\n        <lib-editor-js-input \r\n        \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [value]=\"(vm.value)\" (valueChanged)=\"valueChanged($event)\"\r\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"data\">\r\n        </lib-editor-js-input>\r\n        }\r\n\r\n\r\n        @case (elementEditorTypes.SelectionOptions) {\r\n\r\n        <app-selection-options-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.ApiCall) {\r\n\r\n        <lib-rest-api-call-setup \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n        </lib-rest-api-call-setup>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n        <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n        }\r\n        @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n        <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" \r\n            [formInputs]=\"formInputs ||[]\"\r\n            \r\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-api-value-access-rules>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.FormInputSelector)\r\n        {\r\n\r\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n            [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n        </lib-form-input-selector>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.RequiredInputs\r\n        ){\r\n\r\n        <app-required-inputs  [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n        </app-required-inputs>\r\n        }\r\n\r\n        @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n        <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n        }\r\n\r\n        @case(elementEditorTypes.Validators){\r\n\r\n        <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n            [mapToData]=\"vm.dataOptions\">\r\n        </app-validators-config>\r\n\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n        <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\r\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n        <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-config-mscoa-additional-inputs>\r\n\r\n        }\r\n        @case (elementEditorTypes.ChipOptionsCreator) {\r\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-chip-options-creator-editor>\r\n\r\n        }\r\n        @case (elementEditorTypes.DataSourcePicker) {\r\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n        </lib-data-source-picker>\r\n        }\r\n        @case (elementEditorTypes.ListLabelConfigEditor) {\r\n        <lib-document-list-label-config-editor  \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n         [formInputs]=\"formInputs ||[]\"\r\n         [disabled]=\"(vm.disabled)||false\" \r\n         [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" \r\n            [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-document-list-label-config-editor>\r\n        }\r\n        @case(\r\n        elementEditorTypes.WorkflowPicker\r\n        ){\r\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n        }\r\n        @case (\r\n        elementEditorTypes.RecordListManager\r\n        ) {\r\n        <lib-record-list-manager \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\r\n            [formInputs]=\"formInputs ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\r\n            \r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"></lib-record-list-manager>\r\n        }\r\n        }\r\n\r\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n            mat-icon-button>\r\n            <mat-icon>{{\r\n                blurOff?'blur_off':'blur_on'\r\n                }}\r\n\r\n\r\n            </mat-icon>\r\n        </button>\r\n    </mat-form-field>\r\n\r\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\r\n    <mat-error>\r\n        {{ (vm. editorConfigValue)?.label }}'s  is required\r\n    </mat-error>}\r\n\r\n    <mat-error style=\"    font-size: 0.75em;\r\n        margin-left: 14px;\r\n    \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n        {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n    <mat-card-content>\r\n\r\n        <span>\r\n            Failed to load form inputs\r\n        </span>\r\n    </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:.75em;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:1em;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }], deferBlockDependencies: [() => [i2$3.NgForOf, i2$3.NgIf, i2$3.AsyncPipe, import('./ngx-t-forms-selection-options-editor.component-CqAxZnEp.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-D-nVF7t7.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CQeww1qM.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-pv5pqFhh.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CwCwl53b.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-DiNSTxsW.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-CL73KUxw.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-tHaWIt1o.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-WDd5lc_2.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-BIr1g5cG.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-DGac4Eja.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-BCoTHeK3.mjs').then(m => m.MatChipListEditorComponent), i2$4.MatOption, i2.MatIconButton, i2$2.MatIcon, i2$5.MatFormField, i2$5.MatLabel, i2$5.MatError, i2$5.MatSuffix, i2$5.MatSelect, i8.MatTooltip, import('./ngx-t-forms-chip-options-creator-editor.component-3FkGwVWB.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-CxG1tQfC.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CsqYlgS6.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-Cz6YZMia.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-BYyr0yzb.mjs').then(m => m.RecordListManagerComponent), Promise.resolve().then(function () { return inputCustom_component; }).then(m => m.InputCustomComponent), i1$2.NgControlStatus, i1$2.RequiredValidator, i1$2.NgModel]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: "editorConfig", formInputs: "formInputs", data: "data", validationErrors: "validationErrors" }, outputs: { valueChange: "valueChange", blur: "blur" }, ngImport: i0, template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\r\n        @switch ((vm. editorConfigValue)?.editType) {\r\n        @default {\r\n            <lib-input-custom \r\n             [id]=\"((vm.editorConfigValue)?.id)\"\r\n             [inputConfig]=\"vm.inputConfig\"\r\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\r\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\r\n            [disabled]=\"!!(vm.disabled)\"\r\n             [ngModel]=\"(vm.value)\"\r\n             (blur)=\"elementBlur($event)\"\r\n            (input)=\"inputChange($event)\" ></lib-input-custom>\r\n     \r\n\r\n        }\r\n        @case ( elementEditorTypes.Toggle) {\r\n        <lib-mat-slider-toggle-editor\r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\r\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n        </lib-mat-slider-toggle-editor>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.Range) {\r\n\r\n\r\n        <lib-mat-slider-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\r\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\"\r\n            tickInterval=\"(  vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n        </lib-mat-slider-editor>\r\n\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.ChipSelect) {\r\n        <lib-mat-chip-list-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [disabled]=\"(vm.disabled)||false\"\r\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.OptionSelect) {\r\n\r\n        <mat-select \r\n        \r\n        [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n            [disabled]=\"(vm.disabled)||false\">\r\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n            }\r\n        </mat-select>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.RichTextEditor) {\r\n        <lib-editor-js-input \r\n        \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [value]=\"(vm.value)\" (valueChanged)=\"valueChanged($event)\"\r\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"data\">\r\n        </lib-editor-js-input>\r\n        }\r\n\r\n\r\n        @case (elementEditorTypes.SelectionOptions) {\r\n\r\n        <app-selection-options-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.ApiCall) {\r\n\r\n        <lib-rest-api-call-setup \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n        </lib-rest-api-call-setup>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n        <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n        }\r\n        @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n        <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" \r\n            [formInputs]=\"formInputs ||[]\"\r\n            \r\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-api-value-access-rules>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.FormInputSelector)\r\n        {\r\n\r\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n            [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n        </lib-form-input-selector>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.RequiredInputs\r\n        ){\r\n\r\n        <app-required-inputs  [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n        </app-required-inputs>\r\n        }\r\n\r\n        @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n        <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n        }\r\n\r\n        @case(elementEditorTypes.Validators){\r\n\r\n        <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n            [mapToData]=\"vm.dataOptions\">\r\n        </app-validators-config>\r\n\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n        <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\r\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n        <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-config-mscoa-additional-inputs>\r\n\r\n        }\r\n        @case (elementEditorTypes.ChipOptionsCreator) {\r\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-chip-options-creator-editor>\r\n\r\n        }\r\n        @case (elementEditorTypes.DataSourcePicker) {\r\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n        </lib-data-source-picker>\r\n        }\r\n        @case (elementEditorTypes.ListLabelConfigEditor) {\r\n        <lib-document-list-label-config-editor  \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n         [formInputs]=\"formInputs ||[]\"\r\n         [disabled]=\"(vm.disabled)||false\" \r\n         [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" \r\n            [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-document-list-label-config-editor>\r\n        }\r\n        @case(\r\n        elementEditorTypes.WorkflowPicker\r\n        ){\r\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n        }\r\n        @case (\r\n        elementEditorTypes.RecordListManager\r\n        ) {\r\n        <lib-record-list-manager \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\r\n            [formInputs]=\"formInputs ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\r\n            \r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"></lib-record-list-manager>\r\n        }\r\n        }\r\n\r\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n            mat-icon-button>\r\n            <mat-icon>{{\r\n                blurOff?'blur_off':'blur_on'\r\n                }}\r\n\r\n\r\n            </mat-icon>\r\n        </button>\r\n    </mat-form-field>\r\n\r\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\r\n    <mat-error>\r\n        {{ (vm. editorConfigValue)?.label }}'s  is required\r\n    </mat-error>}\r\n\r\n    <mat-error style=\"    font-size: 0.75em;\r\n        margin-left: 14px;\r\n    \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n        {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n    <mat-card-content>\r\n\r\n        <span>\r\n            Failed to load form inputs\r\n        </span>\r\n    </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:.75em;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:1em;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }], deferBlockDependencies: [() => [i2$3.NgForOf, i2$3.NgIf, i2$3.AsyncPipe, import('./ngx-t-forms-selection-options-editor.component-Cc_qCtW2.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-C38FXT55.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CtfudSGT.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BoqmVDp2.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-QE-I58e4.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-Cs_Lhz_D.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-D6JG1p81.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-DJ9d3Oy9.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-yMRCg8fo.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-BXPghOuH.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-0aUVP9A6.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-dIY3BX1u.mjs').then(m => m.MatChipListEditorComponent), i2$6.MatOption, i2.MatIconButton, i2$2.MatIcon, i2$5.MatFormField, i2$5.MatLabel, i2$5.MatError, i2$5.MatSuffix, i2$5.MatSelect, i8.MatTooltip, import('./ngx-t-forms-chip-options-creator-editor.component-DkTpG5yQ.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-CFQ_GVPG.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CPF_BLRA.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-xvX8t0pu.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-D4wlLtdc.mjs').then(m => m.RecordListManagerComponent), Promise.resolve().then(function () { return inputCustom_component; }).then(m => m.InputCustomComponent), i1$2.NgControlStatus, i1$2.RequiredValidator, i1$2.NgModel]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-CqAxZnEp.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-D-nVF7t7.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CQeww1qM.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-pv5pqFhh.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CwCwl53b.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-DiNSTxsW.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-CL73KUxw.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-tHaWIt1o.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-WDd5lc_2.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-BIr1g5cG.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-DGac4Eja.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-BCoTHeK3.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-3FkGwVWB.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-CxG1tQfC.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CsqYlgS6.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-Cz6YZMia.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-BYyr0yzb.mjs').then(m => m.RecordListManagerComponent), Promise.resolve().then(function () { return inputCustom_component; }).then(m => m.InputCustomComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent, TWorkflowPickerComponent, EditorJsInputComponent, RecordListManagerComponent, InputCustomComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-Cc_qCtW2.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-C38FXT55.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CtfudSGT.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BoqmVDp2.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-QE-I58e4.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-Cs_Lhz_D.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-D6JG1p81.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-DJ9d3Oy9.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-yMRCg8fo.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-BXPghOuH.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-0aUVP9A6.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-dIY3BX1u.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-DkTpG5yQ.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-CFQ_GVPG.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CPF_BLRA.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-xvX8t0pu.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-D4wlLtdc.mjs').then(m => m.RecordListManagerComponent), Promise.resolve().then(function () { return inputCustom_component; }).then(m => m.InputCustomComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent, TWorkflowPickerComponent, EditorJsInputComponent, RecordListManagerComponent, InputCustomComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'lib-t-dynamic-data-edit', standalone: true, imports: [CommonModule,
                             SelectionOptionsEditorComponent,
@@ -8485,7 +8539,7 @@ class ScoaAccountTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ScoaAccountTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ScoaAccountTableComponent, isStandalone: true, selector: "app-scoa-account-table", inputs: { data: "data", selectedAccount: "selectedAccount", segment: "segment" }, outputs: { accountSelected: "accountSelected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n    <mat-toolbar class=\"search\" style=\"background:var(--mat-sys-surface-container) !important\">\r\n        <span style=\"font-size:14px\">\r\n            Select account from the options below:\r\n        </span>\r\n\r\n\r\n        <span class=\"spacer\"></span>\r\n\r\n        <mat-menu #menu=\"matMenu\">\r\n            <div style=\"                padding-left: 16px;\r\n    margin-top: 8px;\" mat-subheader>Account list headers</div>\r\n            <br>\r\n\r\n            <section style=\"padding-left: 16px; padding-right:16px\">\r\n                <button style=\"width: 100%;\" (click)=\"toogleDetails()\" class=\"cols\" color=\"primary\" mat-flat-button>\r\n                    {{showMinMal ? 'show all details' : 'Show less details'}}\r\n                </button>\r\n            </section>\r\n            <p style=\"\r\n            padding-left: 16px;\r\n            padding-right:16px;\r\n            \r\n            font-size:14px\">Only selected headers will be shown.</p>\r\n            @for (col of scoaAccountColumns; track $index) {\r\n            <button (click)=\"$event.stopPropagation()\" class=\"cols\" mat-menu-item>\r\n\r\n                <mat-checkbox [checked]=\"colIsChecked(col.key)\" (change)=\"colDisplayChanged($event,col.key)\"\r\n                    class=\"cols\">\r\n                    {{col.label}}</mat-checkbox>\r\n            </button>\r\n            }\r\n        </mat-menu>\r\n    </mat-toolbar>\r\n\r\n    @if (dataSource.filteredData.length === 0) {\r\n    <div class=\"no-results\">\r\n        No accounts match your search criteria.\r\n    </div>\r\n    }\r\n    <div class=\"table-wrapper\" [hidden]=\"dataSource.filteredData.length === 0\">\r\n        <div class=\"table-container\">\r\n            <table mat-table [dataSource]=\"dataSource||[]\" matSort>\r\n                <ng-container *ngFor=\"let column of scoaAccountColumns\" \r\n                [matColumnDef]=\"column.key\"\r\n                [stickyEnd]=\"column.system\">\r\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n                        @if(column.system){\r\n                            <button \r\n                                matTooltip=\"Show more or less columns\" \r\n                                mat-icon-button \r\n                                [matMenuTriggerFor]=\"menu\"\r\n                                [attr.aria-label]=\"'Column options'\">\r\n                                <mat-icon>view_column</mat-icon>\r\n                            </button>\r\n                        } @else {\r\n                            {{ column.label }}\r\n                        }\r\n                    </th>\r\n                    <td mat-cell *matCellDef=\"let element\">\r\n                        @if(column.system){\r\n                            <button \r\n                                mat-flat-button \r\n                                color=\"primary\"\r\n                                [attr.aria-label]=\"'Select account ' + (element.SCOAAccount || element.AccountNumber)\">\r\n                                Select\r\n                            </button>\r\n                        } @else {\r\n                            <span class=\"cell-content\">{{ element[column.key] }}</span>\r\n                        }\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n                <tr \r\n                    mat-row \r\n                    *matRowDef=\"let row; columns: displayColumns;\" \r\n                    class=\"account-row\" \r\n                    (click)=\"selectAccount(row)\"\r\n                    [class.deactivated-row]=\"rowIsActivated(row) === false\" \r\n                    [class.selected-row]=\"selectedAccount && selectedAccount.SCOAid === row.SCOAid\"\r\n                    [attr.aria-label]=\"'Account row: ' + (row.SCOAAccount || row.AccountNumber)\"\r\n                    [attr.aria-selected]=\"selectedAccount && selectedAccount.SCOAid === row.SCOAid\"\r\n                    role=\"row\">\r\n                </tr>\r\n            </table>\r\n        </div>\r\n        <mat-paginator [pageSizeOptions]=\"[5, 10, 20]\" [pageSize]=\"10\" showFirstLastButtons></mat-paginator>\r\n    </div>\r\n</div>", styles: [".search-container{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}.mat-form-field{flex-grow:1;margin-right:1rem}.table-wrapper{margin-top:var(--mscoa-spacing-xs, 4px);width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.table-wrapper::-webkit-scrollbar{height:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, #F5F5F5);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, #757575);border-radius:4px}.table-container{background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF));box-shadow:var(--mscoa-elevation-1, 0 1px 3px rgba(0, 0, 0, .12));border-radius:8px;overflow:visible;width:100%;min-width:0}mat-table{width:100%;min-width:480px;background:transparent}mat-header-row{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-bottom:2px solid var(--mscoa-divider, #E0E0E0)}mat-header-row th{font-weight:600;color:var(--mscoa-text-primary, #212121);font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);line-height:1.3}.account-row{cursor:pointer;transition:all .2s ease;border-bottom:1px solid var(--mscoa-divider, #E0E0E0)}.account-row:hover:not(.deactivated-row):not(.selected-row){background-color:var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD))!important;box-shadow:inset 4px 0 0 var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.account-row:active:not(.deactivated-row){background-color:var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD))!important}.account-row:focus-visible{outline:2px solid var(--mscoa-primary, #243D91);outline-offset:-2px}.account-row td{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);font-size:.8125rem;color:var(--mscoa-text-primary, #212121);border-bottom:none;vertical-align:middle;line-height:1.35}.account-row td .cell-content{display:block;word-break:break-word;line-height:1.35}.selected-row{background-color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))!important;color:var(--mat-sys-on-primary, white)!important;box-shadow:inset 4px 0 0 var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD)),var(--mscoa-elevation-2, 0 2px 6px rgba(0, 0, 0, .12))}.selected-row td{color:var(--mat-sys-on-primary, white)!important;font-weight:500}.selected-row td .cell-content{color:var(--mat-sys-on-primary, white)!important}.selected-row button{background-color:var(--mat-sys-on-primary, white)!important;color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))!important;font-weight:600}.selected-row button:hover{background-color:var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD))!important;transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2, 0 2px 6px rgba(0, 0, 0, .12))}.deactivated-row{opacity:.5;cursor:not-allowed!important;background-color:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important}.deactivated-row:hover{background-color:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important;transform:none!important}.deactivated-row td{color:var(--mscoa-text-secondary, #757575)!important}.no-results{text-align:center;padding:var(--mscoa-spacing-xl, 32px);color:var(--mscoa-text-secondary, #757575);background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:8px;margin:var(--mscoa-spacing-md, 16px)}.no-results mat-icon{font-size:3rem;height:3rem;width:3rem;margin-bottom:var(--mscoa-spacing-md, 16px);color:var(--mscoa-text-secondary, #757575);opacity:.5}.cols{font-size:.875em;min-height:28px}mat-toolbar.search{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important;box-shadow:var(--mscoa-elevation-1, 0 1px 3px rgba(0, 0, 0, .12));border-radius:8px 8px 0 0;padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);min-height:40px!important}mat-toolbar.search span{font-size:.8125rem;font-weight:500;color:var(--mscoa-text-primary, #212121)}mat-paginator{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-top:1px solid var(--mscoa-divider, #E0E0E0);border-radius:0 0 8px 8px;padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)}mat-paginator ::ng-deep .mat-mdc-paginator-container{min-height:40px}th.mat-column-selection,td.mat-column-selection{position:sticky!important;right:0!important;background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important;z-index:2;box-shadow:-4px 0 8px #0000000f;min-width:90px}mat-header-row th.mat-column-selection{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important}.account-row.selected-row td.mat-column-selection{background:var(--mat-sys-primary, var(--mscoa-primary, #243D91))!important}.account-row:hover:not(.deactivated-row):not(.selected-row) td.mat-column-selection{background:var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD))!important}button[mat-flat-button]{transition:all .2s ease}button[mat-flat-button]:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2, 0 2px 6px rgba(0, 0, 0, .12))}button[mat-flat-button]:active:not(:disabled){transform:translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i2$6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ScoaAccountTableComponent, isStandalone: true, selector: "app-scoa-account-table", inputs: { data: "data", selectedAccount: "selectedAccount", segment: "segment" }, outputs: { accountSelected: "accountSelected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n    <mat-toolbar class=\"search\" style=\"background:var(--mat-sys-surface-container) !important\">\r\n        <span style=\"font-size:14px\">\r\n            Select account from the options below:\r\n        </span>\r\n\r\n\r\n        <span class=\"spacer\"></span>\r\n\r\n        <mat-menu #menu=\"matMenu\">\r\n            <div style=\"                padding-left: 16px;\r\n    margin-top: 8px;\" mat-subheader>Account list headers</div>\r\n            <br>\r\n\r\n            <section style=\"padding-left: 16px; padding-right:16px\">\r\n                <button style=\"width: 100%;\" (click)=\"toogleDetails()\" class=\"cols\" color=\"primary\" mat-flat-button>\r\n                    {{showMinMal ? 'show all details' : 'Show less details'}}\r\n                </button>\r\n            </section>\r\n            <p style=\"\r\n            padding-left: 16px;\r\n            padding-right:16px;\r\n            \r\n            font-size:14px\">Only selected headers will be shown.</p>\r\n            @for (col of scoaAccountColumns; track $index) {\r\n            <button (click)=\"$event.stopPropagation()\" class=\"cols\" mat-menu-item>\r\n\r\n                <mat-checkbox [checked]=\"colIsChecked(col.key)\" (change)=\"colDisplayChanged($event,col.key)\"\r\n                    class=\"cols\">\r\n                    {{col.label}}</mat-checkbox>\r\n            </button>\r\n            }\r\n        </mat-menu>\r\n    </mat-toolbar>\r\n\r\n    @if (dataSource.filteredData.length === 0) {\r\n    <div class=\"no-results\">\r\n        No accounts match your search criteria.\r\n    </div>\r\n    }\r\n    <div class=\"table-wrapper\" [hidden]=\"dataSource.filteredData.length === 0\">\r\n        <div class=\"table-container\">\r\n            <table mat-table [dataSource]=\"dataSource||[]\" matSort>\r\n                <ng-container *ngFor=\"let column of scoaAccountColumns\" \r\n                [matColumnDef]=\"column.key\"\r\n                [stickyEnd]=\"column.system\">\r\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>\r\n                        @if(column.system){\r\n                            <button \r\n                                matTooltip=\"Show more or less columns\" \r\n                                mat-icon-button \r\n                                [matMenuTriggerFor]=\"menu\"\r\n                                [attr.aria-label]=\"'Column options'\">\r\n                                <mat-icon>view_column</mat-icon>\r\n                            </button>\r\n                        } @else {\r\n                            {{ column.label }}\r\n                        }\r\n                    </th>\r\n                    <td mat-cell *matCellDef=\"let element\">\r\n                        @if(column.system){\r\n                            <button \r\n                                mat-flat-button \r\n                                color=\"primary\"\r\n                                [attr.aria-label]=\"'Select account ' + (element.SCOAAccount || element.AccountNumber)\">\r\n                                Select\r\n                            </button>\r\n                        } @else {\r\n                            <span class=\"cell-content\">{{ element[column.key] }}</span>\r\n                        }\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n                <tr \r\n                    mat-row \r\n                    *matRowDef=\"let row; columns: displayColumns;\" \r\n                    class=\"account-row\" \r\n                    (click)=\"selectAccount(row)\"\r\n                    [class.deactivated-row]=\"rowIsActivated(row) === false\" \r\n                    [class.selected-row]=\"selectedAccount && selectedAccount.SCOAid === row.SCOAid\"\r\n                    [attr.aria-label]=\"'Account row: ' + (row.SCOAAccount || row.AccountNumber)\"\r\n                    [attr.aria-selected]=\"selectedAccount && selectedAccount.SCOAid === row.SCOAid\"\r\n                    role=\"row\">\r\n                </tr>\r\n            </table>\r\n        </div>\r\n        <mat-paginator [pageSizeOptions]=\"[5, 10, 20]\" [pageSize]=\"10\" showFirstLastButtons></mat-paginator>\r\n    </div>\r\n</div>", styles: [".search-container{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}.mat-form-field{flex-grow:1;margin-right:1rem}.table-wrapper{margin-top:var(--mscoa-spacing-xs, 4px);width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.table-wrapper::-webkit-scrollbar{height:8px}.table-wrapper::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, #F5F5F5);border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, #757575);border-radius:4px}.table-container{background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF));box-shadow:var(--mscoa-elevation-1, 0 1px 3px rgba(0, 0, 0, .12));border-radius:8px;overflow:visible;width:100%;min-width:0}mat-table{width:100%;min-width:480px;background:transparent}mat-header-row{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-bottom:2px solid var(--mscoa-divider, #E0E0E0)}mat-header-row th{font-weight:600;color:var(--mscoa-text-primary, #212121);font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);line-height:1.3}.account-row{cursor:pointer;transition:all .2s ease;border-bottom:1px solid var(--mscoa-divider, #E0E0E0)}.account-row:hover:not(.deactivated-row):not(.selected-row){background-color:var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD))!important;box-shadow:inset 4px 0 0 var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.account-row:active:not(.deactivated-row){background-color:var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD))!important}.account-row:focus-visible{outline:2px solid var(--mscoa-primary, #243D91);outline-offset:-2px}.account-row td{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);font-size:.8125rem;color:var(--mscoa-text-primary, #212121);border-bottom:none;vertical-align:middle;line-height:1.35}.account-row td .cell-content{display:block;word-break:break-word;line-height:1.35}.selected-row{background-color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))!important;color:var(--mat-sys-on-primary, white)!important;box-shadow:inset 4px 0 0 var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD)),var(--mscoa-elevation-2, 0 2px 6px rgba(0, 0, 0, .12))}.selected-row td{color:var(--mat-sys-on-primary, white)!important;font-weight:500}.selected-row td .cell-content{color:var(--mat-sys-on-primary, white)!important}.selected-row button{background-color:var(--mat-sys-on-primary, white)!important;color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))!important;font-weight:600}.selected-row button:hover{background-color:var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD))!important;transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2, 0 2px 6px rgba(0, 0, 0, .12))}.deactivated-row{opacity:.5;cursor:not-allowed!important;background-color:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important}.deactivated-row:hover{background-color:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important;transform:none!important}.deactivated-row td{color:var(--mscoa-text-secondary, #757575)!important}.no-results{text-align:center;padding:var(--mscoa-spacing-xl, 32px);color:var(--mscoa-text-secondary, #757575);background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:8px;margin:var(--mscoa-spacing-md, 16px)}.no-results mat-icon{font-size:3rem;height:3rem;width:3rem;margin-bottom:var(--mscoa-spacing-md, 16px);color:var(--mscoa-text-secondary, #757575);opacity:.5}.cols{font-size:.875em;min-height:28px}mat-toolbar.search{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important;box-shadow:var(--mscoa-elevation-1, 0 1px 3px rgba(0, 0, 0, .12));border-radius:8px 8px 0 0;padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);min-height:40px!important}mat-toolbar.search span{font-size:.8125rem;font-weight:500;color:var(--mscoa-text-primary, #212121)}mat-paginator{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-top:1px solid var(--mscoa-divider, #E0E0E0);border-radius:0 0 8px 8px;padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)}mat-paginator ::ng-deep .mat-mdc-paginator-container{min-height:40px}th.mat-column-selection,td.mat-column-selection{position:sticky!important;right:0!important;background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important;z-index:2;box-shadow:-4px 0 8px #0000000f;min-width:90px}mat-header-row th.mat-column-selection{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5))!important}.account-row.selected-row td.mat-column-selection{background:var(--mat-sys-primary, var(--mscoa-primary, #243D91))!important}.account-row:hover:not(.deactivated-row):not(.selected-row) td.mat-column-selection{background:var(--mat-sys-primary-container, var(--mscoa-primary-light, #E3F2FD))!important}button[mat-flat-button]{transition:all .2s ease}button[mat-flat-button]:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2, 0 2px 6px rgba(0, 0, 0, .12))}button[mat-flat-button]:active:not(:disabled){transform:translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i2$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ScoaAccountTableComponent, decorators: [{
             type: Component,
@@ -8506,34 +8560,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: [MatPaginator, { static: true }]
             }] } });
 
-/**
- * Escapes special characters in a string to be used in a regex.
- * e.g. "C++" -> "C\+\+"
- */
-function escapeRegExp(str) {
-    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-/**
- * Converts a string into a fuzzy regex pattern.
- * e.g. "ts" -> /t.*s/i
- */
-function createFuzzyRegExp(query) {
-    // 1. Escape the query to prevent invalid regex errors
-    const escapedQuery = escapeRegExp(query);
-    // 2. Insert ".*" between every character
-    //    "ts" -> ['t', 's'] -> "t.*s"
-    const pattern = escapedQuery.split('').join('.*');
-    // 3. Create the RegExp (case-insensitive)
-    return new RegExp(pattern, 'i');
-}
-/**
- * Performs the fuzzy search against a target string.
- */
-function fuzzySearch(query, text) {
-    const regex = createFuzzyRegExp(query);
-    return regex.test(text);
-}
-
 /**
  * Component for selecting SCOA (Standard Chart of Accounts) accounts from a hierarchical tree structure.
  * Opens as a dialog and allows users to browse, search, and select accounts.
@@ -8952,7 +8978,7 @@ class MscoaComputationComponent {
         return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MscoaComputationComponent, deps: [{ token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MscoaComputationComponent, isStandalone: true, selector: "app-mscoa-computation", host: { listeners: { "keydown": "handleKeyboardNavigation($event)" } }, ngImport: i0, template: "<!-- Header Toolbar -->\r\n<mat-toolbar class=\"main-toolbar header-toolbar\" role=\"banner\">\r\n    <span class=\"toolbar-title\">\r\n        {{ (segment || 'No segment') | uppercase }} : {{ activeColumn | uppercase }} ACCOUNT\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n    @if (selectedAccount) {\r\n        <button \r\n            mat-flat-button \r\n            (click)=\"clearSelectedAccount(); cancel()\"\r\n            [attr.aria-label]=\"'Change account'\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n            Change Account\r\n        </button>\r\n    }\r\n</mat-toolbar>\r\n\r\n<!-- Search Bar - Hidden when account selected -->\r\n@if (!selectedAccount) {\r\n    <mat-toolbar class=\"main-toolbar header-toolbar search-toolbar\" role=\"search\">\r\n        <mat-form-field [subscriptSizing]=\"'dynamic'\" class=\"search-field\">\r\n            <mat-label position=\"floating\">Search {{ segment || 'account' }} : {{ activeColumn || '' }} Account</mat-label>\r\n            <input \r\n                matInput \r\n                [formControl]=\"accountSearchTextControl\"\r\n                [placeholder]=\"('Search ' + segment + ' : ' + activeColumn + ' Account').toUpperCase()\"\r\n                [attr.aria-label]=\"'Search for account'\"\r\n                autocomplete=\"off\">\r\n            <button \r\n                mat-icon-button \r\n                matSuffix \r\n                (click)=\"clearSearch()\"\r\n                [attr.aria-label]=\"'Clear search'\"\r\n                type=\"button\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </mat-form-field>\r\n    </mat-toolbar>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Account Details View -->\r\n@if (selectedAccount) {\r\n    <div class=\"account-details-container\" role=\"region\" [attr.aria-label]=\"'Account details'\">\r\n        <app-account-value \r\n            [accountInputs]=\"accountInputs\" \r\n            [userCanClearAccount]=\"userCanClearAccount\"\r\n            [mscoaAccount]=\"selectedAccount\" \r\n            (updateAccount)=\"updateAccount($event)\"\r\n            (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n        </app-account-value>\r\n    </div>\r\n} @else {\r\n    <!-- Main Content Area with Drawer -->\r\n    <mat-drawer-container \r\n        class=\"drawer-container\"\r\n        [attr.aria-label]=\"'Account selection interface'\">\r\n        <!-- Account Table Drawer -->\r\n        <mat-drawer \r\n            #drawer \r\n            class=\"account-drawer\"\r\n            mode=\"side\" \r\n            position=\"end\"\r\n        [opened]=\"!searchingAccounts && !!selectedTreeNode && !accountSearchTextControl.value\">\r\n\r\n\r\n\r\n\r\n            @if (searchingAccounts) {\r\n                <div class=\"loading-container skeleton-table\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                    @for (item of [1,2,3,4,5]; track item) {\r\n                        <div class=\"skeleton-row\">\r\n                            <div class=\"skeleton-checkbox\"></div>\r\n                            <div class=\"skeleton-text short\"></div>\r\n                            <div class=\"skeleton-text medium\"></div>\r\n                            <div class=\"skeleton-text\"></div>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            } @else if (hasError) {\r\n                <div class=\"error-container\" role=\"alert\" [attr.aria-live]=\"'assertive'\">\r\n                    <mat-icon class=\"error-icon\" aria-hidden=\"true\">error</mat-icon>\r\n                    <p class=\"error-message\">{{ errorMessage }}</p>\r\n                    <button \r\n                        mat-flat-button \r\n                        color=\"primary\"\r\n                        (click)=\"retryLoadAccounts()\"\r\n                        [attr.aria-label]=\"'Retry loading accounts'\">\r\n                        <mat-icon aria-hidden=\"true\">refresh</mat-icon>\r\n                        Retry\r\n                    </button>\r\n                </div>\r\n            } @else if (searchAccounts.length === 0 && selectedTreeNode) {\r\n                <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                    <mat-icon class=\"empty-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                    <p class=\"empty-message\">No accounts found for this category.</p>\r\n                </div>\r\n            } @else {\r\n                <app-scoa-account-table \r\n                    [selectedAccount]=\"selectedAccount\" \r\n                    [segment]=\"segment\"\r\n                    (accountSelected)=\"selectAccount($event)\" \r\n                    [data]=\"{\r\n                        accounts: searchAccounts,\r\n                        account: currentAccountPath || ''\r\n                    }\">\r\n                </app-scoa-account-table>\r\n            }\r\n        </mat-drawer>\r\n        <!-- Tree Content Area -->\r\n        <div class=\"tree-content\" role=\"main\">\r\n\r\n            <!-- Search Results View -->\r\n            @if (accountSearchTextControl.value) {\r\n                <mat-nav-list class=\"search-results-list\" role=\"list\">\r\n                    <div mat-subheader class=\"search-results-header\">\r\n                        <mat-icon class=\"search-icon\">search</mat-icon>\r\n                        Search Results\r\n                        <span class=\"count-badge\" [attr.aria-label]=\"'Number of results'\">\r\n                            ({{ (searchedPaths$ | async)?.length || 0 }})\r\n                        </span>\r\n                    </div>\r\n                    \r\n                    @if ((searchedPaths$ | async)?.length === 0) {\r\n                        <!-- Empty Search Results -->\r\n                        <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                            <mat-icon class=\"empty-icon\" aria-hidden=\"true\">search_off</mat-icon>\r\n                            <p class=\"empty-message\">\r\n                                No account found for the search\r\n                                <strong>{{ accountSearchTextControl.value }}</strong>.\r\n                            </p>\r\n                            <button \r\n                                mat-flat-button \r\n                                (click)=\"clearSearch()\"\r\n                                [attr.aria-label]=\"'Clear search and show all accounts'\">\r\n                                Clear Search\r\n                            </button>\r\n                        </div>\r\n                    } @else {\r\n                        <p class=\"search-results-hint\">Click a result to load accounts for that category.</p>\r\n                        <div class=\"search-results-grid\" role=\"list\">\r\n                            @for (searchedItem of (searchedPaths$ | async); track searchedItem.join(':')) {\r\n                                <div \r\n                                    class=\"path-result-item\"\r\n                                    role=\"listitem\"\r\n                                    (click)=\"selectPath(searchedItem)\" \r\n                                    [attr.aria-label]=\"'Load accounts for: ' + searchedItem.join(' > ') + '. Click to select.'\"\r\n                                    tabindex=\"0\"\r\n                                    (keydown.enter)=\"selectPath(searchedItem)\"\r\n                                    (keydown.space)=\"selectPath(searchedItem); $event.preventDefault()\">\r\n                                    <div class=\"breadcrumb-container\">\r\n                                        @for (part of searchedItem; track part; let last = $last) {\r\n                                            <div class=\"crumb-segment\" [class.is-target]=\"last\">\r\n                                                <span \r\n                                                    class=\"text-content\" \r\n                                                    [innerHTML]=\"accountSearchTextControl.value ? highlightSearchText(part, accountSearchTextControl.value) : part\">\r\n                                                </span>\r\n                                                @if (!last) {\r\n                                                    <mat-icon class=\"separator\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                                                }\r\n                                            </div>\r\n                                        }\r\n                                    </div>\r\n                                    <span class=\"path-result-meta\">Load accounts</span>\r\n                                    <mat-icon class=\"path-result-arrow\" aria-hidden=\"true\">arrow_forward</mat-icon>\r\n                                </div>\r\n                            }\r\n                        </div>\r\n                    }\r\n                </mat-nav-list>\r\n            }\r\n\r\n            <!-- Tree View -->\r\n            @else {\r\n                <!-- Breadcrumb: show current path when category selected (like file explorers) -->\r\n                @if (selectedTreeNode?.path?.length) {\r\n                    <div class=\"tree-breadcrumb\" role=\"navigation\" [attr.aria-label]=\"'Current category: ' + (selectedTreeNode?.path ?? []).join(' > ')\">\r\n                        <span class=\"breadcrumb-label\">Category:</span>\r\n                        @for (part of (selectedTreeNode?.path ?? []); track $index; let last = $last) {\r\n                            <span class=\"breadcrumb-part\" [class.is-current]=\"last\">{{ part }}</span>\r\n                            @if (!last) {\r\n                                <mat-icon class=\"breadcrumb-sep\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                            }\r\n                        }\r\n                    </div>\r\n                }\r\n                <!-- Compact Instructions - Collapsed by default -->\r\n                @if (noneIsExpanded) {\r\n                    <mat-expansion-panel \r\n                        [expanded]=\"false\"\r\n                        class=\"instructions-panel compact-instructions\"\r\n                        [attr.aria-label]=\"'How to use the account selector'\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <mat-icon class=\"instruction-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                                <span>Quick tips</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <div class=\"instructions-content\">\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">folder_open</mat-icon>\r\n                                <span>Expand folders to browse</span>\r\n                            </div>\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">check_box</mat-icon>\r\n                                <span>Check category to load accounts</span>\r\n                            </div>\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">search</mat-icon>\r\n                                <span>Use search bar to find accounts</span>\r\n                            </div>\r\n                        </div>\r\n                    </mat-expansion-panel>\r\n                }\r\n\r\n                <!-- Account Tree -->\r\n                <mat-tree \r\n                \r\n                    [dataSource]=\"dataSource\" \r\n                    [treeControl]=\"treeControl\"\r\n                    role=\"tree\"\r\n                    [attr.aria-label]=\"'Account category tree'\">\r\n                    \r\n                    <!-- Leaf Node (no children) -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding role=\"treeitem\" \r\n                    [attr.data-tree-path]=\"node.path?.join(':')\">\r\n                        <button \r\n                            class=\"toggle-button\" \r\n                            mat-icon-button \r\n                            disabled\r\n                            aria-hidden=\"true\">\r\n                        </button>\r\n                        <mat-checkbox \r\n                            (change)=\"selectNode(node)\"\r\n                            [disabled]=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                            [checked]=\"isActivePathOrParent(node.path)\"\r\n                            [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                            @if (isActivePathOrParent(node.path) && searchingAccounts) {\r\n                                <mat-spinner \r\n                                    color=\"primary\" \r\n                                    class=\"loading\"\r\n                                    [attr.aria-label]=\"'Loading accounts for ' + node.name\">\r\n                                </mat-spinner>\r\n                                <span class=\"label selected\" [attr.aria-live]=\"'polite'\">\r\n                                    Loading <strong>{{ node.name }}</strong> accounts...\r\n                                </span>\r\n                            } @else {\r\n                                <span \r\n                                    class=\"label\" \r\n                                    [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            }\r\n                        </mat-checkbox>\r\n                    </mat-tree-node>\r\n\r\n                    <!-- Branch Node (has children) -->\r\n                    <mat-tree-node \r\n                        *matTreeNodeDef=\"let node; when: hasChild\" \r\n                        matTreeNodePadding \r\n                        role=\"treeitem\"\r\n                        [attr.data-tree-path]=\"node.path?.join(':')\"\r\n                        [attr.aria-expanded]=\"treeControl.isExpanded(node)\">\r\n                        <button \r\n                            class=\"toggle-button\" \r\n                            mat-icon-button \r\n                            [attr.aria-label]=\"(treeControl.isExpanded(node) ? 'Collapse' : 'Expand') + ' ' + node.name\"\r\n                            (click)=\"toggleNode(node)\"\r\n                            type=\"button\">\r\n                            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                                {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n                            </mat-icon>\r\n                        </button>\r\n                        \r\n                        @if (isActivePathOrParent(node.path)) {\r\n                            <mat-checkbox \r\n                                (change)=\"selectNode(node)\" \r\n                                [disabled]=\"true\" \r\n                                [checked]=\"true\"\r\n                                [attr.aria-label]=\"'Selected: ' + node.name\">\r\n                                <span class=\"label selected\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            </mat-checkbox>\r\n                        } @else {\r\n                            <mat-checkbox \r\n                                (change)=\"selectNode(node)\"\r\n                                [checked]=\"false\"\r\n                                [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                                <span class=\"label\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            </mat-checkbox>\r\n                        }\r\n                    </mat-tree-node>\r\n                </mat-tree>\r\n            }\r\n\r\n        </div>\r\n    </mat-drawer-container>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Footer Actions -->\r\n<mat-dialog-actions\r\nstyle=\"    background: var(--mscoa-surface-container) !important;\"\r\nalign=\"end\">\r\n<button \r\nclass=\"action-button close-button\"\r\nmat-button \r\n(click)=\"closeAndPassData(undefined)\"\r\n[attr.aria-label]=\"'Close dialog without saving'\"\r\ntype=\"button\">\r\n\r\nClose\r\n</button>\r\n    @if (userCanClearAccount ) {\r\n        <button \r\n            class=\"action-button save-button\"\r\n            mat-flat-button \r\n            [disabled]=\"!saveSelection\" \r\n            (click)=\"saveAccount()\"\r\n            [attr.aria-label]=\"saveSelection ? 'Save account selection' : 'Save disabled - account unchanged or invalid'\"\r\n            type=\"button\">\r\n            <mat-icon aria-hidden=\"true\">save</mat-icon>\r\n            Save\r\n        </button>\r\n    }\r\n \r\n    </mat-dialog-actions>\r\n", styles: [":host{display:flex;flex-direction:column;max-height:98vh;overflow:hidden;min-height:0;--mscoa-primary: var(--mat-sys-primary, #243D91);--mscoa-primary-light: var(--mat-sys-primary-container, #E3F2FD);--mscoa-primary-dark: var(--mat-sys-primary, #1A2E6B);--mscoa-success: var(--mat-sys-success, #4CAF50);--mscoa-error: var(--mat-sys-error, #F44336);--mscoa-warning: var(--mat-sys-warning, #FF9800);--mscoa-info: var(--mat-sys-primary, #2196F3);--mscoa-surface: var(--mat-sys-surface, #FFFFFF);--mscoa-surface-container: var(--mat-sys-surface-container, #F5F5F5);--mscoa-text-primary: var(--mat-sys-on-surface, #212121);--mscoa-text-secondary: var(--mat-sys-on-surface-variant, #757575);--mscoa-divider: var(--mat-sys-outline-variant, #E0E0E0);--mscoa-spacing-xs: 4px;--mscoa-spacing-sm: 8px;--mscoa-spacing-md: 16px;--mscoa-spacing-lg: 24px;--mscoa-spacing-xl: 32px;--mscoa-elevation-1: 0 1px 3px rgba(0,0,0,.12);--mscoa-elevation-2: 0 2px 6px rgba(0,0,0,.12);--mscoa-elevation-4: 0 4px 12px rgba(0,0,0,.12);--mscoa-computation-spacing-xs: var(--mscoa-spacing-xs);--mscoa-computation-spacing-sm: var(--mscoa-spacing-sm);--mscoa-computation-spacing-md: var(--mscoa-spacing-md);--mscoa-computation-spacing-lg: var(--mscoa-spacing-lg);--mscoa-computation-toolbar-height: 56px;--mscoa-header-height: 56px;--mscoa-search-height: 56px;--mscoa-footer-height: 58px;--mscoa-divider-height: 1px;--mscoa-computation-selected-color: var(--mscoa-primary);--mscoa-computation-border-radius: 16px;--mscoa-computation-transition: .2s ease}mat-divider{flex-shrink:0}h4{margin-top:0;margin-bottom:0;padding-left:var(--mscoa-computation-spacing-md)}.label{font-size:.875em}.selected{color:var(--mscoa-primary)!important;font-weight:600;background-color:transparent}.mat-tree-node.tree-node-selected,.mat-tree-node[aria-selected=true]{background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#00000008;transition:background-color var(--mscoa-computation-transition)}mat-tree-node{transition:all var(--mscoa-computation-transition)}mat-tree-node:has(.selected){background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}mat-tree-node:hover:not(:has(.selected)){background-color:#00000008}mat-tree-node mat-checkbox[checked=true] ::ng-deep .mdc-checkbox{background-color:var(--mscoa-primary, #243D91)!important;border-color:var(--mscoa-primary, #243D91)!important}.accountSeperator{margin-left:var(--mscoa-computation-spacing-xs);margin-right:var(--mscoa-computation-spacing-xs)}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:var(--mscoa-computation-spacing-sm);bottom:var(--mscoa-computation-spacing-sm)}.info{font-size:.875rem;opacity:.8;padding-left:var(--mscoa-computation-spacing-md);border-radius:4px;margin-top:10px;line-height:1.6;max-width:500px}.info strong{opacity:1}.toggle-button{height:28px;width:28px;padding:0;margin-right:var(--mscoa-computation-spacing-xs);margin-left:var(--mscoa-computation-spacing-xs)}.toggle-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px;border-radius:4px}mat-tree{flex:1;min-height:280px;min-width:0;overflow:auto;padding:var(--mscoa-computation-spacing-md)!important;background:none;scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}mat-tree::-webkit-scrollbar{width:8px;height:8px}mat-tree::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:4px}mat-tree::-webkit-scrollbar-thumb{background:var(--mscoa-text-secondary, #757575);border-radius:4px;opacity:.5}mat-tree::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mscoa-primary, #243D91)}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:var(--mscoa-computation-spacing-md)!important;padding-top:2px!important;padding-bottom:2px!important;box-sizing:border-box;width:100%;transition:background-color var(--mscoa-computation-transition)}mat-tree-node:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px;border-radius:4px}mat-tree-node:hover:not(:has(.selected)){background-color:#0000000a}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:var(--mscoa-computation-spacing-xs) 0;box-sizing:border-box;transition:background-color var(--mscoa-computation-transition),border-color var(--mscoa-computation-transition);border-radius:4px;margin:1px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#0000000a}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;min-height:fit-content;flex:1;min-width:0}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible}.header-toolbar{flex-shrink:0;background:var(--mscoa-surface-container)!important;box-shadow:var(--mscoa-elevation-2);border-bottom:1px solid var(--mscoa-divider)}.glass{background:#ffffff26;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2)}@media (prefers-reduced-motion: reduce){.glass{backdrop-filter:none;-webkit-backdrop-filter:none}}.main-toolbar{min-width:0;padding-top:var(--mscoa-computation-spacing-md);min-height:var(--mscoa-computation-toolbar-height);overflow:hidden}.main-toolbar .toolbar-title{font-size:18px;font-weight:500;color:var(--mscoa-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-toolbar{flex-shrink:0;height:var(--mscoa-computation-toolbar-height);min-width:0;overflow:hidden}.search-toolbar .search-field{flex:1;width:100%;max-width:100%;min-width:0;border-radius:var(--mscoa-computation-border-radius);overflow:clip}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-text-field-wrapper{background-color:var(--mscoa-surface-container)!important;border:1px dashed var(--mscoa-divider)}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-label{color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep input{cursor:not-allowed;color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep button{opacity:.5;cursor:not-allowed}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-hint{color:var(--mscoa-text-secondary);font-size:.75rem}.tree-breadcrumb{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--mscoa-spacing-xs, 4px);padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:6px;border-left:3px solid var(--mat-sys-primary, var(--mscoa-primary, #243D91));font-size:.8125rem;line-height:1.4;max-width:500px}.tree-breadcrumb .breadcrumb-label{color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));font-weight:500;margin-right:var(--mscoa-spacing-xs, 4px)}.tree-breadcrumb .breadcrumb-part{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #212121))}.tree-breadcrumb .breadcrumb-part.is-current{font-weight:600;color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.tree-breadcrumb .breadcrumb-sep{font-size:16px;width:16px;height:16px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-xs, 4px)}.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--mscoa-spacing-sm, 8px);overflow-y:auto;flex:1;min-height:0;padding:var(--mscoa-spacing-xs, 4px) 0;scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.search-results-grid::-webkit-scrollbar{width:6px}.search-results-grid::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container));border-radius:3px}.search-results-grid::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary));border-radius:3px;opacity:.5}.search-results-grid::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary))}.path-result-item{cursor:pointer;transition:background-color var(--mscoa-computation-transition);min-height:56px;padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);padding-right:40px;border-radius:8px;border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider));background:var(--mat-sys-surface, var(--mscoa-surface));display:flex;flex-direction:column;gap:4px;align-items:flex-start;position:relative}.path-result-item:hover,.path-result-item:focus-visible{background-color:var(--mat-sys-surface-container, rgba(0, 0, 0, .04));outline:none}.path-result-item:hover .breadcrumb-container,.path-result-item:focus-visible .breadcrumb-container{flex-wrap:wrap}.path-result-item:hover .breadcrumb-container .text-content,.path-result-item:focus-visible .breadcrumb-container .text-content{white-space:normal;max-width:none}.path-result-item:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px}.path-result-arrow{position:absolute;right:var(--mscoa-spacing-sm);top:50%;transform:translateY(-50%);font-size:18px;width:18px;height:18px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary))}.breadcrumb-container{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;width:100%}.crumb-segment{display:flex;align-items:center;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #6c757d));white-space:nowrap;overflow:hidden;max-width:100%}.crumb-segment .text-content{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:150px;vertical-align:middle}.crumb-segment .separator{font-size:1em;height:16px;width:16px;margin:0 var(--mscoa-computation-spacing-xs);color:var(--mat-sys-outline-variant, var(--mscoa-divider, #bdbdbd));flex-shrink:0}.crumb-segment.is-target{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));font-weight:500;flex-shrink:0}.crumb-segment.is-target .text-content{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));max-width:none}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.empty-state .empty-icon{font-size:48px;width:48px;height:48px;opacity:.5}.empty-state .empty-message{margin:0;font-size:14px}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.error-container .error-icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-error)}.error-container .error-message{margin:0;font-size:14px;color:var(--mat-sys-error)}mark{background-color:#ffeb3b;color:inherit;padding:0;font-weight:500}.instructions-panel{flex-shrink:0;margin:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin-bottom:var(--mscoa-spacing-xs, 4px);box-shadow:var(--mscoa-elevation-1);border-radius:6px;overflow:hidden;background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));transition:box-shadow var(--mscoa-computation-transition)}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important;min-height:40px!important;height:auto!important}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important}.instructions-panel:hover{box-shadow:var(--mscoa-elevation-2)}.instructions-panel ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);background:var(--mscoa-surface-container, #F5F5F5)!important}.instructions-panel ::ng-deep .mat-expansion-panel-header:hover{background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))!important}.instructions-panel ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px)!important;background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))}.instructions-panel .instruction-icon{margin-right:var(--mscoa-spacing-xs, 4px);color:var(--mscoa-info, #2196F3);font-size:18px;width:18px;height:18px}.instructions-panel .instructions-content{padding:var(--mscoa-spacing-xs, 4px) 0;display:flex;flex-direction:column;gap:var(--mscoa-spacing-xs, 4px)}.instructions-panel .instruction-item{display:flex;align-items:center;gap:var(--mscoa-spacing-xs, 4px);font-size:.75rem;line-height:1.4;padding:var(--mscoa-spacing-xs, 4px);border-radius:4px;transition:background-color var(--mscoa-computation-transition)}.instructions-panel .instruction-item:hover{background-color:var(--mscoa-primary-light, #E3F2FD)}.instructions-panel .instruction-item .instruction-bullet{font-size:16px;width:16px;height:16px;color:var(--mscoa-primary, #243D91);flex-shrink:0}.instructions-panel .instruction-item span{flex:1}.instructions-panel .instruction-item span strong{font-weight:600}.search-results-header{display:flex;align-items:center;gap:var(--mscoa-computation-spacing-sm)}.search-results-header .search-icon{margin-right:var(--mscoa-computation-spacing-sm)}.search-results-list{padding:var(--mscoa-computation-spacing-md);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.search-results-hint{font-size:.75rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-xs, 4px) 0}.path-result-meta{font-size:.6875rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));text-transform:uppercase;letter-spacing:.3px}.mat-mdc-subheader{position:sticky;top:0;z-index:10;background:var(--mat-sys-surface-container)}.count-badge{margin-left:auto;font-weight:400;opacity:.7;font-size:.9em}.drawer-container{flex:1;min-height:0;overflow:hidden;max-width:100%;background:var(--mat-sys-surface-container)!important;display:flex}.drawer-container ::ng-deep .mat-drawer-content{min-height:0;overflow:auto;height:calc(100vh - 220px);flex:1 1 30%;min-width:260px}.account-drawer{min-width:420px;max-width:min(700px,65vw)!important;width:520px!important;overflow:hidden;display:flex;flex-direction:column;background:var(--mat-sys-surface-container)!important;padding:var(--mscoa-computation-spacing-md)}.account-drawer app-scoa-account-table{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}.account-drawer .loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);gap:var(--mscoa-computation-spacing-md)}.account-drawer .loading-container p{margin:0;font-size:.875rem}.skeleton-row{display:flex;align-items:center;padding:var(--mscoa-spacing-sm) var(--mscoa-spacing-md);gap:var(--mscoa-spacing-md);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-row .skeleton-checkbox{width:20px;height:20px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text{flex:1;height:16px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text.short{width:60%}.skeleton-row .skeleton-text.medium{width:80%}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-table .skeleton-row{border-bottom:1px solid var(--mscoa-divider)}.skeleton-table .skeleton-row:last-child{border-bottom:none}.account-details-container{flex:1;min-height:0;max-width:520px;margin:0 auto;width:100%;background:#ffffff1c;backdrop-filter:blur(2.5px);padding:var(--mscoa-spacing-xs, 4px);border:1px solid rgba(255,255,255,.3);border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider, #E0E0E0));border-radius:8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.account-details-container::-webkit-scrollbar{width:6px}.account-details-container::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:3px}.account-details-container::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));border-radius:3px;opacity:.5}.account-details-container::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.account-details-container ::ng-deep app-account-value{max-width:100%}.account-details-container ::ng-deep app-account-value mat-toolbar{background:var(--mat-sys-surface-container, var(--mscoa-surface-container))!important;box-shadow:var(--mscoa-elevation-1);margin-bottom:0;border-radius:8px 8px 0 0}.account-details-container ::ng-deep app-account-value .account-grid{gap:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface, var(--mscoa-surface));border-radius:0 0 8px 8px;box-shadow:var(--mscoa-elevation-1)}.tree-content{min-height:280px;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding-right:var(--mscoa-computation-spacing-sm)}.footer-toolbar{flex-shrink:0;height:fit-content;padding-top:var(--mscoa-computation-spacing-md)!important;padding-bottom:var(--mscoa-computation-spacing-md)!important;min-height:58px;box-shadow:0 -2px 8px #0000000d}.footer-toolbar .footer-actions{display:flex;width:100%;gap:var(--mscoa-computation-spacing-sm);flex-direction:column;min-height:58px}.footer-toolbar .footer-actions .action-button{width:100%;font-weight:500;transition:all .2s ease}.footer-toolbar .footer-actions .action-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px}.footer-toolbar .footer-actions .action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2)}.footer-toolbar .footer-actions .action-button:active:not(:disabled){transform:translateY(0)}.footer-toolbar .footer-actions .action-button[disabled]{opacity:.5;cursor:not-allowed}.footer-toolbar .footer-actions .save-button{background-color:var(--mscoa-primary, #243D91)!important;color:#fff!important}@media (min-width: 768px){.footer-actions{flex-direction:row}.footer-actions .action-button{width:auto;min-width:120px}.drawer-container{display:flex}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: i6.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i11.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i12.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i12.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i12.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i12.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i3$1.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: AccountValueComponent, selector: "app-account-value", inputs: ["mscoaAccount", "accountInputs", "userCanClearAccount"], outputs: ["clearSelectedAccount", "updateAccount"] }, { 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: "component", type: ScoaAccountTableComponent, selector: "app-scoa-account-table", inputs: ["data", "selectedAccount", "segment"], outputs: ["accountSelected"] }, { kind: "ngmodule", type: _InternalFormsSharedModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MscoaComputationComponent, isStandalone: true, selector: "app-mscoa-computation", host: { listeners: { "keydown": "handleKeyboardNavigation($event)" } }, ngImport: i0, template: "<!-- Header Toolbar -->\r\n<mat-toolbar class=\"main-toolbar header-toolbar\" role=\"banner\">\r\n    <span class=\"toolbar-title\">\r\n        {{ (segment || 'No segment') | uppercase }} : {{ activeColumn | uppercase }} ACCOUNT\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n    @if (selectedAccount) {\r\n        <button \r\n            mat-flat-button \r\n            (click)=\"clearSelectedAccount(); cancel()\"\r\n            [attr.aria-label]=\"'Change account'\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n            Change Account\r\n        </button>\r\n    }\r\n</mat-toolbar>\r\n\r\n<!-- Search Bar - Hidden when account selected -->\r\n@if (!selectedAccount) {\r\n    <mat-toolbar class=\"main-toolbar header-toolbar search-toolbar\" role=\"search\">\r\n        <mat-form-field [subscriptSizing]=\"'dynamic'\" class=\"search-field\">\r\n            <mat-label position=\"floating\">Search {{ segment || 'account' }} : {{ activeColumn || '' }} Account</mat-label>\r\n            <input \r\n                matInput \r\n                [formControl]=\"accountSearchTextControl\"\r\n                [placeholder]=\"('Search ' + segment + ' : ' + activeColumn + ' Account').toUpperCase()\"\r\n                [attr.aria-label]=\"'Search for account'\"\r\n                autocomplete=\"off\">\r\n            <button \r\n                mat-icon-button \r\n                matSuffix \r\n                (click)=\"clearSearch()\"\r\n                [attr.aria-label]=\"'Clear search'\"\r\n                type=\"button\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </mat-form-field>\r\n    </mat-toolbar>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Account Details View -->\r\n@if (selectedAccount) {\r\n    <div class=\"account-details-container\" role=\"region\" [attr.aria-label]=\"'Account details'\">\r\n        <app-account-value \r\n            [accountInputs]=\"accountInputs\" \r\n            [userCanClearAccount]=\"userCanClearAccount\"\r\n            [mscoaAccount]=\"selectedAccount\" \r\n            (updateAccount)=\"updateAccount($event)\"\r\n            (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n        </app-account-value>\r\n    </div>\r\n} @else {\r\n    <!-- Main Content Area with Drawer -->\r\n    <mat-drawer-container \r\n        class=\"drawer-container\"\r\n        [attr.aria-label]=\"'Account selection interface'\">\r\n        <!-- Account Table Drawer -->\r\n        <mat-drawer \r\n            #drawer \r\n            class=\"account-drawer\"\r\n            mode=\"side\" \r\n            position=\"end\"\r\n        [opened]=\"!searchingAccounts && !!selectedTreeNode && !accountSearchTextControl.value\">\r\n\r\n\r\n\r\n\r\n            @if (searchingAccounts) {\r\n                <div class=\"loading-container skeleton-table\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                    @for (item of [1,2,3,4,5]; track item) {\r\n                        <div class=\"skeleton-row\">\r\n                            <div class=\"skeleton-checkbox\"></div>\r\n                            <div class=\"skeleton-text short\"></div>\r\n                            <div class=\"skeleton-text medium\"></div>\r\n                            <div class=\"skeleton-text\"></div>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            } @else if (hasError) {\r\n                <div class=\"error-container\" role=\"alert\" [attr.aria-live]=\"'assertive'\">\r\n                    <mat-icon class=\"error-icon\" aria-hidden=\"true\">error</mat-icon>\r\n                    <p class=\"error-message\">{{ errorMessage }}</p>\r\n                    <button \r\n                        mat-flat-button \r\n                        color=\"primary\"\r\n                        (click)=\"retryLoadAccounts()\"\r\n                        [attr.aria-label]=\"'Retry loading accounts'\">\r\n                        <mat-icon aria-hidden=\"true\">refresh</mat-icon>\r\n                        Retry\r\n                    </button>\r\n                </div>\r\n            } @else if (searchAccounts.length === 0 && selectedTreeNode) {\r\n                <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                    <mat-icon class=\"empty-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                    <p class=\"empty-message\">No accounts found for this category.</p>\r\n                </div>\r\n            } @else {\r\n                <app-scoa-account-table \r\n                    [selectedAccount]=\"selectedAccount\" \r\n                    [segment]=\"segment\"\r\n                    (accountSelected)=\"selectAccount($event)\" \r\n                    [data]=\"{\r\n                        accounts: searchAccounts,\r\n                        account: currentAccountPath || ''\r\n                    }\">\r\n                </app-scoa-account-table>\r\n            }\r\n        </mat-drawer>\r\n        <!-- Tree Content Area -->\r\n        <div class=\"tree-content\" role=\"main\">\r\n\r\n            <!-- Search Results View -->\r\n            @if (accountSearchTextControl.value) {\r\n                <mat-nav-list class=\"search-results-list\" role=\"list\">\r\n                    <div mat-subheader class=\"search-results-header\">\r\n                        <mat-icon class=\"search-icon\">search</mat-icon>\r\n                        Search Results\r\n                        <span class=\"count-badge\" [attr.aria-label]=\"'Number of results'\">\r\n                            ({{ (searchedPaths$ | async)?.length || 0 }})\r\n                        </span>\r\n                    </div>\r\n                    \r\n                    @if ((searchedPaths$ | async)?.length === 0) {\r\n                        <!-- Empty Search Results -->\r\n                        <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                            <mat-icon class=\"empty-icon\" aria-hidden=\"true\">search_off</mat-icon>\r\n                            <p class=\"empty-message\">\r\n                                No account found for the search\r\n                                <strong>{{ accountSearchTextControl.value }}</strong>.\r\n                            </p>\r\n                            <button \r\n                                mat-flat-button \r\n                                (click)=\"clearSearch()\"\r\n                                [attr.aria-label]=\"'Clear search and show all accounts'\">\r\n                                Clear Search\r\n                            </button>\r\n                        </div>\r\n                    } @else {\r\n                        <p class=\"search-results-hint\">Click a result to load accounts for that category.</p>\r\n                        <div class=\"search-results-grid\" role=\"list\">\r\n                            @for (searchedItem of (searchedPaths$ | async); track searchedItem.join(':')) {\r\n                                <div \r\n                                    class=\"path-result-item\"\r\n                                    role=\"listitem\"\r\n                                    (click)=\"selectPath(searchedItem)\" \r\n                                    [attr.aria-label]=\"'Load accounts for: ' + searchedItem.join(' > ') + '. Click to select.'\"\r\n                                    tabindex=\"0\"\r\n                                    (keydown.enter)=\"selectPath(searchedItem)\"\r\n                                    (keydown.space)=\"selectPath(searchedItem); $event.preventDefault()\">\r\n                                    <div class=\"breadcrumb-container\">\r\n                                        @for (part of searchedItem; track part; let last = $last) {\r\n                                            <div class=\"crumb-segment\" [class.is-target]=\"last\">\r\n                                                <span \r\n                                                    class=\"text-content\" \r\n                                                    [innerHTML]=\"accountSearchTextControl.value ? highlightSearchText(part, accountSearchTextControl.value) : part\">\r\n                                                </span>\r\n                                                @if (!last) {\r\n                                                    <mat-icon class=\"separator\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                                                }\r\n                                            </div>\r\n                                        }\r\n                                    </div>\r\n                                    <span class=\"path-result-meta\">Load accounts</span>\r\n                                    <mat-icon class=\"path-result-arrow\" aria-hidden=\"true\">arrow_forward</mat-icon>\r\n                                </div>\r\n                            }\r\n                        </div>\r\n                    }\r\n                </mat-nav-list>\r\n            }\r\n\r\n            <!-- Tree View -->\r\n            @else {\r\n                <!-- Breadcrumb: show current path when category selected (like file explorers) -->\r\n                @if (selectedTreeNode?.path?.length) {\r\n                    <div class=\"tree-breadcrumb\" role=\"navigation\" [attr.aria-label]=\"'Current category: ' + (selectedTreeNode?.path ?? []).join(' > ')\">\r\n                        <span class=\"breadcrumb-label\">Category:</span>\r\n                        @for (part of (selectedTreeNode?.path ?? []); track $index; let last = $last) {\r\n                            <span class=\"breadcrumb-part\" [class.is-current]=\"last\">{{ part }}</span>\r\n                            @if (!last) {\r\n                                <mat-icon class=\"breadcrumb-sep\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                            }\r\n                        }\r\n                    </div>\r\n                }\r\n                <!-- Compact Instructions - Collapsed by default -->\r\n                @if (noneIsExpanded) {\r\n                    <mat-expansion-panel \r\n                        [expanded]=\"false\"\r\n                        class=\"instructions-panel compact-instructions\"\r\n                        [attr.aria-label]=\"'How to use the account selector'\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <mat-icon class=\"instruction-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                                <span>Quick tips</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <div class=\"instructions-content\">\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">folder_open</mat-icon>\r\n                                <span>Expand folders to browse</span>\r\n                            </div>\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">check_box</mat-icon>\r\n                                <span>Check category to load accounts</span>\r\n                            </div>\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">search</mat-icon>\r\n                                <span>Use search bar to find accounts</span>\r\n                            </div>\r\n                        </div>\r\n                    </mat-expansion-panel>\r\n                }\r\n\r\n                <!-- Account Tree -->\r\n                <mat-tree \r\n                \r\n                    [dataSource]=\"dataSource\" \r\n                    [treeControl]=\"treeControl\"\r\n                    role=\"tree\"\r\n                    [attr.aria-label]=\"'Account category tree'\">\r\n                    \r\n                    <!-- Leaf Node (no children) -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding role=\"treeitem\" \r\n                    [attr.data-tree-path]=\"node.path?.join(':')\">\r\n                        <button \r\n                            class=\"toggle-button\" \r\n                            mat-icon-button \r\n                            disabled\r\n                            aria-hidden=\"true\">\r\n                        </button>\r\n                        <mat-checkbox \r\n                            (change)=\"selectNode(node)\"\r\n                            [disabled]=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                            [checked]=\"isActivePathOrParent(node.path)\"\r\n                            [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                            @if (isActivePathOrParent(node.path) && searchingAccounts) {\r\n                                <mat-spinner \r\n                                    color=\"primary\" \r\n                                    class=\"loading\"\r\n                                    [attr.aria-label]=\"'Loading accounts for ' + node.name\">\r\n                                </mat-spinner>\r\n                                <span class=\"label selected\" [attr.aria-live]=\"'polite'\">\r\n                                    Loading <strong>{{ node.name }}</strong> accounts...\r\n                                </span>\r\n                            } @else {\r\n                                <span \r\n                                    class=\"label\" \r\n                                    [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            }\r\n                        </mat-checkbox>\r\n                    </mat-tree-node>\r\n\r\n                    <!-- Branch Node (has children) -->\r\n                    <mat-tree-node \r\n                        *matTreeNodeDef=\"let node; when: hasChild\" \r\n                        matTreeNodePadding \r\n                        role=\"treeitem\"\r\n                        [attr.data-tree-path]=\"node.path?.join(':')\"\r\n                        [attr.aria-expanded]=\"treeControl.isExpanded(node)\">\r\n                        <button \r\n                            class=\"toggle-button\" \r\n                            mat-icon-button \r\n                            [attr.aria-label]=\"(treeControl.isExpanded(node) ? 'Collapse' : 'Expand') + ' ' + node.name\"\r\n                            (click)=\"toggleNode(node)\"\r\n                            type=\"button\">\r\n                            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                                {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n                            </mat-icon>\r\n                        </button>\r\n                        \r\n                        @if (isActivePathOrParent(node.path)) {\r\n                            <mat-checkbox \r\n                                (change)=\"selectNode(node)\" \r\n                                [disabled]=\"true\" \r\n                                [checked]=\"true\"\r\n                                [attr.aria-label]=\"'Selected: ' + node.name\">\r\n                                <span class=\"label selected\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            </mat-checkbox>\r\n                        } @else {\r\n                            <mat-checkbox \r\n                                (change)=\"selectNode(node)\"\r\n                                [checked]=\"false\"\r\n                                [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                                <span class=\"label\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            </mat-checkbox>\r\n                        }\r\n                    </mat-tree-node>\r\n                </mat-tree>\r\n            }\r\n\r\n        </div>\r\n    </mat-drawer-container>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Footer Actions -->\r\n<mat-dialog-actions\r\nstyle=\"    background: var(--mscoa-surface-container) !important;\"\r\nalign=\"end\">\r\n<button \r\nclass=\"action-button close-button\"\r\nmat-button \r\n(click)=\"closeAndPassData(undefined)\"\r\n[attr.aria-label]=\"'Close dialog without saving'\"\r\ntype=\"button\">\r\n\r\nClose\r\n</button>\r\n    @if (userCanClearAccount ) {\r\n        <button \r\n            class=\"action-button save-button\"\r\n            mat-flat-button \r\n            [disabled]=\"!saveSelection\" \r\n            (click)=\"saveAccount()\"\r\n            [attr.aria-label]=\"saveSelection ? 'Save account selection' : 'Save disabled - account unchanged or invalid'\"\r\n            type=\"button\">\r\n            <mat-icon aria-hidden=\"true\">save</mat-icon>\r\n            Save\r\n        </button>\r\n    }\r\n \r\n    </mat-dialog-actions>\r\n", styles: [":host{display:flex;flex-direction:column;max-height:98vh;overflow:hidden;min-height:0;--mscoa-primary: var(--mat-sys-primary, #243D91);--mscoa-primary-light: var(--mat-sys-primary-container, #E3F2FD);--mscoa-primary-dark: var(--mat-sys-primary, #1A2E6B);--mscoa-success: var(--mat-sys-success, #4CAF50);--mscoa-error: var(--mat-sys-error, #F44336);--mscoa-warning: var(--mat-sys-warning, #FF9800);--mscoa-info: var(--mat-sys-primary, #2196F3);--mscoa-surface: var(--mat-sys-surface, #FFFFFF);--mscoa-surface-container: var(--mat-sys-surface-container, #F5F5F5);--mscoa-text-primary: var(--mat-sys-on-surface, #212121);--mscoa-text-secondary: var(--mat-sys-on-surface-variant, #757575);--mscoa-divider: var(--mat-sys-outline-variant, #E0E0E0);--mscoa-spacing-xs: 4px;--mscoa-spacing-sm: 8px;--mscoa-spacing-md: 16px;--mscoa-spacing-lg: 24px;--mscoa-spacing-xl: 32px;--mscoa-elevation-1: 0 1px 3px rgba(0,0,0,.12);--mscoa-elevation-2: 0 2px 6px rgba(0,0,0,.12);--mscoa-elevation-4: 0 4px 12px rgba(0,0,0,.12);--mscoa-computation-spacing-xs: var(--mscoa-spacing-xs);--mscoa-computation-spacing-sm: var(--mscoa-spacing-sm);--mscoa-computation-spacing-md: var(--mscoa-spacing-md);--mscoa-computation-spacing-lg: var(--mscoa-spacing-lg);--mscoa-computation-toolbar-height: 56px;--mscoa-header-height: 56px;--mscoa-search-height: 56px;--mscoa-footer-height: 58px;--mscoa-divider-height: 1px;--mscoa-computation-selected-color: var(--mscoa-primary);--mscoa-computation-border-radius: 16px;--mscoa-computation-transition: .2s ease}mat-divider{flex-shrink:0}h4{margin-top:0;margin-bottom:0;padding-left:var(--mscoa-computation-spacing-md)}.label{font-size:.875em}.selected{color:var(--mscoa-primary)!important;font-weight:600;background-color:transparent}.mat-tree-node.tree-node-selected,.mat-tree-node[aria-selected=true]{background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#00000008;transition:background-color var(--mscoa-computation-transition)}mat-tree-node{transition:all var(--mscoa-computation-transition)}mat-tree-node:has(.selected){background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}mat-tree-node:hover:not(:has(.selected)){background-color:#00000008}mat-tree-node mat-checkbox[checked=true] ::ng-deep .mdc-checkbox{background-color:var(--mscoa-primary, #243D91)!important;border-color:var(--mscoa-primary, #243D91)!important}.accountSeperator{margin-left:var(--mscoa-computation-spacing-xs);margin-right:var(--mscoa-computation-spacing-xs)}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:var(--mscoa-computation-spacing-sm);bottom:var(--mscoa-computation-spacing-sm)}.info{font-size:.875rem;opacity:.8;padding-left:var(--mscoa-computation-spacing-md);border-radius:4px;margin-top:10px;line-height:1.6;max-width:500px}.info strong{opacity:1}.toggle-button{height:28px;width:28px;padding:0;margin-right:var(--mscoa-computation-spacing-xs);margin-left:var(--mscoa-computation-spacing-xs)}.toggle-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px;border-radius:4px}mat-tree{flex:1;min-height:280px;min-width:0;overflow:auto;padding:var(--mscoa-computation-spacing-md)!important;background:none;scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}mat-tree::-webkit-scrollbar{width:8px;height:8px}mat-tree::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:4px}mat-tree::-webkit-scrollbar-thumb{background:var(--mscoa-text-secondary, #757575);border-radius:4px;opacity:.5}mat-tree::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mscoa-primary, #243D91)}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:var(--mscoa-computation-spacing-md)!important;padding-top:2px!important;padding-bottom:2px!important;box-sizing:border-box;width:100%;transition:background-color var(--mscoa-computation-transition)}mat-tree-node:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px;border-radius:4px}mat-tree-node:hover:not(:has(.selected)){background-color:#0000000a}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:var(--mscoa-computation-spacing-xs) 0;box-sizing:border-box;transition:background-color var(--mscoa-computation-transition),border-color var(--mscoa-computation-transition);border-radius:4px;margin:1px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#0000000a}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;min-height:fit-content;flex:1;min-width:0}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible}.header-toolbar{flex-shrink:0;background:var(--mscoa-surface-container)!important;box-shadow:var(--mscoa-elevation-2);border-bottom:1px solid var(--mscoa-divider)}.glass{background:#ffffff26;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2)}@media (prefers-reduced-motion: reduce){.glass{backdrop-filter:none;-webkit-backdrop-filter:none}}.main-toolbar{min-width:0;padding-top:var(--mscoa-computation-spacing-md);min-height:var(--mscoa-computation-toolbar-height);overflow:hidden}.main-toolbar .toolbar-title{font-size:18px;font-weight:500;color:var(--mscoa-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-toolbar{flex-shrink:0;height:var(--mscoa-computation-toolbar-height);min-width:0;overflow:hidden}.search-toolbar .search-field{flex:1;width:100%;max-width:100%;min-width:0;border-radius:var(--mscoa-computation-border-radius);overflow:clip}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-text-field-wrapper{background-color:var(--mscoa-surface-container)!important;border:1px dashed var(--mscoa-divider)}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-label{color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep input{cursor:not-allowed;color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep button{opacity:.5;cursor:not-allowed}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-hint{color:var(--mscoa-text-secondary);font-size:.75rem}.tree-breadcrumb{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--mscoa-spacing-xs, 4px);padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:6px;border-left:3px solid var(--mat-sys-primary, var(--mscoa-primary, #243D91));font-size:.8125rem;line-height:1.4;max-width:500px}.tree-breadcrumb .breadcrumb-label{color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));font-weight:500;margin-right:var(--mscoa-spacing-xs, 4px)}.tree-breadcrumb .breadcrumb-part{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #212121))}.tree-breadcrumb .breadcrumb-part.is-current{font-weight:600;color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.tree-breadcrumb .breadcrumb-sep{font-size:16px;width:16px;height:16px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-xs, 4px)}.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--mscoa-spacing-sm, 8px);overflow-y:auto;flex:1;min-height:0;padding:var(--mscoa-spacing-xs, 4px) 0;scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.search-results-grid::-webkit-scrollbar{width:6px}.search-results-grid::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container));border-radius:3px}.search-results-grid::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary));border-radius:3px;opacity:.5}.search-results-grid::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary))}.path-result-item{cursor:pointer;transition:background-color var(--mscoa-computation-transition);min-height:56px;padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);padding-right:40px;border-radius:8px;border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider));background:var(--mat-sys-surface, var(--mscoa-surface));display:flex;flex-direction:column;gap:4px;align-items:flex-start;position:relative}.path-result-item:hover,.path-result-item:focus-visible{background-color:var(--mat-sys-surface-container, rgba(0, 0, 0, .04));outline:none}.path-result-item:hover .breadcrumb-container,.path-result-item:focus-visible .breadcrumb-container{flex-wrap:wrap}.path-result-item:hover .breadcrumb-container .text-content,.path-result-item:focus-visible .breadcrumb-container .text-content{white-space:normal;max-width:none}.path-result-item:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px}.path-result-arrow{position:absolute;right:var(--mscoa-spacing-sm);top:50%;transform:translateY(-50%);font-size:18px;width:18px;height:18px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary))}.breadcrumb-container{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;width:100%}.crumb-segment{display:flex;align-items:center;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #6c757d));white-space:nowrap;overflow:hidden;max-width:100%}.crumb-segment .text-content{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:150px;vertical-align:middle}.crumb-segment .separator{font-size:1em;height:16px;width:16px;margin:0 var(--mscoa-computation-spacing-xs);color:var(--mat-sys-outline-variant, var(--mscoa-divider, #bdbdbd));flex-shrink:0}.crumb-segment.is-target{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));font-weight:500;flex-shrink:0}.crumb-segment.is-target .text-content{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));max-width:none}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.empty-state .empty-icon{font-size:48px;width:48px;height:48px;opacity:.5}.empty-state .empty-message{margin:0;font-size:14px}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.error-container .error-icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-error)}.error-container .error-message{margin:0;font-size:14px;color:var(--mat-sys-error)}mark{background-color:#ffeb3b;color:inherit;padding:0;font-weight:500}.instructions-panel{flex-shrink:0;margin:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin-bottom:var(--mscoa-spacing-xs, 4px);box-shadow:var(--mscoa-elevation-1);border-radius:6px;overflow:hidden;background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));transition:box-shadow var(--mscoa-computation-transition)}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important;min-height:40px!important;height:auto!important}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important}.instructions-panel:hover{box-shadow:var(--mscoa-elevation-2)}.instructions-panel ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);background:var(--mscoa-surface-container, #F5F5F5)!important}.instructions-panel ::ng-deep .mat-expansion-panel-header:hover{background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))!important}.instructions-panel ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px)!important;background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))}.instructions-panel .instruction-icon{margin-right:var(--mscoa-spacing-xs, 4px);color:var(--mscoa-info, #2196F3);font-size:18px;width:18px;height:18px}.instructions-panel .instructions-content{padding:var(--mscoa-spacing-xs, 4px) 0;display:flex;flex-direction:column;gap:var(--mscoa-spacing-xs, 4px)}.instructions-panel .instruction-item{display:flex;align-items:center;gap:var(--mscoa-spacing-xs, 4px);font-size:.75rem;line-height:1.4;padding:var(--mscoa-spacing-xs, 4px);border-radius:4px;transition:background-color var(--mscoa-computation-transition)}.instructions-panel .instruction-item:hover{background-color:var(--mscoa-primary-light, #E3F2FD)}.instructions-panel .instruction-item .instruction-bullet{font-size:16px;width:16px;height:16px;color:var(--mscoa-primary, #243D91);flex-shrink:0}.instructions-panel .instruction-item span{flex:1}.instructions-panel .instruction-item span strong{font-weight:600}.search-results-header{display:flex;align-items:center;gap:var(--mscoa-computation-spacing-sm)}.search-results-header .search-icon{margin-right:var(--mscoa-computation-spacing-sm)}.search-results-list{padding:var(--mscoa-computation-spacing-md);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.search-results-hint{font-size:.75rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-xs, 4px) 0}.path-result-meta{font-size:.6875rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));text-transform:uppercase;letter-spacing:.3px}.mat-mdc-subheader{position:sticky;top:0;z-index:10;background:var(--mat-sys-surface-container)}.count-badge{margin-left:auto;font-weight:400;opacity:.7;font-size:.9em}.drawer-container{flex:1;min-height:0;overflow:hidden;max-width:100%;background:var(--mat-sys-surface-container)!important;display:flex}.drawer-container ::ng-deep .mat-drawer-content{min-height:0;overflow:auto;height:calc(100vh - 220px);flex:1 1 30%;min-width:260px}.account-drawer{min-width:420px;max-width:min(700px,65vw)!important;width:520px!important;overflow:hidden;display:flex;flex-direction:column;background:var(--mat-sys-surface-container)!important;padding:var(--mscoa-computation-spacing-md)}.account-drawer app-scoa-account-table{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}.account-drawer .loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);gap:var(--mscoa-computation-spacing-md)}.account-drawer .loading-container p{margin:0;font-size:.875rem}.skeleton-row{display:flex;align-items:center;padding:var(--mscoa-spacing-sm) var(--mscoa-spacing-md);gap:var(--mscoa-spacing-md);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-row .skeleton-checkbox{width:20px;height:20px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text{flex:1;height:16px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text.short{width:60%}.skeleton-row .skeleton-text.medium{width:80%}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-table .skeleton-row{border-bottom:1px solid var(--mscoa-divider)}.skeleton-table .skeleton-row:last-child{border-bottom:none}.account-details-container{flex:1;min-height:0;max-width:520px;margin:0 auto;width:100%;background:#ffffff1c;backdrop-filter:blur(2.5px);padding:var(--mscoa-spacing-xs, 4px);border:1px solid rgba(255,255,255,.3);border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider, #E0E0E0));border-radius:8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.account-details-container::-webkit-scrollbar{width:6px}.account-details-container::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:3px}.account-details-container::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));border-radius:3px;opacity:.5}.account-details-container::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.account-details-container ::ng-deep app-account-value{max-width:100%}.account-details-container ::ng-deep app-account-value mat-toolbar{background:var(--mat-sys-surface-container, var(--mscoa-surface-container))!important;box-shadow:var(--mscoa-elevation-1);margin-bottom:0;border-radius:8px 8px 0 0}.account-details-container ::ng-deep app-account-value .account-grid{gap:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface, var(--mscoa-surface));border-radius:0 0 8px 8px;box-shadow:var(--mscoa-elevation-1)}.tree-content{min-height:280px;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding-right:var(--mscoa-computation-spacing-sm)}.footer-toolbar{flex-shrink:0;height:fit-content;padding-top:var(--mscoa-computation-spacing-md)!important;padding-bottom:var(--mscoa-computation-spacing-md)!important;min-height:58px;box-shadow:0 -2px 8px #0000000d}.footer-toolbar .footer-actions{display:flex;width:100%;gap:var(--mscoa-computation-spacing-sm);flex-direction:column;min-height:58px}.footer-toolbar .footer-actions .action-button{width:100%;font-weight:500;transition:all .2s ease}.footer-toolbar .footer-actions .action-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px}.footer-toolbar .footer-actions .action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2)}.footer-toolbar .footer-actions .action-button:active:not(:disabled){transform:translateY(0)}.footer-toolbar .footer-actions .action-button[disabled]{opacity:.5;cursor:not-allowed}.footer-toolbar .footer-actions .save-button{background-color:var(--mscoa-primary, #243D91)!important;color:#fff!important}@media (min-width: 768px){.footer-actions{flex-direction:row}.footer-actions .action-button{width:auto;min-width:120px}.drawer-container{display:flex}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: i7.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i11.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i12.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i12.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i12.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i12.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i13.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: AccountValueComponent, selector: "app-account-value", inputs: ["mscoaAccount", "accountInputs", "userCanClearAccount"], outputs: ["clearSelectedAccount", "updateAccount"] }, { 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: "component", type: ScoaAccountTableComponent, selector: "app-scoa-account-table", inputs: ["data", "selectedAccount", "segment"], outputs: ["accountSelected"] }, { kind: "ngmodule", type: _InternalFormsSharedModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MscoaComputationComponent, decorators: [{
             type: Component,
@@ -10767,9 +10793,9 @@ class MscoaChartComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MscoaChartComponent, deps: [{ token: MscoaComponentStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", readonly: "readonly", touched: "touched", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", config: "config" }, outputs: { onContainerClick: "onContainerClick", segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, ngImport: i0, template: "<section \n  (click)=\"setAsTouched($event)\" \n  class=\"mscoa-chart__container\"\n  [class.mscoa-chart__container--touched]=\"touched\"\n  *ngIf=\"(viewData$ | async) as viewData\"\n  role=\"region\"\n  [attr.aria-label]=\"'MSCOA Account Chart'\"\n  [attr.aria-busy]=\"viewData.loading || viewData.validatingValue\">\n\n  @if (viewData.loading) {\n    <div class=\"mscoa-chart__loading-container\" role=\"status\" aria-live=\"polite\">\n      <mat-spinner [diameter]=\"40\"></mat-spinner>\n      <span class=\"sr-only\">Loading account chart data...</span>\n    </div>\n  } @else {\n    @defer (on viewport) {\n      <ng-container *ngIf=\"viewData.accountTreeKeys || viewData.cashAccountTreeKeys\">\n        <div class=\"mscoa-chart__table-container\">\n          @if (isDualAccountBasis) {\n            <div class=\"dual-basis-container\" role=\"group\" aria-label=\"Dual accounting basis tables\">\n              <div class=\"dual-basis-container__item\">\n                <ng-container \n                  *ngTemplateOutlet=\"selectionTable; \n                  context: {\n                    accountingBasis: ACCOUNTING_BASIS.ACCRUAL,\n                    canCollapse: true,\n                    viewData: viewData\n                  }\">\n                </ng-container>\n              </div>\n              \n              <div class=\"dual-basis-container__item\">\n                <ng-container \n                  *ngTemplateOutlet=\"selectionTable; \n                  context: {\n                    accountingBasis: ACCOUNTING_BASIS.CASH,\n                    canCollapse: true,\n                    viewData: viewData\n                  }\">\n                </ng-container>\n              </div>\n            </div>\n          } @else {\n            <ng-container \n              *ngTemplateOutlet=\"selectionTable; \n              context: {\n                accountingBasis: config?.accountingBasis,\n                canCollapse: false,\n                viewData: viewData\n              }\">\n            </ng-container>\n          }\n        </div>\n      </ng-container>\n\n      <ng-template \n        #selectionTable \n        let-accountingBasis=\"accountingBasis\" \n        let-canCollapse=\"canCollapse\"\n        let-viewData=\"viewData\">\n        \n        <div class=\"mscoa-chart-table\" role=\"group\" [attr.aria-label]=\"'Accounting basis: ' + (accountingBasis || 'Accrual')\">\n          <!-- Toolbar -->\n          <app-mscoa-chart-toolbar\n            [accountingBasis]=\"accountingBasis\"\n            [canCollapse]=\"canCollapse\"\n            [isExpanded]=\"getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\n            (toggleExpansion)=\"toggleDualBasisExpansion(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\">\n          </app-mscoa-chart-toolbar>\n\n          @if (shouldShowTable(isDualAccountBasis, getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL), accountingBasis)) {\n            <div class=\"account-selection-table-wrapper\">\n              <div\n                class=\"account-selection-table-container\"\n                [class.account-selection-table-container--accrual]=\"!accountingBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL\"\n                [class.account-selection-table-container--cash]=\"accountingBasis === ACCOUNTING_BASIS.CASH\"\n                role=\"table\"\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\">\n\n              <table \n                mat-table \n                [dataSource]=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashTableData : viewData.tableData\" \n                class=\"table\"\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\"\n                [attr.aria-describedby]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\n                role=\"table\">\n                <span [id]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\" class=\"sr-only\">\n                  Use arrow keys to navigate between cells. Press Enter or Space to select an account.\n                </span>\n                \n                @for (\n                  col of (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols); \n                  track trackByColumn($index, col); \n                  let i = $index\n                ) {\n                  <ng-container [matColumnDef]=\"col\" [sticky]=\"i === 0\">\n                    <!-- Header Cell -->\n                    <th \n                      mat-header-cell \n                      *matHeaderCellDef\n                      [class.table__header-cell--segment]=\"isSegmentColumn(i)\"\n                      [class.table__header-cell--regular]=\"!isSegmentColumn(i)\"\n                      [style.width.%]=\"getColumnWidthPercent(isSegmentColumn(i), (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols).length)\"\n                      [style.min-width.px]=\"isSegmentColumn(i) ? 150 : 200\"\n                      [attr.aria-sort]=\"i === 0 ? 'none' : null\"\n                      [attr.scope]=\"'col'\"\n                      [attr.aria-label]=\"getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) + ' column'\">\n                      {{ getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) | titlecase | unCamelCase }}\n                    </th>\n\n                    <!-- Data Cell -->\n                    <td \n                      mat-cell\n                      *matCellDef=\"let row; trackBy: trackByRow\"\n                      [class.table__cell--segment]=\"isSegmentColumn(i)\"\n                      [class.table__cell--regular]=\"!isSegmentColumn(i)\"\n                      [class.table__cell--active]=\"editSelection?.segment === row['segment'] && activeColumn === col\"\n                      [class.table__cell--business-error]=\"!isSegmentColumn(i) && getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                      [attr.aria-label]=\"'Cell for ' + row['segment'] + ' segment, ' + col + ' column'\"\n                      [attr.aria-selected]=\"!!row[col]\"\n                      [attr.aria-invalid]=\"!isSegmentColumn(i) && !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                      [attr.role]=\"'gridcell'\"\n                      [attr.tabindex]=\"isSegmentColumn(i) ? -1 : (row[col] ? 0 : -1)\">\n                      \n                      @if (isSegmentColumn(i)) {\n                        <!-- Segment Column -->\n                        <div class=\"segment-cell-content\">\n                          @if (editorMode && row.innerInput?.id) {\n                            <button \n                              mat-icon-button \n                              [matMenuTriggerData]=\"{innerInput: row.innerInput}\"\n                              [matMenuTriggerFor]=\"inputMenu\" \n                              [matTooltip]=\"'Options for: ' + row.innerInput.label\"\n                              [attr.aria-label]=\"'Options menu for ' + row.innerInput.label\"\n                              (click)=\"$event.stopPropagation()\">\n                              <mat-icon>more_vert</mat-icon>\n                            </button>\n                          }\n                          <span class=\"segment-cell-content__label\">{{ row['label'] }}</span>\n                        </div>\n                      } @else {\n                        <!-- Regular Column -->\n                        @if (row.innerInput?.id && formGroup && inputPortals[getPortalKey(row.innerInput.id)]) {\n                          <div class=\"portal-container\">\n                            <ng-template [cdkPortalOutlet]=\"inputPortals[getPortalKey(row.innerInput.id)]\"></ng-template>\n                          </div>\n                          } @else {\n                            @if (row[col]) {\n                            <!-- Account Selected -->\n                            @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment']); as cellError) {\n                              <div class=\"account-cell-wrapper\" \n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\n                                <button \n                                  [disabled]=\"row['singleSelect'] === true && col === COLUMNS.CREDIT\"\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                  color=\"primary\" \n                                  mat-button \n                                  class=\"cell-button cell-button--selected cell-button--business-error\"\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Business error: ' + cellError.message\"\n                                  [attr.aria-invalid]=\"true\"\n                                  [attr.aria-pressed]=\"true\"\n                                  [matTooltip]=\"cellError.message\">\n                                  <div class=\"content\">\n                                    <span \n                                      class=\"selected-acount-label selected-acount-label--tag selected-acount-label--business-error\"\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\n                                      {{ row[col] | unCamelCase }}\n                                      @if (shouldShowVatChip(row, col)) {\n                                        <span \n                                          class=\"vat-badge\"\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\n                                          VAT\n                                        </span>\n                                      }\n                                    </span>\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\n                                  </div>\n                                </button>\n                              </div>\n                            } @else {\n                              <div class=\"account-cell-wrapper\" \n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\n                                <button \n                                  [disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                  color=\"primary\" \n                                  mat-button \n                                  class=\"cell-button cell-button--selected\"\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Press Enter or Space to change'\"\n                                  [attr.aria-invalid]=\"false\"\n                                  [attr.aria-disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                  [attr.aria-pressed]=\"true\">\n                                  <div class=\"content\">\n                                    <span \n                                      class=\"selected-acount-label selected-acount-label--tag\"\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\n                                      {{ row[col] | unCamelCase }}\n                                      @if (shouldShowVatChip(row, col)) {\n                                        <span \n                                          class=\"vat-badge\"\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\n                                          VAT\n                                        </span>\n                                      }\n                                    </span>\n                                    @if (showValidationSuccessIndicators) {\n                                      <mat-icon class=\"validated-indicator\" aria-hidden=\"true\" [matTooltip]=\"'Validated'\">shield</mat-icon>\n                                    } @else {\n                                      <mat-icon class=\"success-indicator\" aria-hidden=\"true\">check_circle</mat-icon>\n                                    }\n                                  </div>\n                                </button>\n                              </div>\n                            }\n                          } @else {\n                            <!-- No Account Selected -->\n                            <div class=\"cell-button-wrapper\">\n                              <button \n                                [disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [color]=\"\"\n                                (click)=\"selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); $event.stopPropagation(); setAsTouched($event)\"\n                                (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                mat-button\n                                class=\"cell-button\"\n                                [class.cell-button--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-label]=\"shouldShowAutoSelectedLabel(row, col) ? 'Auto selected for ' + row['segment'] + ' segment, ' + col + ' column' : 'Select account for ' + row['segment'] + ' segment, ' + col + ' column'\"\n                                [attr.aria-disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-describedby]=\"getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ? 'hint-' + row['segment'] + '-' + col : null\"\n                                [attr.aria-invalid]=\"hasError(touched, inputConfig?.required || false, !!row[col]) || !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-required]=\"inputConfig?.required && !row[col]\"\n                                [matTooltip]=\"getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])?.message\">\n                                <div class=\"content\">\n                                  <span \n                                    class=\"selected-acount-label\"\n                                    [class.selected-acount-label--error]=\"hasError(touched, inputConfig?.required || false, !!row[col])\"\n                                    [class.selected-acount-label--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\">\n                                    {{ (shouldShowAutoSelectedLabel(row, col) ? 'auto selected' : 'Select account') | unCamelCase }}\n                                    @if (inputConfig?.required && !row[col]) {\n                                      <span class=\"required-indicator\" aria-label=\"Required field\">*</span>\n                                    }\n                                  </span>\n                                  @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])) {\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\n                                  } @else if (shouldShowDropdownIcon(row, col)) {\n                                    <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n                                  }\n                                </div>\n                              </button>\n                              @if (getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as hint) {\n                                <span \n                                  class=\"inline-hint\"\n                                  [id]=\"'hint-' + row['segment'] + '-' + col\"\n                                  role=\"tooltip\"\n                                  aria-live=\"polite\">\n                                  {{ hint }}\n                                </span>\n                              }\n                            </div>\n                          }\n                        }\n                      }\n                    </td>\n                  </ng-container>\n                }\n\n                <tr mat-header-row *matHeaderRowDef=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols); trackBy: trackByRow\"></tr>\n              </table>\n            </div>\n            </div>\n\n            <!-- Empty State -->\n            <ng-container *ngIf=\"(accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashAccountTreeKeys : viewData.accountTreeKeys).length === 0\">\n              <section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n                <mat-icon aria-hidden=\"true\">info</mat-icon>\n                <span>\n                  No account segments are currently configured.\n                  Please configure account segments to proceed.\n                </span>\n              </section>\n            </ng-container>\n\n            <!-- Success Messages (Temporary) -->\n            @if ((successMessage$ | async); as successMessages) {\n              @if (getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as msg) {\n                <app-mscoa-temporary-hint\n                  [message]=\"getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ?? ''\"\n                  [type]=\"'info'\"\n                  [duration]=\"6000\"\n                  [showDismiss]=\"true\">\n                </app-mscoa-temporary-hint>\n              }\n            }\n\n            <!-- Business Rule Errors (Temporary display, keeps error styling) -->\n            @if ((viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []).length > 0) {\n              <app-mscoa-error-display\n                [errors]=\"viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []\"\n                type=\"error\"\n                [context]=\"{ accountingBasis: accountingBasis || ACCOUNTING_BASIS.ACCRUAL }\"\n                [duration]=\"6000\"\n                [showDismiss]=\"true\">\n              </app-mscoa-error-display>\n            }\n\n            <!-- Temporary Contextual Hints -->\n            @if (temporaryHintMessage) {\n              <app-mscoa-temporary-hint\n                [message]=\"temporaryHintMessage\"\n                [type]=\"temporaryHintType\"\n                [duration]=\"6000\"\n                [showDismiss]=\"true\">\n              </app-mscoa-temporary-hint>\n            }\n\n            <!-- Validation Hints (Context-Aware) -->\n            @if (!touched && inputConfig?.required && !viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL]?.length && (!isDualAccountBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL || !accountingBasis)) {\n              <div class=\"validation-hints\" role=\"region\" aria-label=\"Validation guidance\">\n                <p class=\"validation-hints__title\">Guidance:</p>\n                <ul class=\"validation-hints__list\">\n                  <li>Account combinations are validated automatically. Select accounts that belong to compatible reporting categories.</li>\n                  <li>Required fields are marked with an asterisk (*). Complete all required selections to proceed.</li>\n                  <li>Some fields may be automatically populated based on your selections to ensure consistency.</li>\n                </ul>\n              </div>\n            }\n          }\n        </div>\n      </ng-template>\n    } @placeholder {\n      <div class=\"loading-placeholder\" role=\"status\" aria-live=\"polite\">\n        <p>Loading data...</p>\n      </div>\n    } @loading (minimum 100ms) {\n      <div class=\"loading-spinner-container\" role=\"status\" aria-live=\"polite\">\n        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"40\"></mat-progress-spinner>\n        <span class=\"sr-only\">Loading account chart...</span>\n      </div>\n    } @error {\n      <div class=\"error-state\" role=\"alert\" aria-live=\"assertive\">\n        <p>Error loading data. Please try again.</p>\n      </div>\n    }\n  }\n</section>\n\n<!-- Input Menu -->\n<mat-menu #inputMenu=\"matMenu\">\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\n    <app-mscoa-chart-input-menu\n      [innerInput]=\"innerInput\"\n      [countdownSeconds]=\"inputWillBeRemovedIn(innerInput.id)\"\n      [hoveredId]=\"hoveredInputId\"\n      (edit)=\"onInputMenuEdit($event)\"\n      (delete)=\"onInputMenuDelete($event)\"\n      (cancelDelete)=\"onInputMenuCancelDelete($event)\"\n      (hoverStart)=\"onInputMenuHoverStart($event)\"\n      (hoverEnd)=\"onInputMenuHoverEnd()\">\n    </app-mscoa-chart-input-menu>\n  </ng-template>\n</mat-menu>\n", styles: ["@charset \"UTF-8\";:host{--mscoa-chart-spacing-xs: 4px;--mscoa-chart-spacing-sm: 8px;--mscoa-chart-spacing-md: 16px;--mscoa-chart-spacing-lg: 24px;--mscoa-chart-spacing-xl: 32px;--mscoa-chart-border-radius: 4px;--mscoa-chart-transition: .2s ease;--mscoa-chart-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--mscoa-chart-font-size-base: 14px;--mscoa-chart-line-height: 1.5;display:block;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height)}.mscoa-chart__container{padding:0;transition:background-color var(--mscoa-chart-transition);width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.mscoa-chart__loading-container{padding:var(--mscoa-chart-spacing-lg);display:flex;align-items:center;justify-content:center}.mscoa-chart__table-container{position:relative;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;box-sizing:border-box}.dual-basis-container{display:flex;flex-direction:column;gap:var(--mscoa-chart-spacing-sm)}.dual-basis-container__item{flex:1}.single-base{gap:var(--mscoa-chart-spacing-sm);height:48px;font-size:.875em;font-weight:500;transition:background-color var(--mscoa-chart-transition)}.single-base--cash{background:var(--mat-sys-inverse-primary)!important}.account-selection-table-wrapper{position:relative;width:100%}.account-selection-table-container{border-radius:var(--mscoa-chart-border-radius);overflow-x:auto;overflow-y:visible;transition:border-color var(--mscoa-chart-transition);width:100%;max-width:100%;box-sizing:border-box;display:block}.account-selection-table-container--accrual{border:solid 1px var(--mat-sys-primary)}.account-selection-table-container--cash{border:solid 1px var(--mat-sys-inverse-primary)}.account-selection-table-container::-webkit-scrollbar{height:8px}.account-selection-table-container::-webkit-scrollbar-track{background:var(--mat-sys-surface-container-low, #f7f2fa);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb{background:var(--mat-sys-outline-variant, #cac4d0);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-outline, #79747e)}.table{width:100%;table-layout:fixed;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);border-collapse:separate;border-spacing:0;display:table;box-sizing:border-box;max-width:100%}.table__header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.table__header-cell--segment{text-align:right;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px}.table__header-cell--regular{padding-left:var(--mscoa-chart-spacing-lg);min-width:200px;max-width:none}.table__cell{overflow:visible;box-sizing:border-box;position:relative;vertical-align:top}.table__cell--segment{background:var(--mat-list-active-indicator-color, var(--mat-sys-secondary-container));text-align:right;font-weight:500;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:middle}.table__cell--regular{padding:0;min-width:200px;max-width:none;word-wrap:break-word;vertical-align:top;overflow:visible}.table__cell--active{background-color:var(--mat-sys-primary-container);transition:background-color var(--mscoa-chart-transition)}mat-header-cell{background:var(--mat-sys-surface-container);font-weight:600;font-size:var(--mscoa-chart-font-size-base);padding:var(--mscoa-chart-spacing-md)}.mscoa-chart-table{display:flex;flex-direction:column}.portal-container{width:100%}.account-cell-wrapper{position:relative;width:100%;max-width:100%;overflow:visible;z-index:1;min-height:38px;display:flex;flex-direction:column;gap:4px}.cell-button-wrapper{position:relative;width:100%;max-width:100%;overflow:hidden}.cell-button{height:fit-content;min-height:38px;width:100%;max-width:100%;transition:all var(--mscoa-chart-transition);font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);position:relative;overflow:visible;padding:8px}.cell-button:hover:not(:disabled){background-color:var(--mat-sys-surface-container);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.cell-button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;z-index:1}.cell-button:disabled{opacity:.6;cursor:not-allowed}.cell-button--selected{background-color:transparent}.cell-button--selected:hover:not(:disabled){background-color:var(--mat-sys-surface-container-low, #f7f2fa);border-color:var(--mat-sys-primary, #1976d2)}.cell-button.cell-button--selected{animation:fadeInSuccess var(--mscoa-chart-transition)}.cell-button.cell-button--business-error{border-color:var(--mat-sys-error, #ba1a1a)}.cell-button.cell-button--business-error .selected-acount-label--business-error{color:var(--mat-sys-error);border-color:var(--mat-sys-error)}.success-indicator{color:var(--mat-sys-success, #4caf50);font-size:18px;width:18px;right:-8px;top:-4px;background:#fff;border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);animation:scaleIn var(--mscoa-chart-transition);flex-shrink:0}.validated-indicator{color:var(--mat-sys-primary, #1976d2);font-size:18px;width:18px;height:18px;right:-8px;top:-4px;background:#fff;border-radius:16px;position:absolute;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0;animation:validatedShieldIn .3s ease-out forwards}.business-error-indicator{color:var(--mat-sys-error, #ba1a1a);font-size:18px;width:18px;right:-8px;top:-4px;background:#fff;border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0}.required-indicator{color:var(--mat-sys-error, #ba1a1a);font-weight:600;margin-left:2px}.inline-hint{display:block;font-size:12px;color:var(--mat-sys-on-surface-variant, #49454f);margin-top:var(--mscoa-chart-spacing-xs);padding:var(--mscoa-chart-spacing-xs) var(--mscoa-chart-spacing-sm);background-color:var(--mat-sys-surface-container-low, #f7f2fa);border-radius:var(--mscoa-chart-border-radius);line-height:1.4;max-width:100%;word-wrap:break-word}.content{padding:0;display:flex;gap:6px;width:100%;max-width:100%;overflow:visible;min-width:0;flex-wrap:wrap;align-items:center}.selected-acount-label{text-align:left;flex:1;font-weight:400;transition:color var(--mscoa-chart-transition)}.selected-acount-label--error,.selected-acount-label--business-error{color:var(--mat-sys-error);font-weight:500}.selected-acount-label--tag{display:inline-block;padding:4px 10px;background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #001d35);border-radius:16px;font-size:13px;font-weight:500;line-height:1.5;border:1px solid var(--mat-sys-primary, #1976d2);box-shadow:0 1px 2px #0000001a;transition:all var(--mscoa-chart-transition);width:100%;max-width:100%;overflow:visible;white-space:normal;word-wrap:break-word;word-break:break-word;cursor:pointer;box-sizing:border-box;position:relative}.selected-acount-label--tag:hover{background-color:var(--mat-sys-primary-container-high, #d0e4f7);box-shadow:0 2px 4px #1976d226}.segment-cell-content{display:flex;align-items:center;justify-content:flex-end;font-weight:500}.vat-badge{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:2px 6px;border-radius:8px;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background-color:var(--mat-sys-tertiary-container, #e0ffee);color:var(--mat-sys-on-tertiary-container, #7c5000);border:1px solid var(--mat-sys-outline-variant, #cac4d0);box-shadow:none;transition:all var(--mscoa-chart-transition);flex-shrink:0;align-self:flex-start;margin-top:2px;line-height:1}.vat-badge:hover{background-color:var(--mat-sys-tertiary-container-high, #ffe0b2);border-color:var(--mat-sys-tertiary, #f57c00)}.vat-chip-container{padding-left:var(--mscoa-chart-spacing-sm);padding-right:var(--mscoa-chart-spacing-sm);padding-bottom:var(--mscoa-chart-spacing-xs);margin-top:var(--mscoa-chart-spacing-xs)}.vat-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600;transition:all var(--mscoa-chart-transition);box-shadow:0 1px 3px #0000001f}.vat-chip--applicable{background:linear-gradient(135deg,var(--mat-sys-tertiary, #f57c00) 0%,var(--mat-sys-tertiary-container, #ff9800) 100%);color:var(--mat-sys-on-tertiary, #ffffff);border:1px solid var(--mat-sys-tertiary, #f57c00)}.vat-chip--applicable:hover{box-shadow:0 2px 6px #f57c004d;transform:translateY(-1px)}.vat-chip__icon{font-size:14px;width:14px;height:14px;opacity:.9}.vat-chip__text{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}.info-box{display:flex;align-items:center;gap:var(--mscoa-chart-spacing-sm);padding:12px;background:azure;border-radius:var(--mscoa-chart-border-radius);margin-bottom:var(--mscoa-chart-spacing-md)}.info-icon{min-width:38px;margin:auto;margin-top:var(--mscoa-chart-spacing-sm)}.empty-state{padding:var(--mscoa-chart-spacing-md);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--mscoa-chart-spacing-sm);color:var(--mat-sys-on-surface-variant)}.validation-hints{margin-top:var(--mscoa-chart-spacing-md);padding:var(--mscoa-chart-spacing-md);background-color:var(--mat-sys-surface-container-low, #f7f2fa);border-radius:var(--mscoa-chart-border-radius);border-left:4px solid var(--mat-sys-primary, #1976d2);box-shadow:0 1px 3px #00000014}.validation-hints__title{font-weight:600;font-size:var(--mscoa-chart-font-size-base);margin:0 0 var(--mscoa-chart-spacing-sm) 0;color:var(--mat-sys-on-surface, #1c1b16);display:flex;align-items:center;gap:var(--mscoa-chart-spacing-xs)}.validation-hints__title:before{content:\"\\1f4a1\";font-size:16px}.validation-hints__list{margin:0;padding-left:var(--mscoa-chart-spacing-md);color:var(--mat-sys-on-surface-variant, #49454f);font-size:13px;line-height:1.6}.validation-hints__list li{margin-bottom:var(--mscoa-chart-spacing-sm);position:relative}.validation-hints__list li::marker{color:var(--mat-sys-primary, #1976d2)}.validation-hints__list li:last-child{margin-bottom:0}mat-error{font-size:.75em;margin-top:var(--mscoa-chart-spacing-xs)}mat-error ul{margin:0;padding-left:var(--mscoa-chart-spacing-md)}mat-error li{margin-bottom:var(--mscoa-chart-spacing-xs)}.loading-placeholder{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-on-surface-variant)}.loading-spinner-container{display:flex;justify-content:center;align-items:center;height:256px}.error-state{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-error)}mat-panel-description{font-size:.875em;line-height:1.4}.main-expanse-content{background:var(--mat-sys-surface-container)!important}@media (max-width: 768px){.dual-basis-container{gap:var(--mscoa-chart-spacing-md)}.cell-button{min-height:44px;font-size:15px;max-width:300px}.content{padding:var(--mscoa-chart-spacing-md)}.validation-hints{font-size:13px;padding:var(--mscoa-chart-spacing-sm)}.inline-hint{font-size:11px}}.cell-button:focus-visible,button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;outline-style:solid}@media (prefers-contrast: high){.cell-button{border:2px solid currentColor}.cell-button:focus-visible{outline-width:4px}.selected-acount-label--error{font-weight:700}}@media (prefers-reduced-motion: reduce){.cell-button,.success-indicator,.fade-in,.validated-indicator{animation:none;transition:none}}.table__cell--active{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}@media (prefers-contrast: high){.table__cell--active{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}}.table__cell--business-error{background-color:var(--mat-sys-error-container, #ffdad6);border-left:3px solid var(--mat-sys-error, #ba1a1a)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInSuccess{0%{background-color:transparent}50%{background-color:var(--mat-sys-success-container, #e8f5e9)}to{background-color:var(--mat-sys-primary-container)}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes validatedShieldIn{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.fade-in{animation:fadeIn var(--mscoa-chart-transition)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skeleton-loader{background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-high) 50%,var(--mat-sys-surface-container) 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite;border-radius:var(--mscoa-chart-border-radius)}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-row{height:48px;margin-bottom:var(--mscoa-chart-spacing-xs)}.skeleton-cell{height:100%;margin-right:var(--mscoa-chart-spacing-md)}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i2$6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PortalModule }, { kind: "component", type: MscoaChartInputMenuComponent, selector: "app-mscoa-chart-input-menu", inputs: ["innerInput", "countdownSeconds", "hoveredId"], outputs: ["edit", "delete", "cancelDelete", "hoverStart", "hoverEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i2.MatButton, i2.MatIconButton, i2$2.MatIcon, i2$6.MatMenuTrigger, i9.MatTable, i9.MatHeaderCellDef, i9.MatHeaderRowDef, i9.MatColumnDef, i9.MatCellDef, i9.MatRowDef, i9.MatHeaderCell, i9.MatCell, i9.MatHeaderRow, i9.MatRow, i8.MatTooltip, i9$1.CdkPortalOutlet, i2$3.NgIf, i2$3.NgTemplateOutlet, i2$3.AsyncPipe, i2$3.TitleCasePipe, Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe), import('./ngx-t-forms-mscoa-chart-toolbar.component-CF5DxLZG.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-D9zKeT7Z.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-DgdZwE72.mjs').then(m => m.MscoaTemporaryHintComponent)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", readonly: "readonly", touched: "touched", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", config: "config" }, outputs: { onContainerClick: "onContainerClick", segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, ngImport: i0, template: "<section \n  (click)=\"setAsTouched($event)\" \n  class=\"mscoa-chart__container\"\n  [class.mscoa-chart__container--touched]=\"touched\"\n  *ngIf=\"(viewData$ | async) as viewData\"\n  role=\"region\"\n  [attr.aria-label]=\"'MSCOA Account Chart'\"\n  [attr.aria-busy]=\"viewData.loading || viewData.validatingValue\">\n\n  @if (viewData.loading) {\n    <div class=\"mscoa-chart__loading-container\" role=\"status\" aria-live=\"polite\">\n      <mat-spinner [diameter]=\"40\"></mat-spinner>\n      <span class=\"sr-only\">Loading account chart data...</span>\n    </div>\n  } @else {\n    @defer (on viewport) {\n      <ng-container *ngIf=\"viewData.accountTreeKeys || viewData.cashAccountTreeKeys\">\n        <div class=\"mscoa-chart__table-container\">\n          @if (isDualAccountBasis) {\n            <div class=\"dual-basis-container\" role=\"group\" aria-label=\"Dual accounting basis tables\">\n              <div class=\"dual-basis-container__item\">\n                <ng-container \n                  *ngTemplateOutlet=\"selectionTable; \n                  context: {\n                    accountingBasis: ACCOUNTING_BASIS.ACCRUAL,\n                    canCollapse: true,\n                    viewData: viewData\n                  }\">\n                </ng-container>\n              </div>\n              \n              <div class=\"dual-basis-container__item\">\n                <ng-container \n                  *ngTemplateOutlet=\"selectionTable; \n                  context: {\n                    accountingBasis: ACCOUNTING_BASIS.CASH,\n                    canCollapse: true,\n                    viewData: viewData\n                  }\">\n                </ng-container>\n              </div>\n            </div>\n          } @else {\n            <ng-container \n              *ngTemplateOutlet=\"selectionTable; \n              context: {\n                accountingBasis: config?.accountingBasis,\n                canCollapse: false,\n                viewData: viewData\n              }\">\n            </ng-container>\n          }\n        </div>\n      </ng-container>\n\n      <ng-template \n        #selectionTable \n        let-accountingBasis=\"accountingBasis\" \n        let-canCollapse=\"canCollapse\"\n        let-viewData=\"viewData\">\n        \n        <div class=\"mscoa-chart-table\" role=\"group\" [attr.aria-label]=\"'Accounting basis: ' + (accountingBasis || 'Accrual')\">\n          <!-- Toolbar -->\n          <app-mscoa-chart-toolbar\n            [accountingBasis]=\"accountingBasis\"\n            [canCollapse]=\"canCollapse\"\n            [isExpanded]=\"getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\n            (toggleExpansion)=\"toggleDualBasisExpansion(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\">\n          </app-mscoa-chart-toolbar>\n\n          @if (shouldShowTable(isDualAccountBasis, getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL), accountingBasis)) {\n            <div class=\"account-selection-table-wrapper\">\n              <div\n                class=\"account-selection-table-container\"\n                [class.account-selection-table-container--accrual]=\"!accountingBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL\"\n                [class.account-selection-table-container--cash]=\"accountingBasis === ACCOUNTING_BASIS.CASH\"\n                role=\"table\"\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\">\n\n              <table \n                mat-table \n                [dataSource]=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashTableData : viewData.tableData\" \n                class=\"table\"\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\"\n                [attr.aria-describedby]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\n                role=\"table\">\n                <span [id]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\" class=\"sr-only\">\n                  Use arrow keys to navigate between cells. Press Enter or Space to select an account.\n                </span>\n                \n                @for (\n                  col of (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols); \n                  track trackByColumn($index, col); \n                  let i = $index\n                ) {\n                  <ng-container [matColumnDef]=\"col\" [sticky]=\"i === 0\">\n                    <!-- Header Cell -->\n                    <th \n                      mat-header-cell \n                      *matHeaderCellDef\n                      [class.table__header-cell--segment]=\"isSegmentColumn(i)\"\n                      [class.table__header-cell--regular]=\"!isSegmentColumn(i)\"\n                      [style.width.%]=\"getColumnWidthPercent(isSegmentColumn(i), (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols).length)\"\n                      [style.min-width.px]=\"isSegmentColumn(i) ? 150 : 200\"\n                      [attr.aria-sort]=\"i === 0 ? 'none' : null\"\n                      [attr.scope]=\"'col'\"\n                      [attr.aria-label]=\"getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) + ' column'\">\n                      {{ getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) | titlecase | unCamelCase }}\n                    </th>\n\n                    <!-- Data Cell -->\n                    <td \n                      mat-cell\n                      *matCellDef=\"let row; trackBy: trackByRow\"\n                      [class.table__cell--segment]=\"isSegmentColumn(i)\"\n                      [class.table__cell--regular]=\"!isSegmentColumn(i)\"\n                      [class.table__cell--active]=\"editSelection?.segment === row['segment'] && activeColumn === col\"\n                      [class.table__cell--business-error]=\"!isSegmentColumn(i) && getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                      [attr.aria-label]=\"'Cell for ' + row['segment'] + ' segment, ' + col + ' column'\"\n                      [attr.aria-selected]=\"!!row[col]\"\n                      [attr.aria-invalid]=\"!isSegmentColumn(i) && !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                      [attr.role]=\"'gridcell'\"\n                      [attr.tabindex]=\"isSegmentColumn(i) ? -1 : (row[col] ? 0 : -1)\">\n                      \n                      @if (isSegmentColumn(i)) {\n                        <!-- Segment Column -->\n                        <div class=\"segment-cell-content\">\n                          @if (editorMode && row.innerInput?.id) {\n                            <button \n                              mat-icon-button \n                              [matMenuTriggerData]=\"{innerInput: row.innerInput}\"\n                              [matMenuTriggerFor]=\"inputMenu\" \n                              [matTooltip]=\"'Options for: ' + row.innerInput.label\"\n                              [attr.aria-label]=\"'Options menu for ' + row.innerInput.label\"\n                              (click)=\"$event.stopPropagation()\">\n                              <mat-icon>more_vert</mat-icon>\n                            </button>\n                          }\n                          <span class=\"segment-cell-content__label\">{{ row['label'] }}</span>\n                        </div>\n                      } @else {\n                        <!-- Regular Column -->\n                        @if (row.innerInput?.id && formGroup && inputPortals[getPortalKey(row.innerInput.id)]) {\n                          <div class=\"portal-container\">\n                            <ng-template [cdkPortalOutlet]=\"inputPortals[getPortalKey(row.innerInput.id)]\"></ng-template>\n                          </div>\n                          } @else {\n                            @if (row[col]) {\n                            <!-- Account Selected -->\n                            @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment']); as cellError) {\n                              <div class=\"account-cell-wrapper\" \n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\n                                <button \n                                  [disabled]=\"row['singleSelect'] === true && col === COLUMNS.CREDIT\"\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                  color=\"primary\" \n                                  mat-button \n                                  class=\"cell-button cell-button--selected cell-button--business-error\"\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Business error: ' + cellError.message\"\n                                  [attr.aria-invalid]=\"true\"\n                                  [attr.aria-pressed]=\"true\"\n                                  [matTooltip]=\"cellError.message\">\n                                  <div class=\"content\">\n                                    <span \n                                      class=\"selected-acount-label selected-acount-label--tag selected-acount-label--business-error\"\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\n                                      {{ row[col] | unCamelCase }}\n                                      @if (shouldShowVatChip(row, col)) {\n                                        <span \n                                          class=\"vat-badge\"\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\n                                          VAT\n                                        </span>\n                                      }\n                                    </span>\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\n                                  </div>\n                                </button>\n                              </div>\n                            } @else {\n                              <div class=\"account-cell-wrapper\" \n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\n                                <button \n                                  [disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                  color=\"primary\" \n                                  mat-button \n                                  class=\"cell-button cell-button--selected\"\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Press Enter or Space to change'\"\n                                  [attr.aria-invalid]=\"false\"\n                                  [attr.aria-disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                  [attr.aria-pressed]=\"true\">\n                                  <div class=\"content\">\n                                    <span \n                                      class=\"selected-acount-label selected-acount-label--tag\"\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\n                                      {{ row[col] | unCamelCase }}\n                                      @if (shouldShowVatChip(row, col)) {\n                                        <span \n                                          class=\"vat-badge\"\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\n                                          VAT\n                                        </span>\n                                      }\n                                    </span>\n                                    @if (showValidationSuccessIndicators) {\n                                      <mat-icon class=\"validated-indicator\" aria-hidden=\"true\" [matTooltip]=\"'Validated'\">shield</mat-icon>\n                                    } @else {\n                                      <mat-icon class=\"success-indicator\" aria-hidden=\"true\">check_circle</mat-icon>\n                                    }\n                                  </div>\n                                </button>\n                              </div>\n                            }\n                          } @else {\n                            <!-- No Account Selected -->\n                            <div class=\"cell-button-wrapper\">\n                              <button \n                                [disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [color]=\"\"\n                                (click)=\"selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); $event.stopPropagation(); setAsTouched($event)\"\n                                (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                mat-button\n                                class=\"cell-button\"\n                                [class.cell-button--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-label]=\"shouldShowAutoSelectedLabel(row, col) ? 'Auto selected for ' + row['segment'] + ' segment, ' + col + ' column' : 'Select account for ' + row['segment'] + ' segment, ' + col + ' column'\"\n                                [attr.aria-disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-describedby]=\"getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ? 'hint-' + row['segment'] + '-' + col : null\"\n                                [attr.aria-invalid]=\"hasError(touched, inputConfig?.required || false, !!row[col]) || !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-required]=\"inputConfig?.required && !row[col]\"\n                                [matTooltip]=\"getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])?.message\">\n                                <div class=\"content\">\n                                  <span \n                                    class=\"selected-acount-label\"\n                                    [class.selected-acount-label--error]=\"hasError(touched, inputConfig?.required || false, !!row[col])\"\n                                    [class.selected-acount-label--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\">\n                                    {{ (shouldShowAutoSelectedLabel(row, col) ? 'auto selected' : 'Select account') | unCamelCase }}\n                                    @if (inputConfig?.required && !row[col]) {\n                                      <span class=\"required-indicator\" aria-label=\"Required field\">*</span>\n                                    }\n                                  </span>\n                                  @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])) {\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\n                                  } @else if (shouldShowDropdownIcon(row, col)) {\n                                    <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n                                  }\n                                </div>\n                              </button>\n                              @if (getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as hint) {\n                                <span \n                                  class=\"inline-hint\"\n                                  [id]=\"'hint-' + row['segment'] + '-' + col\"\n                                  role=\"tooltip\"\n                                  aria-live=\"polite\">\n                                  {{ hint }}\n                                </span>\n                              }\n                            </div>\n                          }\n                        }\n                      }\n                    </td>\n                  </ng-container>\n                }\n\n                <tr mat-header-row *matHeaderRowDef=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols); trackBy: trackByRow\"></tr>\n              </table>\n            </div>\n            </div>\n\n            <!-- Empty State -->\n            <ng-container *ngIf=\"(accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashAccountTreeKeys : viewData.accountTreeKeys).length === 0\">\n              <section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n                <mat-icon aria-hidden=\"true\">info</mat-icon>\n                <span>\n                  No account segments are currently configured.\n                  Please configure account segments to proceed.\n                </span>\n              </section>\n            </ng-container>\n\n            <!-- Success Messages (Temporary) -->\n            @if ((successMessage$ | async); as successMessages) {\n              @if (getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as msg) {\n                <app-mscoa-temporary-hint\n                  [message]=\"getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ?? ''\"\n                  [type]=\"'info'\"\n                  [duration]=\"6000\"\n                  [showDismiss]=\"true\">\n                </app-mscoa-temporary-hint>\n              }\n            }\n\n            <!-- Business Rule Errors (Temporary display, keeps error styling) -->\n            @if ((viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []).length > 0) {\n              <app-mscoa-error-display\n                [errors]=\"viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []\"\n                type=\"error\"\n                [context]=\"{ accountingBasis: accountingBasis || ACCOUNTING_BASIS.ACCRUAL }\"\n                [duration]=\"6000\"\n                [showDismiss]=\"true\">\n              </app-mscoa-error-display>\n            }\n\n            <!-- Temporary Contextual Hints -->\n            @if (temporaryHintMessage) {\n              <app-mscoa-temporary-hint\n                [message]=\"temporaryHintMessage\"\n                [type]=\"temporaryHintType\"\n                [duration]=\"6000\"\n                [showDismiss]=\"true\">\n              </app-mscoa-temporary-hint>\n            }\n\n            <!-- Validation Hints (Context-Aware) -->\n            @if (!touched && inputConfig?.required && !viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL]?.length && (!isDualAccountBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL || !accountingBasis)) {\n              <div class=\"validation-hints\" role=\"region\" aria-label=\"Validation guidance\">\n                <p class=\"validation-hints__title\">Guidance:</p>\n                <ul class=\"validation-hints__list\">\n                  <li>Account combinations are validated automatically. Select accounts that belong to compatible reporting categories.</li>\n                  <li>Required fields are marked with an asterisk (*). Complete all required selections to proceed.</li>\n                  <li>Some fields may be automatically populated based on your selections to ensure consistency.</li>\n                </ul>\n              </div>\n            }\n          }\n        </div>\n      </ng-template>\n    } @placeholder {\n      <div class=\"loading-placeholder\" role=\"status\" aria-live=\"polite\">\n        <p>Loading data...</p>\n      </div>\n    } @loading (minimum 100ms) {\n      <div class=\"loading-spinner-container\" role=\"status\" aria-live=\"polite\">\n        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"40\"></mat-progress-spinner>\n        <span class=\"sr-only\">Loading account chart...</span>\n      </div>\n    } @error {\n      <div class=\"error-state\" role=\"alert\" aria-live=\"assertive\">\n        <p>Error loading data. Please try again.</p>\n      </div>\n    }\n  }\n</section>\n\n<!-- Input Menu -->\n<mat-menu #inputMenu=\"matMenu\">\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\n    <app-mscoa-chart-input-menu\n      [innerInput]=\"innerInput\"\n      [countdownSeconds]=\"inputWillBeRemovedIn(innerInput.id)\"\n      [hoveredId]=\"hoveredInputId\"\n      (edit)=\"onInputMenuEdit($event)\"\n      (delete)=\"onInputMenuDelete($event)\"\n      (cancelDelete)=\"onInputMenuCancelDelete($event)\"\n      (hoverStart)=\"onInputMenuHoverStart($event)\"\n      (hoverEnd)=\"onInputMenuHoverEnd()\">\n    </app-mscoa-chart-input-menu>\n  </ng-template>\n</mat-menu>\n", styles: ["@charset \"UTF-8\";:host{--mscoa-chart-spacing-xs: 4px;--mscoa-chart-spacing-sm: 8px;--mscoa-chart-spacing-md: 16px;--mscoa-chart-spacing-lg: 24px;--mscoa-chart-spacing-xl: 32px;--mscoa-chart-border-radius: 4px;--mscoa-chart-transition: .2s ease;--mscoa-chart-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--mscoa-chart-font-size-base: 14px;--mscoa-chart-line-height: 1.5;display:block;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height)}.mscoa-chart__container{padding:0;transition:background-color var(--mscoa-chart-transition);width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.mscoa-chart__loading-container{padding:var(--mscoa-chart-spacing-lg);display:flex;align-items:center;justify-content:center}.mscoa-chart__table-container{position:relative;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;box-sizing:border-box}.dual-basis-container{display:flex;flex-direction:column;gap:var(--mscoa-chart-spacing-sm)}.dual-basis-container__item{flex:1}.single-base{gap:var(--mscoa-chart-spacing-sm);height:48px;font-size:.875em;font-weight:500;transition:background-color var(--mscoa-chart-transition)}.single-base--cash{background:var(--mat-sys-inverse-primary)!important}.account-selection-table-wrapper{position:relative;width:100%}.account-selection-table-container{border-radius:var(--mscoa-chart-border-radius);overflow-x:auto;overflow-y:visible;transition:border-color var(--mscoa-chart-transition);width:100%;max-width:100%;box-sizing:border-box;display:block}.account-selection-table-container--accrual{border:solid 1px var(--mat-sys-primary)}.account-selection-table-container--cash{border:solid 1px var(--mat-sys-inverse-primary)}.account-selection-table-container::-webkit-scrollbar{height:8px}.account-selection-table-container::-webkit-scrollbar-track{background:var(--mat-sys-surface-container-low, #f7f2fa);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb{background:var(--mat-sys-outline-variant, #cac4d0);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-outline, #79747e)}.table{width:100%;table-layout:fixed;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);border-collapse:separate;border-spacing:0;display:table;box-sizing:border-box;max-width:100%}.table__header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.table__header-cell--segment{text-align:right;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px}.table__header-cell--regular{padding-left:var(--mscoa-chart-spacing-lg);min-width:200px;max-width:none}.table__cell{overflow:visible;box-sizing:border-box;position:relative;vertical-align:top}.table__cell--segment{background:var(--mat-list-active-indicator-color, var(--mat-sys-secondary-container));text-align:right;font-weight:500;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:middle}.table__cell--regular{padding:0;min-width:200px;max-width:none;word-wrap:break-word;vertical-align:top;overflow:visible}.table__cell--active{background-color:var(--mat-sys-primary-container);transition:background-color var(--mscoa-chart-transition)}mat-header-cell{background:var(--mat-sys-surface-container);font-weight:600;font-size:var(--mscoa-chart-font-size-base);padding:var(--mscoa-chart-spacing-md)}.mscoa-chart-table{display:flex;flex-direction:column}.portal-container{width:100%}.account-cell-wrapper{position:relative;width:100%;max-width:100%;overflow:visible;z-index:1;min-height:38px;display:flex;flex-direction:column;gap:4px}.cell-button-wrapper{position:relative;width:100%;max-width:100%;overflow:hidden}.cell-button{height:fit-content;min-height:38px;width:100%;max-width:100%;transition:all var(--mscoa-chart-transition);font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);position:relative;overflow:visible;padding:8px}.cell-button:hover:not(:disabled){background-color:var(--mat-sys-surface-container);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.cell-button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;z-index:1}.cell-button:disabled{opacity:.6;cursor:not-allowed}.cell-button--selected{background-color:transparent}.cell-button--selected:hover:not(:disabled){background-color:var(--mat-sys-surface-container-low, #f7f2fa);border-color:var(--mat-sys-primary, #1976d2)}.cell-button.cell-button--selected{animation:fadeInSuccess var(--mscoa-chart-transition)}.cell-button.cell-button--business-error{border-color:var(--mat-sys-error, #ba1a1a)}.cell-button.cell-button--business-error .selected-acount-label--business-error{color:var(--mat-sys-error);border-color:var(--mat-sys-error)}.success-indicator{color:var(--mat-sys-success, #4caf50);font-size:18px;width:18px;right:-8px;top:-4px;background:#fff;border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);animation:scaleIn var(--mscoa-chart-transition);flex-shrink:0}.validated-indicator{color:var(--mat-sys-primary, #1976d2);font-size:18px;width:18px;height:18px;right:-8px;top:-4px;background:#fff;border-radius:16px;position:absolute;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0;animation:validatedShieldIn .3s ease-out forwards}.business-error-indicator{color:var(--mat-sys-error, #ba1a1a);font-size:18px;width:18px;right:-8px;top:-4px;background:#fff;border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0}.required-indicator{color:var(--mat-sys-error, #ba1a1a);font-weight:600;margin-left:2px}.inline-hint{display:block;font-size:12px;color:var(--mat-sys-on-surface-variant, #49454f);margin-top:var(--mscoa-chart-spacing-xs);padding:var(--mscoa-chart-spacing-xs) var(--mscoa-chart-spacing-sm);background-color:var(--mat-sys-surface-container-low, #f7f2fa);border-radius:var(--mscoa-chart-border-radius);line-height:1.4;max-width:100%;word-wrap:break-word}.content{padding:0;display:flex;gap:6px;width:100%;max-width:100%;overflow:visible;min-width:0;flex-wrap:wrap;align-items:center}.selected-acount-label{text-align:left;flex:1;font-weight:400;transition:color var(--mscoa-chart-transition)}.selected-acount-label--error,.selected-acount-label--business-error{color:var(--mat-sys-error);font-weight:500}.selected-acount-label--tag{display:inline-block;padding:4px 10px;background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #001d35);border-radius:16px;font-size:13px;font-weight:500;line-height:1.5;border:1px solid var(--mat-sys-primary, #1976d2);box-shadow:0 1px 2px #0000001a;transition:all var(--mscoa-chart-transition);width:100%;max-width:100%;overflow:visible;white-space:normal;word-wrap:break-word;word-break:break-word;cursor:pointer;box-sizing:border-box;position:relative}.selected-acount-label--tag:hover{background-color:var(--mat-sys-primary-container-high, #d0e4f7);box-shadow:0 2px 4px #1976d226}.segment-cell-content{display:flex;align-items:center;justify-content:flex-end;font-weight:500}.vat-badge{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:2px 6px;border-radius:8px;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background-color:var(--mat-sys-tertiary-container, #e0ffee);color:var(--mat-sys-on-tertiary-container, #7c5000);border:1px solid var(--mat-sys-outline-variant, #cac4d0);box-shadow:none;transition:all var(--mscoa-chart-transition);flex-shrink:0;align-self:flex-start;margin-top:2px;line-height:1}.vat-badge:hover{background-color:var(--mat-sys-tertiary-container-high, #ffe0b2);border-color:var(--mat-sys-tertiary, #f57c00)}.vat-chip-container{padding-left:var(--mscoa-chart-spacing-sm);padding-right:var(--mscoa-chart-spacing-sm);padding-bottom:var(--mscoa-chart-spacing-xs);margin-top:var(--mscoa-chart-spacing-xs)}.vat-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600;transition:all var(--mscoa-chart-transition);box-shadow:0 1px 3px #0000001f}.vat-chip--applicable{background:linear-gradient(135deg,var(--mat-sys-tertiary, #f57c00) 0%,var(--mat-sys-tertiary-container, #ff9800) 100%);color:var(--mat-sys-on-tertiary, #ffffff);border:1px solid var(--mat-sys-tertiary, #f57c00)}.vat-chip--applicable:hover{box-shadow:0 2px 6px #f57c004d;transform:translateY(-1px)}.vat-chip__icon{font-size:14px;width:14px;height:14px;opacity:.9}.vat-chip__text{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}.info-box{display:flex;align-items:center;gap:var(--mscoa-chart-spacing-sm);padding:12px;background:azure;border-radius:var(--mscoa-chart-border-radius);margin-bottom:var(--mscoa-chart-spacing-md)}.info-icon{min-width:38px;margin:auto;margin-top:var(--mscoa-chart-spacing-sm)}.empty-state{padding:var(--mscoa-chart-spacing-md);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--mscoa-chart-spacing-sm);color:var(--mat-sys-on-surface-variant)}.validation-hints{margin-top:var(--mscoa-chart-spacing-md);padding:var(--mscoa-chart-spacing-md);background-color:var(--mat-sys-surface-container-low, #f7f2fa);border-radius:var(--mscoa-chart-border-radius);border-left:4px solid var(--mat-sys-primary, #1976d2);box-shadow:0 1px 3px #00000014}.validation-hints__title{font-weight:600;font-size:var(--mscoa-chart-font-size-base);margin:0 0 var(--mscoa-chart-spacing-sm) 0;color:var(--mat-sys-on-surface, #1c1b16);display:flex;align-items:center;gap:var(--mscoa-chart-spacing-xs)}.validation-hints__title:before{content:\"\\1f4a1\";font-size:16px}.validation-hints__list{margin:0;padding-left:var(--mscoa-chart-spacing-md);color:var(--mat-sys-on-surface-variant, #49454f);font-size:13px;line-height:1.6}.validation-hints__list li{margin-bottom:var(--mscoa-chart-spacing-sm);position:relative}.validation-hints__list li::marker{color:var(--mat-sys-primary, #1976d2)}.validation-hints__list li:last-child{margin-bottom:0}mat-error{font-size:.75em;margin-top:var(--mscoa-chart-spacing-xs)}mat-error ul{margin:0;padding-left:var(--mscoa-chart-spacing-md)}mat-error li{margin-bottom:var(--mscoa-chart-spacing-xs)}.loading-placeholder{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-on-surface-variant)}.loading-spinner-container{display:flex;justify-content:center;align-items:center;height:256px}.error-state{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-error)}mat-panel-description{font-size:.875em;line-height:1.4}.main-expanse-content{background:var(--mat-sys-surface-container)!important}@media (max-width: 768px){.dual-basis-container{gap:var(--mscoa-chart-spacing-md)}.cell-button{min-height:44px;font-size:15px;max-width:300px}.content{padding:var(--mscoa-chart-spacing-md)}.validation-hints{font-size:13px;padding:var(--mscoa-chart-spacing-sm)}.inline-hint{font-size:11px}}.cell-button:focus-visible,button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;outline-style:solid}@media (prefers-contrast: high){.cell-button{border:2px solid currentColor}.cell-button:focus-visible{outline-width:4px}.selected-acount-label--error{font-weight:700}}@media (prefers-reduced-motion: reduce){.cell-button,.success-indicator,.fade-in,.validated-indicator{animation:none;transition:none}}.table__cell--active{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}@media (prefers-contrast: high){.table__cell--active{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}}.table__cell--business-error{background-color:var(--mat-sys-error-container, #ffdad6);border-left:3px solid var(--mat-sys-error, #ba1a1a)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInSuccess{0%{background-color:transparent}50%{background-color:var(--mat-sys-success-container, #e8f5e9)}to{background-color:var(--mat-sys-primary-container)}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes validatedShieldIn{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.fade-in{animation:fadeIn var(--mscoa-chart-transition)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skeleton-loader{background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-high) 50%,var(--mat-sys-surface-container) 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite;border-radius:var(--mscoa-chart-border-radius)}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-row{height:48px;margin-bottom:var(--mscoa-chart-spacing-xs)}.skeleton-cell{height:100%;margin-right:var(--mscoa-chart-spacing-md)}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i2$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PortalModule }, { kind: "component", type: MscoaChartInputMenuComponent, selector: "app-mscoa-chart-input-menu", inputs: ["innerInput", "countdownSeconds", "hoveredId"], outputs: ["edit", "delete", "cancelDelete", "hoverStart", "hoverEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i2.MatButton, i2.MatIconButton, i2$2.MatIcon, i2$4.MatMenuTrigger, i9.MatTable, i9.MatHeaderCellDef, i9.MatHeaderRowDef, i9.MatColumnDef, i9.MatCellDef, i9.MatRowDef, i9.MatHeaderCell, i9.MatCell, i9.MatHeaderRow, i9.MatRow, i8.MatTooltip, i9$1.CdkPortalOutlet, i2$3.NgIf, i2$3.NgTemplateOutlet, i2$3.AsyncPipe, i2$3.TitleCasePipe, Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe), import('./ngx-t-forms-mscoa-chart-toolbar.component-D8a9-6lt.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-DwbyXd_D.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-CBRfWvfD.mjs').then(m => m.MscoaTemporaryHintComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", ngImport: i0, type: MscoaChartComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe), import('./ngx-t-forms-mscoa-chart-toolbar.component-CF5DxLZG.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-D9zKeT7Z.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-DgdZwE72.mjs').then(m => m.MscoaTemporaryHintComponent)], resolveMetadata: (ConvertCamelCasePipe, MscoaChartToolbarComponent, MscoaErrorDisplayComponent, MscoaTemporaryHintComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", ngImport: i0, type: MscoaChartComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe), import('./ngx-t-forms-mscoa-chart-toolbar.component-D8a9-6lt.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-DwbyXd_D.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-CBRfWvfD.mjs').then(m => m.MscoaTemporaryHintComponent)], resolveMetadata: (ConvertCamelCasePipe, MscoaChartToolbarComponent, MscoaErrorDisplayComponent, MscoaTemporaryHintComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'app-mscoa-chart', standalone: true, imports: [
                             MatModulesModule,
@@ -11727,7 +11753,7 @@ class SignaturePadInputComponent extends BaseCustomInput {
                 provide: MatFormFieldControl,
                 useExisting: SignaturePadInputComponent
             }
-        ], viewQueries: [{ propertyName: "signatureElement", first: true, predicate: ["signature"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [style.opacity]=\"canApplySignature?'0.1':'1'\" #signature class=\"signature-container\">\r\n  \r\n   \r\n</div>\r\n@if (canSaveSignature) {\r\n\r\n<mat-toolbar>\r\n\r\n    <button style=\"    width: 100%;\" \r\n    matTooltip=\"You can save this signature for quick use in future documents\" \r\n    mat-flat-button\r\n    color=\"accent\"\r\n        (click)=\"saveUserSignature()\">\r\n        <mat-icon>save</mat-icon>\r\n        Save for future use\r\n    </button>\r\n</mat-toolbar>\r\n}\r\n@if (canApplySignature && !inputConfig.disabled && !inputConfig.readonly ) {\r\n\r\n    <mat-card appearance=\"outlined\" class=\"signature-card\">\r\n      <mat-card-header>\r\n        <img \r\n            class=\"userAvatar\"\r\n          mat-card-avatar \r\n          [src]=\"getUserUrl()\" \r\n          [attr.aria-label]=\"'Profile picture of ' + userStoredSignature?.userName\"\r\n          >\r\n        \r\n        \r\n        <mat-card-title class=\"existingTitle\">Found an existing signature</mat-card-title>\r\n        \r\n        <mat-card-subtitle class=\"signature-metadata\">\r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">person</mat-icon>\r\n            <span class=\"metadata-text\">{{userStoredSignature?.userName}}</span>\r\n          </span>\r\n          \r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">calendar_month</mat-icon>\r\n            <span class=\"metadata-text\">{{userStoredSignature?.signatureDate | date: 'mediumDate'}}</span>\r\n          </span>\r\n        </mat-card-subtitle>\r\n      </mat-card-header>\r\n  \r\n      <mat-card-content>\r\n        <p class=\"signature-description\">\r\n          You can apply your saved signature or clear to draw a new one\r\n        </p>\r\n      </mat-card-content>\r\n  \r\n      \r\n      <mat-card-actions align=\"end\">\r\n        <button \r\n          mat-flat-button\r\n          color=\"primary\" \r\n          class=\"apply-signature-btn\"\r\n          (click)=\"saveSignature()\"\r\n          [matTooltip]=\"'Apply your saved signature from ' + (userStoredSignature?.signatureDate | date: 'mediumDate')\">\r\n          <mat-icon>done</mat-icon>\r\n          <span>Apply Existing Signature</span>\r\n        </button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n  }\r\n<mat-toolbar style=\"max-width: 100%; overflow:auto\">\r\n    <span>\r\n        <div style=\"font-size:14px;line-height:normal;font-weight:500\">\r\n            Signature:\r\n        </div>\r\n        <div style=\"font-size:12px;font-weight:400;line-height:1.5\">\r\n            Secured and Encrypted.\r\n        </div>\r\n\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n\r\n@if(!inputConfig.readonly){\r\n  <button mat-stroked-button color=\"warn\" (click)=\"clearSignature()\">\r\n    Clear\r\n\r\n</button>\r\n}\r\n\r\n</mat-toolbar>\r\n@if(loading){\r\n<div class=\"signature-pad-container\">\r\n    <mat-spinner diameter=\"50\">\r\n    </mat-spinner>\r\n    <span>\r\n        {{loading}}\r\n    </span>\r\n\r\n</div>\r\n}", styles: [".signature-container{border:solid 1px var(--mat-divider-color, var(--mat-app-outline));canvas{width:100%;height:200px}.controls{padding:10px;text-align:center}}.signature-pad-container{position:absolute;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background:#3f51b51a;gap:12px;top:0}.userAvatar{height:50px;width:50px}.existingTitle{font-size:.875em}.metadata-item{display:flex;align-items:center;gap:8px}.metadata-item mat-icon{font-size:.75em;height:12px;width:12px}.metadata-item .metadata-text,.signature-description{font-size:.75em}.apply-signature-btn{width:100%}.signature-metadata{margin-top:4px}.canApply{position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "signatureElement", first: true, predicate: ["signature"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [style.opacity]=\"canApplySignature?'0.1':'1'\" #signature class=\"signature-container\">\r\n  \r\n   \r\n</div>\r\n@if (canSaveSignature) {\r\n\r\n<mat-toolbar>\r\n\r\n    <button style=\"    width: 100%;\" \r\n    matTooltip=\"You can save this signature for quick use in future documents\" \r\n    mat-flat-button\r\n    color=\"accent\"\r\n        (click)=\"saveUserSignature()\">\r\n        <mat-icon>save</mat-icon>\r\n        Save for future use\r\n    </button>\r\n</mat-toolbar>\r\n}\r\n@if (canApplySignature && !inputConfig.disabled && !inputConfig.readonly ) {\r\n\r\n    <mat-card appearance=\"outlined\" class=\"signature-card\">\r\n      <mat-card-header>\r\n        <img \r\n            class=\"userAvatar\"\r\n          mat-card-avatar \r\n          [src]=\"getUserUrl()\" \r\n          [attr.aria-label]=\"'Profile picture of ' + userStoredSignature?.userName\"\r\n          >\r\n        \r\n        \r\n        <mat-card-title class=\"existingTitle\">Found an existing signature</mat-card-title>\r\n        \r\n        <mat-card-subtitle class=\"signature-metadata\">\r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">person</mat-icon>\r\n            <span class=\"metadata-text\">{{userStoredSignature?.userName}}</span>\r\n          </span>\r\n          \r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">calendar_month</mat-icon>\r\n            <span class=\"metadata-text\">{{userStoredSignature?.signatureDate | date: 'mediumDate'}}</span>\r\n          </span>\r\n        </mat-card-subtitle>\r\n      </mat-card-header>\r\n  \r\n      <mat-card-content>\r\n        <p class=\"signature-description\">\r\n          You can apply your saved signature or clear to draw a new one\r\n        </p>\r\n      </mat-card-content>\r\n  \r\n      \r\n      <mat-card-actions align=\"end\">\r\n        <button \r\n          mat-flat-button\r\n          color=\"primary\" \r\n          class=\"apply-signature-btn\"\r\n          (click)=\"saveSignature()\"\r\n          [matTooltip]=\"'Apply your saved signature from ' + (userStoredSignature?.signatureDate | date: 'mediumDate')\">\r\n          <mat-icon>done</mat-icon>\r\n          <span>Apply Existing Signature</span>\r\n        </button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n  }\r\n<mat-toolbar style=\"max-width: 100%; overflow:auto\">\r\n    <span>\r\n        <div style=\"font-size:14px;line-height:normal;font-weight:500\">\r\n            Signature:\r\n        </div>\r\n        <div style=\"font-size:12px;font-weight:400;line-height:1.5\">\r\n            Secured and Encrypted.\r\n        </div>\r\n\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n\r\n@if(!inputConfig.readonly){\r\n  <button mat-stroked-button color=\"warn\" (click)=\"clearSignature()\">\r\n    Clear\r\n\r\n</button>\r\n}\r\n\r\n</mat-toolbar>\r\n@if(loading){\r\n<div class=\"signature-pad-container\">\r\n    <mat-spinner diameter=\"50\">\r\n    </mat-spinner>\r\n    <span>\r\n        {{loading}}\r\n    </span>\r\n\r\n</div>\r\n}", styles: [".signature-container{border:solid 1px var(--mat-divider-color, var(--mat-app-outline));canvas{width:100%;height:200px}.controls{padding:10px;text-align:center}}.signature-pad-container{position:absolute;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background:#3f51b51a;gap:12px;top:0}.userAvatar{height:50px;width:50px}.existingTitle{font-size:.875em}.metadata-item{display:flex;align-items:center;gap:8px}.metadata-item mat-icon{font-size:.75em;height:12px;width:12px}.metadata-item .metadata-text,.signature-description{font-size:.75em}.apply-signature-btn{width:100%}.signature-metadata{margin-top:4px}.canApply{position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$3.DatePipe, name: "date" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SignaturePadInputComponent, decorators: [{
             type: Component,
@@ -11810,7 +11836,7 @@ class AutoCompletReactiveInputComponent extends BaseCustomInput {
         this.valueSubject.next($event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoCompletReactiveInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AutoCompletReactiveInputComponent, isStandalone: true, selector: "lib-auto-complet-reactive-input", inputs: { auto: "auto", inputConfig: "inputConfig" }, host: { properties: { "lib-auto-complet-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: AutoCompletReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<input [readonly]=\"this.inputConfig?.readonly\" [pattern]=\"this.inputConfig?.pattern || ''\"\r\n    [required]=\"!!this.inputConfig?.required\" [attr.maxlength]=\"this.inputConfig?.maxLength\"\r\n     [attr.minlength]=\"this.inputConfig?.minLength\"\r\n    [type]=\"this.inputConfig?.type||'text'\" \r\n        (input)=\"onInputChange($event)\"\r\n     [value]=\"value\"\r\n\r\n    [min]=\"this.inputConfig?.min\" [max]=\"this.inputConfig?.max\" autocomplete=\"on\"\r\n    [matAutocomplete]=\"auto\"\r\n    matInput />", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i3$1.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: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AutoCompletReactiveInputComponent, isStandalone: true, selector: "lib-auto-complet-reactive-input", inputs: { auto: "auto", inputConfig: "inputConfig" }, host: { properties: { "lib-auto-complet-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: AutoCompletReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<input [readonly]=\"this.inputConfig?.readonly\" [pattern]=\"this.inputConfig?.pattern || ''\"\r\n    [required]=\"!!this.inputConfig?.required\" [attr.maxlength]=\"this.inputConfig?.maxLength\"\r\n     [attr.minlength]=\"this.inputConfig?.minLength\"\r\n    [type]=\"this.inputConfig?.type||'text'\" \r\n        (input)=\"onInputChange($event)\"\r\n     [value]=\"value\"\r\n\r\n    [min]=\"this.inputConfig?.min\" [max]=\"this.inputConfig?.max\" autocomplete=\"on\"\r\n    [matAutocomplete]=\"auto\"\r\n    matInput />", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i13.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: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoCompletReactiveInputComponent, decorators: [{
             type: Component,
@@ -11839,7 +11865,7 @@ class AutoCompleteInputElementComponent {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoCompleteInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AutoCompleteInputElementComponent, isStandalone: true, selector: "lib-auto-complete-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", options: "options" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n<form [formGroup]=\"formGroup\">\r\n\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n          {{this.inputConfig.label }}  \r\n          <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <lib-auto-complet-reactive-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n        [auto]=\"auto\"\r\n    ></lib-auto-complet-reactive-input>\r\n \r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @for (option of options ; track option.id) {\r\n        <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n      }\r\n      \r\n    </mat-autocomplete>\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" class=\"inputHint\">\r\n        {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n      </mat-hint>\r\n      }\r\n  \r\n      @if (!!errorMessage) {\r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n      }\r\n      <!-- Prefix Icon -->\r\n      <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n  \r\n      <!-- Suffix Icon or Password Visibility Toggle -->\r\n      <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n        <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n     \r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n  \r\n    \r\n    \r\n    </mat-form-field>\r\n</form>\r\n\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$4.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$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AutoCompletReactiveInputComponent, selector: "lib-auto-complet-reactive-input", inputs: ["auto", "inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AutoCompleteInputElementComponent, isStandalone: true, selector: "lib-auto-complete-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", options: "options" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n<form [formGroup]=\"formGroup\">\r\n\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n          {{this.inputConfig.label }}  \r\n          <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <lib-auto-complet-reactive-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n        [auto]=\"auto\"\r\n    ></lib-auto-complet-reactive-input>\r\n \r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @for (option of options ; track option.id) {\r\n        <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n      }\r\n      \r\n    </mat-autocomplete>\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" class=\"inputHint\">\r\n        {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n      </mat-hint>\r\n      }\r\n  \r\n      @if (!!errorMessage) {\r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n      }\r\n      <!-- Prefix Icon -->\r\n      <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n  \r\n      <!-- Suffix Icon or Password Visibility Toggle -->\r\n      <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n        <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n     \r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n  \r\n    \r\n    \r\n    </mat-form-field>\r\n</form>\r\n\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$6.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$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AutoCompletReactiveInputComponent, selector: "lib-auto-complet-reactive-input", inputs: ["auto", "inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoCompleteInputElementComponent, decorators: [{
             type: Component,
@@ -11984,7 +12010,7 @@ class SelectInputComponent extends BaseCustomInput {
         return this.ngControl?.control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectInputComponent, isStandalone: true, selector: "lib-select-input", inputs: { inputConfig: "inputConfig" }, host: { properties: { "lib-select-input.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: SelectInputComponent }], usesInheritance: true, ngImport: i0, template: "@switch ( inputConfig.optionSelectType) {\r\n@case (optionSelectTypes.ChipSelect) {\r\n<mat-chip-listbox [multiple]=\"!!inputConfig.allowMultipleSelection\" [value]=\"value\" [disabled]=\"disabled\"\r\n  (change)=\"onSelectionChange($event)\" aria-l abel=\"Chip select options\">\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-chip-option [value]=\"option.value\">{{option.label}}</mat-chip-option>\r\n  }\r\n</mat-chip-listbox>\r\n}\r\n@case (optionSelectTypes.RadioButton) {\r\n@if(!!inputConfig.allowMultipleSelection){\r\n@for (option of getSelectOptions(); track option.value) {\r\n<mat-checkbox\r\n[value]=\"option.value\"\r\n[checked]=\"isSelected(option.value)\"\r\n(change)=\"checkBoxChanged($event,option.value)\" class=\"example-margin\">\r\n  {{option.label }}\r\n</mat-checkbox>\r\n}\r\n}@else {\r\n<mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group\"\r\n  (change)=\"onSelectionChange($event)\" [value]=\"value\">\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">{{option.label}}</mat-radio-button>\r\n  }\r\n</mat-radio-group>\r\n}\r\n\r\n}\r\n@default {\r\n\r\n<mat-select [multiple]=\"!!inputConfig.allowMultipleSelection\" #sele (selectionChange)=\"onSelectionChange($event)\"\r\n  [value]=\"value\">\r\n\r\n\r\n\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-option [value]=\"option.value\" [disabled]=\"this.inputConfig?.readonly\">\r\n    @switch (this.inputConfig.matOptions?.optionType) {\r\n    @case ('user') {\r\n    <mat-list-item style=\"padding: 0px;\">\r\n      <img matListItemAvatar [src]=\"getAvatar(option.username)\" />\r\n      <div matListItemTitle>{{ option.username | titlecase }}</div>\r\n      <div matListItemLine> {{ option.email }}</div>\r\n    </mat-list-item>\r\n\r\n    }\r\n    @default {\r\n    {{ option.label }}\r\n    }\r\n    }\r\n\r\n  </mat-option>\r\n  }\r\n\r\n</mat-select>\r\n\r\n}\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i7$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i2$5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectInputComponent, isStandalone: true, selector: "lib-select-input", inputs: { inputConfig: "inputConfig" }, host: { properties: { "lib-select-input.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: SelectInputComponent }], usesInheritance: true, ngImport: i0, template: "@switch ( inputConfig.optionSelectType) {\r\n@case (optionSelectTypes.ChipSelect) {\r\n<mat-chip-listbox [multiple]=\"!!inputConfig.allowMultipleSelection\" [value]=\"value\" [disabled]=\"disabled\"\r\n  (change)=\"onSelectionChange($event)\" aria-l abel=\"Chip select options\">\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-chip-option [value]=\"option.value\">{{option.label}}</mat-chip-option>\r\n  }\r\n</mat-chip-listbox>\r\n}\r\n@case (optionSelectTypes.RadioButton) {\r\n@if(!!inputConfig.allowMultipleSelection){\r\n@for (option of getSelectOptions(); track option.value) {\r\n<mat-checkbox\r\n[value]=\"option.value\"\r\n[checked]=\"isSelected(option.value)\"\r\n(change)=\"checkBoxChanged($event,option.value)\" class=\"example-margin\">\r\n  {{option.label }}\r\n</mat-checkbox>\r\n}\r\n}@else {\r\n<mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group\"\r\n  (change)=\"onSelectionChange($event)\" [value]=\"value\">\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">{{option.label}}</mat-radio-button>\r\n  }\r\n</mat-radio-group>\r\n}\r\n\r\n}\r\n@default {\r\n\r\n<mat-select [multiple]=\"!!inputConfig.allowMultipleSelection\" #sele (selectionChange)=\"onSelectionChange($event)\"\r\n  [value]=\"value\">\r\n\r\n\r\n\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-option [value]=\"option.value\" [disabled]=\"this.inputConfig?.readonly\">\r\n    @switch (this.inputConfig.matOptions?.optionType) {\r\n    @case ('user') {\r\n    <mat-list-item style=\"padding: 0px;\">\r\n      <img matListItemAvatar [src]=\"getAvatar(option.username)\" />\r\n      <div matListItemTitle>{{ option.username | titlecase }}</div>\r\n      <div matListItemLine> {{ option.email }}</div>\r\n    </mat-list-item>\r\n\r\n    }\r\n    @default {\r\n    {{ option.label }}\r\n    }\r\n    }\r\n\r\n  </mat-option>\r\n  }\r\n\r\n</mat-select>\r\n\r\n}\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i7.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i7.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i7.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i2$5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectInputComponent, decorators: [{
             type: Component,
@@ -12067,7 +12093,7 @@ class TextAreaReactiveInputComponent extends BaseCustomInput {
         this.valueSubject.next($event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextAreaReactiveInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TextAreaReactiveInputComponent, isStandalone: true, selector: "lib-text-area-reactive-input", inputs: { auto: "auto", inputConfig: "inputConfig" }, host: { properties: { "lib-text-area-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<textarea \r\n    [readonly]=\"this.inputConfig?.readonly\"\r\n      [required]=\"inputConfig?.required\" \r\n      [attr.maxlength]=\"inputConfig?.maxLength\" [attr.minlength]=\"inputConfig?.minLength\"\r\n      [rows]=\"inputConfig?.rows\" [spellcheck]=\"inputConfig?.spellcheck\"\r\n      [value]=\"value\"\r\n      [autocapitalize]=\"inputConfig?.autocapitalize\" [autocomplete]=\"inputConfig?.autocomplete\"\r\n      (input)=\"onInputChange($event)\" \r\n      [placeholder]=\"inputConfig?.placeholder||''\" [wrap]=\"inputConfig?.wrap\" matInput></textarea>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$1.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: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TextAreaReactiveInputComponent, isStandalone: true, selector: "lib-text-area-reactive-input", inputs: { auto: "auto", inputConfig: "inputConfig" }, host: { properties: { "lib-text-area-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<textarea \r\n    [readonly]=\"this.inputConfig?.readonly\"\r\n      [required]=\"inputConfig?.required\" \r\n      [attr.maxlength]=\"inputConfig?.maxLength\" [attr.minlength]=\"inputConfig?.minLength\"\r\n      [rows]=\"inputConfig?.rows\" [spellcheck]=\"inputConfig?.spellcheck\"\r\n      [value]=\"value\"\r\n      [autocapitalize]=\"inputConfig?.autocapitalize\" [autocomplete]=\"inputConfig?.autocomplete\"\r\n      (input)=\"onInputChange($event)\" \r\n      [placeholder]=\"inputConfig?.placeholder||''\" [wrap]=\"inputConfig?.wrap\" matInput></textarea>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i13.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: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextAreaReactiveInputComponent, decorators: [{
             type: Component,
@@ -12221,7 +12247,7 @@ class DateRangePickerInputElementComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DateRangePickerInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DateRangePickerInputElementComponent, isStandalone: true, selector: "lib-date-range-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<!-- <mat-form-field [appearance]=\"this.inputConfig.appearance || 'fill'\" floatLabel=\"auto\">\r\n  <mat-label></mat-label>\r\n  @if(inputConfig.startDateControl && inputConfig.endDateControl) {\r\n    <ng-container>\r\n      <mat-date-range-input [formGroup]=\"formGroup\" [rangePicker]=\"picker\">\r\n        <input matStartDate [formControlName]=\"inputConfig.startDateControl\" placeholder=\"Start date\">\r\n        <input matEndDate [formControlName]=\"inputConfig.endDateControl\" placeholder=\"End date\">\r\n      </mat-date-range-input>\r\n      <mat-hint>{{inputConfig.hintLabel}}</mat-hint>\r\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #picker></mat-date-range-picker>\r\n\r\n      @if (formGroup.controls[inputConfig.startDateControl]?.hasError('matStartDateInvalid')) {\r\n        <mat-error>Invalid start date</mat-error>\r\n      }\r\n      @if (formGroup.controls[inputConfig.endDateControl]?.hasError('matEndDateInvalid')) {\r\n        <mat-error>Invalid end date</mat-error>\r\n      }\r\n      \r\n      @if(!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n      }\r\n    </ng-container>\r\n  }\r\n</mat-form-field> -->\r\n<form [formGroup]=\"formGroup\">\r\n\r\n\r\n<mat-form-field  [appearance]=\"this.inputConfig.appearance || 'fill'\"   subscriptSizing=\"dynamic\">\r\n  <mat-label>{{inputConfig.label}}  <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status></mat-label>\r\n  <lib-date-range-picker-reactive-input\r\n  [inputConfig]=\"this.inputConfig\"\r\n  [required]=\"this.inputConfig.required\"\r\n  [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n  ></lib-date-range-picker-reactive-input>\r\n\r\n  <mat-date-range-input       [required]=\"inputConfig.required\"   [formGroup]=\"formGroup\"  [rangePicker]=\"picker\">\r\n    @if (inputConfig.startDateControl) {\r\n      <input matStartDate \r\n      [formControlName]=\"inputConfig.id+'.'+inputConfig.startDateControl\"\r\n      [min]=\"inputConfig.startMinDate\"\r\n      [max]=\"inputConfig.startMaxDate\"\r\n      [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.startDateControl]?.value\"\r\n      (dateChange)=\"dateChanged($event, inputConfig.startDateControl)\"\r\n      placeholder=\"Start date\">\r\n    }\r\n    @if (inputConfig.endDateControl) {\r\n      <input matEndDate \r\n      [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n      [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.endDateControl]?.value\"\r\n      placeholder=\"End date\"\r\n      [min]=\"inputConfig.endMinDate\" \r\n      [max]=\"inputConfig.endMaxDate\"\r\n      (dateChange)=\"dateChanged($event, inputConfig.endDateControl)\"\r\n      >\r\n    }\r\n  </mat-date-range-input>\r\n\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker   #picker >\r\n    <mat-datepicker-actions>\r\n      <button mat-button matDatepickerCancel>Cancel</button>\r\n      <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n    </mat-datepicker-actions>\r\n  </mat-date-range-picker>\r\n\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n    <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" class=\"inputHint\">\r\n      {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n    </mat-hint>\r\n    }\r\n  \r\n    @if (!!errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n    }\r\n    <!-- Prefix Icon -->\r\n    <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n    <!-- Suffix Icon or Password Visibility Toggle -->\r\n    <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n      <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n        }}</mat-icon>\r\n\r\n    </ng-container>\r\n    <!-- Prefix & Suffix Text -->\r\n    <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n    <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n      }}</span>\r\n    <!-- Character Count Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" >\r\n      {{ (formGroup.controls[inputConfig.id]?.value.length || 0) + '/' + inputConfig.maxLength\r\n      }}\r\n    </mat-hint>\r\n\r\n</mat-form-field>\r\n\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3$3.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$3.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: DateRangePickerReactiveInputComponent, selector: "lib-date-range-picker-reactive-input", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DateRangePickerInputElementComponent, isStandalone: true, selector: "lib-date-range-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<!-- <mat-form-field [appearance]=\"this.inputConfig.appearance || 'fill'\" floatLabel=\"auto\">\r\n  <mat-label></mat-label>\r\n  @if(inputConfig.startDateControl && inputConfig.endDateControl) {\r\n    <ng-container>\r\n      <mat-date-range-input [formGroup]=\"formGroup\" [rangePicker]=\"picker\">\r\n        <input matStartDate [formControlName]=\"inputConfig.startDateControl\" placeholder=\"Start date\">\r\n        <input matEndDate [formControlName]=\"inputConfig.endDateControl\" placeholder=\"End date\">\r\n      </mat-date-range-input>\r\n      <mat-hint>{{inputConfig.hintLabel}}</mat-hint>\r\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #picker></mat-date-range-picker>\r\n\r\n      @if (formGroup.controls[inputConfig.startDateControl]?.hasError('matStartDateInvalid')) {\r\n        <mat-error>Invalid start date</mat-error>\r\n      }\r\n      @if (formGroup.controls[inputConfig.endDateControl]?.hasError('matEndDateInvalid')) {\r\n        <mat-error>Invalid end date</mat-error>\r\n      }\r\n      \r\n      @if(!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n      }\r\n    </ng-container>\r\n  }\r\n</mat-form-field> -->\r\n<form [formGroup]=\"formGroup\">\r\n\r\n\r\n<mat-form-field  [appearance]=\"this.inputConfig.appearance || 'fill'\"   subscriptSizing=\"dynamic\">\r\n  <mat-label>{{inputConfig.label}}  <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status></mat-label>\r\n  <lib-date-range-picker-reactive-input\r\n  [inputConfig]=\"this.inputConfig\"\r\n  [required]=\"this.inputConfig.required\"\r\n  [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n  ></lib-date-range-picker-reactive-input>\r\n\r\n  <mat-date-range-input       [required]=\"inputConfig.required\"   [formGroup]=\"formGroup\"  [rangePicker]=\"picker\">\r\n    @if (inputConfig.startDateControl) {\r\n      <input matStartDate \r\n      [formControlName]=\"inputConfig.id+'.'+inputConfig.startDateControl\"\r\n      [min]=\"inputConfig.startMinDate\"\r\n      [max]=\"inputConfig.startMaxDate\"\r\n      [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.startDateControl]?.value\"\r\n      (dateChange)=\"dateChanged($event, inputConfig.startDateControl)\"\r\n      placeholder=\"Start date\">\r\n    }\r\n    @if (inputConfig.endDateControl) {\r\n      <input matEndDate \r\n      [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n      [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.endDateControl]?.value\"\r\n      placeholder=\"End date\"\r\n      [min]=\"inputConfig.endMinDate\" \r\n      [max]=\"inputConfig.endMaxDate\"\r\n      (dateChange)=\"dateChanged($event, inputConfig.endDateControl)\"\r\n      >\r\n    }\r\n  </mat-date-range-input>\r\n\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker   #picker >\r\n    <mat-datepicker-actions>\r\n      <button mat-button matDatepickerCancel>Cancel</button>\r\n      <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n    </mat-datepicker-actions>\r\n  </mat-date-range-picker>\r\n\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n    <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" class=\"inputHint\">\r\n      {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n    </mat-hint>\r\n    }\r\n  \r\n    @if (!!errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n    }\r\n    <!-- Prefix Icon -->\r\n    <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n    <!-- Suffix Icon or Password Visibility Toggle -->\r\n    <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n      <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n        }}</mat-icon>\r\n\r\n    </ng-container>\r\n    <!-- Prefix & Suffix Text -->\r\n    <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n    <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n      }}</span>\r\n    <!-- Character Count Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" >\r\n      {{ (formGroup.controls[inputConfig.id]?.value.length || 0) + '/' + inputConfig.maxLength\r\n      }}\r\n    </mat-hint>\r\n\r\n</mat-form-field>\r\n\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3$2.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3$2.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$2.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: DateRangePickerReactiveInputComponent, selector: "lib-date-range-picker-reactive-input", inputs: ["inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DateRangePickerInputElementComponent, decorators: [{
             type: Component,
@@ -12256,7 +12282,7 @@ class DatePickerReactiveInputComponent extends BaseCustomInput {
         this.onChange(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DatePickerReactiveInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DatePickerReactiveInputComponent, isStandalone: true, selector: "lib-date-picker-reactive-input", inputs: { picker: "picker", inputConfig: "inputConfig" }, host: { properties: { "lib-date-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DatePickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<input \r\n[required]=\"inputConfig?.required\" \r\n\r\n[min]=\"inputConfig?.min\" \r\n(dateChange)=\"changed($event)\"\r\n[value]=\"value\"\r\n[max]=\"inputConfig?.max\" matInput \r\n[matDatepicker]=\"picker\" />", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i3$1.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: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DatePickerReactiveInputComponent, isStandalone: true, selector: "lib-date-picker-reactive-input", inputs: { picker: "picker", inputConfig: "inputConfig" }, host: { properties: { "lib-date-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DatePickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<input \r\n[required]=\"inputConfig?.required\" \r\n\r\n[min]=\"inputConfig?.min\" \r\n(dateChange)=\"changed($event)\"\r\n[value]=\"value\"\r\n[max]=\"inputConfig?.max\" matInput \r\n[matDatepicker]=\"picker\" />", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i13.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: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DatePickerReactiveInputComponent, decorators: [{
             type: Component,
@@ -12285,7 +12311,7 @@ class DatePickerInputElementComponent {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DatePickerInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DatePickerInputElementComponent, isStandalone: true, selector: "lib-date-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n\r\n    <mat-form-field \r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \" \r\n    subscriptSizing=\"dynamic\">\r\n        <mat-label>\r\n          {{this.inputConfig.label }}  \r\n          <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <lib-date-picker-reactive-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n    [picker]=\"picker\"\r\n    \r\n    ></lib-date-picker-reactive-input>\r\n    <mat-datepicker-toggle matIconSuffix  [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker   #picker>\r\n      <button mat-button matDatepickerCancel>Cancel</button>\r\n      <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n    </mat-datepicker>\r\n   \r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n      </mat-hint>\r\n      }\r\n  \r\n\r\n      @if (!!errorMessage) {\r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n      }\r\n      <!-- Prefix Icon -->\r\n      <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n  \r\n      <!-- Suffix Icon or Password Visibility Toggle -->\r\n      <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n        <mat-icon \r\n         matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n      \r\n          \r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n    </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$3.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$3.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: DatePickerReactiveInputComponent, selector: "lib-date-picker-reactive-input", inputs: ["picker", "inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DatePickerInputElementComponent, isStandalone: true, selector: "lib-date-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n\r\n    <mat-form-field \r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \" \r\n    subscriptSizing=\"dynamic\">\r\n        <mat-label>\r\n          {{this.inputConfig.label }}  \r\n          <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <lib-date-picker-reactive-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n    [picker]=\"picker\"\r\n    \r\n    ></lib-date-picker-reactive-input>\r\n    <mat-datepicker-toggle matIconSuffix  [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker   #picker>\r\n      <button mat-button matDatepickerCancel>Cancel</button>\r\n      <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n    </mat-datepicker>\r\n   \r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n      </mat-hint>\r\n      }\r\n  \r\n\r\n      @if (!!errorMessage) {\r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n      }\r\n      <!-- Prefix Icon -->\r\n      <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n  \r\n      <!-- Suffix Icon or Password Visibility Toggle -->\r\n      <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n        <mat-icon \r\n         matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n      \r\n          \r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n    </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$2.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$2.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: DatePickerReactiveInputComponent, selector: "lib-date-picker-reactive-input", inputs: ["picker", "inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DatePickerInputElementComponent, decorators: [{
             type: Component,
@@ -12753,7 +12779,7 @@ class InputCustomComponent extends BaseCustomInput {
                 //:Note
                 useExisting: forwardRef(() => InputCustomComponent)
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if(inputConfig){\r\n<input matInput [readonly]=\"this.inputConfig.readonly || this.inputConfig.disabled\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [pattern]=\"this.inputConfig.pattern || ''\" [required]=\"this.inputConfig.required\"\r\n    [attr.maxlength]=\"this.inputConfig.maxLength\" [type]=\"this.inputConfig.type||'text'\" [value]=\"value\"\r\n    (input)=\"onInputChange($event)\" [attr.minlength]=\"this.inputConfig.minLength\"\r\n    [autocomplete]=\"this.inputConfig.autocomplete\" [min]=\"this.inputConfig.min\" [max]=\"this.inputConfig.max\" />\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$1.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"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if(inputConfig){\r\n<input matInput [readonly]=\"this.inputConfig.readonly || this.inputConfig.disabled\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [pattern]=\"this.inputConfig.pattern || ''\" [required]=\"this.inputConfig.required\"\r\n    [attr.maxlength]=\"this.inputConfig.maxLength\" [type]=\"this.inputConfig.type||'text'\" [value]=\"value\"\r\n    (input)=\"onInputChange($event)\" [attr.minlength]=\"this.inputConfig.minLength\"\r\n    [autocomplete]=\"this.inputConfig.autocomplete\" [min]=\"this.inputConfig.min\" [max]=\"this.inputConfig.max\" />\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i13.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InputCustomComponent, decorators: [{
             type: Component,
@@ -13187,7 +13213,7 @@ class MultipleInputTableViewComponent {
         return !!this.inputConfig?.formIsOpen && this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value === row[`${this.inputConfig?.id}.id`];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MultipleInputTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: "inputConfig", dataSource: "dataSource", applyOptionsTo: "applyOptionsTo", formGroup: "formGroup" }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo" }, ngImport: i0, template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 0.8125em;\r\n    \">\r\n  No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n  <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n    matSortDisableClear matSortDirection=\"desc\">\r\n    @for (col of (displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell  *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 0.8125em\">\r\n          {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n        @if($last){\r\n          <button  matTooltip=\"Show other values\"  [matMenuTriggerFor]=\"colOptions\" \r\n            [matMenuTriggerData]=\"{}\"  mat-icon-button>\r\n            <mat-icon>\r\n              label\r\n            </mat-icon>\r\n          </button>\r\n  \r\n        }\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n     \r\n        [style.background]=\"\r\n          returnBackground(row,  getColConfig.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          \r\n          <div style=\"width: 100%; text-align: right;\" *ngIf=\"!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&!row['id'] &&  !inputConfig?.multipleInputInEditId   || \r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&  inputConfig?.multipleInputInEditId &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </div>\r\n          <button mat-icon-button\r\n          [color]=\"t.menuOpen ? 'primary' : 'basic'\"\r\n          *ngIf=\"\r\n            !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n            row['' ] !== 'true' && !inputConfig?.readonly  \r\n               \r\n            \" \r\n            [matMenuTriggerFor]=\"rowOptions\" \r\n            [matMenuTriggerData]=\"{row:row}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span >\r\n            {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      \r\n      *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n  \r\n  <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n    <div style=\"\r\n          padding-left: 16px;\r\n          padding-right: 16px;\r\n          padding-top: 16px;\r\n          padding-bottom: 16px;\r\n\r\n          display: flex;\r\n          justify-content: center;\r\n          opacity: 0.6;\r\n          font-size: 0.8125em;\r\n        \">\r\n        <div style=\"\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n        padding-top: 16px;\r\n        padding-bottom: 16px;\r\n\r\n        display: flex;\r\n        justify-content: center;\r\n        opacity: 0.6;\r\n        font-size: 0.8125em;\r\n      \">\r\n   \r\n    <div style=\"margin-top: 8px; text-align: center;\">\r\n      <mat-icon style=\"font-size: 1.25em; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n      <div style=\"margin-top: 8px;\">\r\n        <strong>No items yet</strong>\r\n        <p style=\"margin-top: 4px; font-size: 0.8125em;\">\r\n          <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n          Each saved entry will appear as a row in this table.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n  <mat-spinner diameter=\"50\" />\r\n</div>\r\n}\r\n<mat-menu #colOptions=\"matMenu\">\r\n  <ng-template matMenuContent >\r\n        @for (label of allPossibleLabels; track label.label) {\r\n        <button mat-menu-item  (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n          <mat-icon>\r\n             {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n          </mat-icon>\r\n           {{label.label}}\r\n           \r\n        </button>\r\n      \r\n        }\r\n\r\n  </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @if(!inputConfig?.readonly){\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{ 'Edit'}}\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n        </div>\r\n      </div>\r\n    </button>\r\n\r\n    <button mat-menu-item (click)=\"copy(row)\">\r\n      <mat-icon>\r\n        content_copy\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Duplicate\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Create a copy with same values\r\n        </div>\r\n      </div>\r\n    </button>\r\n    @if(isAboutToDeleteRow(row)){\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"accent\">\r\n          cancel\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n            Cancel Deletion\r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Auto-deleting in {{ secondsCountDown()}} seconds...\r\n          </div>\r\n        </div>\r\n      </button>\r\n      <div class=\"deletion-progress-container\">\r\n        <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n        <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n          Deleting soon...\r\n        </div>\r\n      </div>\r\n    }@else {\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"warn\">\r\n          delete_outline\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\">\r\n            Delete \r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Will delete after 3 seconds (click to cancel)\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:.875em;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:.75em;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:.6875em;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media (max-width: 600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }], deferBlockDependencies: [() => [i2.MatIconButton, i5$1.MatChip, i2$2.MatIcon, i2$6.MatMenuTrigger, i8$1.MatSort, i9.MatTable, i9.MatHeaderCellDef, i9.MatHeaderRowDef, i9.MatColumnDef, i9.MatCellDef, i9.MatRowDef, i9.MatHeaderCell, i9.MatCell, i9.MatHeaderRow, i9.MatRow, i8.MatTooltip, i2$3.NgIf, Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: "inputConfig", dataSource: "dataSource", applyOptionsTo: "applyOptionsTo", formGroup: "formGroup" }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo" }, ngImport: i0, template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 0.8125em;\r\n    \">\r\n  No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n  <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n    matSortDisableClear matSortDirection=\"desc\">\r\n    @for (col of (displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell  *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 0.8125em\">\r\n          {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n        @if($last){\r\n          <button  matTooltip=\"Show other values\"  [matMenuTriggerFor]=\"colOptions\" \r\n            [matMenuTriggerData]=\"{}\"  mat-icon-button>\r\n            <mat-icon>\r\n              label\r\n            </mat-icon>\r\n          </button>\r\n  \r\n        }\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n     \r\n        [style.background]=\"\r\n          returnBackground(row,  getColConfig.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          \r\n          <div style=\"width: 100%; text-align: right;\" *ngIf=\"!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&!row['id'] &&  !inputConfig?.multipleInputInEditId   || \r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&  inputConfig?.multipleInputInEditId &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </div>\r\n          <button mat-icon-button\r\n          [color]=\"t.menuOpen ? 'primary' : 'basic'\"\r\n          *ngIf=\"\r\n            !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n            row['' ] !== 'true' && !inputConfig?.readonly  \r\n               \r\n            \" \r\n            [matMenuTriggerFor]=\"rowOptions\" \r\n            [matMenuTriggerData]=\"{row:row}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span >\r\n            {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      \r\n      *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n  \r\n  <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n    <div style=\"\r\n          padding-left: 16px;\r\n          padding-right: 16px;\r\n          padding-top: 16px;\r\n          padding-bottom: 16px;\r\n\r\n          display: flex;\r\n          justify-content: center;\r\n          opacity: 0.6;\r\n          font-size: 0.8125em;\r\n        \">\r\n        <div style=\"\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n        padding-top: 16px;\r\n        padding-bottom: 16px;\r\n\r\n        display: flex;\r\n        justify-content: center;\r\n        opacity: 0.6;\r\n        font-size: 0.8125em;\r\n      \">\r\n   \r\n    <div style=\"margin-top: 8px; text-align: center;\">\r\n      <mat-icon style=\"font-size: 1.25em; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n      <div style=\"margin-top: 8px;\">\r\n        <strong>No items yet</strong>\r\n        <p style=\"margin-top: 4px; font-size: 0.8125em;\">\r\n          <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n          Each saved entry will appear as a row in this table.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n  <mat-spinner diameter=\"50\" />\r\n</div>\r\n}\r\n<mat-menu #colOptions=\"matMenu\">\r\n  <ng-template matMenuContent >\r\n        @for (label of allPossibleLabels; track label.label) {\r\n        <button mat-menu-item  (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n          <mat-icon>\r\n             {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n          </mat-icon>\r\n           {{label.label}}\r\n           \r\n        </button>\r\n      \r\n        }\r\n\r\n  </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @if(!inputConfig?.readonly){\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{ 'Edit'}}\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n        </div>\r\n      </div>\r\n    </button>\r\n\r\n    <button mat-menu-item (click)=\"copy(row)\">\r\n      <mat-icon>\r\n        content_copy\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Duplicate\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Create a copy with same values\r\n        </div>\r\n      </div>\r\n    </button>\r\n    @if(isAboutToDeleteRow(row)){\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"accent\">\r\n          cancel\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n            Cancel Deletion\r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Auto-deleting in {{ secondsCountDown()}} seconds...\r\n          </div>\r\n        </div>\r\n      </button>\r\n      <div class=\"deletion-progress-container\">\r\n        <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n        <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n          Deleting soon...\r\n        </div>\r\n      </div>\r\n    }@else {\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"warn\">\r\n          delete_outline\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\">\r\n            Delete \r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Will delete after 3 seconds (click to cancel)\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:.875em;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:.75em;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:.6875em;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media (max-width: 600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }], deferBlockDependencies: [() => [i2.MatIconButton, i5$1.MatChip, i2$2.MatIcon, i2$4.MatMenuTrigger, i8$1.MatSort, i9.MatTable, i9.MatHeaderCellDef, i9.MatHeaderRowDef, i9.MatColumnDef, i9.MatCellDef, i9.MatRowDef, i9.MatHeaderCell, i9.MatCell, i9.MatHeaderRow, i9.MatRow, i8.MatTooltip, i2$3.NgIf, Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", ngImport: i0, type: MultipleInputTableViewComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)], resolveMetadata: FormatDataPipe => ({ decorators: [{
                 type: Component,
@@ -13336,7 +13362,7 @@ class MultipleInputTableEditComponent {
         return !!this.inputConfig?.formIsOpen && !!this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MultipleInputTableEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MultipleInputTableEditComponent, isStandalone: true, selector: "lib-multiple-input-table-edit", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { onSaveMultipleInputForm: "onSaveMultipleInputForm", editMultipleInput: "editMultipleInput", deleteInput: "deleteInput", showItemAsLabel: "showItemAsLabel", addFunction: "addFunction", reorderItems: "reorderItems" }, ngImport: i0, template: "\r\n<mat-card appearance=\"outlined\" style=\"    margin-top: 8px;background:var(--mat-sys-surface-container)\" class=\" mat-elevation-z4\">\r\n    <mat-card-content>\r\n        <div class=\"list\" (cdkDropListDropped)=\"dropItems($event)\"\r\n           \r\n            [cdkDropListData]=\"innerInputs\" cdkDropList\r\n          \r\n            #InputList=\"cdkDropList\" class=\"row\">\r\n            @for( innerInput of innerInputs|| [];track innerInput.id\r\n            ){\r\n            <ng-container>\r\n                @if(editorMode){\r\n                <mat-card (mouseover)=\"activeInput = innerInput.id\" *ngIf=\"!!formGroup\" cdkDrag\r\n                    (cdkDragStarted)=\"dragging =true\" (cdkDragReleased)=\"dragging =false\"\r\n                    [class.inputCardElevated]=\"activeInput ===innerInput.id\"\r\n                    [class.inputCard]=\"activeInput !==innerInput.id\"\r\n                    [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                    <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\r\n                    <ng-container *ngComponentOutlet=\"InputComponent; \r\n                                                  inputs: {\r\n                                                    inputConfig: innerInput,\r\n                                                    formGroup: formGroup,\r\n                                                    formBuilderFunctions: formBuilderFunctions,\r\n                                                  }\">\r\n                    </ng-container>\r\n                    <mat-card-actions *ngIf=\"activeInput === innerInput.id\">\r\n                        <span class=\"spacer\"></span>\r\n                        <button [matTooltip]=\"'Edit Input: ' + innerInput.label \"\r\n                            (click)=\"editInput(innerInput)\" mat-icon-button>\r\n                            <mat-icon>\r\n                                edit\r\n                            </mat-icon>\r\n\r\n                        </button>\r\n                        @if(!!inputWillBeRemovedIn(innerInput.id) ){\r\n                        <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\r\n                            (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\r\n                            <div style=\"display: flex; align-items: center;\">\r\n                                <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n                                    [value]=\"((inputWillBeRemovedIn(innerInput.id)||0)/5)*100\">\r\n                                </mat-progress-spinner>\r\n\r\n                                {{overId === innerInput.id ? 'Click to cancel':'Deleting in'}}\r\n                                {{inputWillBeRemovedIn(innerInput.id)}}\r\n                            </div>\r\n\r\n                        </button>\r\n\r\n                        }@else if(inputConfig?.systemDefault !== true && innerInput.systemDefault !== true) {\r\n                        <button [matTooltip]=\"'Delete input ' +  innerInput.label \"\r\n                            (click)=\"removeInput(innerInput)\" mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                delete\r\n                            </mat-icon>\r\n                        </button>\r\n                        }\r\n                        |\r\n                        <button *ngIf=\"!!innerInput.showAsLabel && innerInput.dataType=== 'number' ||!!innerInput.showAsLabel && innerInput.type === 'number'\"\r\n                            [matMenuTriggerFor]=\"calculationMenu\" \r\n                              [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\r\n                            [matTooltip]=\"'calculate sum,avg,min,max'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                calculate\r\n                            </mat-icon>\r\n                        </button>\r\n                        <button [color]=\"innerInput.showAsLabel? 'primary' : ''\"\r\n                            (click)=\"toggleLabel(innerInput)\"\r\n                            [matTooltip]=\"innerInput.showAsLabel? 'Hide as label' : 'Show as label'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                label\r\n                            </mat-icon>\r\n                        </button>\r\n                        <span class=\"spacer\"></span>\r\n                    </mat-card-actions>\r\n                </mat-card>\r\n                }@else {\r\n                   \r\n                    <div [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                        <ng-container *ngComponentOutlet=\"InputComponent; \r\n                        inputs: {\r\n                          inputConfig: innerInput,\r\n                          formGroup: formGroup,\r\n                          formBuilderFunctions: formBuilderFunctions,\r\n                        }\">\r\n                    </ng-container>\r\n                    </div>\r\n             \r\n                }\r\n\r\n            </ng-container>\r\n            }\r\n            @if (!!editorMode && ( innerInputs|| []).length === 0) {\r\n\r\n            <div class=\"tree-instructions\">\r\n                <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n                <span>\r\n                    <strong>Add Form Input</strong>\r\n                    <br>\r\n                    Manage your list by adding, editing, or removing items. Each item is customizable through a form.\r\n                </span>\r\n            </div>\r\n\r\n            }\r\n\r\n        </div>\r\n    </mat-card-content>\r\n    @if ( ( innerInputs|| []).length !== 0) {\r\n        <br>\r\n        <mat-divider></mat-divider>\r\n    <mat-card-actions align=\"end\" class=\"ion-margin-top\">\r\n        <button [color]=\"areYouSure ? 'warn' : ''\" class=\"ion-margin-end\"\r\n            [style.text-decoration]=\"areYouSure ? 'underline' : ''\" mat-flat-button\r\n            (click)=\"closeMultipleInput()\">\r\n            {{ areYouSure  ? \"leave without saving\" : \"cancel\" }}\r\n        </button>\r\n        @if(!inputConfig?.readonly){\r\n        <button [disabled]=\"!!formInvalid\" style=\"min-width: 10em\" color=\"primary\" (click)=\"saveMultipleInputForm()\" class=\"ion-padding-horizontal\"\r\n            mat-raised-button>\r\n            {{\r\n                rowInUpdate\r\n            ? \"Update\"\r\n            : \"save\"\r\n            }}\r\n        </button>\r\n        }\r\n\r\n    </mat-card-actions>\r\n    }\r\n\r\n</mat-card>\r\n\r\n\r\n<mat-menu #calculationMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-inputId=\"sectionId\">\r\n    <button (click)=\"toggleFunction(func,inputId)\" mat-menu-item *ngFor=\"let func of calculationFunctions\">\r\n        {{ func }}\r\n        <mat-icon color=\"primary\" *ngIf=\"selectedFunction(func)\">check_circle</mat-icon>\r\n    </button>\r\n    </ng-template>\r\n</mat-menu> ", styles: [".inputCardElevated{background:var(--mat-sys-surface-container, var(--mat-app-surface));box-shadow:var(--mdc-elevated-card-container-elevation)}.inputCard{box-shadow:none}.list{min-height:60px;display:block}.box{padding:4px;cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.custom-placeholder{background:#ccc;border:dotted 3px #999;min-width:100%;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i2$6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MultipleInputTableEditComponent, isStandalone: true, selector: "lib-multiple-input-table-edit", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { onSaveMultipleInputForm: "onSaveMultipleInputForm", editMultipleInput: "editMultipleInput", deleteInput: "deleteInput", showItemAsLabel: "showItemAsLabel", addFunction: "addFunction", reorderItems: "reorderItems" }, ngImport: i0, template: "\r\n<mat-card appearance=\"outlined\" style=\"    margin-top: 8px;background:var(--mat-sys-surface-container)\" class=\" mat-elevation-z4\">\r\n    <mat-card-content>\r\n        <div class=\"list\" (cdkDropListDropped)=\"dropItems($event)\"\r\n           \r\n            [cdkDropListData]=\"innerInputs\" cdkDropList\r\n          \r\n            #InputList=\"cdkDropList\" class=\"row\">\r\n            @for( innerInput of innerInputs|| [];track innerInput.id\r\n            ){\r\n            <ng-container>\r\n                @if(editorMode){\r\n                <mat-card (mouseover)=\"activeInput = innerInput.id\" *ngIf=\"!!formGroup\" cdkDrag\r\n                    (cdkDragStarted)=\"dragging =true\" (cdkDragReleased)=\"dragging =false\"\r\n                    [class.inputCardElevated]=\"activeInput ===innerInput.id\"\r\n                    [class.inputCard]=\"activeInput !==innerInput.id\"\r\n                    [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                    <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\r\n                    <ng-container *ngComponentOutlet=\"InputComponent; \r\n                                                  inputs: {\r\n                                                    inputConfig: innerInput,\r\n                                                    formGroup: formGroup,\r\n                                                    formBuilderFunctions: formBuilderFunctions,\r\n                                                  }\">\r\n                    </ng-container>\r\n                    <mat-card-actions *ngIf=\"activeInput === innerInput.id\">\r\n                        <span class=\"spacer\"></span>\r\n                        <button [matTooltip]=\"'Edit Input: ' + innerInput.label \"\r\n                            (click)=\"editInput(innerInput)\" mat-icon-button>\r\n                            <mat-icon>\r\n                                edit\r\n                            </mat-icon>\r\n\r\n                        </button>\r\n                        @if(!!inputWillBeRemovedIn(innerInput.id) ){\r\n                        <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\r\n                            (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\r\n                            <div style=\"display: flex; align-items: center;\">\r\n                                <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n                                    [value]=\"((inputWillBeRemovedIn(innerInput.id)||0)/5)*100\">\r\n                                </mat-progress-spinner>\r\n\r\n                                {{overId === innerInput.id ? 'Click to cancel':'Deleting in'}}\r\n                                {{inputWillBeRemovedIn(innerInput.id)}}\r\n                            </div>\r\n\r\n                        </button>\r\n\r\n                        }@else if(inputConfig?.systemDefault !== true && innerInput.systemDefault !== true) {\r\n                        <button [matTooltip]=\"'Delete input ' +  innerInput.label \"\r\n                            (click)=\"removeInput(innerInput)\" mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                delete\r\n                            </mat-icon>\r\n                        </button>\r\n                        }\r\n                        |\r\n                        <button *ngIf=\"!!innerInput.showAsLabel && innerInput.dataType=== 'number' ||!!innerInput.showAsLabel && innerInput.type === 'number'\"\r\n                            [matMenuTriggerFor]=\"calculationMenu\" \r\n                              [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\r\n                            [matTooltip]=\"'calculate sum,avg,min,max'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                calculate\r\n                            </mat-icon>\r\n                        </button>\r\n                        <button [color]=\"innerInput.showAsLabel? 'primary' : ''\"\r\n                            (click)=\"toggleLabel(innerInput)\"\r\n                            [matTooltip]=\"innerInput.showAsLabel? 'Hide as label' : 'Show as label'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                label\r\n                            </mat-icon>\r\n                        </button>\r\n                        <span class=\"spacer\"></span>\r\n                    </mat-card-actions>\r\n                </mat-card>\r\n                }@else {\r\n                   \r\n                    <div [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                        <ng-container *ngComponentOutlet=\"InputComponent; \r\n                        inputs: {\r\n                          inputConfig: innerInput,\r\n                          formGroup: formGroup,\r\n                          formBuilderFunctions: formBuilderFunctions,\r\n                        }\">\r\n                    </ng-container>\r\n                    </div>\r\n             \r\n                }\r\n\r\n            </ng-container>\r\n            }\r\n            @if (!!editorMode && ( innerInputs|| []).length === 0) {\r\n\r\n            <div class=\"tree-instructions\">\r\n                <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n                <span>\r\n                    <strong>Add Form Input</strong>\r\n                    <br>\r\n                    Manage your list by adding, editing, or removing items. Each item is customizable through a form.\r\n                </span>\r\n            </div>\r\n\r\n            }\r\n\r\n        </div>\r\n    </mat-card-content>\r\n    @if ( ( innerInputs|| []).length !== 0) {\r\n        <br>\r\n        <mat-divider></mat-divider>\r\n    <mat-card-actions align=\"end\" class=\"ion-margin-top\">\r\n        <button [color]=\"areYouSure ? 'warn' : ''\" class=\"ion-margin-end\"\r\n            [style.text-decoration]=\"areYouSure ? 'underline' : ''\" mat-flat-button\r\n            (click)=\"closeMultipleInput()\">\r\n            {{ areYouSure  ? \"leave without saving\" : \"cancel\" }}\r\n        </button>\r\n        @if(!inputConfig?.readonly){\r\n        <button [disabled]=\"!!formInvalid\" style=\"min-width: 10em\" color=\"primary\" (click)=\"saveMultipleInputForm()\" class=\"ion-padding-horizontal\"\r\n            mat-raised-button>\r\n            {{\r\n                rowInUpdate\r\n            ? \"Update\"\r\n            : \"save\"\r\n            }}\r\n        </button>\r\n        }\r\n\r\n    </mat-card-actions>\r\n    }\r\n\r\n</mat-card>\r\n\r\n\r\n<mat-menu #calculationMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-inputId=\"sectionId\">\r\n    <button (click)=\"toggleFunction(func,inputId)\" mat-menu-item *ngFor=\"let func of calculationFunctions\">\r\n        {{ func }}\r\n        <mat-icon color=\"primary\" *ngIf=\"selectedFunction(func)\">check_circle</mat-icon>\r\n    </button>\r\n    </ng-template>\r\n</mat-menu> ", styles: [".inputCardElevated{background:var(--mat-sys-surface-container, var(--mat-app-surface));box-shadow:var(--mdc-elevated-card-container-elevation)}.inputCard{box-shadow:none}.list{min-height:60px;display:block}.box{padding:4px;cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.custom-placeholder{background:#ccc;border:dotted 3px #999;min-width:100%;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i2$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MultipleInputTableEditComponent, decorators: [{
             type: Component,
@@ -14238,7 +14264,7 @@ class DocumentPickerReactiveInputComponent extends BaseCustomInput {
         })).subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DocumentPickerReactiveInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DocumentPickerReactiveInputComponent, isStandalone: true, selector: "lib-document-picker-reactive-input", inputs: { formBuilderFunctions: "formBuilderFunctions", inputConfig: "inputConfig" }, host: { properties: { "lib-document-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DocumentPickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<mat-card>\r\n\r\n    @if(_loadingCols || loadingData || loadingSelected ){\r\n    <div style=\"display: flex; justify-content: center; align-items: center;padding:28px \">\r\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\r\n    </div>\r\n\r\n    }@else if (this.dataLoadingError ) {\r\n    <mat-toolbar color=\"warn\">\r\n        <mat-icon>error</mat-icon>\r\n        <span>{{this.dataLoadingError}}</span>\r\n    </mat-toolbar>\r\n    }@else {\r\n    <div class=\"table-container\">\r\n        <div class=\"search-container\">\r\n            @if (!inputConfig?.disabled && !inputConfig?.readonly) {\r\n            <mat-form-field subscriptSizing=\"dynamic\" class=\"search-field\">\r\n                <input matInput placeholder=\"search\" [formControl]=\"searchFormControl\" (change)=\"inputSearch($event)\"\r\n                    value=\"Sushi\">\r\n                <mat-icon matSuffix>\r\n                    search\r\n\r\n                </mat-icon>\r\n            </mat-form-field>\r\n            }\r\n\r\n\r\n\r\n        </div>\r\n        <table mat-table [dataSource]=\"paginatedData||[]\" class=\"example-table\" matSort matSortActive=\"created\"\r\n            matSortDisableClear matSortDirection=\"desc\">\r\n            @for (col of _cols; track col.formControlName) {\r\n            <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n                <th mat-header-cell *matHeaderCellDef\r\n                    [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                    [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n\r\n\r\n                    {{col.label}}\r\n\r\n\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row\"\r\n                    [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                    [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n                    @if(col.formControlName ==='icons'){\r\n                    <mat-icon style=\"color:var(--mat-sys-primary)\">description</mat-icon>\r\n                    }@else if(col.formControlName ==='actions'){\r\n                    @if((row['_id'] === value || row['id'] === value)&&!!value){\r\n                    <button (click)=\"selectRow(row)\" [disabled]=\"!!inputConfig?.disabled || !!inputConfig?.readonly\"\r\n                        [matTooltip]=\"'Click to clear ' + row['reference'] + ' selection'\" matTooltipPosition=\"after\"\r\n                        class=\"selection-button\" mat-flat-button color=\"primary\">\r\n\r\n                        selected\r\n                        <mat-icon> check_circle </mat-icon>\r\n                    </button>\r\n\r\n                    }@else if(!inputConfig?.disabled && !inputConfig?.readonly){\r\n\r\n                    <button (click)=\"selectRow(row)\" [matTooltip]=\"'Click to select ' + row['reference']\"\r\n                        matTooltipPosition=\"after\" class=\"selection-button\" mat-raised-button color=\"primary\">\r\n\r\n                        select\r\n                        <mat-icon>\r\n                            radio_button_unchecked\r\n                        </mat-icon>\r\n                    </button>\r\n                    }\r\n\r\n\r\n                    }@else {\r\n                    <span\r\n                        [style.color]=\"(row['_id'] === value || row['id'] === value) && !!value?'var(--mat-sys-primary)':''\">\r\n                        {{row[col.formControlName]|formatData:col.type}}\r\n                    </span>\r\n\r\n                    }\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n            <tr mat-row class=\"data-row\" *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n        </table>\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n    @if (!inputConfig?.disabled && !inputConfig?.readonly) {\r\n    <mat-paginator [length]=\"docLength\" (page)=\"applyPagination($event)\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\"\r\n        [pageSizeOptions]=\"[5,10, 30, 50, 100]\" aria-label=\"Select workflow document\"></mat-paginator>\r\n    }\r\n\r\n    }\r\n</mat-card>", styles: [".table-container{position:relative;overflow:auto}mat-form-field.search-field{width:100%;--mdc-filled-text-field-container-color:none}table{width:fit-content}td{white-space:pre}.selection-button{height:28px}.search-container{display:flex!important;align-items:center!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.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: "pipe", type: FormatDataPipe, name: "formatData" }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DocumentPickerReactiveInputComponent, isStandalone: true, selector: "lib-document-picker-reactive-input", inputs: { formBuilderFunctions: "formBuilderFunctions", inputConfig: "inputConfig" }, host: { properties: { "lib-document-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DocumentPickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<mat-card>\r\n\r\n    @if(_loadingCols || loadingData || loadingSelected ){\r\n    <div style=\"display: flex; justify-content: center; align-items: center;padding:28px \">\r\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\r\n    </div>\r\n\r\n    }@else if (this.dataLoadingError ) {\r\n    <mat-toolbar color=\"warn\">\r\n        <mat-icon>error</mat-icon>\r\n        <span>{{this.dataLoadingError}}</span>\r\n    </mat-toolbar>\r\n    }@else {\r\n    <div class=\"table-container\">\r\n        <div class=\"search-container\">\r\n            @if (!inputConfig?.disabled && !inputConfig?.readonly) {\r\n            <mat-form-field subscriptSizing=\"dynamic\" class=\"search-field\">\r\n                <input matInput placeholder=\"search\" [formControl]=\"searchFormControl\" (change)=\"inputSearch($event)\"\r\n                    value=\"Sushi\">\r\n                <mat-icon matSuffix>\r\n                    search\r\n\r\n                </mat-icon>\r\n            </mat-form-field>\r\n            }\r\n\r\n\r\n\r\n        </div>\r\n        <table mat-table [dataSource]=\"paginatedData||[]\" class=\"example-table\" matSort matSortActive=\"created\"\r\n            matSortDisableClear matSortDirection=\"desc\">\r\n            @for (col of _cols; track col.formControlName) {\r\n            <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n                <th mat-header-cell *matHeaderCellDef\r\n                    [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                    [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n\r\n\r\n                    {{col.label}}\r\n\r\n\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row\"\r\n                    [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                    [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n                    @if(col.formControlName ==='icons'){\r\n                    <mat-icon style=\"color:var(--mat-sys-primary)\">description</mat-icon>\r\n                    }@else if(col.formControlName ==='actions'){\r\n                    @if((row['_id'] === value || row['id'] === value)&&!!value){\r\n                    <button (click)=\"selectRow(row)\" [disabled]=\"!!inputConfig?.disabled || !!inputConfig?.readonly\"\r\n                        [matTooltip]=\"'Click to clear ' + row['reference'] + ' selection'\" matTooltipPosition=\"after\"\r\n                        class=\"selection-button\" mat-flat-button color=\"primary\">\r\n\r\n                        selected\r\n                        <mat-icon> check_circle </mat-icon>\r\n                    </button>\r\n\r\n                    }@else if(!inputConfig?.disabled && !inputConfig?.readonly){\r\n\r\n                    <button (click)=\"selectRow(row)\" [matTooltip]=\"'Click to select ' + row['reference']\"\r\n                        matTooltipPosition=\"after\" class=\"selection-button\" mat-raised-button color=\"primary\">\r\n\r\n                        select\r\n                        <mat-icon>\r\n                            radio_button_unchecked\r\n                        </mat-icon>\r\n                    </button>\r\n                    }\r\n\r\n\r\n                    }@else {\r\n                    <span\r\n                        [style.color]=\"(row['_id'] === value || row['id'] === value) && !!value?'var(--mat-sys-primary)':''\">\r\n                        {{row[col.formControlName]|formatData:col.type}}\r\n                    </span>\r\n\r\n                    }\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n            <tr mat-row class=\"data-row\" *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n        </table>\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n    @if (!inputConfig?.disabled && !inputConfig?.readonly) {\r\n    <mat-paginator [length]=\"docLength\" (page)=\"applyPagination($event)\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\"\r\n        [pageSizeOptions]=\"[5,10, 30, 50, 100]\" aria-label=\"Select workflow document\"></mat-paginator>\r\n    }\r\n\r\n    }\r\n</mat-card>", styles: [".table-container{position:relative;overflow:auto}mat-form-field.search-field{width:100%;--mdc-filled-text-field-container-color:none}table{width:fit-content}td{white-space:pre}.selection-button{height:28px}.search-container{display:flex!important;align-items:center!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i13.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: "pipe", type: FormatDataPipe, name: "formatData" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DocumentPickerReactiveInputComponent, decorators: [{
             type: Component,
@@ -14411,7 +14437,7 @@ class PointsCreationComponent {
         return getInputIllustration(input.element);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PointsCreationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PointsCreationComponent, isStandalone: true, selector: "app-points-creation", inputs: { value: "value", inputConfig: "inputConfig" }, outputs: { pointsChange: "pointsChange" }, ngImport: i0, template: "<div style=\"resize: both; overflow: auto;\">\r\n    @if(!points || points.length === 1) {\r\n    <h5 style=\"margin-bottom: 5px; margin-top: 0px;\">\r\n        \u2139\uFE0F To add a scoring item:\r\n    </h5>\r\n    <ol>\r\n        <li>\r\n            <strong>Enter Description:</strong>\r\n            <ul style=\"margin-top: 5px; margin-bottom: 5px; padding-left: 20px; list-style-type: disc;\">\r\n                <li>\r\n                    To <strong>link</strong> a field: You <strong>must select it</strong> from the list first (you can\r\n                    edit it after).\r\n                </li>\r\n                <li>\r\n                    For a <strong>custom</strong> point: <strong>Ignore the list</strong> and just type your own\r\n                    description.\r\n                </li>\r\n            </ul>\r\n        </li>\r\n        <li>\r\n            <strong>Set Details:</strong>\r\n            Assign the <strong>Points</strong> and select the <strong>Point Type</strong>.\r\n        </li>\r\n        <li>\r\n            <strong>Save:</strong>\r\n            Click the <strong>\"Save\"</strong> button to add the item.\r\n        </li>\r\n    </ol>\r\n    }\r\n    <table mat-table [dataSource]=\"points\" matSort>\r\n        <ng-container matColumnDef=\"description\">\r\n            <th mat-header-cell *matHeaderCellDef>Description</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                @if (element.isEditRow ) {\r\n            \r\n                    <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n                        <textarea [matAutocomplete]=\"auto\"  [(ngModel)]=\"pointRow.description\"  matInput cdkTextareaAutosize\r\n                            cdkAutosizeMinRows=\"1\" placeholder=\"Enter point description\"></textarea>\r\n                        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                            @for (input of filteredInputs; track input.id) {\r\n                            <mat-option [value]=\"input.label\" (click)=\"selectActiveInput(input)\">\r\n                                <div style=\"display: flex;align-items: center;gap:8px\">\r\n                                    <img height=\"24px\" width=\"24px\" [src]=\"  getInputIllustration(input) \"\r\n                                        [alt]=\"input.label\">\r\n                                    <span>\r\n                                        <div style=\"font-size: 0.75em;\">\r\n                                            <strong>\r\n                                                {{input.label}}\r\n                                            </strong>\r\n\r\n                                        </div>\r\n                                        <div\r\n                                            style=\"font-size: 0.75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n                                            {{input.hintLabel || input.formControlName}}\r\n                                        </div>\r\n                                    </span>\r\n\r\n                                </div>\r\n                            </mat-option>\r\n                            }\r\n\r\n                        </mat-autocomplete>\r\n\r\n                    </mat-form-field>\r\n\r\n\r\n                }@else {\r\n\r\n                {{ element.description }}}\r\n\r\n            </td>\r\n        </ng-container>\r\n        <ng-container matColumnDef=\"totalPoints\">\r\n            <th mat-header-cell *matHeaderCellDef>Points</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                @if (element.isEditRow) {\r\n               \r\n                    <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n                        <input matInput \r\n                         [(ngModel)]=\"pointRow.totalPoints\"\r\n                        placeholder=\"Enter points , eg 50\" type=\"number\">\r\n\r\n                    </mat-form-field>\r\n\r\n          \r\n                }@else {\r\n\r\n                {{ element.totalPoints }}\r\n                }\r\n\r\n            </td>\r\n        </ng-container>\r\n        <ng-container matColumnDef=\"pointType\">\r\n            <th mat-header-cell *matHeaderCellDef>Point Type</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                @if (element.isEditRow) {\r\n                \r\n                    <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n                        <mat-select (selectionChange)=\"selectPointType($event)\" ngDefaultControl \r\n                        \r\n                        [value]=\"pointRow.pointType\"\r\n                      \r\n                            placeholder=\"Select\">\r\n                            @for (type of inputConfig?.adjudicationPointTypes || []; track $index) {\r\n                            <mat-option [value]=\"type\">{{type}}</mat-option>\r\n                            }\r\n                        </mat-select>\r\n                    </mat-form-field>\r\n             \r\n                }@else {\r\n\r\n                {{ element.pointType }}\r\n                }\r\n\r\n            </td>\r\n        </ng-container>\r\n        <ng-container matColumnDef=\"actions\" [stickyEnd]=\"true\">\r\n            <th mat-header-cell *matHeaderCellDef></th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span style=\"display: flex;    justify-content: center;\">\r\n                    @if (element.isEditRow) {\r\n                    <button [disabled]=\"this.inputConfig?.disabled || this.inputConfig?.readonly\" matTooltip=\"Save Point in Edit\" color=\"primary\" style=\"white-space: nowrap;\r\n    height: 26px;\r\n    margin-bottom: 0px;\" mat-flat-button (click)=\"savePoints()\" [disabled]=\"!pointInEditIsValid\">\r\n\r\n                        <span style=\"font-size: 0.875em;\">\r\n                            save\r\n                        </span>\r\n\r\n\r\n                    </button>\r\n\r\n                    }@else {\r\n                    <button mat-icon-button (click)=\"edit(element)\">\r\n                        <mat-icon>edit</mat-icon>\r\n                    </button>\r\n                    <button mat-icon-button (click)=\"remove(element)\">\r\n                        <mat-icon>delete_forever</mat-icon>\r\n\r\n                    </button>\r\n                    }\r\n\r\n                </span>\r\n\r\n\r\n\r\n            </td>\r\n        </ng-container>\r\n        <tr mat-header-row *matHeaderRowDef=\"cols\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: cols\"></tr>\r\n    </table>\r\n</div>", styles: [".input-add{width:100%}th,td{padding:4px}mat-hint{text-align:start}.glass{background:#ffffff40!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.mat-column-totalPoints{width:100px!important;max-width:100px!important}.mat-column-pointType{width:180px!important;max-width:180px!important}.mat-column-actions{width:78px!important;max-width:78px!important}li{font-size:.75em}ol{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$4.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$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i2$5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.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: "directive", type: i9$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PointsCreationComponent, isStandalone: true, selector: "app-points-creation", inputs: { value: "value", inputConfig: "inputConfig" }, outputs: { pointsChange: "pointsChange" }, ngImport: i0, template: "<div style=\"resize: both; overflow: auto;\">\r\n    @if(!points || points.length === 1) {\r\n    <h5 style=\"margin-bottom: 5px; margin-top: 0px;\">\r\n        \u2139\uFE0F To add a scoring item:\r\n    </h5>\r\n    <ol>\r\n        <li>\r\n            <strong>Enter Description:</strong>\r\n            <ul style=\"margin-top: 5px; margin-bottom: 5px; padding-left: 20px; list-style-type: disc;\">\r\n                <li>\r\n                    To <strong>link</strong> a field: You <strong>must select it</strong> from the list first (you can\r\n                    edit it after).\r\n                </li>\r\n                <li>\r\n                    For a <strong>custom</strong> point: <strong>Ignore the list</strong> and just type your own\r\n                    description.\r\n                </li>\r\n            </ul>\r\n        </li>\r\n        <li>\r\n            <strong>Set Details:</strong>\r\n            Assign the <strong>Points</strong> and select the <strong>Point Type</strong>.\r\n        </li>\r\n        <li>\r\n            <strong>Save:</strong>\r\n            Click the <strong>\"Save\"</strong> button to add the item.\r\n        </li>\r\n    </ol>\r\n    }\r\n    <table mat-table [dataSource]=\"points\" matSort>\r\n        <ng-container matColumnDef=\"description\">\r\n            <th mat-header-cell *matHeaderCellDef>Description</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                @if (element.isEditRow ) {\r\n            \r\n                    <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n                        <textarea [matAutocomplete]=\"auto\"  [(ngModel)]=\"pointRow.description\"  matInput cdkTextareaAutosize\r\n                            cdkAutosizeMinRows=\"1\" placeholder=\"Enter point description\"></textarea>\r\n                        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                            @for (input of filteredInputs; track input.id) {\r\n                            <mat-option [value]=\"input.label\" (click)=\"selectActiveInput(input)\">\r\n                                <div style=\"display: flex;align-items: center;gap:8px\">\r\n                                    <img height=\"24px\" width=\"24px\" [src]=\"  getInputIllustration(input) \"\r\n                                        [alt]=\"input.label\">\r\n                                    <span>\r\n                                        <div style=\"font-size: 0.75em;\">\r\n                                            <strong>\r\n                                                {{input.label}}\r\n                                            </strong>\r\n\r\n                                        </div>\r\n                                        <div\r\n                                            style=\"font-size: 0.75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n                                            {{input.hintLabel || input.formControlName}}\r\n                                        </div>\r\n                                    </span>\r\n\r\n                                </div>\r\n                            </mat-option>\r\n                            }\r\n\r\n                        </mat-autocomplete>\r\n\r\n                    </mat-form-field>\r\n\r\n\r\n                }@else {\r\n\r\n                {{ element.description }}}\r\n\r\n            </td>\r\n        </ng-container>\r\n        <ng-container matColumnDef=\"totalPoints\">\r\n            <th mat-header-cell *matHeaderCellDef>Points</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                @if (element.isEditRow) {\r\n               \r\n                    <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n                        <input matInput \r\n                         [(ngModel)]=\"pointRow.totalPoints\"\r\n                        placeholder=\"Enter points , eg 50\" type=\"number\">\r\n\r\n                    </mat-form-field>\r\n\r\n          \r\n                }@else {\r\n\r\n                {{ element.totalPoints }}\r\n                }\r\n\r\n            </td>\r\n        </ng-container>\r\n        <ng-container matColumnDef=\"pointType\">\r\n            <th mat-header-cell *matHeaderCellDef>Point Type</th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                @if (element.isEditRow) {\r\n                \r\n                    <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n                        <mat-select (selectionChange)=\"selectPointType($event)\" ngDefaultControl \r\n                        \r\n                        [value]=\"pointRow.pointType\"\r\n                      \r\n                            placeholder=\"Select\">\r\n                            @for (type of inputConfig?.adjudicationPointTypes || []; track $index) {\r\n                            <mat-option [value]=\"type\">{{type}}</mat-option>\r\n                            }\r\n                        </mat-select>\r\n                    </mat-form-field>\r\n             \r\n                }@else {\r\n\r\n                {{ element.pointType }}\r\n                }\r\n\r\n            </td>\r\n        </ng-container>\r\n        <ng-container matColumnDef=\"actions\" [stickyEnd]=\"true\">\r\n            <th mat-header-cell *matHeaderCellDef></th>\r\n            <td mat-cell *matCellDef=\"let element\">\r\n                <span style=\"display: flex;    justify-content: center;\">\r\n                    @if (element.isEditRow) {\r\n                    <button [disabled]=\"this.inputConfig?.disabled || this.inputConfig?.readonly\" matTooltip=\"Save Point in Edit\" color=\"primary\" style=\"white-space: nowrap;\r\n    height: 26px;\r\n    margin-bottom: 0px;\" mat-flat-button (click)=\"savePoints()\" [disabled]=\"!pointInEditIsValid\">\r\n\r\n                        <span style=\"font-size: 0.875em;\">\r\n                            save\r\n                        </span>\r\n\r\n\r\n                    </button>\r\n\r\n                    }@else {\r\n                    <button mat-icon-button (click)=\"edit(element)\">\r\n                        <mat-icon>edit</mat-icon>\r\n                    </button>\r\n                    <button mat-icon-button (click)=\"remove(element)\">\r\n                        <mat-icon>delete_forever</mat-icon>\r\n\r\n                    </button>\r\n                    }\r\n\r\n                </span>\r\n\r\n\r\n\r\n            </td>\r\n        </ng-container>\r\n        <tr mat-header-row *matHeaderRowDef=\"cols\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: cols\"></tr>\r\n    </table>\r\n</div>", styles: [".input-add{width:100%}th,td{padding:4px}mat-hint{text-align:start}.glass{background:#ffffff40!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.mat-column-totalPoints{width:100px!important;max-width:100px!important}.mat-column-pointType{width:180px!important;max-width:180px!important}.mat-column-actions{width:78px!important;max-width:78px!important}li{font-size:.75em}ol{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$6.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$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i2$5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i13.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: "directive", type: i9$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PointsCreationComponent, decorators: [{
             type: Component,
@@ -14836,7 +14862,7 @@ class SubmissionReviewComponent {
         return allCompetentSubmissions < (Number(maxLength) || 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SubmissionReviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SubmissionReviewComponent, isStandalone: true, selector: "app-submission-review", inputs: { inputConfig: "inputConfig", value: "value" }, outputs: { reviewChange: "reviewChange" }, ngImport: i0, template: "@if (vm$ | async; as vm) {\r\n\r\n<ng-container *ngIf=\"vm.loading; then loading; else (vm.error ? error : dataContainer)\"></ng-container>\r\n\r\n<ng-template #loading>\r\n  <div style=\"display: flex; justify-content: center; align-items: center; padding:24px;width: 100%;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #error>\r\n  <div class=\"info-card error-card\">\r\n    <h5 class=\"info-title\">\u274C Failed to load data</h5>\r\n    <p>{{ vm.error }}</p>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\">\r\n      Try Again\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dataContainer>\r\n  <ng-container\r\n    *ngIf=\"!vm.displayCols.length; then noColumns; else (!vm.submissions.length ? noSubmissions : submissionsTable)\"></ng-container>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noColumns>\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\u2699\uFE0F This step needs to be configured to show data.</h5>\r\n    <ol>\r\n      <li>\r\n        <strong>Why you're seeing this:</strong>\r\n        <ul>\r\n          <li>This component is designed for a <strong>\"Submission Review\"</strong> workflow step.</li>\r\n          <li>It's currently missing the required column setup.</li>\r\n        </ul>\r\n      </li>\r\n      <li>\r\n        <strong>What to do (for Administrators):</strong>\r\n        To fix this, go to the <strong>Workflow Builder</strong> and for this specific step, <strong>map the display\r\n          columns</strong> to the desired submission data (e.g., form fields or document keys).\r\n      </li>\r\n    </ol>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #noSubmissions>\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\u2139\uFE0F There are no submissions to display.</h5>\r\n    <ul>\r\n      <li>This can happen if <strong>no one has responded</strong> yet, or if the <strong>submission closing date has\r\n          passed</strong>.</li>\r\n      <li>If you are expecting to see submissions, try clicking the <strong>Refresh</strong> button.</li>\r\n    </ul>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\" class=\"load-button\">\r\n      Refresh\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #submissionsTable>\r\n  @if(!value || value.length === 0){\r\n\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\uD83D\uDCDD How to Review Submissions</h5>\r\n    <ol>\r\n      <li>\r\n        <strong>View Response:</strong> Click the <strong>Preview</strong> (<mat-icon\r\n          class=\"smallIcon\">preview</mat-icon>) icon to see the full submission.\r\n      </li>\r\n      <li>\r\n        <strong>Set Status:</strong> Use the dropdown to select <strong>Compliant</strong> or\r\n        <strong>Non-compliant</strong>.\r\n      </li>\r\n      <li>\r\n        <strong>Add Note (If Non-compliant):</strong>\r\n        <ul>\r\n          <li>If you select <strong>Non-compliant</strong>, you <strong>must</strong> add a note.</li>\r\n          <li>Click the <strong>Add Note</strong> (<mat-icon class=\"smallIcon\">add_comment</mat-icon>) icon, write your\r\n            feedback, and hit <strong>Save Feedback</strong>. Your note will be visible to the applicant.</li>\r\n        </ul>\r\n      </li>\r\n    </ol>\r\n  </div>\r\n  }\r\n  <table mat-table [dataSource]=\"vm.submissions\">\r\n    @for (col of vm.displayColumns; track col.formControlName) {\r\n    <ng-container [matColumnDef]=\"col.formControlName\">\r\n      <th mat-header-cell *matHeaderCellDef style=\"padding:4px\">\r\n\r\n        @if(col.formControlName === 'status' && !inputConfig?.readonly ){\r\n        <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n            margin-bottom: 8px;\r\n            margin-top: 8px;\r\n            border-radius:16px;\" appearance=\"outline\">\r\n          <mat-label>\r\n            Bulk Status Selection\r\n          </mat-label>\r\n          <mat-select\r\n            [style.color]=\"bulkStatus === 'non-compliant' ? 'var(--mat-sys-error)' : bulkStatus==='compliant'? 'var(--mat-sys-primary)' : ''\"\r\n            (selectionChange)=\"bulkStatusChanged($event)\" ngDefaultControl [value]=\"bulkStatus\"\r\n            placeholder=\" Select Status\">\r\n            @for (type of bulkOperations || []; track type) {\r\n            <mat-option [value]=\"type.value\">{{type.label}}</mat-option>\r\n            }\r\n          </mat-select>\r\n        </mat-form-field>\r\n        }@else {\r\n        {{ col.label }}\r\n        }\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let row\" mat-ripple class=\"table-cell\" [class.selected-row]=\"selected === row.id\"\r\n        (click)=\"$event.stopPropagation()\" [class.price-preference-cell]=\"true\"\r\n        [style.border-bottom-color]=\"row.adjudicationPricePreferenceCalculationColor\"\r\n        [style.background]=\"row.backgroundShades?.[col.formControlName]\">\r\n\r\n        @if(col.formControlName === 'actions'){\r\n        <span style=\"display: flex; align-items: center;\">\r\n          <button matTooltipPosition=\"before\"\r\n            [matTooltip]=\"`View and review **` + row[vm.columnMapping.respondentNameKey]+ `** 's' Submission`\"\r\n            (click)=\"viewMicroSubmission(row)\" mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n          @if( !(inputConfig?.readonly) || (inputConfig?.readonly) && !!row['submissionHasReviewNotes'] ){\r\n          <button (click)=\"openNotes(row)\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" matTooltipPosition=\"after\"\r\n            [matTooltip]=\"\r\n              `Add a review note for **` + row[vm.columnMapping.respondentNameKey] + `**`\" mat-icon-button>\r\n            <mat-icon [style.color]=\"\r\n              notesOpenForRowId === row.id ? 'var(--mat-sys-primary)' : (row['adj_microFlow_review']==='non-compliant' && !row['adj_microFlow_review_notes']?'var(--mat-sys-error)':'')\r\n              \">\r\n              {{ !row['submissionHasReviewNotes']? 'add_comment' : 'comment' }}\r\n            </mat-icon>\r\n          </button>\r\n          }\r\n\r\n        </span>\r\n\r\n\r\n\r\n        } @else if(col.formControlName === 'status'){\r\n        <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n            margin-bottom: 8px;\r\n            margin-top: 8px;\r\n            border-radius:16px;\" appearance=\"outline\">\r\n          <mat-select [disabled]=\"!canChangeStatus(row) ||  inputConfig?.readonly === true\"\r\n            [style.color]=\"row['adj_microFlow_review'] === 'non-compliant' ? 'var(--mat-sys-error)' : row['adj_microFlow_review']==='compliant'? 'var(--mat-sys-primary)' : ''\"\r\n            (selectionChange)=\"setResponseStatus(row,$event)\" ngDefaultControl [value]=\"row.adj_microFlow_review\"\r\n            placeholder=\" Select Status\">\r\n            @for (type of reviewStatuses || []; track type) {\r\n            <mat-option [value]=\"type.value\">{{type.label}}</mat-option>\r\n            }\r\n          </mat-select>\r\n          @if(row['adj_microFlow_review']==='non-compliant' && !row['adj_microFlow_review_notes']){\r\n          <mat-hint style=\"color:var(--mat-sys-error)\">\r\n            Rejection reason is required. Add a review note.\r\n          </mat-hint>\r\n          }\r\n        </mat-form-field>\r\n\r\n        } @else {\r\n        @switch (col?.type) {\r\n        @case ('daysAgo') {\r\n        {{ row[col.formControlName] | daysAgo }}\r\n        }\r\n        @case ('number') {\r\n        <div class=\"number-cell\">\r\n          <span>\r\n            {{ (row[col.formControlName] | number:'0.0-0' ) || 'N/A' }}\r\n          </span>\r\n          @if (col.showColor) {\r\n          <mat-icon [style.color]=\"row.adjudicationPricePreferenceCalculationColor\">\r\n            fiber_manual_record\r\n          </mat-icon>\r\n          }\r\n        </div>\r\n        }\r\n        @default {\r\n        @if($index === 0) {\r\n        <span class=\"main-submission-text\">\r\n          <mat-icon style=\"font-size: 1em;height:16px;width:16px\">domain</mat-icon>\r\n          <strong>\r\n            {{ row[col.formControlName] }}\r\n          </strong>\r\n        </span>\r\n        <span class=\"secondary-text\">\r\n          <mat-icon>fingerprint</mat-icon>\r\n          {{row[vm.columnMapping.respondentCodeKey]}}\r\n          <mat-icon>more_time</mat-icon>\r\n          {{ row[vm.columnMapping.responseDateKey ||''] | daysAgo}}\r\n        </span>\r\n        } @else {\r\n        {{ row[col.formControlName] }}\r\n        }\r\n        }\r\n        }\r\n        }\r\n      </td>\r\n    </ng-container>\r\n    }\r\n    <tr mat-header-row *matHeaderRowDef=\"vm.displayCols\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: vm.displayCols\"></tr>\r\n  </table>\r\n\r\n\r\n</ng-template>\r\n\r\n}", styles: [".number{display:flex;justify-content:space-between;align-items:center}li{font-size:.75em}ol,ul{margin-top:8px}.number-cell{display:flex;justify-content:space-between;align-items:center;width:100%}.secondary-text{display:flex;align-items:center;white-space:pre;font-size:.75em;gap:8px;opacity:.8}.secondary-text mat-icon{font-size:.875em;width:14px;height:14px}.mat-column-adjudicationPricePreferenceCalculation{max-width:70px}.mat-column-actions{padding:0;max-width:80px}.mat-column-status{padding-left:8px;padding-right:8px;max-width:fit-content!important}.main-submission-text{display:flex;align-items:center;gap:8px;font-size:.875em}.notes-card{width:100%;max-width:480px;resize:both;height:fit-content!important}.smallIcon{font-size:.875em;width:14px;height:14px}.table-cell{padding-left:4px;padding-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2$5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "ngmodule", type: RouterModule }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SubmissionReviewComponent, isStandalone: true, selector: "app-submission-review", inputs: { inputConfig: "inputConfig", value: "value" }, outputs: { reviewChange: "reviewChange" }, ngImport: i0, template: "@if (vm$ | async; as vm) {\r\n\r\n<ng-container *ngIf=\"vm.loading; then loading; else (vm.error ? error : dataContainer)\"></ng-container>\r\n\r\n<ng-template #loading>\r\n  <div style=\"display: flex; justify-content: center; align-items: center; padding:24px;width: 100%;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #error>\r\n  <div class=\"info-card error-card\">\r\n    <h5 class=\"info-title\">\u274C Failed to load data</h5>\r\n    <p>{{ vm.error }}</p>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\">\r\n      Try Again\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dataContainer>\r\n  <ng-container\r\n    *ngIf=\"!vm.displayCols.length; then noColumns; else (!vm.submissions.length ? noSubmissions : submissionsTable)\"></ng-container>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noColumns>\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\u2699\uFE0F This step needs to be configured to show data.</h5>\r\n    <ol>\r\n      <li>\r\n        <strong>Why you're seeing this:</strong>\r\n        <ul>\r\n          <li>This component is designed for a <strong>\"Submission Review\"</strong> workflow step.</li>\r\n          <li>It's currently missing the required column setup.</li>\r\n        </ul>\r\n      </li>\r\n      <li>\r\n        <strong>What to do (for Administrators):</strong>\r\n        To fix this, go to the <strong>Workflow Builder</strong> and for this specific step, <strong>map the display\r\n          columns</strong> to the desired submission data (e.g., form fields or document keys).\r\n      </li>\r\n    </ol>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #noSubmissions>\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\u2139\uFE0F There are no submissions to display.</h5>\r\n    <ul>\r\n      <li>This can happen if <strong>no one has responded</strong> yet, or if the <strong>submission closing date has\r\n          passed</strong>.</li>\r\n      <li>If you are expecting to see submissions, try clicking the <strong>Refresh</strong> button.</li>\r\n    </ul>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\" class=\"load-button\">\r\n      Refresh\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #submissionsTable>\r\n  @if(!value || value.length === 0){\r\n\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\uD83D\uDCDD How to Review Submissions</h5>\r\n    <ol>\r\n      <li>\r\n        <strong>View Response:</strong> Click the <strong>Preview</strong> (<mat-icon\r\n          class=\"smallIcon\">preview</mat-icon>) icon to see the full submission.\r\n      </li>\r\n      <li>\r\n        <strong>Set Status:</strong> Use the dropdown to select <strong>Compliant</strong> or\r\n        <strong>Non-compliant</strong>.\r\n      </li>\r\n      <li>\r\n        <strong>Add Note (If Non-compliant):</strong>\r\n        <ul>\r\n          <li>If you select <strong>Non-compliant</strong>, you <strong>must</strong> add a note.</li>\r\n          <li>Click the <strong>Add Note</strong> (<mat-icon class=\"smallIcon\">add_comment</mat-icon>) icon, write your\r\n            feedback, and hit <strong>Save Feedback</strong>. Your note will be visible to the applicant.</li>\r\n        </ul>\r\n      </li>\r\n    </ol>\r\n  </div>\r\n  }\r\n  <table mat-table [dataSource]=\"vm.submissions\">\r\n    @for (col of vm.displayColumns; track col.formControlName) {\r\n    <ng-container [matColumnDef]=\"col.formControlName\">\r\n      <th mat-header-cell *matHeaderCellDef style=\"padding:4px\">\r\n\r\n        @if(col.formControlName === 'status' && !inputConfig?.readonly ){\r\n        <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n            margin-bottom: 8px;\r\n            margin-top: 8px;\r\n            border-radius:16px;\" appearance=\"outline\">\r\n          <mat-label>\r\n            Bulk Status Selection\r\n          </mat-label>\r\n          <mat-select\r\n            [style.color]=\"bulkStatus === 'non-compliant' ? 'var(--mat-sys-error)' : bulkStatus==='compliant'? 'var(--mat-sys-primary)' : ''\"\r\n            (selectionChange)=\"bulkStatusChanged($event)\" ngDefaultControl [value]=\"bulkStatus\"\r\n            placeholder=\" Select Status\">\r\n            @for (type of bulkOperations || []; track type) {\r\n            <mat-option [value]=\"type.value\">{{type.label}}</mat-option>\r\n            }\r\n          </mat-select>\r\n        </mat-form-field>\r\n        }@else {\r\n        {{ col.label }}\r\n        }\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let row\" mat-ripple class=\"table-cell\" [class.selected-row]=\"selected === row.id\"\r\n        (click)=\"$event.stopPropagation()\" [class.price-preference-cell]=\"true\"\r\n        [style.border-bottom-color]=\"row.adjudicationPricePreferenceCalculationColor\"\r\n        [style.background]=\"row.backgroundShades?.[col.formControlName]\">\r\n\r\n        @if(col.formControlName === 'actions'){\r\n        <span style=\"display: flex; align-items: center;\">\r\n          <button matTooltipPosition=\"before\"\r\n            [matTooltip]=\"`View and review **` + row[vm.columnMapping.respondentNameKey]+ `** 's' Submission`\"\r\n            (click)=\"viewMicroSubmission(row)\" mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n          @if( !(inputConfig?.readonly) || (inputConfig?.readonly) && !!row['submissionHasReviewNotes'] ){\r\n          <button (click)=\"openNotes(row)\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" matTooltipPosition=\"after\"\r\n            [matTooltip]=\"\r\n              `Add a review note for **` + row[vm.columnMapping.respondentNameKey] + `**`\" mat-icon-button>\r\n            <mat-icon [style.color]=\"\r\n              notesOpenForRowId === row.id ? 'var(--mat-sys-primary)' : (row['adj_microFlow_review']==='non-compliant' && !row['adj_microFlow_review_notes']?'var(--mat-sys-error)':'')\r\n              \">\r\n              {{ !row['submissionHasReviewNotes']? 'add_comment' : 'comment' }}\r\n            </mat-icon>\r\n          </button>\r\n          }\r\n\r\n        </span>\r\n\r\n\r\n\r\n        } @else if(col.formControlName === 'status'){\r\n        <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n            margin-bottom: 8px;\r\n            margin-top: 8px;\r\n            border-radius:16px;\" appearance=\"outline\">\r\n          <mat-select [disabled]=\"!canChangeStatus(row) ||  inputConfig?.readonly === true\"\r\n            [style.color]=\"row['adj_microFlow_review'] === 'non-compliant' ? 'var(--mat-sys-error)' : row['adj_microFlow_review']==='compliant'? 'var(--mat-sys-primary)' : ''\"\r\n            (selectionChange)=\"setResponseStatus(row,$event)\" ngDefaultControl [value]=\"row.adj_microFlow_review\"\r\n            placeholder=\" Select Status\">\r\n            @for (type of reviewStatuses || []; track type) {\r\n            <mat-option [value]=\"type.value\">{{type.label}}</mat-option>\r\n            }\r\n          </mat-select>\r\n          @if(row['adj_microFlow_review']==='non-compliant' && !row['adj_microFlow_review_notes']){\r\n          <mat-hint style=\"color:var(--mat-sys-error)\">\r\n            Rejection reason is required. Add a review note.\r\n          </mat-hint>\r\n          }\r\n        </mat-form-field>\r\n\r\n        } @else {\r\n        @switch (col?.type) {\r\n        @case ('daysAgo') {\r\n        {{ row[col.formControlName] | daysAgo }}\r\n        }\r\n        @case ('number') {\r\n        <div class=\"number-cell\">\r\n          <span>\r\n            {{ (row[col.formControlName] | number:'0.0-0' ) || 'N/A' }}\r\n          </span>\r\n          @if (col.showColor) {\r\n          <mat-icon [style.color]=\"row.adjudicationPricePreferenceCalculationColor\">\r\n            fiber_manual_record\r\n          </mat-icon>\r\n          }\r\n        </div>\r\n        }\r\n        @default {\r\n        @if($index === 0) {\r\n        <span class=\"main-submission-text\">\r\n          <mat-icon style=\"font-size: 1em;height:16px;width:16px\">domain</mat-icon>\r\n          <strong>\r\n            {{ row[col.formControlName] }}\r\n          </strong>\r\n        </span>\r\n        <span class=\"secondary-text\">\r\n          <mat-icon>fingerprint</mat-icon>\r\n          {{row[vm.columnMapping.respondentCodeKey]}}\r\n          <mat-icon>more_time</mat-icon>\r\n          {{ row[vm.columnMapping.responseDateKey ||''] | daysAgo}}\r\n        </span>\r\n        } @else {\r\n        {{ row[col.formControlName] }}\r\n        }\r\n        }\r\n        }\r\n        }\r\n      </td>\r\n    </ng-container>\r\n    }\r\n    <tr mat-header-row *matHeaderRowDef=\"vm.displayCols\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: vm.displayCols\"></tr>\r\n  </table>\r\n\r\n\r\n</ng-template>\r\n\r\n}", styles: [".number{display:flex;justify-content:space-between;align-items:center}li{font-size:.75em}ol,ul{margin-top:8px}.number-cell{display:flex;justify-content:space-between;align-items:center;width:100%}.secondary-text{display:flex;align-items:center;white-space:pre;font-size:.75em;gap:8px;opacity:.8}.secondary-text mat-icon{font-size:.875em;width:14px;height:14px}.mat-column-adjudicationPricePreferenceCalculation{max-width:70px}.mat-column-actions{padding:0;max-width:80px}.mat-column-status{padding-left:8px;padding-right:8px;max-width:fit-content!important}.main-submission-text{display:flex;align-items:center;gap:8px;font-size:.875em}.notes-card{width:100%;max-width:480px;resize:both;height:fit-content!important}.smallIcon{font-size:.875em;width:14px;height:14px}.table-cell{padding-left:4px;padding-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2$5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "ngmodule", type: RouterModule }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SubmissionReviewComponent, decorators: [{
             type: Component,
@@ -14918,7 +14944,7 @@ class PointAssignmentDialogComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PointAssignmentDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PointAssignmentDialogComponent, isStandalone: true, selector: "lib-point-assignment-dialog", ngImport: i0, template: "<span mat-dialog-title>\r\n    Assign Points for <span class=\"bidder-name\">{{ data.row['nameOfBidder'] }}</span>\r\n</span>\r\n  @if( !data.readonly){\r\n<div class=\"dialog-instructions\">\r\n    @if(!pointsForm.dirty && !pointsForm.touched){\r\n    <div class=\"info-card\">\r\n        <h5 class=\"info-title\">\uD83D\uDCAF How to Assign Points\r\n\r\n        </h5>\r\n        <ol>\r\n            <li>\r\n                <strong>Enter a score</strong> for each item listed below.\r\n            </li>\r\n            <li>\r\n                <strong>Follow the rules:</strong>\r\n                <ul>\r\n                    <li>Your score cannot be higher than the maximum points shown (e.g., / 10).</li>\r\n                    <li>The <strong>\"Save Points\"</strong> button at the bottom will turn blue when everything is filled\r\n                        out correctly.</li>\r\n                </ul>\r\n            </li>\r\n            <li>\r\n                <strong>Click the blue \"Save Points\" button</strong> to finish.\r\n            </li>\r\n        </ol>\r\n    </div>\r\n    }\r\n    @else {\r\n    <div class=\"info-card\">\r\n        <h5 class=\"info-title\">\u270D\uFE0F Editing Your Scores</h5>\r\n        <ol>\r\n            <li>\r\n                <strong>You are viewing saved scores.</strong> To make a change, simply click on a score and type in a\r\n                new number.\r\n            </li>\r\n            <li>\r\n                The <strong>Total Points</strong> bar at the top will update as you make edits.\r\n            </li>\r\n            <li>\r\n                Click <strong>\"Save Points\"</strong> to confirm your changes when you're done.\r\n            </li>\r\n        </ol>\r\n    </div>\r\n    }\r\n</div>\r\n\r\n  }\r\n\r\n\r\n<mat-dialog-content style=\"padding-bottom: 8px;padding-bottom: 8px\" [formGroup]=\"pointsForm\">\r\n    <div class=\"summary-bar\">\r\n        <h3>Total Points: {{ totalPoints$ | async }} / {{ maxPossiblePoints }}</h3>\r\n        <mat-progress-bar mode=\"determinate\"\r\n            [value]=\"((totalPoints$ | async) || 0) / maxPossiblePoints * 100\"></mat-progress-bar>\r\n    </div>\r\n\r\n    <mat-accordion multi>\r\n        @for (group of data.scoreSheetGroups; track group.key) {\r\n        <mat-expansion-panel [expanded]=\"true\" [formGroupName]=\"group.key\">\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>{{ group.name }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n\r\n            @for (score of data.groupedScoreSheet[group.key] || []; track score.id) {\r\n            <div class=\"score-item\">\r\n                <label [for]=\"score.id\" class=\"score-description\">{{ score.description }}</label>\r\n\r\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"score-input\">\r\n                    <mat-label>Score</mat-label>\r\n                    <input [disabled]=\"data.readonly\" matInput type=\"number\" placeholder=\"0\" [id]=\"score.id\"\r\n                        [formControlName]=\"score.id\" [max]=\"score.totalPoints\" min=\"0\" [errorStateMatcher]=\"matcher\"\r\n                        (input)=\"correctMaxValue($event, group.key, score.id, score.totalPoints)\" />\r\n                    <span matSuffix>\r\n                        <span style=\"min-width: 58px; display:flex\">\r\n                            / {{ score.totalPoints }}\r\n                        </span>\r\n                    </span>\r\n\r\n                    <mat-error *ngIf=\"pointsForm.get(group.key)?.get(score.id)?.hasError('required')\">\r\n                        A score is required.\r\n                    </mat-error>\r\n                    <mat-error *ngIf=\"pointsForm.get(group.key)?.get(score.id)?.hasError('max')\">\r\n                        Score cannot exceed {{ score.totalPoints }}.\r\n                    </mat-error>\r\n                    <mat-error *ngIf=\"pointsForm.get(group.key)?.get(score.id)?.hasError('min')\">\r\n                        Score cannot be negative.\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            }\r\n        </mat-expansion-panel>\r\n        }\r\n    </mat-accordion>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions align=\"end\">\r\n    <button mat-button mat-dialog-close>Cancel</button>\r\n    @if( !data.readonly){\r\n    <button mat-flat-button color=\"primary\" \r\n    [mat-dialog-close]=\"pointsForm.getRawValue()\"\r\n        [disabled]=\"pointsForm.invalid\">\r\n        Save Points\r\n    </button>\r\n    }\r\n\r\n</mat-dialog-actions>", styles: [":host{display:block;min-width:500px;max-width:700px}.bidder-name{font-weight:500}.summary-bar{margin-bottom:24px;h3{margin-bottom:8px;font-weight:500}}.score-item{display:flex;align-items:center;justify-content:space-between;padding:8px 4px;gap:16px}.score-description{flex:1;margin-right:16px;line-height:1.4}.score-input{flex-shrink:0;width:150px}.mat-expansion-panel-body .score-item:last-child+mat-divider{display:none}mat-dialog-actions{padding:16px 24px}.mat-mdc-form-field-error{font-size:.8125em}.dialog-instructions{margin-top:-8px;margin-bottom:24px;max-width:95%;padding-left:24px;padding-right:24px}li{font-size:.75em}ol,ul{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PointAssignmentDialogComponent, isStandalone: true, selector: "lib-point-assignment-dialog", ngImport: i0, template: "<span mat-dialog-title>\r\n    Assign Points for <span class=\"bidder-name\">{{ data.row['nameOfBidder'] }}</span>\r\n</span>\r\n  @if( !data.readonly){\r\n<div class=\"dialog-instructions\">\r\n    @if(!pointsForm.dirty && !pointsForm.touched){\r\n    <div class=\"info-card\">\r\n        <h5 class=\"info-title\">\uD83D\uDCAF How to Assign Points\r\n\r\n        </h5>\r\n        <ol>\r\n            <li>\r\n                <strong>Enter a score</strong> for each item listed below.\r\n            </li>\r\n            <li>\r\n                <strong>Follow the rules:</strong>\r\n                <ul>\r\n                    <li>Your score cannot be higher than the maximum points shown (e.g., / 10).</li>\r\n                    <li>The <strong>\"Save Points\"</strong> button at the bottom will turn blue when everything is filled\r\n                        out correctly.</li>\r\n                </ul>\r\n            </li>\r\n            <li>\r\n                <strong>Click the blue \"Save Points\" button</strong> to finish.\r\n            </li>\r\n        </ol>\r\n    </div>\r\n    }\r\n    @else {\r\n    <div class=\"info-card\">\r\n        <h5 class=\"info-title\">\u270D\uFE0F Editing Your Scores</h5>\r\n        <ol>\r\n            <li>\r\n                <strong>You are viewing saved scores.</strong> To make a change, simply click on a score and type in a\r\n                new number.\r\n            </li>\r\n            <li>\r\n                The <strong>Total Points</strong> bar at the top will update as you make edits.\r\n            </li>\r\n            <li>\r\n                Click <strong>\"Save Points\"</strong> to confirm your changes when you're done.\r\n            </li>\r\n        </ol>\r\n    </div>\r\n    }\r\n</div>\r\n\r\n  }\r\n\r\n\r\n<mat-dialog-content style=\"padding-bottom: 8px;padding-bottom: 8px\" [formGroup]=\"pointsForm\">\r\n    <div class=\"summary-bar\">\r\n        <h3>Total Points: {{ totalPoints$ | async }} / {{ maxPossiblePoints }}</h3>\r\n        <mat-progress-bar mode=\"determinate\"\r\n            [value]=\"((totalPoints$ | async) || 0) / maxPossiblePoints * 100\"></mat-progress-bar>\r\n    </div>\r\n\r\n    <mat-accordion multi>\r\n        @for (group of data.scoreSheetGroups; track group.key) {\r\n        <mat-expansion-panel [expanded]=\"true\" [formGroupName]=\"group.key\">\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>{{ group.name }}</mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n\r\n            @for (score of data.groupedScoreSheet[group.key] || []; track score.id) {\r\n            <div class=\"score-item\">\r\n                <label [for]=\"score.id\" class=\"score-description\">{{ score.description }}</label>\r\n\r\n                <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"score-input\">\r\n                    <mat-label>Score</mat-label>\r\n                    <input [disabled]=\"data.readonly\" matInput type=\"number\" placeholder=\"0\" [id]=\"score.id\"\r\n                        [formControlName]=\"score.id\" [max]=\"score.totalPoints\" min=\"0\" [errorStateMatcher]=\"matcher\"\r\n                        (input)=\"correctMaxValue($event, group.key, score.id, score.totalPoints)\" />\r\n                    <span matSuffix>\r\n                        <span style=\"min-width: 58px; display:flex\">\r\n                            / {{ score.totalPoints }}\r\n                        </span>\r\n                    </span>\r\n\r\n                    <mat-error *ngIf=\"pointsForm.get(group.key)?.get(score.id)?.hasError('required')\">\r\n                        A score is required.\r\n                    </mat-error>\r\n                    <mat-error *ngIf=\"pointsForm.get(group.key)?.get(score.id)?.hasError('max')\">\r\n                        Score cannot exceed {{ score.totalPoints }}.\r\n                    </mat-error>\r\n                    <mat-error *ngIf=\"pointsForm.get(group.key)?.get(score.id)?.hasError('min')\">\r\n                        Score cannot be negative.\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </div>\r\n            <mat-divider></mat-divider>\r\n            }\r\n        </mat-expansion-panel>\r\n        }\r\n    </mat-accordion>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions align=\"end\">\r\n    <button mat-button mat-dialog-close>Cancel</button>\r\n    @if( !data.readonly){\r\n    <button mat-flat-button color=\"primary\" \r\n    [mat-dialog-close]=\"pointsForm.getRawValue()\"\r\n        [disabled]=\"pointsForm.invalid\">\r\n        Save Points\r\n    </button>\r\n    }\r\n\r\n</mat-dialog-actions>", styles: [":host{display:block;min-width:500px;max-width:700px}.bidder-name{font-weight:500}.summary-bar{margin-bottom:24px;h3{margin-bottom:8px;font-weight:500}}.score-item{display:flex;align-items:center;justify-content:space-between;padding:8px 4px;gap:16px}.score-description{flex:1;margin-right:16px;line-height:1.4}.score-input{flex-shrink:0;width:150px}.mat-expansion-panel-body .score-item:last-child+mat-divider{display:none}mat-dialog-actions{padding:16px 24px}.mat-mdc-form-field-error{font-size:.8125em}.dialog-instructions{margin-top:-8px;margin-bottom:24px;max-width:95%;padding-left:24px;padding-right:24px}li{font-size:.75em}ol,ul{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i13.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: 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PointAssignmentDialogComponent, decorators: [{
             type: Component,
@@ -15086,7 +15112,7 @@ class PointAssignmentComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PointAssignmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PointAssignmentComponent, isStandalone: true, selector: "app-point-assignment", inputs: { inputConfig: "inputConfig", value: "value" }, outputs: { pointsChange: "pointsChange" }, ngImport: i0, template: "@if (vm$ | async; as vm) {\r\n<ng-container *ngIf=\"vm.loading; then loading; else (vm.error ? error : dataContainer)\"></ng-container>\r\n\r\n<ng-template #loading>\r\n  <div style=\"display: flex; justify-content: center; align-items: center; padding:24px;width: 100%;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n<ng-template #error>\r\n  <div class=\"info-card error-card\">\r\n    <h5 class=\"info-title\">\u274C Failed to load data</h5>\r\n    <p>{{ vm.error }}</p>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\">\r\n      Try Again\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n<ng-template #dataContainer>\r\n\r\n  @if(vm.submissions.length === 0){\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\u2139\uFE0F There are no submissions to display.</h5>\r\n    <ul>\r\n      <li>This can happen if <strong>no one has responded</strong> yet, or if <strong>none of the submission were\r\n          compliant </strong>.</li>\r\n      <li>If you are expecting to see submissions, try clicking the <strong>Refresh</strong> button.</li>\r\n    </ul>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\" class=\"load-button\">\r\n      Refresh\r\n    </button>\r\n  </div>\r\n  }@else {\r\n\r\n  @if(!value || value.length === 0){\r\n\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\uD83D\uDCDD How to Review Submissions</h5>\r\n    <ol>\r\n      <li>\r\n        <strong>View Response:</strong> Click the <strong>Preview</strong> (<mat-icon\r\n          class=\"smallIcon\">preview</mat-icon>) icon to see the full submission.\r\n      </li>\r\n      <li>\r\n        <strong>Set Status:</strong> Use the dropdown to select <strong>Compliant</strong> or\r\n        <strong>Non-compliant</strong>.\r\n      </li>\r\n      <li>\r\n        <strong>Add Note (If Non-compliant):</strong>\r\n        <ul>\r\n          <li>If you select <strong>Non-compliant</strong>, you <strong>must</strong> add a note.</li>\r\n          <li>Click the <strong>Add Note</strong> (<mat-icon class=\"smallIcon\">add_comment</mat-icon>) icon, write your\r\n            feedback, and hit <strong>Save Feedback</strong>. Your note will be visible to the applicant.</li>\r\n        </ul>\r\n      </li>\r\n    </ol>\r\n  </div>\r\n  }\r\n  <table mat-table [dataSource]=\"vm.submissions\">\r\n    @for (col of vm.displayColumns; track col.formControlName) {\r\n    <ng-container [matColumnDef]=\"col.formControlName\">\r\n      <th mat-header-cell *matHeaderCellDef style=\"padding:4px\">\r\n        {{ col.label }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let row\" mat-ripple class=\"table-cell\" (click)=\"$event.stopPropagation()\"\r\n        [class.price-preference-cell]=\"true\"\r\n        [style.border-bottom-color]=\"row.adjudicationPricePreferenceCalculationColor\"\r\n        [style.background]=\"row.backgroundShades?.[col.formControlName]\">\r\n        @if(col.formControlName === 'actions'){\r\n        <span style=\"display: flex; align-items: center;\">\r\n          <button matTooltipPosition=\"before\"\r\n            [matTooltip]=\"`View and review **` + row[vm.columnMapping.respondentNameKey]+ `** 's' Submission`\"\r\n            (click)=\"viewMicroSubmission(row)\" mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n        </span>\r\n        }@else if (col.formControlName === 'adj_microFlow_scoreSheetTotalPoints') {\r\n        <button \r\n        (click)=\"openPointAssignmentDialog(row,vm?.groupedScoreSheet, vm.scoreSheetGroups)\"\r\n        [id]=\"row.id\"  mat-stroked-button>\r\n        \r\n          {{ (row[col.formControlName] | number:'0.0-0' ) || 'Assign Points' }}\r\n        \r\n        </button>\r\n        }\r\n\r\n        @else {\r\n        @switch (col?.type) {\r\n        @case ('daysAgo') {\r\n        {{ row[col.formControlName] | daysAgo }}\r\n        }\r\n        @case ('number') {\r\n\r\n        {{ (row[col.formControlName] | number:'0.0-0' ) || 'N/A' }}\r\n\r\n        }\r\n        @default {\r\n        @if($index === 0) {\r\n        <span class=\"main-submission-text\">\r\n          <mat-icon style=\"font-size: 1em;height:16px;width:16px\">domain</mat-icon>\r\n          <strong>\r\n            {{ row[col.formControlName] }}\r\n          </strong>\r\n        </span>\r\n        <span class=\"secondary-text\">\r\n          <mat-icon>fingerprint</mat-icon>\r\n          {{row[vm.columnMapping.respondentCodeKey]}}\r\n          <mat-icon>more_time</mat-icon>\r\n          {{ row[vm.columnMapping.responseDateKey ||''] | daysAgo}}\r\n        </span>\r\n        } @else {\r\n        {{ row[col.formControlName] }}\r\n        }\r\n        }\r\n        }\r\n        }\r\n\r\n      </td>\r\n    </ng-container>\r\n    }\r\n    <tr mat-header-row *matHeaderRowDef=\"vm.displayCols\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: vm.displayCols\"></tr>\r\n  </table>\r\n  }\r\n</ng-template>\r\n}\r\n\r\n", styles: [".number{display:flex;justify-content:space-between;align-items:center}li{font-size:.75em}ol,ul{margin-top:8px}.number-cell{display:flex;justify-content:space-between;align-items:center;width:100%}.secondary-text{display:flex;align-items:center;white-space:pre;font-size:.75em;gap:8px;opacity:.8}.secondary-text mat-icon{font-size:.875em;width:14px;height:14px}.mat-column-adj_microFlow_review{max-width:18px;text-align:center}.mat-column-nameOfBidder{max-width:90px}.mat-column-actions{padding:0;max-width:80px}.mat-column-status{padding-left:8px;padding-right:8px;max-width:fit-content!important}.main-submission-text{display:flex;align-items:center;gap:8px;font-size:.875em}.notes-card{width:100%;max-width:480px;resize:both;height:fit-content!important}.smallIcon{font-size:.875em;width:14px;height:14px}.table-cell{padding-left:4px;padding-right:4px}.mat-column-adjudicationPricePreferenceCalculation{max-width:18px;text-align:center}.mat-column-adj_microFlow_scoreSheetTotalPoints{width:148px;text-align:center}.mat-column-actions{max-width:14px;text-align:center}.ngx-t-forms-point-assignment-menu{width:fit-content!important;max-width:400px!important}.point-assignment-menu{padding-left:28px;padding-right:28px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PointAssignmentComponent, isStandalone: true, selector: "app-point-assignment", inputs: { inputConfig: "inputConfig", value: "value" }, outputs: { pointsChange: "pointsChange" }, ngImport: i0, template: "@if (vm$ | async; as vm) {\r\n<ng-container *ngIf=\"vm.loading; then loading; else (vm.error ? error : dataContainer)\"></ng-container>\r\n\r\n<ng-template #loading>\r\n  <div style=\"display: flex; justify-content: center; align-items: center; padding:24px;width: 100%;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n<ng-template #error>\r\n  <div class=\"info-card error-card\">\r\n    <h5 class=\"info-title\">\u274C Failed to load data</h5>\r\n    <p>{{ vm.error }}</p>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\">\r\n      Try Again\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n<ng-template #dataContainer>\r\n\r\n  @if(vm.submissions.length === 0){\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\u2139\uFE0F There are no submissions to display.</h5>\r\n    <ul>\r\n      <li>This can happen if <strong>no one has responded</strong> yet, or if <strong>none of the submission were\r\n          compliant </strong>.</li>\r\n      <li>If you are expecting to see submissions, try clicking the <strong>Refresh</strong> button.</li>\r\n    </ul>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\" class=\"load-button\">\r\n      Refresh\r\n    </button>\r\n  </div>\r\n  }@else {\r\n\r\n  @if(!value || value.length === 0){\r\n\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\uD83D\uDCDD How to Review Submissions</h5>\r\n    <ol>\r\n      <li>\r\n        <strong>View Response:</strong> Click the <strong>Preview</strong> (<mat-icon\r\n          class=\"smallIcon\">preview</mat-icon>) icon to see the full submission.\r\n      </li>\r\n      <li>\r\n        <strong>Set Status:</strong> Use the dropdown to select <strong>Compliant</strong> or\r\n        <strong>Non-compliant</strong>.\r\n      </li>\r\n      <li>\r\n        <strong>Add Note (If Non-compliant):</strong>\r\n        <ul>\r\n          <li>If you select <strong>Non-compliant</strong>, you <strong>must</strong> add a note.</li>\r\n          <li>Click the <strong>Add Note</strong> (<mat-icon class=\"smallIcon\">add_comment</mat-icon>) icon, write your\r\n            feedback, and hit <strong>Save Feedback</strong>. Your note will be visible to the applicant.</li>\r\n        </ul>\r\n      </li>\r\n    </ol>\r\n  </div>\r\n  }\r\n  <table mat-table [dataSource]=\"vm.submissions\">\r\n    @for (col of vm.displayColumns; track col.formControlName) {\r\n    <ng-container [matColumnDef]=\"col.formControlName\">\r\n      <th mat-header-cell *matHeaderCellDef style=\"padding:4px\">\r\n        {{ col.label }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let row\" mat-ripple class=\"table-cell\" (click)=\"$event.stopPropagation()\"\r\n        [class.price-preference-cell]=\"true\"\r\n        [style.border-bottom-color]=\"row.adjudicationPricePreferenceCalculationColor\"\r\n        [style.background]=\"row.backgroundShades?.[col.formControlName]\">\r\n        @if(col.formControlName === 'actions'){\r\n        <span style=\"display: flex; align-items: center;\">\r\n          <button matTooltipPosition=\"before\"\r\n            [matTooltip]=\"`View and review **` + row[vm.columnMapping.respondentNameKey]+ `** 's' Submission`\"\r\n            (click)=\"viewMicroSubmission(row)\" mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n        </span>\r\n        }@else if (col.formControlName === 'adj_microFlow_scoreSheetTotalPoints') {\r\n        <button \r\n        (click)=\"openPointAssignmentDialog(row,vm?.groupedScoreSheet, vm.scoreSheetGroups)\"\r\n        [id]=\"row.id\"  mat-stroked-button>\r\n        \r\n          {{ (row[col.formControlName] | number:'0.0-0' ) || 'Assign Points' }}\r\n        \r\n        </button>\r\n        }\r\n\r\n        @else {\r\n        @switch (col?.type) {\r\n        @case ('daysAgo') {\r\n        {{ row[col.formControlName] | daysAgo }}\r\n        }\r\n        @case ('number') {\r\n\r\n        {{ (row[col.formControlName] | number:'0.0-0' ) || 'N/A' }}\r\n\r\n        }\r\n        @default {\r\n        @if($index === 0) {\r\n        <span class=\"main-submission-text\">\r\n          <mat-icon style=\"font-size: 1em;height:16px;width:16px\">domain</mat-icon>\r\n          <strong>\r\n            {{ row[col.formControlName] }}\r\n          </strong>\r\n        </span>\r\n        <span class=\"secondary-text\">\r\n          <mat-icon>fingerprint</mat-icon>\r\n          {{row[vm.columnMapping.respondentCodeKey]}}\r\n          <mat-icon>more_time</mat-icon>\r\n          {{ row[vm.columnMapping.responseDateKey ||''] | daysAgo}}\r\n        </span>\r\n        } @else {\r\n        {{ row[col.formControlName] }}\r\n        }\r\n        }\r\n        }\r\n        }\r\n\r\n      </td>\r\n    </ng-container>\r\n    }\r\n    <tr mat-header-row *matHeaderRowDef=\"vm.displayCols\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: vm.displayCols\"></tr>\r\n  </table>\r\n  }\r\n</ng-template>\r\n}\r\n\r\n", styles: [".number{display:flex;justify-content:space-between;align-items:center}li{font-size:.75em}ol,ul{margin-top:8px}.number-cell{display:flex;justify-content:space-between;align-items:center;width:100%}.secondary-text{display:flex;align-items:center;white-space:pre;font-size:.75em;gap:8px;opacity:.8}.secondary-text mat-icon{font-size:.875em;width:14px;height:14px}.mat-column-adj_microFlow_review{max-width:18px;text-align:center}.mat-column-nameOfBidder{max-width:90px}.mat-column-actions{padding:0;max-width:80px}.mat-column-status{padding-left:8px;padding-right:8px;max-width:fit-content!important}.main-submission-text{display:flex;align-items:center;gap:8px;font-size:.875em}.notes-card{width:100%;max-width:480px;resize:both;height:fit-content!important}.smallIcon{font-size:.875em;width:14px;height:14px}.table-cell{padding-left:4px;padding-right:4px}.mat-column-adjudicationPricePreferenceCalculation{max-width:18px;text-align:center}.mat-column-adj_microFlow_scoreSheetTotalPoints{width:148px;text-align:center}.mat-column-actions{max-width:14px;text-align:center}.ngx-t-forms-point-assignment-menu{width:fit-content!important;max-width:400px!important}.point-assignment-menu{padding-left:28px;padding-right:28px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PointAssignmentComponent, decorators: [{
             type: Component,
@@ -15351,7 +15377,7 @@ class SupplierSelectionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SupplierSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SupplierSelectionComponent, isStandalone: true, selector: "app-supplier-selection", inputs: { inputConfig: "inputConfig", value: "value" }, outputs: { supplierSelection: "supplierSelection" }, ngImport: i0, template: "@if (vm$ | async; as vm) {\r\n<ng-container *ngIf=\"vm.loading; then loading; else (vm.error ? error : dataContainer)\"></ng-container>\r\n\r\n<ng-template #loading>\r\n  <div style=\"display: flex; justify-content: center; align-items: center; padding:24px;width: 100%;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n<ng-template #error>\r\n  <div class=\"info-card error-card\">\r\n    <h5 class=\"info-title\">\u274C Failed to load data</h5>\r\n    <p>{{ vm.error }}</p>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\">\r\n      Try Again\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n<ng-template #dataContainer>\r\n\r\n  @if(vm.submissions.length === 0){\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\u2139\uFE0F There are no submissions to display.</h5>\r\n    <ul>\r\n      <li>This can happen if <strong>no one has responded</strong> yet, or if <strong>none of the submission were\r\n          compliant </strong>.</li>\r\n      <li>If you are expecting to see submissions, try clicking the <strong>Refresh</strong> button.</li>\r\n    </ul>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\" class=\"load-button\">\r\n      Refresh\r\n    </button>\r\n  </div>\r\n  }@else {\r\n\r\n  @if(!value || value.length === 0){\r\n\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\uD83D\uDCDD How to Appoint</h5>\r\n    <ol>\r\n      <li>\r\n        <strong>View Response:</strong> Click the <strong>Preview</strong> (<mat-icon\r\n          class=\"smallIcon\">preview</mat-icon>) icon to see the full submission.\r\n      </li>\r\n      <li>\r\n        <strong>Appoint:</strong> Click the  <strong>Appoint</strong>  button to appoint the supplier.\r\n      </li>\r\n     \r\n    </ol>\r\n  </div>\r\n  }\r\n  <table mat-table [dataSource]=\"vm.submissions\">\r\n    @for (col of vm.displayColumns; track col.formControlName) {\r\n    <ng-container [matColumnDef]=\"col.formControlName\">\r\n      <th mat-header-cell *matHeaderCellDef style=\"padding:4px\">\r\n        {{ col.label }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let row\" mat-ripple class=\"table-cell\" (click)=\"$event.stopPropagation()\"\r\n        [class.price-preference-cell]=\"true\" [style.border-bottom-color]=\"row.colColors[col.formControlName]\"\r\n        [style.background]=\"row.backgroundShades?.[col.formControlName]\">\r\n        @if(col.formControlName === 'actions'){\r\n        <span style=\"display: flex; align-items: center;\">\r\n          <button matTooltipPosition=\"before\"\r\n            [matTooltip]=\"`View and review **` + row[vm.columnMapping.respondentNameKey]+ `** 's' Submission`\"\r\n            (click)=\"viewMicroSubmission(row)\" mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n        </span>\r\n        }\r\n        @else if(col.formControlName === 'adj_microFlow_supplierAppointed') {\r\n        @if(row[col.formControlName] === true) {\r\n        <button (click)=\"appointASupplier(row)\" mat-flat-button color=\"primary\">\r\n          <mat-icon>\r\n            check_circle\r\n          </mat-icon>\r\n          Appointed\r\n        </button>\r\n        }@else {\r\n        <button (click)=\"appointASupplier(row)\" mat-stroked-button>\r\n          Appoint\r\n        </button>\r\n        }\r\n\r\n        }\r\n        @else {\r\n        @switch (col?.type) {\r\n        @case ('daysAgo') {\r\n        {{ row[col.formControlName] | daysAgo }}\r\n        }\r\n        @case ('number') {\r\n\r\n        {{ (row[col.formControlName] | number:'0.0-0' ) || 'N/A' }}\r\n\r\n        }\r\n        @default {\r\n        @if($index === 0) {\r\n        <span class=\"main-submission-text\">\r\n          <mat-icon style=\"font-size: 1em;height:16px;width:16px\">domain</mat-icon>\r\n          <strong>\r\n            {{ row[col.formControlName] }}\r\n          </strong>\r\n        </span>\r\n        <span class=\"secondary-text\">\r\n          <mat-icon>fingerprint</mat-icon>\r\n          {{row[vm.columnMapping.respondentCodeKey]}}\r\n          <mat-icon>more_time</mat-icon>\r\n          {{ row[vm.columnMapping.responseDateKey ||''] | daysAgo}}\r\n        </span>\r\n        } @else {\r\n        {{ row[col.formControlName] }}\r\n        }\r\n        }\r\n        }\r\n        }\r\n\r\n      </td>\r\n    </ng-container>\r\n    }\r\n    <tr mat-header-row *matHeaderRowDef=\"vm.displayCols\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: vm.displayCols\"></tr>\r\n  </table>\r\n  }\r\n</ng-template>\r\n}", styles: [".number{display:flex;justify-content:space-between;align-items:center}li{font-size:.75em}ol,ul{margin-top:8px}.number-cell{display:flex;justify-content:space-between;align-items:center;width:100%}.secondary-text{display:flex;align-items:center;white-space:pre;font-size:.75em;gap:8px;opacity:.8}.secondary-text mat-icon{font-size:.875em;width:14px;height:14px}.mat-column-adj_microFlow_review{max-width:18px;text-align:center}.mat-column-nameOfBidder{max-width:90px}.mat-column-actions{padding:0;max-width:80px}.mat-column-status{padding-left:8px;padding-right:8px;max-width:fit-content!important}.main-submission-text{display:flex;align-items:center;gap:8px;font-size:.875em}.notes-card{width:100%;max-width:480px;resize:both;height:fit-content!important}.smallIcon{font-size:.875em;width:14px;height:14px}.table-cell{padding-left:4px;padding-right:4px}.mat-column-adjudicationPricePreferenceCalculation,.mat-column-adj_microFlow_scoreSheetTotalPoints,.mat-column-adj_microFlow_pointsAwarded,.mat-column-adj_microFlow_pricePointCalculation{max-width:18px;text-align:center}.mat-column-adj_microFlow_supplierAppointed{max-width:50px;text-align:center}.mat-column-actions{max-width:14px;text-align:center}.ngx-t-forms-point-assignment-menu{width:fit-content!important;max-width:400px!important}.point-assignment-menu{padding-left:28px;padding-right:28px}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SupplierSelectionComponent, isStandalone: true, selector: "app-supplier-selection", inputs: { inputConfig: "inputConfig", value: "value" }, outputs: { supplierSelection: "supplierSelection" }, ngImport: i0, template: "@if (vm$ | async; as vm) {\r\n<ng-container *ngIf=\"vm.loading; then loading; else (vm.error ? error : dataContainer)\"></ng-container>\r\n\r\n<ng-template #loading>\r\n  <div style=\"display: flex; justify-content: center; align-items: center; padding:24px;width: 100%;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n<ng-template #error>\r\n  <div class=\"info-card error-card\">\r\n    <h5 class=\"info-title\">\u274C Failed to load data</h5>\r\n    <p>{{ vm.error }}</p>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\">\r\n      Try Again\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n<ng-template #dataContainer>\r\n\r\n  @if(vm.submissions.length === 0){\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\u2139\uFE0F There are no submissions to display.</h5>\r\n    <ul>\r\n      <li>This can happen if <strong>no one has responded</strong> yet, or if <strong>none of the submission were\r\n          compliant </strong>.</li>\r\n      <li>If you are expecting to see submissions, try clicking the <strong>Refresh</strong> button.</li>\r\n    </ul>\r\n    <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\" class=\"load-button\">\r\n      Refresh\r\n    </button>\r\n  </div>\r\n  }@else {\r\n\r\n  @if(!value || value.length === 0){\r\n\r\n  <div class=\"info-card\">\r\n    <h5 class=\"info-title\">\uD83D\uDCDD How to Appoint</h5>\r\n    <ol>\r\n      <li>\r\n        <strong>View Response:</strong> Click the <strong>Preview</strong> (<mat-icon\r\n          class=\"smallIcon\">preview</mat-icon>) icon to see the full submission.\r\n      </li>\r\n      <li>\r\n        <strong>Appoint:</strong> Click the  <strong>Appoint</strong>  button to appoint the supplier.\r\n      </li>\r\n     \r\n    </ol>\r\n  </div>\r\n  }\r\n  <table mat-table [dataSource]=\"vm.submissions\">\r\n    @for (col of vm.displayColumns; track col.formControlName) {\r\n    <ng-container [matColumnDef]=\"col.formControlName\">\r\n      <th mat-header-cell *matHeaderCellDef style=\"padding:4px\">\r\n        {{ col.label }}\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let row\" mat-ripple class=\"table-cell\" (click)=\"$event.stopPropagation()\"\r\n        [class.price-preference-cell]=\"true\" [style.border-bottom-color]=\"row.colColors[col.formControlName]\"\r\n        [style.background]=\"row.backgroundShades?.[col.formControlName]\">\r\n        @if(col.formControlName === 'actions'){\r\n        <span style=\"display: flex; align-items: center;\">\r\n          <button matTooltipPosition=\"before\"\r\n            [matTooltip]=\"`View and review **` + row[vm.columnMapping.respondentNameKey]+ `** 's' Submission`\"\r\n            (click)=\"viewMicroSubmission(row)\" mat-icon-button>\r\n            <mat-icon>preview</mat-icon>\r\n          </button>\r\n        </span>\r\n        }\r\n        @else if(col.formControlName === 'adj_microFlow_supplierAppointed') {\r\n        @if(row[col.formControlName] === true) {\r\n        <button (click)=\"appointASupplier(row)\" mat-flat-button color=\"primary\">\r\n          <mat-icon>\r\n            check_circle\r\n          </mat-icon>\r\n          Appointed\r\n        </button>\r\n        }@else {\r\n        <button (click)=\"appointASupplier(row)\" mat-stroked-button>\r\n          Appoint\r\n        </button>\r\n        }\r\n\r\n        }\r\n        @else {\r\n        @switch (col?.type) {\r\n        @case ('daysAgo') {\r\n        {{ row[col.formControlName] | daysAgo }}\r\n        }\r\n        @case ('number') {\r\n\r\n        {{ (row[col.formControlName] | number:'0.0-0' ) || 'N/A' }}\r\n\r\n        }\r\n        @default {\r\n        @if($index === 0) {\r\n        <span class=\"main-submission-text\">\r\n          <mat-icon style=\"font-size: 1em;height:16px;width:16px\">domain</mat-icon>\r\n          <strong>\r\n            {{ row[col.formControlName] }}\r\n          </strong>\r\n        </span>\r\n        <span class=\"secondary-text\">\r\n          <mat-icon>fingerprint</mat-icon>\r\n          {{row[vm.columnMapping.respondentCodeKey]}}\r\n          <mat-icon>more_time</mat-icon>\r\n          {{ row[vm.columnMapping.responseDateKey ||''] | daysAgo}}\r\n        </span>\r\n        } @else {\r\n        {{ row[col.formControlName] }}\r\n        }\r\n        }\r\n        }\r\n        }\r\n\r\n      </td>\r\n    </ng-container>\r\n    }\r\n    <tr mat-header-row *matHeaderRowDef=\"vm.displayCols\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: vm.displayCols\"></tr>\r\n  </table>\r\n  }\r\n</ng-template>\r\n}", styles: [".number{display:flex;justify-content:space-between;align-items:center}li{font-size:.75em}ol,ul{margin-top:8px}.number-cell{display:flex;justify-content:space-between;align-items:center;width:100%}.secondary-text{display:flex;align-items:center;white-space:pre;font-size:.75em;gap:8px;opacity:.8}.secondary-text mat-icon{font-size:.875em;width:14px;height:14px}.mat-column-adj_microFlow_review{max-width:18px;text-align:center}.mat-column-nameOfBidder{max-width:90px}.mat-column-actions{padding:0;max-width:80px}.mat-column-status{padding-left:8px;padding-right:8px;max-width:fit-content!important}.main-submission-text{display:flex;align-items:center;gap:8px;font-size:.875em}.notes-card{width:100%;max-width:480px;resize:both;height:fit-content!important}.smallIcon{font-size:.875em;width:14px;height:14px}.table-cell{padding-left:4px;padding-right:4px}.mat-column-adjudicationPricePreferenceCalculation,.mat-column-adj_microFlow_scoreSheetTotalPoints,.mat-column-adj_microFlow_pointsAwarded,.mat-column-adj_microFlow_pricePointCalculation{max-width:18px;text-align:center}.mat-column-adj_microFlow_supplierAppointed{max-width:50px;text-align:center}.mat-column-actions{max-width:14px;text-align:center}.ngx-t-forms-point-assignment-menu{width:fit-content!important;max-width:400px!important}.point-assignment-menu{padding-left:28px;padding-right:28px}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SupplierSelectionComponent, decorators: [{
             type: Component,
@@ -15755,7 +15781,7 @@ class UserFormStepperComponent extends FormTowerControllerService {
         this.tourManagerService.startTourByOption(fullTourOptions);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UserFormStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: UserFormStepperComponent, isStandalone: true, selector: "lib-user-form-stepper", inputs: { formId: "formId", initialValues: "initialValues", passParamsOnSubmit: "passParamsOnSubmit" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n  <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n\r\n  <mat-toolbar [tourAnchor]=\"'form-title'\" style=\"    background: none;\r\n    height: 28px;\">\r\n  <span class=\"spacer\"></span>\r\n  <span style=\"font-size: small;\">\r\n    help\r\n  </span>\r\n<button  \r\n[matTooltip]=\"'Start guided tour for this form'\"\r\n mat-icon-button (click)=\"startTour()\">\r\n  <mat-icon>\r\n    help\r\n  </mat-icon>\r\n</button>\r\n</mat-toolbar>\r\n\r\n<mat-stepper \r\n\r\n[style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n  [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n  (selectionChange)=\"handleStepChange($event)\">\r\n\r\n  @for (step of selectFormSteps(); track step.sectionId) {\r\n  @if (!!step.sectionForm ) {\r\n  <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n\r\n    [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n    [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n    <ng-template matStepLabel  >\r\n      <div  [tourAnchor]=\"step.sectionId\"  class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n        <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n        @if (step.sectionIsSeen) {\r\n        <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n          [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n          {{step.sectionIsSeen}}\r\n        </mat-icon>\r\n        }\r\n\r\n      \r\n      </div>\r\n    </ng-template>\r\n    @if(!!step.isActive){\r\n    @defer (on viewport; prefetch on idle) {\r\n    <div [tourAnchor]=\"'content-'+step.sectionId\"  class=\"step-content\">\r\n      <div class=\"row form-section\">\r\n        @for (col of step.columns; track col.id) {\r\n        <div [class]=\"'col-md-'+col.colSize +  ' box'\">\r\n          <lib-t-form-input \r\n          [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n            [attr.aria-label]=\"col?.label || ''\">\r\n          </lib-t-form-input>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        @if(!$first) {\r\n        <button\r\n        \r\n        mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n          Back\r\n        </button>\r\n        }\r\n        @if (!$last) {\r\n        <button\r\n       \r\n        mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n          Next\r\n        </button>\r\n        }\r\n        @if (!!$last) {\r\n        <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    } @placeholder {\r\n    <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n      <mat-spinner diameter=\"24\" />\r\n    </div>\r\n    }\r\n\r\n    }\r\n\r\n  </mat-step>\r\n  }\r\n  }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n    <span class=\"submission-status\" style=\"font-size:  0.625em\" role=\"status\">\r\n      {{getSubmissionStatus}}\r\n    </span>\r\n    <button [tourAnchor]=\"'form-submit-button'\" mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n      aria-label=\"Submit form\">\r\n      <span>\r\n        {{ formSubmissionMessage()}}\r\n      </span>\r\n      @if(submittingForm){\r\n      <mat-spinner diameter=\"10\"></mat-spinner>\r\n      }\r\n\r\n    </button>\r\n  </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n  <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:.75em;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:.75em;opacity:.87;display:flex;align-items:center}.box{padding:8px 5px 5px}.tour-trigger{position:absolute;right:8px;font-size:.75em;opacity:.6}.tour-trigger:hover{opacity:1}.step-label-text{padding-top:8px;padding-bottom:8px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TourMatMenuModule }, { kind: "directive", type: i8$2.TourAnchorMatMenuDirective, selector: "[tourAnchor]", inputs: ["tourAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }], deferBlockDependencies: [() => [i2.MatButton, i3$4.MatStepperNext, i3$4.MatStepperPrevious, Promise.resolve().then(function () { return tFormInput_component; }).then(m => m.TFormInputComponent), i8$2.TourAnchorMatMenuDirective, i1$2.NgControlStatusGroup, i1$2.FormGroupDirective], () => [i2.MatButton, i3.MatProgressSpinner, i10.MatToolbar, i8$2.TourAnchorMatMenuDirective]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: UserFormStepperComponent, isStandalone: true, selector: "lib-user-form-stepper", inputs: { formId: "formId", initialValues: "initialValues", passParamsOnSubmit: "passParamsOnSubmit" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n  <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n\r\n  <mat-toolbar [tourAnchor]=\"'form-title'\" style=\"    background: none;\r\n    height: 28px;\">\r\n  <span class=\"spacer\"></span>\r\n  <span style=\"font-size: small;\">\r\n    help\r\n  </span>\r\n<button  \r\n[matTooltip]=\"'Start guided tour for this form'\"\r\n mat-icon-button (click)=\"startTour()\">\r\n  <mat-icon>\r\n    help\r\n  </mat-icon>\r\n</button>\r\n</mat-toolbar>\r\n\r\n<mat-stepper \r\n\r\n[style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n  [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n  (selectionChange)=\"handleStepChange($event)\">\r\n\r\n  @for (step of selectFormSteps(); track step.sectionId) {\r\n  @if (!!step.sectionForm ) {\r\n  <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n\r\n    [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n    [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n    <ng-template matStepLabel  >\r\n      <div  [tourAnchor]=\"step.sectionId\"  class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n        <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n        @if (step.sectionIsSeen) {\r\n        <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n          [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n          {{step.sectionIsSeen}}\r\n        </mat-icon>\r\n        }\r\n\r\n      \r\n      </div>\r\n    </ng-template>\r\n    @if(!!step.isActive){\r\n    @defer (on viewport; prefetch on idle) {\r\n    <div [tourAnchor]=\"'content-'+step.sectionId\"  class=\"step-content\">\r\n      <div class=\"row form-section\">\r\n        @for (col of step.columns; track col.id) {\r\n        <div [class]=\"'col-md-'+col.colSize +  ' box'\">\r\n          <lib-t-form-input \r\n          [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n            [attr.aria-label]=\"col?.label || ''\">\r\n          </lib-t-form-input>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        @if(!$first) {\r\n        <button\r\n        \r\n        mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n          Back\r\n        </button>\r\n        }\r\n        @if (!$last) {\r\n        <button\r\n       \r\n        mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n          Next\r\n        </button>\r\n        }\r\n        @if (!!$last) {\r\n        <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    } @placeholder {\r\n    <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n      <mat-spinner diameter=\"24\" />\r\n    </div>\r\n    }\r\n\r\n    }\r\n\r\n  </mat-step>\r\n  }\r\n  }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n    <span class=\"submission-status\" style=\"font-size:  0.625em\" role=\"status\">\r\n      {{getSubmissionStatus}}\r\n    </span>\r\n    <button [tourAnchor]=\"'form-submit-button'\" mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n      aria-label=\"Submit form\">\r\n      <span>\r\n        {{ formSubmissionMessage()}}\r\n      </span>\r\n      @if(submittingForm){\r\n      <mat-spinner diameter=\"10\"></mat-spinner>\r\n      }\r\n\r\n    </button>\r\n  </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n  <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:.75em;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:.75em;opacity:.87;display:flex;align-items:center}.box{padding:8px 5px 5px}.tour-trigger{position:absolute;right:8px;font-size:.75em;opacity:.6}.tour-trigger:hover{opacity:1}.step-label-text{padding-top:8px;padding-bottom:8px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TourMatMenuModule }, { kind: "directive", type: i8$2.TourAnchorMatMenuDirective, selector: "[tourAnchor]", inputs: ["tourAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }], deferBlockDependencies: [() => [i2.MatButton, i3$3.MatStepperNext, i3$3.MatStepperPrevious, Promise.resolve().then(function () { return tFormInput_component; }).then(m => m.TFormInputComponent), i8$2.TourAnchorMatMenuDirective, i1$2.NgControlStatusGroup, i1$2.FormGroupDirective], () => [i2.MatButton, i3.MatProgressSpinner, i10.MatToolbar, i8$2.TourAnchorMatMenuDirective]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", ngImport: i0, type: UserFormStepperComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return tFormInput_component; }).then(m => m.TFormInputComponent)], resolveMetadata: TFormInputComponent => ({ decorators: [{
                 type: Component,
@@ -15814,4 +15840,4 @@ console.debug = () => { };
  */
 
 export { getUrl as $, ACCOUNTING_BASIS as A, MULTIPLE_FORM_INPUT_TOKEN as B, MSCOA_TREE_PROVIDER as C, DaysAgoPipe as D, FormsComponent as E, FormsStoreService as F, FormBuilderComponent as G, MscoaFormInputComponent as H, UserFormStepperComponent as I, JsonEditorComponent as J, TFormInputComponent as K, DialogTemplateComponent as L, MatModulesModule as M, NGX_T_FORMS_CONFIG_TOKEN as N, SignatureInputElementComponent as O, getSignatureImage as P, FormatDataPipe as Q, returnDeepProperty as R, SearchListPipe as S, TDynamicDataEditComponent as T, UTILS_OBJECT_TOKEN as U, ValidationExpressioCreatorComponent as V, validateObjectAgainstString as W, validateExpressionSyntax as X, PropertyAccessError as Y, getPipedValueFromDataType as Z, _isEqual as _, assignDeepPropertyToObject as a, textIconsForUserHints as a0, getSampleValueForInput as a1, createFileFromBase64 as a2, index as a3, TDynamicDataViewComponent as b, FormTowerControllerService as c, TourManagerService as d, getSubmissionStatusFn as e, getInputIllustration as f, getAvatar as g, TreeComponent as h, convertPostmanFolderItemsToTree as i, getToolbarColor as j, getToolbarBackground as k, getToolbarIconColor as l, NgxTFormsService as m, NgxTFormsComponent as n, initFormConfigToV2 as o, provideNgxTForms as p, formGenerator as q, getSectionElements as r, safeReturnDeepProperty as s, testAgainstItem as t, returnMappedPathValue as u, getValueFromValueAccessor as v, FORM_ACTIONS_TOKEN as w, FORM_CONFIG_TOKEN as x, FORM_SLIDES_TOKEN as y, FORM_INPUTS_TOKEN as z };
-//# sourceMappingURL=ngx-t-forms-ngx-t-forms-A9_4GxP6.mjs.map
+//# sourceMappingURL=ngx-t-forms-ngx-t-forms-CD9InaXz.mjs.map