@unifylib/ui-lib 1.0.65 → 1.0.67

package/fesm2022/iq-ui-lib.mjs

@@ -178,7 +178,7 @@ class ActionCommentComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCommentComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCommentComponent, isStandalone: true, selector: "app-action-comment", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n  <div class=\"desktop-view\">\r\n    <h2 mat-dialog-title class=\"dialog-title\">\r\n      {{ titleKey | translate}} {{itemName}}\r\n    </h2>\r\n\r\n    <p class=\"dialog-subtitle\">\r\n      {{ subtitleKey | translate }}\r\n    </p>\r\n\r\n    <mat-dialog-content class=\"content-section\">\r\n\r\n      <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n          <mat-select\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\">\r\n\r\n            <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n              {{ data.translate ? (item | translate) : item }}\r\n            </mat-option>\r\n\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field\r\n          *ngIf=\"comment === 'OTHER'\"\r\n          appearance=\"outline\"\r\n          class=\"w-100\">\r\n          <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"otherComment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            maxlength=\"1000\"\r\n            cdkAutosizeMaxRows=\"5\">\r\n          </textarea>\r\n        </mat-form-field>\r\n\r\n      </ng-container>\r\n\r\n      <ng-template #textMode>\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            maxlength=\"1000\"\r\n            cdkAutosizeMaxRows=\"5\">\r\n          </textarea>\r\n        </mat-form-field>\r\n      </ng-template>\r\n\r\n      <div class=\"info-box\">\r\n        <mat-icon>info</mat-icon>\r\n        <span class=\"info-text\">\r\n          {{ warningKey | translate }}\r\n        </span>\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n      <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n        {{ cancelKey | translate }}\r\n      </button>\r\n\r\n      <button\r\n        mat-flat-button\r\n        class=\"btn-background-primary warn-btn\"\r\n        (click)=\"commentAndClose()\"\r\n        [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n        {{ actionKey | translate }}\r\n      </button>\r\n    </mat-dialog-actions>\r\n  </div>\r\n\r\n  <div class=\"mobile-view\">\r\n    <div class=\"modal-header\">\r\n      <div class=\"handle\"></div>\r\n      <div class=\"header-content\">\r\n        <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n        <button class=\"close-button\" (click)=\"cancel()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body\">\r\n\r\n      <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n          <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n          <mat-select\r\n            [(ngModel)]=\"comment\"\r\n            class=\"textarea-mobile\">\r\n\r\n            <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n              {{ data.translate ? ( item | translate) : item }}\r\n            </mat-option>\r\n\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field\r\n          *ngIf=\"comment === 'OTHER'\"\r\n          appearance=\"outline\"\r\n          class=\"textarea-field-mobile\">\r\n          <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"otherComment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            cdkAutosizeMaxRows=\"5\"\r\n            maxlength=\"1000\"\r\n            class=\"textarea-mobile\">\r\n          </textarea>\r\n        </mat-form-field>\r\n\r\n      </ng-container>\r\n\r\n      <ng-template #mobileText>\r\n        <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n          <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            cdkAutosizeMaxRows=\"5\"\r\n            maxlength=\"1000\"\r\n            class=\"textarea-mobile\">\r\n          </textarea>\r\n        </mat-form-field>\r\n      </ng-template>\r\n\r\n      <div class=\"info-box-mobile\">\r\n        <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n        <span class=\"info-text-mobile\">\r\n          {{ warningKey | translate }}\r\n        </span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"modal-actions-mobile\">\r\n      <div class=\"actions-buttons-container\">\r\n        <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n          {{ cancelKey | translate }}\r\n        </button>\r\n        <button\r\n          mat-flat-button\r\n          class=\"btn-action-mobile\"\r\n          (click)=\"commentAndClose()\"\r\n          [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n          {{ actionKey | translate }}\r\n        </button>\r\n      </div>\r\n      <div class=\"home-indicator\"></div>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{width:160px!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCommentComponent, isStandalone: true, selector: "app-action-comment", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n  <div class=\"desktop-view\">\r\n    <h2 mat-dialog-title class=\"dialog-title\">\r\n      {{ titleKey | translate}} {{itemName}}\r\n    </h2>\r\n\r\n    <p class=\"dialog-subtitle\">\r\n      {{ subtitleKey | translate }}\r\n    </p>\r\n\r\n    <mat-dialog-content class=\"content-section\">\r\n\r\n      <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-select\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\">\r\n\r\n            <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n              {{ data.translate ? (item | translate) : item }}\r\n            </mat-option>\r\n\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field\r\n          *ngIf=\"comment === 'OTHER'\"\r\n          appearance=\"outline\"\r\n          class=\"w-100\">\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"otherComment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            maxlength=\"1000\"\r\n            cdkAutosizeMaxRows=\"5\">\r\n          </textarea>\r\n        </mat-form-field>\r\n\r\n      </ng-container>\r\n\r\n      <ng-template #textMode>\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            maxlength=\"1000\"\r\n            cdkAutosizeMaxRows=\"5\">\r\n          </textarea>\r\n        </mat-form-field>\r\n      </ng-template>\r\n\r\n      <div class=\"info-box\">\r\n        <mat-icon>info</mat-icon>\r\n        <span class=\"info-text\">\r\n          {{ warningKey | translate }}\r\n        </span>\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n      <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n        {{ cancelKey | translate }}\r\n      </button>\r\n\r\n      <button\r\n        mat-flat-button\r\n        class=\"btn-background-primary warn-btn\"\r\n        (click)=\"commentAndClose()\"\r\n        [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n        {{ actionKey | translate }}\r\n      </button>\r\n    </mat-dialog-actions>\r\n  </div>\r\n\r\n  <div class=\"mobile-view\">\r\n    <div class=\"modal-header\">\r\n      <div class=\"handle\"></div>\r\n      <div class=\"header-content\">\r\n        <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n        <button class=\"close-button\" (click)=\"cancel()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body\">\r\n\r\n      <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n          <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n          <mat-select\r\n            [(ngModel)]=\"comment\"\r\n            class=\"textarea-mobile\">\r\n\r\n            <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n              {{ data.translate ? ( item | translate) : item }}\r\n            </mat-option>\r\n\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field\r\n          *ngIf=\"comment === 'OTHER'\"\r\n          appearance=\"outline\"\r\n          class=\"textarea-field-mobile\">\r\n          <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"otherComment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            cdkAutosizeMaxRows=\"5\"\r\n            maxlength=\"1000\"\r\n            class=\"textarea-mobile\">\r\n          </textarea>\r\n        </mat-form-field>\r\n\r\n      </ng-container>\r\n\r\n      <ng-template #mobileText>\r\n        <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n          <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            cdkAutosizeMaxRows=\"5\"\r\n            maxlength=\"1000\"\r\n            class=\"textarea-mobile\">\r\n          </textarea>\r\n        </mat-form-field>\r\n      </ng-template>\r\n\r\n      <div class=\"info-box-mobile\">\r\n        <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n        <span class=\"info-text-mobile\">\r\n          {{ warningKey | translate }}\r\n        </span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"modal-actions-mobile\">\r\n      <div class=\"actions-buttons-container\">\r\n        <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n          {{ cancelKey | translate }}\r\n        </button>\r\n        <button\r\n          mat-flat-button\r\n          class=\"btn-action-mobile\"\r\n          (click)=\"commentAndClose()\"\r\n          [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n          {{ actionKey | translate }}\r\n        </button>\r\n      </div>\r\n      <div class=\"home-indicator\"></div>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{width:160px!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCommentComponent, decorators: [{
             type: Component,
@@ -198,7 +198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatSelect,
                         NgForOf,
                         NgIf
-                    ], template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n  <div class=\"desktop-view\">\r\n    <h2 mat-dialog-title class=\"dialog-title\">\r\n      {{ titleKey | translate}} {{itemName}}\r\n    </h2>\r\n\r\n    <p class=\"dialog-subtitle\">\r\n      {{ subtitleKey | translate }}\r\n    </p>\r\n\r\n    <mat-dialog-content class=\"content-section\">\r\n\r\n      <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n          <mat-select\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\">\r\n\r\n            <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n              {{ data.translate ? (item | translate) : item }}\r\n            </mat-option>\r\n\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field\r\n          *ngIf=\"comment === 'OTHER'\"\r\n          appearance=\"outline\"\r\n          class=\"w-100\">\r\n          <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"otherComment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            maxlength=\"1000\"\r\n            cdkAutosizeMaxRows=\"5\">\r\n          </textarea>\r\n        </mat-form-field>\r\n\r\n      </ng-container>\r\n\r\n      <ng-template #textMode>\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            maxlength=\"1000\"\r\n            cdkAutosizeMaxRows=\"5\">\r\n          </textarea>\r\n        </mat-form-field>\r\n      </ng-template>\r\n\r\n      <div class=\"info-box\">\r\n        <mat-icon>info</mat-icon>\r\n        <span class=\"info-text\">\r\n          {{ warningKey | translate }}\r\n        </span>\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n      <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n        {{ cancelKey | translate }}\r\n      </button>\r\n\r\n      <button\r\n        mat-flat-button\r\n        class=\"btn-background-primary warn-btn\"\r\n        (click)=\"commentAndClose()\"\r\n        [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n        {{ actionKey | translate }}\r\n      </button>\r\n    </mat-dialog-actions>\r\n  </div>\r\n\r\n  <div class=\"mobile-view\">\r\n    <div class=\"modal-header\">\r\n      <div class=\"handle\"></div>\r\n      <div class=\"header-content\">\r\n        <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n        <button class=\"close-button\" (click)=\"cancel()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body\">\r\n\r\n      <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n          <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n          <mat-select\r\n            [(ngModel)]=\"comment\"\r\n            class=\"textarea-mobile\">\r\n\r\n            <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n              {{ data.translate ? ( item | translate) : item }}\r\n            </mat-option>\r\n\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field\r\n          *ngIf=\"comment === 'OTHER'\"\r\n          appearance=\"outline\"\r\n          class=\"textarea-field-mobile\">\r\n          <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"otherComment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            cdkAutosizeMaxRows=\"5\"\r\n            maxlength=\"1000\"\r\n            class=\"textarea-mobile\">\r\n          </textarea>\r\n        </mat-form-field>\r\n\r\n      </ng-container>\r\n\r\n      <ng-template #mobileText>\r\n        <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n          <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            cdkAutosizeMaxRows=\"5\"\r\n            maxlength=\"1000\"\r\n            class=\"textarea-mobile\">\r\n          </textarea>\r\n        </mat-form-field>\r\n      </ng-template>\r\n\r\n      <div class=\"info-box-mobile\">\r\n        <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n        <span class=\"info-text-mobile\">\r\n          {{ warningKey | translate }}\r\n        </span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"modal-actions-mobile\">\r\n      <div class=\"actions-buttons-container\">\r\n        <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n          {{ cancelKey | translate }}\r\n        </button>\r\n        <button\r\n          mat-flat-button\r\n          class=\"btn-action-mobile\"\r\n          (click)=\"commentAndClose()\"\r\n          [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n          {{ actionKey | translate }}\r\n        </button>\r\n      </div>\r\n      <div class=\"home-indicator\"></div>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{width:160px!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"] }]
+                    ], template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n  <div class=\"desktop-view\">\r\n    <h2 mat-dialog-title class=\"dialog-title\">\r\n      {{ titleKey | translate}} {{itemName}}\r\n    </h2>\r\n\r\n    <p class=\"dialog-subtitle\">\r\n      {{ subtitleKey | translate }}\r\n    </p>\r\n\r\n    <mat-dialog-content class=\"content-section\">\r\n\r\n      <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-select\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\">\r\n\r\n            <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n              {{ data.translate ? (item | translate) : item }}\r\n            </mat-option>\r\n\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field\r\n          *ngIf=\"comment === 'OTHER'\"\r\n          appearance=\"outline\"\r\n          class=\"w-100\">\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"otherComment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            maxlength=\"1000\"\r\n            cdkAutosizeMaxRows=\"5\">\r\n          </textarea>\r\n        </mat-form-field>\r\n\r\n      </ng-container>\r\n\r\n      <ng-template #textMode>\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            maxlength=\"1000\"\r\n            cdkAutosizeMaxRows=\"5\">\r\n          </textarea>\r\n        </mat-form-field>\r\n      </ng-template>\r\n\r\n      <div class=\"info-box\">\r\n        <mat-icon>info</mat-icon>\r\n        <span class=\"info-text\">\r\n          {{ warningKey | translate }}\r\n        </span>\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n      <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n        {{ cancelKey | translate }}\r\n      </button>\r\n\r\n      <button\r\n        mat-flat-button\r\n        class=\"btn-background-primary warn-btn\"\r\n        (click)=\"commentAndClose()\"\r\n        [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n        {{ actionKey | translate }}\r\n      </button>\r\n    </mat-dialog-actions>\r\n  </div>\r\n\r\n  <div class=\"mobile-view\">\r\n    <div class=\"modal-header\">\r\n      <div class=\"handle\"></div>\r\n      <div class=\"header-content\">\r\n        <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n        <button class=\"close-button\" (click)=\"cancel()\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"modal-body\">\r\n\r\n      <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n          <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n          <mat-select\r\n            [(ngModel)]=\"comment\"\r\n            class=\"textarea-mobile\">\r\n\r\n            <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n              {{ data.translate ? ( item | translate) : item }}\r\n            </mat-option>\r\n\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field\r\n          *ngIf=\"comment === 'OTHER'\"\r\n          appearance=\"outline\"\r\n          class=\"textarea-field-mobile\">\r\n          <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"otherComment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            cdkAutosizeMaxRows=\"5\"\r\n            maxlength=\"1000\"\r\n            class=\"textarea-mobile\">\r\n          </textarea>\r\n        </mat-form-field>\r\n\r\n      </ng-container>\r\n\r\n      <ng-template #mobileText>\r\n        <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n          <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n          <textarea\r\n            matInput\r\n            [(ngModel)]=\"comment\"\r\n            [placeholder]=\"placeholderKey | translate\"\r\n            cdkTextareaAutosize\r\n            cdkAutosizeMinRows=\"4\"\r\n            cdkAutosizeMaxRows=\"5\"\r\n            maxlength=\"1000\"\r\n            class=\"textarea-mobile\">\r\n          </textarea>\r\n        </mat-form-field>\r\n      </ng-template>\r\n\r\n      <div class=\"info-box-mobile\">\r\n        <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n        <span class=\"info-text-mobile\">\r\n          {{ warningKey | translate }}\r\n        </span>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"modal-actions-mobile\">\r\n      <div class=\"actions-buttons-container\">\r\n        <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n          {{ cancelKey | translate }}\r\n        </button>\r\n        <button\r\n          mat-flat-button\r\n          class=\"btn-action-mobile\"\r\n          (click)=\"commentAndClose()\"\r\n          [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n          {{ actionKey | translate }}\r\n        </button>\r\n      </div>\r\n      <div class=\"home-indicator\"></div>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{width:160px!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -3740,7 +3740,7 @@ class BaseTableComponent extends BaseUtils {
         return super.labelKeyByValue(column, row);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: ShareDataService }, { token: 'securityManager' }, { token: i3$3.Router }, { token: i5.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" >\r\n    <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n        [titleMode]=\"''\"\r\n        [pageInfo]=\"pageInfo\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [draftSupported]=\"pageInfo.draftSupported\"\r\n        [isPending]=\"isPending\"\r\n        [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n        [buttons]=\"extraActions\"\r\n        [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n        (buttonClicked)=\"buttonClicked.emit($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      [pendingFilters]=\"pendingFilters\"\r\n      [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n      (filterInformation)=\"storePendingFilters($event)\"\r\n      (isEmpty)=\"handleFilterEmpty($event)\"\r\n      (applyFilter)=\"applyPendingFilters()\"\r\n      (sortByClicked)=\"handleSortClick($event)\"\r\n      (exportClicked)=\"extractReport($event)\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        type=\"button\"\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        class=\"btn-export\"\r\n        [attr.aria-label]=\"'export' | translate\"\r\n        [attr.aria-haspopup]=\"true\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>file_export</mat-icon>\r\n          <span>{{ 'export' | translate }}</span>\r\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n        </div>\r\n      </button>\r\n\r\n      <mat-menu #exportMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n      </mat-menu>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n    <div class=\"flex-100\">\r\n      <div class=\"flex-row flex-100 mainTable\">\r\n        <div\r\n          class=\"table-container\"\r\n          role=\"table\"\r\n          [attr.aria-label]=\"\r\n            pageInfo.labelsSection && !pageInfo.hideTitle\r\n              ? (pageInfo.labelsSection + '.list_title' | translate)\r\n              : null\r\n          \">\r\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                 class=\"table-header-cell\"\r\n                 role=\"columnheader\"\r\n                 [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n                 [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\r\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n                 [class.first-cell]=\"i === 0\"\r\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\r\n                 (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\r\n              <div class=\"table-header-content\">\r\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"table-body\" role=\"rowgroup\">\r\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n                 class=\"table-row\"\r\n                 role=\"row\"\r\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n                 [ngClass]=\"{\r\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                   'table-row--dark-highlight': isDarkHighlight(row)\r\n                 }\"\r\n                 (auxclick)=\"openNewTab(row)\"\r\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                   class=\"table-cell\"\r\n                   role=\"cell\"\r\n                   [class.first-cell]=\"i === 0\"\r\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                    <span\r\n                      *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n                      role=\"link\"\r\n                      tabindex=\"0\"\r\n                      class=\"mat-mdc-form-field-label hyper-link\"\r\n                      (click)=\"hyperLinkClicked(columnProp, row)\"\r\n                      (keydown.enter)=\"hyperLinkClicked(columnProp, row)\"\r\n                      (keydown.space)=\"$event.preventDefault(); hyperLinkClicked(columnProp, row)\">\r\n                      {{ extractFieldName(row, columnProp) }}\r\n                    </span>\r\n                    <ng-template #plainHyperText>\r\n                      <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'button'\">\r\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'icon'\">\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\r\n                    }\"\r\n                              [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\r\n                      {{ getIcon(row[columnProp]) }}\r\n                    </mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                    <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                    {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'download'\">\r\n                    <mat-icon class=\"mainTable__td__icon-blue\"\r\n                              [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'onOff'\">\r\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'status'\">\r\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"row[columnProp] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n                    </span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'info'\">\r\n                    <button\r\n                      mat-icon-button\r\n                      type=\"button\"\r\n                      [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n                      (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n                      [attr.id]=\"'table-btn-info-'+row.id\">\r\n                      <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'listAction'\">\r\n                    <app-button-actions\r\n                      [row]=\"row\"\r\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\"\r\n                      [actions]=\"listAction\"\r\n                      (clickedButton)=\"actionListClicked($event,row)\">\r\n                    </app-button-actions>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n                      <span\r\n                        role=\"link\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n                        (keydown)=\"onDefaultCellLinkKeydown($event, row)\">\r\n                        {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n                      </span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span\r\n                        role=\"link\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n                        (keydown)=\"onDefaultCellLinkKeydown($event, row)\"\r\n                        [innerText]='extractFieldName(row, columnProp)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Card View -->\r\n      <div class=\"mobile-cards-container\">\r\n        <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n             class=\"mobile-card\"\r\n             [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n             [ngClass]=\"{\r\n               'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n               'mobile-card--dark-highlight': isDarkHighlight(row)\r\n             }\"\r\n             (auxclick)=\"openNewTab(row)\"\r\n             (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n\r\n          <!-- Mobile Card Header: ID/Name and Status -->\r\n          <div class=\"mobile-card__header\">\r\n            <div class=\"mobile-card__header-id\">\r\n              <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n            </div>\r\n            <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n              <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\r\n                      [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n                {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Divider -->\r\n          <div class=\"mobile-card__divider\"></div>\r\n\r\n          <!-- Mobile Card Body: Other columns -->\r\n          <div class=\"mobile-card__body\">\r\n            <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n              <div class=\"mobile-card__row-label\">\r\n                <span>{{ labelKey(column) | translate }} :</span>\r\n              </div>\r\n              <div class=\"mobile-card__row-value\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[column.property]}}\"\r\n                            [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n                      {{ labelKeyByValue(column, row) | translate}}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n                    <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n                      <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span [innerText]='extractFieldName(row, column.property)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Mobile Card Actions -->\r\n          <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n            <app-button-actions\r\n              [row]=\"row\"\r\n              [buttonsAction]=\"true\"\r\n              [listAction]=\"listAction\"\r\n              [actions]=\"listAction\"\r\n              (clickedButton)=\"actionListClicked($event,row)\">\r\n            </app-button-actions>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n        <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n        <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n      </div>\r\n\r\n\r\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n        <ng-container *ngIf=\"enablePagination\">\r\n          <div class=\"flex-column flex-100\">\r\n            <app-paginator\r\n              [currentPage]=\"pageIndex\"\r\n              [totalItems]=\"totalElements\"\r\n              [pageSize]=\"pageSize\"\r\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n              [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n              [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\"\r\n              (loadMore)=\"onLoadMore($event)\">\r\n            </app-paginator>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction", "row"], outputs: ["clickedButton"] }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FilterBuilderComponent, selector: "app-filter-builder", inputs: ["columns", "isChecked", "filterFields", "pageInfo", "pendingFilters", "showExportButton"], outputs: ["filterInformation", "isEmpty", "applyFilter", "sortByClicked", "exportClicked"] }, { kind: "directive", type: 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: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }], animations: [] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" >\r\n    <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n        [titleMode]=\"''\"\r\n        [pageInfo]=\"pageInfo\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [draftSupported]=\"pageInfo.draftSupported\"\r\n        [isPending]=\"isPending\"\r\n        [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n        [buttons]=\"extraActions\"\r\n        [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n        (buttonClicked)=\"buttonClicked.emit($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      [pendingFilters]=\"pendingFilters\"\r\n      [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n      (filterInformation)=\"storePendingFilters($event)\"\r\n      (isEmpty)=\"handleFilterEmpty($event)\"\r\n      (applyFilter)=\"applyPendingFilters()\"\r\n      (sortByClicked)=\"handleSortClick($event)\"\r\n      (exportClicked)=\"extractReport($event)\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        type=\"button\"\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        class=\"btn-export\"\r\n        [attr.aria-label]=\"'export' | translate\"\r\n        [attr.aria-haspopup]=\"true\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>file_export</mat-icon>\r\n          <span>{{ 'export' | translate }}</span>\r\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n        </div>\r\n      </button>\r\n\r\n      <mat-menu #exportMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n      </mat-menu>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n    <div class=\"flex-100\">\r\n      <div class=\"flex-row flex-100 mainTable\">\r\n        <div\r\n          class=\"table-container\"\r\n          role=\"table\"\r\n          [attr.aria-label]=\"\r\n            pageInfo.labelsSection && !pageInfo.hideTitle\r\n              ? (pageInfo.labelsSection + '.list_title' | translate)\r\n              : null\r\n          \">\r\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                 class=\"table-header-cell\"\r\n                 role=\"columnheader\"\r\n                 [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n                 [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\r\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n                 [class.first-cell]=\"i === 0\"\r\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\r\n                 (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\r\n              <div class=\"table-header-content\">\r\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"table-body\" role=\"rowgroup\">\r\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n                 class=\"table-row\"\r\n                 role=\"row\"\r\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n                 [ngClass]=\"{\r\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                   'table-row--dark-highlight': isDarkHighlight(row)\r\n                 }\"\r\n                 (auxclick)=\"openNewTab(row)\"\r\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                   class=\"table-cell\"\r\n                   role=\"cell\"\r\n                   [class.first-cell]=\"i === 0\"\r\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                    <span\r\n                      *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n                      role=\"link\"\r\n                      tabindex=\"0\"\r\n                      class=\"mat-mdc-form-field-label hyper-link\"\r\n                      (click)=\"hyperLinkClicked(columnProp, row)\"\r\n                      (keydown.enter)=\"hyperLinkClicked(columnProp, row)\"\r\n                      (keydown.space)=\"$event.preventDefault(); hyperLinkClicked(columnProp, row)\">\r\n                      {{ extractFieldName(row, columnProp) }}\r\n                    </span>\r\n                    <ng-template #plainHyperText>\r\n                      <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'button'\">\r\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'icon'\">\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\r\n                    }\"\r\n                              [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\r\n                      {{ getIcon(row[columnProp]) }}\r\n                    </mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                    <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                    {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'download'\">\r\n                    <mat-icon class=\"mainTable__td__icon-blue\"\r\n                              [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'onOff'\">\r\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'status'\">\r\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"row[columnProp] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n                    </span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'info'\">\r\n                    <button\r\n                      mat-icon-button\r\n                      type=\"button\"\r\n                      [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n                      (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n                      [attr.id]=\"'table-btn-info-'+row.id\">\r\n                      <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'listAction'\">\r\n                    <app-button-actions\r\n                      [row]=\"row\"\r\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\"\r\n                      [actions]=\"listAction\"\r\n                      (clickedButton)=\"actionListClicked($event,row)\">\r\n                    </app-button-actions>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n                      <span\r\n                        role=\"link\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n                        (keydown)=\"onDefaultCellLinkKeydown($event, row)\">\r\n                        {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n                      </span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span\r\n                        role=\"link\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n                        (keydown)=\"onDefaultCellLinkKeydown($event, row)\"\r\n                        [innerText]='extractFieldName(row, columnProp)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Card View -->\r\n      <div class=\"mobile-cards-container\">\r\n        <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n             class=\"mobile-card\"\r\n             [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n             [ngClass]=\"{\r\n               'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n               'mobile-card--dark-highlight': isDarkHighlight(row)\r\n             }\"\r\n             (auxclick)=\"openNewTab(row)\"\r\n             (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n\r\n          <!-- Mobile Card Header: ID/Name and Status -->\r\n          <div class=\"mobile-card__header\">\r\n            <div class=\"mobile-card__header-id\">\r\n              <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n            </div>\r\n            <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n              <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\r\n                      [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n                {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Divider -->\r\n          <div class=\"mobile-card__divider\"></div>\r\n\r\n          <!-- Mobile Card Body: Other columns -->\r\n          <div class=\"mobile-card__body\">\r\n            <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n              <div class=\"mobile-card__row-label\">\r\n                <span>{{ labelKey(column) | translate }} :</span>\r\n              </div>\r\n              <div class=\"mobile-card__row-value\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[column.property]}}\"\r\n                            [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n                      {{ labelKeyByValue(column, row) | translate}}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n                    <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n                      <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span [innerText]='extractFieldName(row, column.property)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Mobile Card Actions -->\r\n          <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n            <app-button-actions\r\n              [row]=\"row\"\r\n              [buttonsAction]=\"true\"\r\n              [listAction]=\"listAction\"\r\n              [actions]=\"listAction\"\r\n              (clickedButton)=\"actionListClicked($event,row)\">\r\n            </app-button-actions>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n        <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n        <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n      </div>\r\n\r\n\r\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n        <ng-container *ngIf=\"enablePagination\">\r\n          <div class=\"flex-column flex-100\">\r\n            <app-paginator\r\n              [currentPage]=\"pageIndex\"\r\n              [totalItems]=\"totalElements\"\r\n              [pageSize]=\"pageSize\"\r\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n              [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n              [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\"\r\n              (loadMore)=\"onLoadMore($event)\">\r\n            </app-paginator>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction", "row"], outputs: ["clickedButton"] }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FilterBuilderComponent, selector: "app-filter-builder", inputs: ["columns", "isChecked", "filterFields", "pageInfo", "pendingFilters", "showExportButton"], outputs: ["filterInformation", "isEmpty", "applyFilter", "sortByClicked", "exportClicked"] }, { kind: "directive", type: 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: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }], animations: [] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, decorators: [{
             type: Component,
@@ -3770,7 +3770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatMenuTrigger,
                         MatMenu,
                         MatMenuItem,
-                    ], template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" >\r\n    <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n        [titleMode]=\"''\"\r\n        [pageInfo]=\"pageInfo\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [draftSupported]=\"pageInfo.draftSupported\"\r\n        [isPending]=\"isPending\"\r\n        [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n        [buttons]=\"extraActions\"\r\n        [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n        (buttonClicked)=\"buttonClicked.emit($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      [pendingFilters]=\"pendingFilters\"\r\n      [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n      (filterInformation)=\"storePendingFilters($event)\"\r\n      (isEmpty)=\"handleFilterEmpty($event)\"\r\n      (applyFilter)=\"applyPendingFilters()\"\r\n      (sortByClicked)=\"handleSortClick($event)\"\r\n      (exportClicked)=\"extractReport($event)\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        type=\"button\"\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        class=\"btn-export\"\r\n        [attr.aria-label]=\"'export' | translate\"\r\n        [attr.aria-haspopup]=\"true\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>file_export</mat-icon>\r\n          <span>{{ 'export' | translate }}</span>\r\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n        </div>\r\n      </button>\r\n\r\n      <mat-menu #exportMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n      </mat-menu>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n    <div class=\"flex-100\">\r\n      <div class=\"flex-row flex-100 mainTable\">\r\n        <div\r\n          class=\"table-container\"\r\n          role=\"table\"\r\n          [attr.aria-label]=\"\r\n            pageInfo.labelsSection && !pageInfo.hideTitle\r\n              ? (pageInfo.labelsSection + '.list_title' | translate)\r\n              : null\r\n          \">\r\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                 class=\"table-header-cell\"\r\n                 role=\"columnheader\"\r\n                 [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n                 [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\r\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n                 [class.first-cell]=\"i === 0\"\r\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\r\n                 (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\r\n              <div class=\"table-header-content\">\r\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"table-body\" role=\"rowgroup\">\r\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n                 class=\"table-row\"\r\n                 role=\"row\"\r\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n                 [ngClass]=\"{\r\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                   'table-row--dark-highlight': isDarkHighlight(row)\r\n                 }\"\r\n                 (auxclick)=\"openNewTab(row)\"\r\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                   class=\"table-cell\"\r\n                   role=\"cell\"\r\n                   [class.first-cell]=\"i === 0\"\r\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                    <span\r\n                      *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n                      role=\"link\"\r\n                      tabindex=\"0\"\r\n                      class=\"mat-mdc-form-field-label hyper-link\"\r\n                      (click)=\"hyperLinkClicked(columnProp, row)\"\r\n                      (keydown.enter)=\"hyperLinkClicked(columnProp, row)\"\r\n                      (keydown.space)=\"$event.preventDefault(); hyperLinkClicked(columnProp, row)\">\r\n                      {{ extractFieldName(row, columnProp) }}\r\n                    </span>\r\n                    <ng-template #plainHyperText>\r\n                      <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'button'\">\r\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'icon'\">\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\r\n                    }\"\r\n                              [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\r\n                      {{ getIcon(row[columnProp]) }}\r\n                    </mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                    <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                    {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'download'\">\r\n                    <mat-icon class=\"mainTable__td__icon-blue\"\r\n                              [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'onOff'\">\r\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'status'\">\r\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"row[columnProp] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n                    </span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'info'\">\r\n                    <button\r\n                      mat-icon-button\r\n                      type=\"button\"\r\n                      [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n                      (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n                      [attr.id]=\"'table-btn-info-'+row.id\">\r\n                      <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'listAction'\">\r\n                    <app-button-actions\r\n                      [row]=\"row\"\r\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\"\r\n                      [actions]=\"listAction\"\r\n                      (clickedButton)=\"actionListClicked($event,row)\">\r\n                    </app-button-actions>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n                      <span\r\n                        role=\"link\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n                        (keydown)=\"onDefaultCellLinkKeydown($event, row)\">\r\n                        {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n                      </span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span\r\n                        role=\"link\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n                        (keydown)=\"onDefaultCellLinkKeydown($event, row)\"\r\n                        [innerText]='extractFieldName(row, columnProp)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Card View -->\r\n      <div class=\"mobile-cards-container\">\r\n        <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n             class=\"mobile-card\"\r\n             [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n             [ngClass]=\"{\r\n               'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n               'mobile-card--dark-highlight': isDarkHighlight(row)\r\n             }\"\r\n             (auxclick)=\"openNewTab(row)\"\r\n             (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n\r\n          <!-- Mobile Card Header: ID/Name and Status -->\r\n          <div class=\"mobile-card__header\">\r\n            <div class=\"mobile-card__header-id\">\r\n              <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n            </div>\r\n            <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n              <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\r\n                      [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n                {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Divider -->\r\n          <div class=\"mobile-card__divider\"></div>\r\n\r\n          <!-- Mobile Card Body: Other columns -->\r\n          <div class=\"mobile-card__body\">\r\n            <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n              <div class=\"mobile-card__row-label\">\r\n                <span>{{ labelKey(column) | translate }} :</span>\r\n              </div>\r\n              <div class=\"mobile-card__row-value\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[column.property]}}\"\r\n                            [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n                      {{ labelKeyByValue(column, row) | translate}}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n                    <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n                      <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span [innerText]='extractFieldName(row, column.property)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Mobile Card Actions -->\r\n          <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n            <app-button-actions\r\n              [row]=\"row\"\r\n              [buttonsAction]=\"true\"\r\n              [listAction]=\"listAction\"\r\n              [actions]=\"listAction\"\r\n              (clickedButton)=\"actionListClicked($event,row)\">\r\n            </app-button-actions>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n        <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n        <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n      </div>\r\n\r\n\r\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n        <ng-container *ngIf=\"enablePagination\">\r\n          <div class=\"flex-column flex-100\">\r\n            <app-paginator\r\n              [currentPage]=\"pageIndex\"\r\n              [totalItems]=\"totalElements\"\r\n              [pageSize]=\"pageSize\"\r\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n              [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n              [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\"\r\n              (loadMore)=\"onLoadMore($event)\">\r\n            </app-paginator>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}\n"] }]
+                    ], template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" >\r\n    <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n        [titleMode]=\"''\"\r\n        [pageInfo]=\"pageInfo\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [draftSupported]=\"pageInfo.draftSupported\"\r\n        [isPending]=\"isPending\"\r\n        [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n        [buttons]=\"extraActions\"\r\n        [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n        (buttonClicked)=\"buttonClicked.emit($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      [pendingFilters]=\"pendingFilters\"\r\n      [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n      (filterInformation)=\"storePendingFilters($event)\"\r\n      (isEmpty)=\"handleFilterEmpty($event)\"\r\n      (applyFilter)=\"applyPendingFilters()\"\r\n      (sortByClicked)=\"handleSortClick($event)\"\r\n      (exportClicked)=\"extractReport($event)\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        type=\"button\"\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        class=\"btn-export\"\r\n        [attr.aria-label]=\"'export' | translate\"\r\n        [attr.aria-haspopup]=\"true\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>file_export</mat-icon>\r\n          <span>{{ 'export' | translate }}</span>\r\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n        </div>\r\n      </button>\r\n\r\n      <mat-menu #exportMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n      </mat-menu>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n    <div class=\"flex-100\">\r\n      <div class=\"flex-row flex-100 mainTable\">\r\n        <div\r\n          class=\"table-container\"\r\n          role=\"table\"\r\n          [attr.aria-label]=\"\r\n            pageInfo.labelsSection && !pageInfo.hideTitle\r\n              ? (pageInfo.labelsSection + '.list_title' | translate)\r\n              : null\r\n          \">\r\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                 class=\"table-header-cell\"\r\n                 role=\"columnheader\"\r\n                 [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n                 [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\r\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n                 [class.first-cell]=\"i === 0\"\r\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\r\n                 (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\r\n              <div class=\"table-header-content\">\r\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"table-body\" role=\"rowgroup\">\r\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n                 class=\"table-row\"\r\n                 role=\"row\"\r\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n                 [ngClass]=\"{\r\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                   'table-row--dark-highlight': isDarkHighlight(row)\r\n                 }\"\r\n                 (auxclick)=\"openNewTab(row)\"\r\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                   class=\"table-cell\"\r\n                   role=\"cell\"\r\n                   [class.first-cell]=\"i === 0\"\r\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                    <span\r\n                      *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n                      role=\"link\"\r\n                      tabindex=\"0\"\r\n                      class=\"mat-mdc-form-field-label hyper-link\"\r\n                      (click)=\"hyperLinkClicked(columnProp, row)\"\r\n                      (keydown.enter)=\"hyperLinkClicked(columnProp, row)\"\r\n                      (keydown.space)=\"$event.preventDefault(); hyperLinkClicked(columnProp, row)\">\r\n                      {{ extractFieldName(row, columnProp) }}\r\n                    </span>\r\n                    <ng-template #plainHyperText>\r\n                      <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'button'\">\r\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'icon'\">\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\r\n                    }\"\r\n                              [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\r\n                      {{ getIcon(row[columnProp]) }}\r\n                    </mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                    <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                    {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'download'\">\r\n                    <mat-icon class=\"mainTable__td__icon-blue\"\r\n                              [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'onOff'\">\r\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'status'\">\r\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"row[columnProp] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n                    </span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'info'\">\r\n                    <button\r\n                      mat-icon-button\r\n                      type=\"button\"\r\n                      [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n                      (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n                      [attr.id]=\"'table-btn-info-'+row.id\">\r\n                      <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'listAction'\">\r\n                    <app-button-actions\r\n                      [row]=\"row\"\r\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\"\r\n                      [actions]=\"listAction\"\r\n                      (clickedButton)=\"actionListClicked($event,row)\">\r\n                    </app-button-actions>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n                      <span\r\n                        role=\"link\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n                        (keydown)=\"onDefaultCellLinkKeydown($event, row)\">\r\n                        {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n                      </span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span\r\n                        role=\"link\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n                        (keydown)=\"onDefaultCellLinkKeydown($event, row)\"\r\n                        [innerText]='extractFieldName(row, columnProp)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Card View -->\r\n      <div class=\"mobile-cards-container\">\r\n        <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n             class=\"mobile-card\"\r\n             [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n             [ngClass]=\"{\r\n               'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n               'mobile-card--dark-highlight': isDarkHighlight(row)\r\n             }\"\r\n             (auxclick)=\"openNewTab(row)\"\r\n             (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n\r\n          <!-- Mobile Card Header: ID/Name and Status -->\r\n          <div class=\"mobile-card__header\">\r\n            <div class=\"mobile-card__header-id\">\r\n              <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n            </div>\r\n            <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n              <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\r\n                      [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n                {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Divider -->\r\n          <div class=\"mobile-card__divider\"></div>\r\n\r\n          <!-- Mobile Card Body: Other columns -->\r\n          <div class=\"mobile-card__body\">\r\n            <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n              <div class=\"mobile-card__row-label\">\r\n                <span>{{ labelKey(column) | translate }} :</span>\r\n              </div>\r\n              <div class=\"mobile-card__row-value\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[column.property]}}\"\r\n                            [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n                      {{ labelKeyByValue(column, row) | translate}}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n                    <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n                      <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span [innerText]='extractFieldName(row, column.property)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Mobile Card Actions -->\r\n          <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n            <app-button-actions\r\n              [row]=\"row\"\r\n              [buttonsAction]=\"true\"\r\n              [listAction]=\"listAction\"\r\n              [actions]=\"listAction\"\r\n              (clickedButton)=\"actionListClicked($event,row)\">\r\n            </app-button-actions>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n        <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n        <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n      </div>\r\n\r\n\r\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n        <ng-container *ngIf=\"enablePagination\">\r\n          <div class=\"flex-column flex-100\">\r\n            <app-paginator\r\n              [currentPage]=\"pageIndex\"\r\n              [totalItems]=\"totalElements\"\r\n              [pageSize]=\"pageSize\"\r\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n              [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n              [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\"\r\n              (loadMore)=\"onLoadMore($event)\">\r\n            </app-paginator>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}\n"] }]
         }], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['securityManager']