ets-fe-ng-sdk 20.3.8 → 20.3.10

package/fesm2022/ets-fe-ng-sdk.mjs

@@ -3,7 +3,7 @@ import { FormControl, Validators, FormGroup, FormArray, FormBuilder, NG_VALUE_AC
 import { ReplaySubject, filter, debounceTime, lastValueFrom, Observable, BehaviorSubject, isObservable, of, merge, firstValueFrom, throwError, interval, map as map$1, startWith, switchMap, forkJoin, catchError as catchError$1, first, distinctUntilChanged, tap as tap$1, fromEvent, mergeMap, debounce, timer, Subject, distinct, concat } from 'rxjs';
 import 'zone.js/plugins/zone-error';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, APP_INITIALIZER, isDevMode, Pipe, NgModule, input, Directive, booleanAttribute, ChangeDetectorRef, model, output, effect, ViewChild, Input, Component, EventEmitter, Output, forwardRef, ChangeDetectionStrategy, HostListener, HostBinding, viewChild, linkedSignal, viewChildren, Inject, DestroyRef, contentChild, ElementRef, Optional, InjectionToken, ErrorHandler } from '@angular/core';
+import { signal, computed, Injectable, inject, APP_INITIALIZER, isDevMode, Pipe, NgModule, input, Directive, booleanAttribute, ChangeDetectorRef, model, output, effect, ViewChild, Input, Component, EventEmitter, Output, forwardRef, ChangeDetectionStrategy, HostListener, HostBinding, viewChild, untracked, linkedSignal, viewChildren, Inject, DestroyRef, contentChild, ElementRef, Optional, InjectionToken, ErrorHandler } from '@angular/core';
 import { faSpoon, faTable, faCircleExclamation, faHandshake, faPercent, faPlay, faArrowsH, faBank, faReceipt, faTag, faTruck, faStop, faRecycle, faUsers, faUnlock, faUpload, faBellSlash, faEye, faSearch, faSave, faArrowLeft, faPen, faPause, faArrowRight, faLock, faInfoCircle, faFileImport, faHome, faHistory, faUserShield, faPenFancy, faFilter, faFile, faFileExport, faEdit, faDownload, faTrash, faCogs, faClone, faListAlt, faCheck, faCancel, faMoneyCheck, faSlidersH, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
 import { clone, uniqBy, uniq, cloneDeep, isEqual, isEmpty } from 'lodash-es';
@@ -94,68 +94,6 @@ import * as i3$3 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 
-/**
- * A utility class for managing loading states in an application.
- * Tracks multiple concurrent loading operations and provides methods to start, stop,
- * and check the overall loading state.
- */
-class PageLoader {
-    constructor() {
-        /**
-         * Internal array to track active loading operations.
-         * Each element represents a single loading operation.
-         * @private
-         */
-        this._pageLoaders = [];
-        /**
-         * Starts one or more loading operations.
-         * @param {number} value - The number of loading operations to start. Defaults to 1.
-         * @returns {number} The total number of active loading operations after starting.
-         */
-        this.startPl = (value = 1) => {
-            for (let index = 0; index < value; index++) {
-                this._pageLoaders.push(1);
-            }
-            // console.log('length at start',this._pageLoaders.length)
-            return this._pageLoaders?.length;
-        };
-        /**
-         * Resets and restarts the loading state with a single loading operation.
-         * Clears all existing loading operations and starts a new one.
-         */
-        this.restartPl = () => {
-            this._pageLoaders = [];
-            this.startPl();
-        };
-        /**
-         * Stops one or more loading operations.
-         * @param {number} value - The number of loading operations to stop. Defaults to 1.
-         * @returns {number} The total number of active loading operations after stopping.
-         */
-        this.stopPl = (value = 1) => {
-            for (let index = 0; index < value; index++) {
-                this._pageLoaders.pop();
-            }
-            // console.log('length at end', this._pageLoaders.length)
-            return this._pageLoaders?.length;
-        };
-        /**
-         * Stops all active loading operations at once.
-         * Completely clears the loading state.
-         */
-        this.stopAllPls = () => {
-            this._pageLoaders = [];
-        };
-    }
-    /**
-     * Indicates whether any loading operations are currently active.
-     * @returns {boolean} True if at least one loading operation is active, false otherwise.
-     */
-    get isLoading() {
-        return this._pageLoaders?.length > 0;
-    }
-}
-
 /**
  * Namespace containing form-related utilities and configurations
  */
@@ -691,1067 +629,1129 @@ var EMenuType;
 class Constant {
 }
 
-/**
- * Abstract base class for SDK environment configuration.
- * Provides core functionality for application settings, routing, translation, and UI state management.
- */
-class SDKEnvironment {
-    /**
-     * Gets the authentication token
-     * @returns The authentication token or null if not available
-     */
-    get token() {
-        return null;
-    }
+var EVFunctions;
+(function (EVFunctions) {
     /**
-     * Sets the loading state of the application
-     * @param v Whether the application is loading
+     * Removes 'null' strings from text
+     * @param text - The string to process
+     * @returns The processed string with 'null' strings removed or the original text if null/undefined
      */
-    set loading(v) {
-        if (v)
-            this.pageLoader.startPl();
-        else
-            this.pageLoader.stopPl();
+    function stripNull(text) {
+        return text
+            ? text == 'null'
+                ? null
+                : text.slice(-5) == ' null'
+                    ? stripNull(text.slice(0, -5))
+                    : text.slice(0, 5) == 'null '
+                        ? stripNull(text.slice(5))
+                        : text.replace(' null ', ' ')
+            : text;
     }
+    EVFunctions.stripNull = stripNull;
     /**
-     * Creates a new environment instance
-     * @param production Whether the application is running in production mode
-     * @param name Environment name identifier
+     * Creates route redirects for a given route
+     * @param route - The target route to redirect to
+     * @param redirects - Array of redirect configurations
+     * @returns An array of routes including the redirects and the original route
      */
-    constructor(production, name) {
-        this.production = production;
-        /** Map of menus to exclude from display */
-        this.excludedMenus = new Map([]);
-        /**
-         * The storage key for the last timestamp an update was found
-         */
-        this.lastUpdateTimeStorageKey = 'lastUpdateTime';
-        /**
-         * The storage key for the last timestamp an update was checked
-         */
-        this.lastUpdateCheckTimeStorageKey = 'lastUpdateCheckTime';
-        /** Storage key for target language preference */
-        this.targetLanguageKey = 'targetLanguage';
-        /** Storage key for translation settings */
-        this.translateKey = 'translate';
-        /** Storage key for user company configuration */
-        this.userCompanyConfigKey = 'userCompanyConfig';
-        /** Storage key for user menu preferences */
-        this.userMenuKey = 'userMenu';
-        /** Storage mechanism to use (localStorage or sessionStorage) */
-        this.storageKey = 'localStorage';
-        /** Whether to use error reporting tools like Sentry */
-        this.reportError = true;
-        /**
-         * Request timeout duration in milliseconds or as a Date object
-         */
-        this.requestTimeout = new Date(86400000 * 365 + Date.now());
-        /** Whether to use the user menu */
-        this.useUserMenu = true;
-        /** Page loader instance for managing loading states */
-        this.pageLoader = new PageLoader();
-        /** Subject for tracking HTTP request loading state */
-        this.requestLoader$ = new ReplaySubject();
-        /** Counter for active HTTP requests */
-        this.requestCount = 0;
-        /** Storage key for application logs */
-        this.logsKey = 'logs';
-        /** Application name */
-        this.appName = 'Evolutics';
-        /** URL for help documentation */
-        this.helpLink = 'https://help.evoluticstech.com/';
-        /** Storage key for user profile data */
-        this.userProfileKey = 'userProfile';
-        /** Storage key for user authentication data */
-        this.userStorageKey = 'user';
-        /** Source language code */
-        this.sourceLanguage = ELanguage.EN;
-        /** Application version number */
-        this.versionNo = '0.0.1';
-        if (!production)
-            this.debug = true;
-        this.name = name;
-        if (this.logActivities == null)
-            this.logActivities = production == true;
+    function routeRedirects(route, redirects) {
+        return [...redirects.map((r) => ({ ...r, redirectTo: route.path })), route];
     }
+    EVFunctions.routeRedirects = routeRedirects;
     /**
-     * Gets whether translation is enabled
-     * @returns The translation enabled state
+     * @deprecated Please use extendRoute2 instead
+     * @param route
+     * @param indexComponent
+     * @param indexLazyModule
+     * @example
+     * ```ts
+     * EVFunctions.extendRoute(
+     *  {
+     *     path: '',
+     *     data: { title: 'CRM / Setups / Segment' },
+     *     loadChildren: () => import('./create-segment/create-segment.module')
+     *       .then((m) => m.CreateSegmentModule),
+     *  },
+     *  null,
+     *  () => import('./segments-index/segments-index.module')
+     *     .then((m) => m.SegmentsIndexModule));
+     * ```
+     * @returns
      */
-    get translate() {
-        return this._translate || false;
+    function extendRoute(route, indexComponent, indexLazyModule) {
+        const routes = [
+            {
+                path: '',
+                data: {
+                    ...route.data,
+                    title: route.data?.title,
+                    type: EPageType.indexPage,
+                },
+                component: indexComponent,
+                loadChildren: indexLazyModule,
+            },
+            {
+                path: 'index',
+                data: {
+                    ...route.data,
+                    title: route.data?.title,
+                    type: EPageType.indexPage,
+                },
+                component: indexComponent,
+                loadChildren: indexLazyModule,
+            },
+            {
+                path: 'clone',
+                data: {
+                    ...route.data,
+                    title: pageTitler(route.data?.title, 'Clone'),
+                    type: EPageType.clonePage,
+                },
+                component: route.component,
+                loadChildren: route.loadChildren,
+            },
+            {
+                path: 'create',
+                data: {
+                    ...route.data,
+                    title: pageTitler(route.data?.title, 'Create'),
+                    type: EPageType.createPage,
+                },
+                component: route.component,
+                loadChildren: route.loadChildren,
+            },
+            {
+                path: 'edit',
+                data: {
+                    ...route.data,
+                    title: pageTitler(route.data?.title, 'Edit'),
+                    type: EPageType.editPage,
+                },
+                component: route.component,
+                loadChildren: route.loadChildren,
+            },
+            {
+                path: 'show',
+                data: {
+                    ...route.data,
+                    title: pageTitler(route.data?.title, 'Show'),
+                    type: EPageType.showPage,
+                },
+                component: route.component,
+                loadChildren: route.loadChildren,
+            },
+        ];
+        if (!indexComponent && !indexLazyModule) {
+            routes.splice(0, 2);
+        }
+        return routes;
     }
+    EVFunctions.extendRoute = extendRoute;
     /**
-     * Sets whether translation is enabled
-     * @param value The new translation enabled state
-     */
-    set translate(value) {
-        this._translate = value;
-    }
-    /**
-     * Gets the target language for translations
-     * @returns The target language code
+     *
+     * @param route
+     * @param indexPage
+     * @example
+     * ```ts
+     * EVFunctions.extendRoute2(
+      {
+        path: '',
+        data: { title: ' Process Actions' },
+        loadComponent: () =>
+          import('./create-process-actions/create-process-actions.component').then(
+            (c) => c.CreateProcessActionsComponent
+          ),
+      },
+      { component: IndexProcessActionsComponent }
+    )
+     * ```
+     * @returns
      */
-    get targetLanguage() {
-        return this._targetLanguage;
+    function extendRoute2(route, indexPage) {
+        const routes = [
+            {
+                ...route,
+                path: 'clone',
+                data: {
+                    ...route.data,
+                    title: pageTitler(route.data?.title, 'Clone'),
+                    type: EPageType.clonePage,
+                },
+            },
+            {
+                ...route,
+                path: 'create',
+                data: {
+                    ...route.data,
+                    title: pageTitler(route.data?.title, 'Create'),
+                    type: EPageType.createPage,
+                },
+            },
+            {
+                ...route,
+                path: 'edit',
+                data: {
+                    ...route.data,
+                    title: pageTitler(route.data?.title, 'Edit'),
+                    type: EPageType.editPage,
+                },
+            },
+            {
+                ...route,
+                path: 'show',
+                data: {
+                    ...route.data,
+                    title: pageTitler(route.data?.title, 'Show'),
+                    type: EPageType.showPage,
+                },
+            },
+        ];
+        if (indexPage && Object.keys(indexPage).length > 0) {
+            const indexRoute = {
+                ...indexPage,
+                data: {
+                    ...route.data,
+                    title: indexPage?.hideTitle ? undefined : indexPage?.title || route.data?.title,
+                    type: EPageType.indexPage,
+                    ...indexPage.data,
+                },
+                loadChildren: indexPage?.loadChildren ?? indexPage?.lazyModule,
+                loadComponent: indexPage?.loadComponent ?? indexPage?.lazyComponent,
+            };
+            routes.splice(0, 0, indexPage?.redirectToIndex
+                ? { path: '', redirectTo: 'index', pathMatch: 'full' }
+                : {
+                    path: '',
+                    ...indexRoute,
+                }, {
+                ...indexRoute,
+                path: 'index',
+            });
+        }
+        return routes;
+    }
+    EVFunctions.extendRoute2 = extendRoute2;
+    function createModule(path, route, indexPage) {
+        return { path, children: extendRoute2(route, indexPage) };
     }
+    EVFunctions.createModule = createModule;
     /**
-     * Sets the target language for translations
-     * @param value The new target language code
+     * Concatenates two strings and accounts for null values
+     * @param text1 First string to concatenate
+     * @param text2 Second string to concatenate
+     * @param joinerText String to place in between the two texts
+     * @returns
      */
-    set targetLanguage(value) {
-        this._targetLanguage = value;
+    function strConcatenator(text1, text2, joinerText = ' - ') {
+        return { value: text1, label: strConcatenator2(text1, text2, joinerText) };
+    }
+    EVFunctions.strConcatenator = strConcatenator;
+    function strConcatenator2(param1, param2, joinerText = ' - ') {
+        if (Array.isArray(param1)) {
+            const jt = param2 != null ? param2 : ' - ';
+            return param1
+                .map((x) => x?.toString()?.trim())
+                .filter((x) => x != null)
+                .join(jt);
+        }
+        else {
+            param1 = param1?.toString()?.trim();
+            param2 = param2?.toString()?.trim();
+            if (param1 != null && param2 != null)
+                return param1 + joinerText + param2;
+            else
+                return param1 || param2;
+        }
     }
+    EVFunctions.strConcatenator2 = strConcatenator2;
     /**
-     * Reinitializes the environment object with new settings
-     * @param env New environment object to use to reset this object
+     * Generates a RFC4122 version 4 compliant UUID
+     * @returns A randomly generated UUID string
      */
-    reinit(env) {
-        Object.assign(this, env);
-    }
-}
-/**
- * Concrete implementation of SDKEnvironment with typed properties
- * for systems, routes, menus and language settings.
- */
-class Environment extends SDKEnvironment {
+    EVFunctions.generateUUID = () => {
+        let d = new Date().getTime();
+        let d2 = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            let r = Math.random() * 16; //random number between 0 and 16
+            if (d > 0) {
+                //Use timestamp until depleted
+                r = (d + r) % 16 | 0;
+                d = Math.floor(d / 16);
+            }
+            else {
+                //Use microseconds since page-load if supported
+                r = (d2 + r) % 16 | 0;
+                d2 = Math.floor(d2 / 16);
+            }
+            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+        });
+    };
     /**
-     * Creates a new environment instance
-     * @param production Whether the application is running in production mode
-     * @param name Environment name identifier
+     * Formats a page title with an infix
+     * @param title - The original title, typically in a path format with slashes
+     * @param infix - The text to insert before the last segment of the title
+     * @returns The formatted title string
      */
-    constructor(production, name) {
-        super(production, name);
-        this.production = production;
-        this.sourceLanguage = ELanguage.EN;
+    function pageTitler(title, infix) {
+        if (!title)
+            return '';
+        if (!infix)
+            return title;
+        const split = title.split('/'), lastSplit = split.pop(), prefix = split.join('/');
+        return (prefix ? prefix + ' / ' : ' ') + infix + ' ' + lastSplit;
     }
     /**
-     * Gets the target language for translations
-     * @returns The target language code
+     * Creates a redirect route for user management
+     * @param route - The original route to modify
+     * @param prefix - The prefix to add to the route path
+     * @returns An array of routes including the redirect and the modified route
      */
-    get targetLanguage() {
-        return this._targetLanguage;
+    function redirectRouteForUM(route, prefix) {
+        const oPath = route?.path + '', nPath = prefix + oPath;
+        route.path = nPath;
+        const routes = [
+            {
+                path: oPath,
+                redirectTo: nPath,
+            },
+            route,
+        ];
+        return routes;
     }
+    EVFunctions.redirectRouteForUM = redirectRouteForUM;
     /**
-     * Sets the target language for translations
-     * @param value The new target language code
+     * Type casting utility function that returns the input value with its type preserved
+     * @param value - The value to cast
+     * @returns The same value with its type information preserved
+     * @typeParam T - The type of the value
      */
-    set targetLanguage(value) {
-        this._targetLanguage = value;
+    function typeCaster(value) {
+        return value;
     }
-}
+    EVFunctions.typeCaster = typeCaster;
+})(EVFunctions || (EVFunctions = {}));
 
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
+//#region  string */
 /**
- * Environment configuration for the application.
- *
- * This constant defines the environment settings for the development environment.
- * It creates a new Environment instance with parameters:
- * @param {boolean} false - Indicates this is not a production environment
- * @param {string} 'Development' - The name of the current environment
+ * Removes the specified character from the string
+ * @param character Character to remove (defaults to '/')
+ * @returns String with the character removed
  */
-const environment = new Environment(false, 'Development');
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
+String.prototype.stripChar = function (character = '/') {
+    return (this + '').replace(character, '');
+};
+/**
+ * Removes the specified character from the end of the string if present
+ * @param character Character to remove from the end (defaults to '/')
+ * @returns String with the character removed from the end if it was present
  */
-
+String.prototype.lastStripChar = function (character = '/') {
+    return this[this?.length - 1] == character ? this.slice(0, this.length - 1) : this;
+};
+String.prototype.removeNull = function () {
+    return EVFunctions.stripNull(this);
+};
 /**
- * Class implementation of menu items with additional functionality
- * @template TESystemType - The system type, defaults to ESystem
- * @template TESubSystem - The subsystem type, defaults to ESubSystem
- * @template TEMenuLocation - The menu location type, defaults to EMenuLocation
+ * Removes all instances of a character from a string
+ * @param character Character to remove (defaults to '/')
+ * @param replacement String to replace with (defaults to '')
+ * @returns String with all instances of the character removed or replaced
  */
-class ETSMenuItem {
-    /**
-     * Gets the edit access status
-     * @returns Current edit access status
-     */
-    get _editAccess() {
-        console.log(this.editAccess);
-        return this.editAccess;
-    }
-    /**
-     * Sets the edit access status and propagates to submenu items
-     * @param value - New edit access status
-     */
-    set _editAccess(value) {
-        this.editAccess = value;
-        this.toggleEditAllSubMenus();
-    }
-    /**
-     * Gets the view access status
-     * @returns Current view access status
-     */
-    get _viewAccess() {
-        return this.viewAccess;
+String.prototype.unChar = function (character = '/', replacement = '') {
+    let te = '';
+    for (let i = 0; i < this.length; i++) {
+        const e = this[i];
+        te += e != character ? e : '';
     }
-    /**
-     * Sets the view access status and propagates to submenu items
-     * @param value - New view access status
-     */
-    set _viewAccess(value) {
-        this.viewAccess = value;
-        this.toggleViewAllSubMenus();
+    return te.split(character).join(replacement);
+};
+String.prototype.toSentenceCase = function () {
+    return this.replace(/([A-Z])/g, ' $1');
+};
+String.prototype.replaceAllSubStr = function (character = '/', replacement = '') {
+    return this.split(character).join(replacement);
+};
+String.prototype.addPrecedingChar = function (character, expectedLength) {
+    if (this.length >= expectedLength)
+        return this;
+    return character.repeat(expectedLength - this.length) + this;
+};
+//#endregion
+//#region  array */
+/**
+ * Concatenates all elements of the array into a single string
+ * @returns Combined string of all array elements
+ */
+Array.prototype.merge = function () {
+    let r = '';
+    for (const i of this) {
+        r += i;
     }
-    /**
-     * Creates a new menu item
-     * @param menuItem - Source menu item data
-     * @param parent - Optional parent menu item
-     */
-    constructor(menuItem, parent) {
-        Object.assign(this, menuItem);
-        this.labelLowerCase = menuItem?.label?.toLowerCase();
-        this.hasSub = !!menuItem?.subs?.length;
-        this.isP = true;
-        this.parentID = parent?.id;
-        // debugger
-        this.system = this.system || parent?.system;
-        this.subSystem = this.subSystem || parent?.subSystem;
-        this.subs = menuItem?.subs
-            ?.filter((x) => !environment.excludedMenus || !environment.excludedMenus.has(x.id))
-            ?.map((m) => new ETSMenuItem(m, this));
+    return r;
+};
+Array.prototype.reverseIndex = function (index = 0) {
+    return this[this?.length - (1 + index)];
+};
+/**
+ * Returns the last item in the array
+ * @returns The last element in the array
+ */
+Array.prototype.lastItem = function () {
+    return this.reverseIndex();
+};
+Array.prototype.sortByFieldLength = function (field, reverse = false) {
+    if (reverse) {
+        return this.filter((x) => x != null).sort((b, a) => (a[field]?.length || 0) - (b[field]?.length || 0));
     }
-    /**
-     * Toggles the disabled state of the menu item
-     */
-    toggle() {
-        this.disabled = !this.disabled;
+    else {
+        return this.filter((x) => x != null).sort((a, b) => (a[field]?.length || 0) - (b[field]?.length || 0));
     }
-    /**
-     * Toggles view access for this menu item
-     */
-    toggleView() {
-        this.viewAccess = !this.viewAccess;
-        if (this.editAccess)
-            this.viewAccess = true;
+};
+Array.prototype.sort2 = function (field, isString = false, reverse = false) {
+    if (reverse)
+        return isString
+            ? this.filter((x) => x != null).sort((b, a) => sortAlphaNum(a[field]?.toString(), b[field]?.toString()))
+            : this.filter((x) => x != null).sort((b, a) => (a[field] || 0) - (b[field] || 0));
+    else
+        return isString
+            ? this.filter((x) => x != null).sort((a, b) => sortAlphaNum(a[field]?.toString(), b[field]?.toString()))
+            : this.filter((x) => x != null).sort((a, b) => (a[field] || 0) - (b[field] || 0));
+};
+Array.prototype.sort3 = function (field, reverse = false) {
+    let isString = this.some((x) => isNaN(x[field]));
+    return isString ? this.sort2(field, true, reverse) : this.sort2(field, false, reverse);
+};
+const reA = /[^a-zA-Z]/g;
+const reN = /[^0-9]/g;
+/**
+ * Sorts an array by comparing alphanumeric strings
+ * @param a First string to compare
+ * @param b Second string to compare
+ * @returns Comparison result (-1, 0, or 1)
+ */
+function sortAlphaNum(a, b) {
+    var aA = a?.toUpperCase()?.replace(reA, '');
+    var bA = b?.toUpperCase()?.replace(reA, '');
+    if (aA === bA) {
+        var aN = parseInt(a?.replace(reN, ''), 10);
+        var bN = parseInt(b?.replace(reN, ''), 10);
+        return aN === bN ? 0 : aN > bN ? 1 : -1;
     }
-    /**
-     * Toggles edit/create access for this menu item
-     */
-    toggleCreate() {
-        this.editAccess = !this.editAccess;
-        if (this.editAccess)
-            this.viewAccess = true;
+    else {
+        return aA > bA ? 1 : -1;
     }
-    /**
-     * Grants edit access to this menu item and all its submenu items
-     */
-    allowEditAllSubMenus() {
-        this.subs?.forEach((x) => x?.allowEditAllSubMenus());
-        //debugger;
-        this.viewAccess = true;
-        this.editAccess = true;
+}
+Array.prototype.removeEmptyItems = function (expectedFields, config) {
+    // debugger;
+    const ignoreBooleanFields = config?.ignoreBooleanFields == true;
+    const fieldsType = config?.fieldsType || 'included';
+    if (!this.length)
+        return this;
+    let fieldList;
+    if (fieldsType == 'included')
+        fieldList = expectedFields?.length ? expectedFields : Object.keys(this[0]);
+    else if (fieldsType == 'excluded')
+        fieldList = expectedFields?.length
+            ? Object.keys(this[0]).filter((x) => !expectedFields.includes(x))
+            : Object.keys(this[0]);
+    const removedItems = [];
+    if (fieldList)
+        for (let i = 0; i < this.length; i++) {
+            if (ignoreBooleanFields && i == 0)
+                fieldList = fieldList.filter((f) => typeof this[0][f] != 'boolean');
+            const item = this[i];
+            if (fieldList.some((f) => item[f] != null))
+                continue; //Don't remove row
+            removedItems.push(...this.splice(i, 1)); //Remove row
+            i = i--;
+        }
+    return removedItems;
+};
+Array.prototype.toMap = function (arg1, valueMap) {
+    // debugger;
+    const ret = {};
+    if (typeof arg1 == 'function')
+        for (const item of this)
+            ret[arg1(item)] = item;
+    else if (valueMap)
+        for (const item of this)
+            ret[item[arg1?.toString()]] = valueMap(item);
+    else
+        for (const item of this)
+            ret[item[arg1?.toString()]] = item;
+    return ret;
+};
+Array.prototype.groupBy = function (keyField, keyMap) {
+    // debugger;
+    const ret = {};
+    for (const iterator of this) {
+        const group = keyMap ? keyMap(iterator) : iterator[keyField];
+        if (ret[group])
+            ret[group].push(iterator);
+        else
+            ret[group] = [iterator];
     }
-    /**
-     * Removes edit access from this menu item and all its submenu items
-     */
-    disableEditAllSubMenus() {
-        this.subs?.forEach((x) => x?.disableEditAllSubMenus());
-        this.editAccess = false;
+    return ret;
+};
+/**
+ * Creates a map where each array element becomes a key with value true
+ * @returns Object with array elements as keys and boolean true as values
+ */
+Array.prototype.toBooleanMap = function () {
+    // debugger;
+    const ret = {};
+    for (const iterator of this) {
+        ret[iterator] = true;
     }
-    /**
-     * Grants view access to this menu item and all its submenu items
-     */
-    allowViewAllSubMenus() {
-        this.subs?.forEach((x) => x?.allowViewAllSubMenus());
-        //debugger;
-        this.viewAccess = true;
-        this.editAccess = false;
+    return ret;
+};
+/**
+ * Randomly shuffles the elements of the array
+ * @returns A new array with the elements in random order
+ */
+Array.prototype.shuffle = function () {
+    // debugger;
+    const newArr = [];
+    while (this.length) {
+        newArr.push(...this.splice(Math.floor(Math.random() * this.length - 1), 1));
     }
-    /**
-     * Removes view access from this menu item and all its submenu items
-     */
-    disableViewAllSubMenus() {
-        this.subs?.forEach((x) => x?.disableViewAllSubMenus());
-        this.viewAccess = false;
-        this.editAccess = false;
+    return newArr;
+};
+//#endregion
+//#region Function
+/**
+ * Creates a clone of the function
+ * @returns A new function that behaves the same as the original
+ */
+Function.prototype.clone = function () {
+    var that = this;
+    var temp = function temporary() {
+        return that.apply(this, arguments);
+    };
+    for (var key in this) {
+        if (this.hasOwnProperty(key)) {
+            temp[key] = this[key];
+        }
     }
-    /**
-     * Toggles edit access for this menu item and all its submenu items
-     */
-    toggleEditAllSubMenus() {
-        // if (this.editAccess == undefined) return;
-        !this.editAccess ? this.allowEditAllSubMenus() : this.disableEditAllSubMenus();
-        console.log(this.subs);
+    return temp;
+};
+//#endregion
+//#region FORMARRAY
+/**
+ * Gets the formatted value of the FormGroup
+ * @returns An object containing the formatted values of all controls
+ */
+FormGroup.prototype.getFormattedValue = function () {
+    const data = {};
+    if (!this.controls)
+        return this.formattedValue;
+    else
+        for (const controlName in this.controls) {
+            data[controlName] = (this.controls[controlName]).getFormattedValue();
+        }
+    return data;
+};
+/**
+ * Gets the formatted value of the FormArray
+ * @returns An array containing the formatted values of all controls
+ */
+FormArray.prototype.getFormattedValue = function () {
+    const data = [];
+    if (!this.controls)
+        return this.formattedValue;
+    else
+        for (const control of this.controls) {
+            data.push(control.getFormattedValue());
+        }
+    return data;
+};
+/**
+ * Gets the formatted value of the FormControl
+ * @returns The formatted value of the control
+ */
+FormControl.prototype.getFormattedValue = function () {
+    return this.formattedValue;
+};
+
+var prototypes = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+/**
+ * A utility class for managing loading states in an application.
+ * Tracks multiple concurrent loading operations and provides methods to start, stop,
+ * and check the overall loading state.
+ */
+class PageLoader {
+    constructor() {
+        /**
+         * Internal array to track active loading operations.
+         * Each element represents a single loading operation.
+         * @private
+         */
+        this._pageLoaders = [];
+        /**
+         * Starts one or more loading operations.
+         * @param {number} value - The number of loading operations to start. Defaults to 1.
+         * @returns {number} The total number of active loading operations after starting.
+         */
+        this.startPl = (value = 1) => {
+            for (let index = 0; index < value; index++) {
+                this._pageLoaders.push(1);
+            }
+            // console.log('length at start',this._pageLoaders.length)
+            return this._pageLoaders?.length;
+        };
+        /**
+         * Resets and restarts the loading state with a single loading operation.
+         * Clears all existing loading operations and starts a new one.
+         */
+        this.restartPl = () => {
+            this._pageLoaders = [];
+            this.startPl();
+        };
+        /**
+         * Stops one or more loading operations.
+         * @param {number} value - The number of loading operations to stop. Defaults to 1.
+         * @returns {number} The total number of active loading operations after stopping.
+         */
+        this.stopPl = (value = 1) => {
+            for (let index = 0; index < value; index++) {
+                this._pageLoaders.pop();
+            }
+            // console.log('length at end', this._pageLoaders.length)
+            return this._pageLoaders?.length;
+        };
+        /**
+         * Stops all active loading operations at once.
+         * Completely clears the loading state.
+         */
+        this.stopAllPls = () => {
+            this._pageLoaders = [];
+        };
     }
     /**
-     * Toggles view access for this menu item and all its submenu items
+     * Indicates whether any loading operations are currently active.
+     * @returns {boolean} True if at least one loading operation is active, false otherwise.
      */
-    toggleViewAllSubMenus() {
-        // if (this.viewAccess == undefined) return;
-        // debugger
-        !this.viewAccess ? this.allowViewAllSubMenus() : this.disableViewAllSubMenus();
-        console.log(this.subs);
+    get isLoading() {
+        return this._pageLoaders?.length > 0;
     }
+}
+
+/**
+ * Abstract base class for SDK environment configuration.
+ * Provides core functionality for application settings, routing, translation, and UI state management.
+ */
+class SDKEnvironment {
     /**
-     * Grants both view and edit access to this menu item
+     * Gets the authentication token
+     * @returns The authentication token or null if not available
      */
-    allowAuthorization() {
-        this.viewAccess = true;
-        this.editAccess = true;
+    get token() {
+        return null;
     }
     /**
-     * Removes both view and edit access from this menu item
+     * Sets the loading state of the application
+     * @param v Whether the application is loading
      */
-    disableAuthorization() {
-        this.viewAccess = false;
-        this.viewAccess = false;
+    set loading(v) {
+        if (v)
+            this.pageLoader.startPl();
+        else
+            this.pageLoader.stopPl();
     }
     /**
-     * Toggles both view and edit access for this menu item
+     * Creates a new environment instance
+     * @param production Whether the application is running in production mode
+     * @param name Environment name identifier
      */
-    toggleAuthorization() {
-        this.viewAccess = !this.viewAccess;
-        this.editAccess = !this.editAccess;
+    constructor(production, name) {
+        this.production = production;
+        /** Map of menus to exclude from display */
+        this.excludedMenus = new Map([]);
+        /**
+         * The storage key for the last timestamp an update was found
+         */
+        this.lastUpdateTimeStorageKey = 'lastUpdateTime';
+        /**
+         * The storage key for the last timestamp an update was checked
+         */
+        this.lastUpdateCheckTimeStorageKey = 'lastUpdateCheckTime';
+        /** Storage key for target language preference */
+        this.targetLanguageKey = 'targetLanguage';
+        /** Storage key for translation settings */
+        this.translateKey = 'translate';
+        /** Storage key for user company configuration */
+        this.userCompanyConfigKey = 'userCompanyConfig';
+        /** Storage key for user menu preferences */
+        this.userMenuKey = 'userMenu';
+        /** Storage mechanism to use (localStorage or sessionStorage) */
+        this.storageKey = 'localStorage';
+        /** Whether to use error reporting tools like Sentry */
+        this.reportError = true;
+        /**
+         * Request timeout duration in milliseconds or as a Date object
+         */
+        this.requestTimeout = new Date(86400000 * 365 + Date.now());
+        /** Whether to use the user menu */
+        this.useUserMenu = true;
+        /** Page loader instance for managing loading states */
+        this.pageLoader = new PageLoader();
+        /** Subject for tracking HTTP request loading state */
+        this.requestLoader$ = new ReplaySubject();
+        /** Counter for active HTTP requests */
+        this.requestCount = 0;
+        /** Storage key for application logs */
+        this.logsKey = 'logs';
+        /** Application name */
+        this.appName = 'Evolutics';
+        /** URL for help documentation */
+        this.helpLink = 'https://help.evoluticstech.com/';
+        /** Storage key for user profile data */
+        this.userProfileKey = 'userProfile';
+        /** Storage key for user authentication data */
+        this.userStorageKey = 'user';
+        /** Source language code */
+        this.sourceLanguage = ELanguage.EN;
+        /** Application version number */
+        this.versionNo = '0.0.1';
+        if (!production)
+            this.debug = true;
+        this.name = name;
+        if (this.logActivities == null)
+            this.logActivities = production == true;
     }
-}
-/**
- * Special menu item class that represents a divider
- */
-class ETSMenuItemDivider extends ETSMenuItem {
     /**
-     * Creates a new divider menu item
+     * Gets whether translation is enabled
+     * @returns The translation enabled state
      */
-    constructor() {
-        super(null);
-        this.isDivider = true;
+    get translate() {
+        return this._translate || false;
     }
-}
-/**
- * Enum for page button IDs
- */
-var EETSPageBtnID;
-(function (EETSPageBtnID) {
-    EETSPageBtnID["agentCommissions"] = "PAC8";
-    EETSPageBtnID["agentCreditNotes"] = "PACN10";
-    EETSPageBtnID["agentDocuments"] = "PAD2";
-    EETSPageBtnID["agentEndorsements"] = "PAE3";
-    EETSPageBtnID["agentLoan"] = "PAL1";
-    EETSPageBtnID["agentNotes"] = "PAN6";
-    EETSPageBtnID["agentPendingQuotes"] = "PAPQ11";
-    EETSPageBtnID["agentPolicies"] = "PAP7";
-    EETSPageBtnID["agentProduction"] = "PAP9";
-    EETSPageBtnID["agentWebLogIn"] = "PAWL4";
-    EETSPageBtnID["agentWorkflows"] = "PAW5";
-    EETSPageBtnID["agentCalendar"] = "PAC6";
-    EETSPageBtnID["agentFutureActions"] = "PAFA23";
-    EETSPageBtnID["clientCalendar"] = "PCC11";
-    EETSPageBtnID["clientDocuments"] = "PCD12";
-    EETSPageBtnID["clientEndorsements"] = "PCE13";
-    EETSPageBtnID["clientNotes"] = "PCN14";
-    EETSPageBtnID["clientOtherBusiness"] = "PCOB15";
-    EETSPageBtnID["clientPendingPayments"] = "PCPP16";
-    EETSPageBtnID["clientPendingQuotes"] = "PCPQ17";
-    EETSPageBtnID["clientPolicies"] = "PCP18";
-    EETSPageBtnID["clientRelationships"] = "PCR19";
-    EETSPageBtnID["clientUnderwritingEvents"] = "PCUE20";
-    EETSPageBtnID["clientWebLogIn"] = "PCWL21";
-    EETSPageBtnID["clientWorkflows"] = "PCW22";
-    EETSPageBtnID["clientFutureActions"] = "PCFA23";
-})(EETSPageBtnID || (EETSPageBtnID = {}));
-
-// import '../prototypes/prototypes';
-/**
- * Represents a basic route item with path generation capabilities.
- * Handles route path construction with optional parameters.
- */
-class RouteItem {
     /**
-     * Creates a new RouteItem instance.
-     * @param base - The base route segment
-     * @param parentPub - The parent public path (defaults to empty string)
-     * @param params - Optional route parameters to append
+     * Sets whether translation is enabled
+     * @param value The new translation enabled state
      */
-    constructor(base, parentPub = '', ...params) {
-        // console.log(params);
-        this._ = base + (params?.length ? '/:' + params.join('/:') : '');
-        this.__ = base;
-        this.pub = parentPub + '/' + base;
+    set translate(value) {
+        this._translate = value;
     }
-}
-/**
- * Extended route class that provides common application routes and utility methods.
- * Creates a standard set of routes for CRUD operations and navigation.
- */
-class AppRouteBase extends RouteItem {
     /**
-     * Creates a new AppRouteBase with standard child routes.
-     * @param base - The base route segment
-     * @param parentPub - The parent public path (defaults to empty string)
-     * @param params - Optional route parameters to append
+     * Gets the target language for translations
+     * @returns The target language code
      */
-    constructor(base, parentPub = '', ...params) {
-        super(base, parentPub, ...params);
-        this.all = new RouteItem('all', this.pub);
-        this.clone = new RouteItem('clone', this.pub, 'id');
-        this.create = new CreateRoute('create', this.pub);
-        this.edit = new RouteItem('edit', this.pub, 'id');
-        this.find = new FindRoute('find', this.pub);
-        this.index = new RouteItem('index', this.pub);
-        this.overview = new RouteItem('overview', this.pub);
-        this.show = new RouteItem('show', this.pub, 'id');
-        this.start = new RouteItem('start', this.pub);
+    get targetLanguage() {
+        return this._targetLanguage;
     }
-    //#region funcs
     /**
-     * Combines a route with a parent ID.
-     * @param route - The base route
-     * @param prtID - The parent ID to append
-     * @returns The combined route string or null if route is falsy
+     * Sets the target language for translations
+     * @param value The new target language code
      */
-    routeIdPipe(route, prtID) {
-        return route ? route + '/' + prtID : null;
+    set targetLanguage(value) {
+        this._targetLanguage = value;
     }
     /**
-     * Creates a route with ID and formatted title.
-     * @param route - The base route
-     * @param id - The item ID
-     * @param title - Optional title to format and append
-     * @returns The formatted route string
+     * Reinitializes the environment object with new settings
+     * @param env New environment object to use to reset this object
      */
-    routeIdTitlePipe(route, id, title) {
-        return route + '/' + id + '/' + this.routeNamer(title);
+    reinit(env) {
+        Object.assign(this, env);
     }
+}
+/**
+ * Concrete implementation of SDKEnvironment with typed properties
+ * for systems, routes, menus and language settings.
+ */
+class Environment extends SDKEnvironment {
     /**
-     * Creates a route with parent ID, item ID, and formatted title.
-     * @param route - The base route
-     * @param parentID - The parent item ID
-     * @param id - The item ID
-     * @param title - Optional title to format and append
-     * @returns The formatted route string
+     * Creates a new environment instance
+     * @param production Whether the application is running in production mode
+     * @param name Environment name identifier
      */
-    routePIdIdTitlePipe(route, parentID, id, title) {
-        return route + '/' + parentID + '/' + id + '/' + this.routeNamer(title);
+    constructor(production, name) {
+        super(production, name);
+        this.production = production;
+        this.sourceLanguage = ELanguage.EN;
     }
     /**
-     * Creates a route with parent ID, sub-item ID, item ID, and formatted title.
-     * @param route - The base route
-     * @param parentID - The parent item ID
-     * @param subID - The sub-item ID
-     * @param id - The item ID
-     * @param title - Optional title to format and append
-     * @returns The formatted route string
+     * Gets the target language for translations
+     * @returns The target language code
      */
-    routePidSidIdTitlePipe(route, parentID, subID, id, title) {
-        return (route +
-            '/' +
-            parentID +
-            '/' +
-            subID +
-            '/' +
-            id +
-            '/' +
-            this.routeNamer(title));
+    get targetLanguage() {
+        return this._targetLanguage;
     }
     /**
-     * Formats a title for use in a URL.
-     * Trims, removes special characters, converts to lowercase, and replaces spaces with hyphens.
-     * @param title - The title to format
-     * @returns The URL-friendly formatted title or empty string if no title provided
+     * Sets the target language for translations
+     * @param value The new target language code
      */
-    routeNamer(title) {
-        return title
-            ? title
-                .substr(0, 30)
-                .unChar('/')
-                .trim()
-                .toLowerCase()
-                .split(' ')
-                .filter((x) => x)
-                .join('-')
-            : '';
+    set targetLanguage(value) {
+        this._targetLanguage = value;
     }
 }
+
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
 /**
- * Specialized route for creation operations with different entity types.
+ * Environment configuration for the application.
+ *
+ * This constant defines the environment settings for the development environment.
+ * It creates a new Environment instance with parameters:
+ * @param {boolean} false - Indicates this is not a production environment
+ * @param {string} 'Development' - The name of the current environment
  */
-class CreateRoute extends RouteItem {
-    constructor() {
-        super(...arguments);
-        /** Route for corporate entity creation */
-        this.corporate = new RouteItem('corporate', this.pub);
-        /** Route for group entity creation */
-        this.group = new RouteItem('group', this.pub);
-        /** Route for individual entity creation */
-        this.individual = new RouteItem('individual', this.pub);
-        /** Route for provider entity creation with sub-routes */
-        this.provider = new CreateProviderRoute('provider', this.pub);
-    }
-}
-/**
- * Specialized route for provider creation operations.
+const environment = new Environment(false, 'Development');
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
  */
-class CreateProviderRoute extends RouteItem {
-    constructor() {
-        super(...arguments);
-        /** Index route for provider creation */
-        this.index = new RouteItem('index', this.pub);
-    }
-}
+
 /**
- * Specialized route for find/search operations.
+ * Class implementation of menu items with additional functionality
+ * @template TESystemType - The system type, defaults to ESystem
+ * @template TESubSystem - The subsystem type, defaults to ESubSystem
+ * @template TEMenuLocation - The menu location type, defaults to EMenuLocation
  */
-class FindRoute extends RouteItem {
-    constructor() {
-        super(...arguments);
-        /** Route for search results list */
-        this.searchList = new RouteItem('search-list', this.pub);
-    }
-}
-
-var EVFunctions;
-(function (EVFunctions) {
-    /**
-     * Removes 'null' strings from text
-     * @param text - The string to process
-     * @returns The processed string with 'null' strings removed or the original text if null/undefined
-     */
-    function stripNull(text) {
-        return text
-            ? text == 'null'
-                ? null
-                : text.slice(-5) == ' null'
-                    ? stripNull(text.slice(0, -5))
-                    : text.slice(0, 5) == 'null '
-                        ? stripNull(text.slice(5))
-                        : text.replace(' null ', ' ')
-            : text;
-    }
-    EVFunctions.stripNull = stripNull;
+class ETSMenuItem {
     /**
-     * Creates route redirects for a given route
-     * @param route - The target route to redirect to
-     * @param redirects - Array of redirect configurations
-     * @returns An array of routes including the redirects and the original route
+     * Gets the edit access status
+     * @returns Current edit access status
      */
-    function routeRedirects(route, redirects) {
-        return [...redirects.map((r) => ({ ...r, redirectTo: route.path })), route];
+    get _editAccess() {
+        console.log(this.editAccess);
+        return this.editAccess;
     }
-    EVFunctions.routeRedirects = routeRedirects;
     /**
-     * @deprecated Please use extendRoute2 instead
-     * @param route
-     * @param indexComponent
-     * @param indexLazyModule
-     * @example
-     * ```ts
-     * EVFunctions.extendRoute(
-     *  {
-     *     path: '',
-     *     data: { title: 'CRM / Setups / Segment' },
-     *     loadChildren: () => import('./create-segment/create-segment.module')
-     *       .then((m) => m.CreateSegmentModule),
-     *  },
-     *  null,
-     *  () => import('./segments-index/segments-index.module')
-     *     .then((m) => m.SegmentsIndexModule));
-     * ```
-     * @returns
+     * Sets the edit access status and propagates to submenu items
+     * @param value - New edit access status
      */
-    function extendRoute(route, indexComponent, indexLazyModule) {
-        const routes = [
-            {
-                path: '',
-                data: {
-                    ...route.data,
-                    title: route.data?.title,
-                    type: EPageType.indexPage,
-                },
-                component: indexComponent,
-                loadChildren: indexLazyModule,
-            },
-            {
-                path: 'index',
-                data: {
-                    ...route.data,
-                    title: route.data?.title,
-                    type: EPageType.indexPage,
-                },
-                component: indexComponent,
-                loadChildren: indexLazyModule,
-            },
-            {
-                path: 'clone',
-                data: {
-                    ...route.data,
-                    title: pageTitler(route.data?.title, 'Clone'),
-                    type: EPageType.clonePage,
-                },
-                component: route.component,
-                loadChildren: route.loadChildren,
-            },
-            {
-                path: 'create',
-                data: {
-                    ...route.data,
-                    title: pageTitler(route.data?.title, 'Create'),
-                    type: EPageType.createPage,
-                },
-                component: route.component,
-                loadChildren: route.loadChildren,
-            },
-            {
-                path: 'edit',
-                data: {
-                    ...route.data,
-                    title: pageTitler(route.data?.title, 'Edit'),
-                    type: EPageType.editPage,
-                },
-                component: route.component,
-                loadChildren: route.loadChildren,
-            },
-            {
-                path: 'show',
-                data: {
-                    ...route.data,
-                    title: pageTitler(route.data?.title, 'Show'),
-                    type: EPageType.showPage,
-                },
-                component: route.component,
-                loadChildren: route.loadChildren,
-            },
-        ];
-        if (!indexComponent && !indexLazyModule) {
-            routes.splice(0, 2);
-        }
-        return routes;
+    set _editAccess(value) {
+        this.editAccess = value;
+        this.toggleEditAllSubMenus();
     }
-    EVFunctions.extendRoute = extendRoute;
     /**
-     *
-     * @param route
-     * @param indexPage
-     * @example
-     * ```ts
-     * EVFunctions.extendRoute2(
-      {
-        path: '',
-        data: { title: ' Process Actions' },
-        loadComponent: () =>
-          import('./create-process-actions/create-process-actions.component').then(
-            (c) => c.CreateProcessActionsComponent
-          ),
-      },
-      { component: IndexProcessActionsComponent }
-    )
-     * ```
-     * @returns
+     * Gets the view access status
+     * @returns Current view access status
      */
-    function extendRoute2(route, indexPage) {
-        const routes = [
-            {
-                ...route,
-                path: 'clone',
-                data: {
-                    ...route.data,
-                    title: pageTitler(route.data?.title, 'Clone'),
-                    type: EPageType.clonePage,
-                },
-            },
-            {
-                ...route,
-                path: 'create',
-                data: {
-                    ...route.data,
-                    title: pageTitler(route.data?.title, 'Create'),
-                    type: EPageType.createPage,
-                },
-            },
-            {
-                ...route,
-                path: 'edit',
-                data: {
-                    ...route.data,
-                    title: pageTitler(route.data?.title, 'Edit'),
-                    type: EPageType.editPage,
-                },
-            },
-            {
-                ...route,
-                path: 'show',
-                data: {
-                    ...route.data,
-                    title: pageTitler(route.data?.title, 'Show'),
-                    type: EPageType.showPage,
-                },
-            },
-        ];
-        if (indexPage && Object.keys(indexPage).length > 0) {
-            const indexRoute = {
-                ...indexPage,
-                data: {
-                    ...route.data,
-                    title: indexPage?.hideTitle ? undefined : indexPage?.title || route.data?.title,
-                    type: EPageType.indexPage,
-                    ...indexPage.data,
-                },
-                loadChildren: indexPage?.loadChildren ?? indexPage?.lazyModule,
-                loadComponent: indexPage?.loadComponent ?? indexPage?.lazyComponent,
-            };
-            routes.splice(0, 0, indexPage?.redirectToIndex
-                ? { path: '', redirectTo: 'index', pathMatch: 'full' }
-                : {
-                    path: '',
-                    ...indexRoute,
-                }, {
-                ...indexRoute,
-                path: 'index',
-            });
-        }
-        return routes;
-    }
-    EVFunctions.extendRoute2 = extendRoute2;
-    function createModule(path, route, indexPage) {
-        return { path, children: extendRoute2(route, indexPage) };
+    get _viewAccess() {
+        return this.viewAccess;
     }
-    EVFunctions.createModule = createModule;
     /**
-     * Concatenates two strings and accounts for null values
-     * @param text1 First string to concatenate
-     * @param text2 Second string to concatenate
-     * @param joinerText String to place in between the two texts
-     * @returns
+     * Sets the view access status and propagates to submenu items
+     * @param value - New view access status
      */
-    function strConcatenator(text1, text2, joinerText = ' - ') {
-        return { value: text1, label: strConcatenator2(text1, text2, joinerText) };
+    set _viewAccess(value) {
+        this.viewAccess = value;
+        this.toggleViewAllSubMenus();
     }
-    EVFunctions.strConcatenator = strConcatenator;
-    function strConcatenator2(param1, param2, joinerText = ' - ') {
-        if (Array.isArray(param1)) {
-            const jt = param2 != null ? param2 : ' - ';
-            return param1
-                .map((x) => x?.toString()?.trim())
-                .filter((x) => x != null)
-                .join(jt);
-        }
-        else {
-            param1 = param1?.toString()?.trim();
-            param2 = param2?.toString()?.trim();
-            if (param1 != null && param2 != null)
-                return param1 + joinerText + param2;
-            else
-                return param1 || param2;
-        }
+    /**
+     * Creates a new menu item
+     * @param menuItem - Source menu item data
+     * @param parent - Optional parent menu item
+     */
+    constructor(menuItem, parent) {
+        Object.assign(this, menuItem);
+        this.labelLowerCase = menuItem?.label?.toLowerCase();
+        this.hasSub = !!menuItem?.subs?.length;
+        this.isP = true;
+        this.parentID = parent?.id;
+        // debugger
+        this.system = this.system || parent?.system;
+        this.subSystem = this.subSystem || parent?.subSystem;
+        this.subs = menuItem?.subs
+            ?.filter((x) => !environment.excludedMenus || !environment.excludedMenus.has(x.id))
+            ?.map((m) => new ETSMenuItem(m, this));
     }
-    EVFunctions.strConcatenator2 = strConcatenator2;
     /**
-     * Generates a RFC4122 version 4 compliant UUID
-     * @returns A randomly generated UUID string
+     * Toggles the disabled state of the menu item
      */
-    EVFunctions.generateUUID = () => {
-        let d = new Date().getTime();
-        let d2 = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-            let r = Math.random() * 16; //random number between 0 and 16
-            if (d > 0) {
-                //Use timestamp until depleted
-                r = (d + r) % 16 | 0;
-                d = Math.floor(d / 16);
-            }
-            else {
-                //Use microseconds since page-load if supported
-                r = (d2 + r) % 16 | 0;
-                d2 = Math.floor(d2 / 16);
-            }
-            return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
-        });
-    };
+    toggle() {
+        this.disabled = !this.disabled;
+    }
     /**
-     * Formats a page title with an infix
-     * @param title - The original title, typically in a path format with slashes
-     * @param infix - The text to insert before the last segment of the title
-     * @returns The formatted title string
+     * Toggles view access for this menu item
      */
-    function pageTitler(title, infix) {
-        if (!title)
-            return '';
-        if (!infix)
-            return title;
-        const split = title.split('/'), lastSplit = split.pop(), prefix = split.join('/');
-        return (prefix ? prefix + ' / ' : ' ') + infix + ' ' + lastSplit;
+    toggleView() {
+        this.viewAccess = !this.viewAccess;
+        if (this.editAccess)
+            this.viewAccess = true;
     }
     /**
-     * Creates a redirect route for user management
-     * @param route - The original route to modify
-     * @param prefix - The prefix to add to the route path
-     * @returns An array of routes including the redirect and the modified route
+     * Toggles edit/create access for this menu item
      */
-    function redirectRouteForUM(route, prefix) {
-        const oPath = route?.path + '', nPath = prefix + oPath;
-        route.path = nPath;
-        const routes = [
-            {
-                path: oPath,
-                redirectTo: nPath,
-            },
-            route,
-        ];
-        return routes;
+    toggleCreate() {
+        this.editAccess = !this.editAccess;
+        if (this.editAccess)
+            this.viewAccess = true;
     }
-    EVFunctions.redirectRouteForUM = redirectRouteForUM;
     /**
-     * Type casting utility function that returns the input value with its type preserved
-     * @param value - The value to cast
-     * @returns The same value with its type information preserved
-     * @typeParam T - The type of the value
+     * Grants edit access to this menu item and all its submenu items
      */
-    function typeCaster(value) {
-        return value;
+    allowEditAllSubMenus() {
+        this.subs?.forEach((x) => x?.allowEditAllSubMenus());
+        //debugger;
+        this.viewAccess = true;
+        this.editAccess = true;
     }
-    EVFunctions.typeCaster = typeCaster;
-})(EVFunctions || (EVFunctions = {}));
-
-//#region  string */
-/**
- * Removes the specified character from the string
- * @param character Character to remove (defaults to '/')
- * @returns String with the character removed
- */
-String.prototype.stripChar = function (character = '/') {
-    return (this + '').replace(character, '');
-};
-/**
- * Removes the specified character from the end of the string if present
- * @param character Character to remove from the end (defaults to '/')
- * @returns String with the character removed from the end if it was present
- */
-String.prototype.lastStripChar = function (character = '/') {
-    return this[this?.length - 1] == character ? this.slice(0, this.length - 1) : this;
-};
-String.prototype.removeNull = function () {
-    return EVFunctions.stripNull(this);
-};
-/**
- * Removes all instances of a character from a string
- * @param character Character to remove (defaults to '/')
- * @param replacement String to replace with (defaults to '')
- * @returns String with all instances of the character removed or replaced
- */
-String.prototype.unChar = function (character = '/', replacement = '') {
-    let te = '';
-    for (let i = 0; i < this.length; i++) {
-        const e = this[i];
-        te += e != character ? e : '';
+    /**
+     * Removes edit access from this menu item and all its submenu items
+     */
+    disableEditAllSubMenus() {
+        this.subs?.forEach((x) => x?.disableEditAllSubMenus());
+        this.editAccess = false;
     }
-    return te.split(character).join(replacement);
-};
-String.prototype.toSentenceCase = function () {
-    return this.replace(/([A-Z])/g, ' $1');
-};
-String.prototype.replaceAllSubStr = function (character = '/', replacement = '') {
-    return this.split(character).join(replacement);
-};
-String.prototype.addPrecedingChar = function (character, expectedLength) {
-    if (this.length >= expectedLength)
-        return this;
-    return character.repeat(expectedLength - this.length) + this;
-};
-//#endregion
-//#region  array */
-/**
- * Concatenates all elements of the array into a single string
- * @returns Combined string of all array elements
- */
-Array.prototype.merge = function () {
-    let r = '';
-    for (const i of this) {
-        r += i;
+    /**
+     * Grants view access to this menu item and all its submenu items
+     */
+    allowViewAllSubMenus() {
+        this.subs?.forEach((x) => x?.allowViewAllSubMenus());
+        //debugger;
+        this.viewAccess = true;
+        this.editAccess = false;
     }
-    return r;
-};
-Array.prototype.reverseIndex = function (index = 0) {
-    return this[this?.length - (1 + index)];
-};
-/**
- * Returns the last item in the array
- * @returns The last element in the array
- */
-Array.prototype.lastItem = function () {
-    return this.reverseIndex();
-};
-Array.prototype.sortByFieldLength = function (field, reverse = false) {
-    if (reverse) {
-        return this.filter((x) => x != null).sort((b, a) => (a[field]?.length || 0) - (b[field]?.length || 0));
+    /**
+     * Removes view access from this menu item and all its submenu items
+     */
+    disableViewAllSubMenus() {
+        this.subs?.forEach((x) => x?.disableViewAllSubMenus());
+        this.viewAccess = false;
+        this.editAccess = false;
     }
-    else {
-        return this.filter((x) => x != null).sort((a, b) => (a[field]?.length || 0) - (b[field]?.length || 0));
+    /**
+     * Toggles edit access for this menu item and all its submenu items
+     */
+    toggleEditAllSubMenus() {
+        // if (this.editAccess == undefined) return;
+        !this.editAccess ? this.allowEditAllSubMenus() : this.disableEditAllSubMenus();
+        console.log(this.subs);
     }
-};
-Array.prototype.sort2 = function (field, isString = false, reverse = false) {
-    if (reverse)
-        return isString
-            ? this.filter((x) => x != null).sort((b, a) => sortAlphaNum(a[field]?.toString(), b[field]?.toString()))
-            : this.filter((x) => x != null).sort((b, a) => (a[field] || 0) - (b[field] || 0));
-    else
-        return isString
-            ? this.filter((x) => x != null).sort((a, b) => sortAlphaNum(a[field]?.toString(), b[field]?.toString()))
-            : this.filter((x) => x != null).sort((a, b) => (a[field] || 0) - (b[field] || 0));
-};
-Array.prototype.sort3 = function (field, reverse = false) {
-    let isString = this.some((x) => isNaN(x[field]));
-    return isString ? this.sort2(field, true, reverse) : this.sort2(field, false, reverse);
-};
-const reA = /[^a-zA-Z]/g;
-const reN = /[^0-9]/g;
-/**
- * Sorts an array by comparing alphanumeric strings
- * @param a First string to compare
- * @param b Second string to compare
- * @returns Comparison result (-1, 0, or 1)
- */
-function sortAlphaNum(a, b) {
-    var aA = a?.toUpperCase()?.replace(reA, '');
-    var bA = b?.toUpperCase()?.replace(reA, '');
-    if (aA === bA) {
-        var aN = parseInt(a?.replace(reN, ''), 10);
-        var bN = parseInt(b?.replace(reN, ''), 10);
-        return aN === bN ? 0 : aN > bN ? 1 : -1;
+    /**
+     * Toggles view access for this menu item and all its submenu items
+     */
+    toggleViewAllSubMenus() {
+        // if (this.viewAccess == undefined) return;
+        // debugger
+        !this.viewAccess ? this.allowViewAllSubMenus() : this.disableViewAllSubMenus();
+        console.log(this.subs);
     }
-    else {
-        return aA > bA ? 1 : -1;
+    /**
+     * Grants both view and edit access to this menu item
+     */
+    allowAuthorization() {
+        this.viewAccess = true;
+        this.editAccess = true;
     }
-}
-Array.prototype.removeEmptyItems = function (expectedFields, config) {
-    // debugger;
-    const ignoreBooleanFields = config?.ignoreBooleanFields == true;
-    const fieldsType = config?.fieldsType || 'included';
-    if (!this.length)
-        return this;
-    let fieldList;
-    if (fieldsType == 'included')
-        fieldList = expectedFields?.length ? expectedFields : Object.keys(this[0]);
-    else if (fieldsType == 'excluded')
-        fieldList = expectedFields?.length
-            ? Object.keys(this[0]).filter((x) => !expectedFields.includes(x))
-            : Object.keys(this[0]);
-    const removedItems = [];
-    if (fieldList)
-        for (let i = 0; i < this.length; i++) {
-            if (ignoreBooleanFields && i == 0)
-                fieldList = fieldList.filter((f) => typeof this[0][f] != 'boolean');
-            const item = this[i];
-            if (fieldList.some((f) => item[f] != null))
-                continue; //Don't remove row
-            removedItems.push(...this.splice(i, 1)); //Remove row
-            i = i--;
-        }
-    return removedItems;
-};
-Array.prototype.toMap = function (arg1, valueMap) {
-    // debugger;
-    const ret = {};
-    if (typeof arg1 == 'function')
-        for (const item of this)
-            ret[arg1(item)] = item;
-    else if (valueMap)
-        for (const item of this)
-            ret[item[arg1?.toString()]] = valueMap(item);
-    else
-        for (const item of this)
-            ret[item[arg1?.toString()]] = item;
-    return ret;
-};
-Array.prototype.groupBy = function (keyField, keyMap) {
-    // debugger;
-    const ret = {};
-    for (const iterator of this) {
-        const group = keyMap ? keyMap(iterator) : iterator[keyField];
-        if (ret[group])
-            ret[group].push(iterator);
-        else
-            ret[group] = [iterator];
+    /**
+     * Removes both view and edit access from this menu item
+     */
+    disableAuthorization() {
+        this.viewAccess = false;
+        this.viewAccess = false;
+    }
+    /**
+     * Toggles both view and edit access for this menu item
+     */
+    toggleAuthorization() {
+        this.viewAccess = !this.viewAccess;
+        this.editAccess = !this.editAccess;
     }
-    return ret;
-};
+}
 /**
- * Creates a map where each array element becomes a key with value true
- * @returns Object with array elements as keys and boolean true as values
+ * Special menu item class that represents a divider
  */
-Array.prototype.toBooleanMap = function () {
-    // debugger;
-    const ret = {};
-    for (const iterator of this) {
-        ret[iterator] = true;
+class ETSMenuItemDivider extends ETSMenuItem {
+    /**
+     * Creates a new divider menu item
+     */
+    constructor() {
+        super(null);
+        this.isDivider = true;
     }
-    return ret;
-};
+}
 /**
- * Randomly shuffles the elements of the array
- * @returns A new array with the elements in random order
+ * Enum for page button IDs
  */
-Array.prototype.shuffle = function () {
-    // debugger;
-    const newArr = [];
-    while (this.length) {
-        newArr.push(...this.splice(Math.floor(Math.random() * this.length - 1), 1));
+var EETSPageBtnID;
+(function (EETSPageBtnID) {
+    EETSPageBtnID["agentCommissions"] = "PAC8";
+    EETSPageBtnID["agentCreditNotes"] = "PACN10";
+    EETSPageBtnID["agentDocuments"] = "PAD2";
+    EETSPageBtnID["agentEndorsements"] = "PAE3";
+    EETSPageBtnID["agentLoan"] = "PAL1";
+    EETSPageBtnID["agentNotes"] = "PAN6";
+    EETSPageBtnID["agentPendingQuotes"] = "PAPQ11";
+    EETSPageBtnID["agentPolicies"] = "PAP7";
+    EETSPageBtnID["agentProduction"] = "PAP9";
+    EETSPageBtnID["agentWebLogIn"] = "PAWL4";
+    EETSPageBtnID["agentWorkflows"] = "PAW5";
+    EETSPageBtnID["agentCalendar"] = "PAC6";
+    EETSPageBtnID["agentFutureActions"] = "PAFA23";
+    EETSPageBtnID["clientCalendar"] = "PCC11";
+    EETSPageBtnID["clientDocuments"] = "PCD12";
+    EETSPageBtnID["clientEndorsements"] = "PCE13";
+    EETSPageBtnID["clientNotes"] = "PCN14";
+    EETSPageBtnID["clientOtherBusiness"] = "PCOB15";
+    EETSPageBtnID["clientPendingPayments"] = "PCPP16";
+    EETSPageBtnID["clientPendingQuotes"] = "PCPQ17";
+    EETSPageBtnID["clientPolicies"] = "PCP18";
+    EETSPageBtnID["clientRelationships"] = "PCR19";
+    EETSPageBtnID["clientUnderwritingEvents"] = "PCUE20";
+    EETSPageBtnID["clientWebLogIn"] = "PCWL21";
+    EETSPageBtnID["clientWorkflows"] = "PCW22";
+    EETSPageBtnID["clientFutureActions"] = "PCFA23";
+})(EETSPageBtnID || (EETSPageBtnID = {}));
+
+// import '../prototypes/prototypes';
+/**
+ * Represents a basic route item with path generation capabilities.
+ * Handles route path construction with optional parameters.
+ */
+class RouteItem {
+    /**
+     * Creates a new RouteItem instance.
+     * @param base - The base route segment
+     * @param parentPub - The parent public path (defaults to empty string)
+     * @param params - Optional route parameters to append
+     */
+    constructor(base, parentPub = '', ...params) {
+        // console.log(params);
+        this._ = base + (params?.length ? '/:' + params.join('/:') : '');
+        this.__ = base;
+        this.pub = parentPub + '/' + base;
     }
-    return newArr;
-};
-//#endregion
-//#region Function
+}
 /**
- * Creates a clone of the function
- * @returns A new function that behaves the same as the original
+ * Extended route class that provides common application routes and utility methods.
+ * Creates a standard set of routes for CRUD operations and navigation.
  */
-Function.prototype.clone = function () {
-    var that = this;
-    var temp = function temporary() {
-        return that.apply(this, arguments);
-    };
-    for (var key in this) {
-        if (this.hasOwnProperty(key)) {
-            temp[key] = this[key];
-        }
+class AppRouteBase extends RouteItem {
+    /**
+     * Creates a new AppRouteBase with standard child routes.
+     * @param base - The base route segment
+     * @param parentPub - The parent public path (defaults to empty string)
+     * @param params - Optional route parameters to append
+     */
+    constructor(base, parentPub = '', ...params) {
+        super(base, parentPub, ...params);
+        this.all = new RouteItem('all', this.pub);
+        this.clone = new RouteItem('clone', this.pub, 'id');
+        this.create = new CreateRoute('create', this.pub);
+        this.edit = new RouteItem('edit', this.pub, 'id');
+        this.find = new FindRoute('find', this.pub);
+        this.index = new RouteItem('index', this.pub);
+        this.overview = new RouteItem('overview', this.pub);
+        this.show = new RouteItem('show', this.pub, 'id');
+        this.start = new RouteItem('start', this.pub);
     }
-    return temp;
-};
-//#endregion
-//#region FORMARRAY
+    //#region funcs
+    /**
+     * Combines a route with a parent ID.
+     * @param route - The base route
+     * @param prtID - The parent ID to append
+     * @returns The combined route string or null if route is falsy
+     */
+    routeIdPipe(route, prtID) {
+        return route ? route + '/' + prtID : null;
+    }
+    /**
+     * Creates a route with ID and formatted title.
+     * @param route - The base route
+     * @param id - The item ID
+     * @param title - Optional title to format and append
+     * @returns The formatted route string
+     */
+    routeIdTitlePipe(route, id, title) {
+        return route + '/' + id + '/' + this.routeNamer(title);
+    }
+    /**
+     * Creates a route with parent ID, item ID, and formatted title.
+     * @param route - The base route
+     * @param parentID - The parent item ID
+     * @param id - The item ID
+     * @param title - Optional title to format and append
+     * @returns The formatted route string
+     */
+    routePIdIdTitlePipe(route, parentID, id, title) {
+        return route + '/' + parentID + '/' + id + '/' + this.routeNamer(title);
+    }
+    /**
+     * Creates a route with parent ID, sub-item ID, item ID, and formatted title.
+     * @param route - The base route
+     * @param parentID - The parent item ID
+     * @param subID - The sub-item ID
+     * @param id - The item ID
+     * @param title - Optional title to format and append
+     * @returns The formatted route string
+     */
+    routePidSidIdTitlePipe(route, parentID, subID, id, title) {
+        return (route +
+            '/' +
+            parentID +
+            '/' +
+            subID +
+            '/' +
+            id +
+            '/' +
+            this.routeNamer(title));
+    }
+    /**
+     * Formats a title for use in a URL.
+     * Trims, removes special characters, converts to lowercase, and replaces spaces with hyphens.
+     * @param title - The title to format
+     * @returns The URL-friendly formatted title or empty string if no title provided
+     */
+    routeNamer(title) {
+        return title
+            ? title
+                .substr(0, 30)
+                .unChar('/')
+                .trim()
+                .toLowerCase()
+                .split(' ')
+                .filter((x) => x)
+                .join('-')
+            : '';
+    }
+}
 /**
- * Gets the formatted value of the FormGroup
- * @returns An object containing the formatted values of all controls
+ * Specialized route for creation operations with different entity types.
  */
-FormGroup.prototype.getFormattedValue = function () {
-    const data = {};
-    if (!this.controls)
-        return this.formattedValue;
-    else
-        for (const controlName in this.controls) {
-            data[controlName] = (this.controls[controlName]).getFormattedValue();
-        }
-    return data;
-};
+class CreateRoute extends RouteItem {
+    constructor() {
+        super(...arguments);
+        /** Route for corporate entity creation */
+        this.corporate = new RouteItem('corporate', this.pub);
+        /** Route for group entity creation */
+        this.group = new RouteItem('group', this.pub);
+        /** Route for individual entity creation */
+        this.individual = new RouteItem('individual', this.pub);
+        /** Route for provider entity creation with sub-routes */
+        this.provider = new CreateProviderRoute('provider', this.pub);
+    }
+}
 /**
- * Gets the formatted value of the FormArray
- * @returns An array containing the formatted values of all controls
+ * Specialized route for provider creation operations.
  */
-FormArray.prototype.getFormattedValue = function () {
-    const data = [];
-    if (!this.controls)
-        return this.formattedValue;
-    else
-        for (const control of this.controls) {
-            data.push(control.getFormattedValue());
-        }
-    return data;
-};
+class CreateProviderRoute extends RouteItem {
+    constructor() {
+        super(...arguments);
+        /** Index route for provider creation */
+        this.index = new RouteItem('index', this.pub);
+    }
+}
 /**
- * Gets the formatted value of the FormControl
- * @returns The formatted value of the control
+ * Specialized route for find/search operations.
  */
-FormControl.prototype.getFormattedValue = function () {
-    return this.formattedValue;
-};
-
-var prototypes = /*#__PURE__*/Object.freeze({
-    __proto__: null
-});
+class FindRoute extends RouteItem {
+    constructor() {
+        super(...arguments);
+        /** Route for search results list */
+        this.searchList = new RouteItem('search-list', this.pub);
+    }
+}
 
 /**
  * Configuration class containing application-wide constants and settings
@@ -1793,17 +1793,11 @@ class Config {
     /**
      * Map of months by lowercase short name
      */
-    static { this.ShortMonthsMap = Config.Months.map((x) => ({
-        ...x,
-        _short: x.short?.toLowerCase(),
-    })).toMap('_short'); }
+    static { this.ShortMonthsMap = Object.fromEntries(Config.Months.map((x) => [x.short?.toLowerCase(), x])); }
     /**
      * Map of months by ISO string representation
      */
-    static { this.MonthsIsoStrMap = Config.Months.map((x) => ({
-        ...x,
-        _short: x.short?.toLowerCase(),
-    })).toMap('isoStr'); }
+    static { this.MonthsIsoStrMap = Object.fromEntries(Config.Months.map((x) => [x.isoStr, x])); }
     /**
      * List of days of the week with index values
      */
@@ -1862,6 +1856,8 @@ class Config {
      * @security This should be stored securely and not exposed in client-side code
      */
     static { this.secretKey = 'MIICXAIBAAfBgQDfmljld9rdhvakQApmLCDOgdwdwdwo2/iwdoiP0nNERInBheMh7J/r5aU8PUAssIpGXET/8'; }
+    /** Collection of subscriptions to be closed when navigating between routes */
+    static { this.subsToCloseOnRoute = []; }
 }
 
 /**
@@ -5713,7 +5709,7 @@ class BtnComponent {
         this._mclass.update((mclass) => _mclass || mclass);
         if (_icon)
             this._icon = _icon;
-        if (_type)
+        if (_type != v)
             this._type = _type;
     }
     /**
@@ -10207,6 +10203,15 @@ class InputBase {
         this.labelField = model(...(ngDevMode ? [undefined, { debugName: "labelField" }] : []));
         /** Field to use for option hints */
         this.optionHintField = model(...(ngDevMode ? [undefined, { debugName: "optionHintField" }] : []));
+        this.ctOptions = model(...(ngDevMode ? [undefined, { debugName: "ctOptions" }] : []));
+        this.ctOptionsEffect = effect(() => {
+            if (this.ctOptions())
+                untracked(() => {
+                    this.rawOptionsSignal.set(this.ctOptions());
+                    this.valueField.set('code');
+                    this.labelType.set('ct');
+                });
+        }, ...(ngDevMode ? [{ debugName: "ctOptionsEffect" }] : []));
         /** Preset label type for options */
         this.labelType = model(...(ngDevMode ? [undefined, { debugName: "labelType" }] : []));
         /** Custom formatter function for options */
@@ -10478,7 +10483,7 @@ class InputBase {
         this.mchange.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: InputBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: InputBase, isStandalone: true, selector: "ng-component", inputs: { cls: { classPropertyName: "cls", publicName: "cls", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dontFormatAsInputSignal: { classPropertyName: "dontFormatAsInputSignal", publicName: "dontFormatAsInput", isSignal: true, isRequired: false, transformFunction: null }, duplicateCheckSignal: { classPropertyName: "duplicateCheckSignal", publicName: "duplicateCheck", isSignal: true, isRequired: false, transformFunction: null }, presetValue: { classPropertyName: "presetValue", publicName: "presetValue", isSignal: true, isRequired: false, transformFunction: null }, endLabelSignal: { classPropertyName: "endLabelSignal", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabelTooltipSignal: { classPropertyName: "endLabelTooltipSignal", publicName: "endLabelTooltip", isSignal: true, isRequired: false, transformFunction: null }, idSignal: { classPropertyName: "idSignal", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputContClassSignal: { classPropertyName: "inputContClassSignal", publicName: "inputContClass", isSignal: true, isRequired: false, transformFunction: null }, labelSignal: { classPropertyName: "labelSignal", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, lblCl: { classPropertyName: "lblCl", publicName: "lblCl", isSignal: true, isRequired: false, transformFunction: null }, light: { classPropertyName: "light", publicName: "light", isSignal: true, isRequired: false, transformFunction: null }, noFormat: { classPropertyName: "noFormat", publicName: "noFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlySignal: { classPropertyName: "readonlySignal", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredSignal: { classPropertyName: "requiredSignal", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredTagSignal: { classPropertyName: "showRequiredTagSignal", publicName: "showRequiredTag", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, textareaRowsSignal: { classPropertyName: "textareaRowsSignal", publicName: "textareaRows", isSignal: true, isRequired: false, transformFunction: null }, translatorOptions: { classPropertyName: "translatorOptions", publicName: "translatorOptions", isSignal: true, isRequired: false, transformFunction: null }, setFormattedValue: { classPropertyName: "setFormattedValue", publicName: "setFormattedValue", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, inlineHint: { classPropertyName: "inlineHint", publicName: "inlineHint", isSignal: true, isRequired: false, transformFunction: null }, autoPickValueField: { classPropertyName: "autoPickValueField", publicName: "autoPickValueField", isSignal: true, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: true, isRequired: false, transformFunction: null }, optionHintField: { classPropertyName: "optionHintField", publicName: "optionHintField", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, optionFormatter: { classPropertyName: "optionFormatter", publicName: "optionFormatter", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, xsmall: { classPropertyName: "xsmall", publicName: "xsmall", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, _indeterminate: { classPropertyName: "_indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, transformFunction: null }, maxToday: { classPropertyName: "maxToday", publicName: "maxToday", isSignal: false, isRequired: false, transformFunction: null }, minToday: { classPropertyName: "minToday", publicName: "minToday", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, prefixSignal: { classPropertyName: "prefixSignal", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, miniSignal: { classPropertyName: "miniSignal", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, inpClSignal: { classPropertyName: "inpClSignal", publicName: "inpCl", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOptionSignal: { classPropertyName: "showEmptyOptionSignal", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, showLabelSignal: { classPropertyName: "showLabelSignal", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValidationSignal: { classPropertyName: "showValidationSignal", publicName: "showValidation", isSignal: true, isRequired: false, transformFunction: null }, showValidationIconSignal: { classPropertyName: "showValidationIconSignal", publicName: "showValidationIcon", isSignal: true, isRequired: false, transformFunction: null }, smallSignal: { classPropertyName: "smallSignal", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsgSignal: { classPropertyName: "showValidationMsgSignal", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, stackedSignal: { classPropertyName: "stackedSignal", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, verbose: { classPropertyName: "verbose", publicName: "verbose", isSignal: true, isRequired: false, transformFunction: null }, timeType: { classPropertyName: "timeType", publicName: "timeType", isSignal: true, isRequired: false, transformFunction: null }, checkParentBeforeDisable: { classPropertyName: "checkParentBeforeDisable", publicName: "checkParentBeforeDisable", isSignal: true, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, _type: { classPropertyName: "_type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, maxSignal: { classPropertyName: "maxSignal", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minSignal: { classPropertyName: "minSignal", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, coloredSignal: { classPropertyName: "coloredSignal", publicName: "colored", isSignal: true, isRequired: false, transformFunction: null }, checkedSignal: { classPropertyName: "checkedSignal", publicName: "checkedSignal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", labelField: "labelFieldChange", optionHintField: "optionHintFieldChange", labelType: "labelTypeChange", name: "nameChange", valueField: "valueFieldChange", prefixSignal: "prefixChange", miniSignal: "miniChange", inpClSignal: "inpClChange", showEmptyOptionSignal: "showEmptyOptionChange", showLabelSignal: "showLabelChange", showValidationSignal: "showValidationChange", showValidationIconSignal: "showValidationIconChange", smallSignal: "smallChange", showValidationMsgSignal: "showValidationMsgChange", checkParentBeforeDisable: "checkParentBeforeDisableChange", maxSignal: "maxChange", minSignal: "minChange", mchange: "mchange", mSelectOptionChange: "mSelectOptionChange" }, viewQueries: [{ propertyName: "dateInputRef", first: true, predicate: DateInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.2", type: InputBase, isStandalone: true, selector: "ng-component", inputs: { cls: { classPropertyName: "cls", publicName: "cls", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dontFormatAsInputSignal: { classPropertyName: "dontFormatAsInputSignal", publicName: "dontFormatAsInput", isSignal: true, isRequired: false, transformFunction: null }, duplicateCheckSignal: { classPropertyName: "duplicateCheckSignal", publicName: "duplicateCheck", isSignal: true, isRequired: false, transformFunction: null }, presetValue: { classPropertyName: "presetValue", publicName: "presetValue", isSignal: true, isRequired: false, transformFunction: null }, endLabelSignal: { classPropertyName: "endLabelSignal", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabelTooltipSignal: { classPropertyName: "endLabelTooltipSignal", publicName: "endLabelTooltip", isSignal: true, isRequired: false, transformFunction: null }, idSignal: { classPropertyName: "idSignal", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputContClassSignal: { classPropertyName: "inputContClassSignal", publicName: "inputContClass", isSignal: true, isRequired: false, transformFunction: null }, labelSignal: { classPropertyName: "labelSignal", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, lblCl: { classPropertyName: "lblCl", publicName: "lblCl", isSignal: true, isRequired: false, transformFunction: null }, light: { classPropertyName: "light", publicName: "light", isSignal: true, isRequired: false, transformFunction: null }, noFormat: { classPropertyName: "noFormat", publicName: "noFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlySignal: { classPropertyName: "readonlySignal", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredSignal: { classPropertyName: "requiredSignal", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredTagSignal: { classPropertyName: "showRequiredTagSignal", publicName: "showRequiredTag", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, textareaRowsSignal: { classPropertyName: "textareaRowsSignal", publicName: "textareaRows", isSignal: true, isRequired: false, transformFunction: null }, translatorOptions: { classPropertyName: "translatorOptions", publicName: "translatorOptions", isSignal: true, isRequired: false, transformFunction: null }, setFormattedValue: { classPropertyName: "setFormattedValue", publicName: "setFormattedValue", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, inlineHint: { classPropertyName: "inlineHint", publicName: "inlineHint", isSignal: true, isRequired: false, transformFunction: null }, autoPickValueField: { classPropertyName: "autoPickValueField", publicName: "autoPickValueField", isSignal: true, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: true, isRequired: false, transformFunction: null }, optionHintField: { classPropertyName: "optionHintField", publicName: "optionHintField", isSignal: true, isRequired: false, transformFunction: null }, ctOptions: { classPropertyName: "ctOptions", publicName: "ctOptions", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, optionFormatter: { classPropertyName: "optionFormatter", publicName: "optionFormatter", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, xsmall: { classPropertyName: "xsmall", publicName: "xsmall", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, _indeterminate: { classPropertyName: "_indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, transformFunction: null }, maxToday: { classPropertyName: "maxToday", publicName: "maxToday", isSignal: false, isRequired: false, transformFunction: null }, minToday: { classPropertyName: "minToday", publicName: "minToday", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, prefixSignal: { classPropertyName: "prefixSignal", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, miniSignal: { classPropertyName: "miniSignal", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, inpClSignal: { classPropertyName: "inpClSignal", publicName: "inpCl", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOptionSignal: { classPropertyName: "showEmptyOptionSignal", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, showLabelSignal: { classPropertyName: "showLabelSignal", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValidationSignal: { classPropertyName: "showValidationSignal", publicName: "showValidation", isSignal: true, isRequired: false, transformFunction: null }, showValidationIconSignal: { classPropertyName: "showValidationIconSignal", publicName: "showValidationIcon", isSignal: true, isRequired: false, transformFunction: null }, smallSignal: { classPropertyName: "smallSignal", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsgSignal: { classPropertyName: "showValidationMsgSignal", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, stackedSignal: { classPropertyName: "stackedSignal", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, verbose: { classPropertyName: "verbose", publicName: "verbose", isSignal: true, isRequired: false, transformFunction: null }, timeType: { classPropertyName: "timeType", publicName: "timeType", isSignal: true, isRequired: false, transformFunction: null }, checkParentBeforeDisable: { classPropertyName: "checkParentBeforeDisable", publicName: "checkParentBeforeDisable", isSignal: true, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, _type: { classPropertyName: "_type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, maxSignal: { classPropertyName: "maxSignal", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minSignal: { classPropertyName: "minSignal", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, coloredSignal: { classPropertyName: "coloredSignal", publicName: "colored", isSignal: true, isRequired: false, transformFunction: null }, checkedSignal: { classPropertyName: "checkedSignal", publicName: "checkedSignal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", labelField: "labelFieldChange", optionHintField: "optionHintFieldChange", ctOptions: "ctOptionsChange", labelType: "labelTypeChange", name: "nameChange", valueField: "valueFieldChange", prefixSignal: "prefixChange", miniSignal: "miniChange", inpClSignal: "inpClChange", showEmptyOptionSignal: "showEmptyOptionChange", showLabelSignal: "showLabelChange", showValidationSignal: "showValidationChange", showValidationIconSignal: "showValidationIconChange", smallSignal: "smallChange", showValidationMsgSignal: "showValidationMsgChange", checkParentBeforeDisable: "checkParentBeforeDisableChange", maxSignal: "maxChange", minSignal: "minChange", mchange: "mchange", mSelectOptionChange: "mSelectOptionChange" }, viewQueries: [{ propertyName: "dateInputRef", first: true, predicate: DateInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: InputBase, decorators: [{
             type: Component,
@@ -11048,7 +11053,7 @@ class AutocompleteComponent extends InputBasicComponent {
          */
         this.retriggerDisplayWith = effect(() => {
             this.optionsMap();
-            this.control().patchValue(this.control().value, { emitEvent: false });
+            this.control()?.patchValue(this.control().value, { emitEvent: false });
         }, ...(ngDevMode ? [{ debugName: "retriggerDisplayWith" }] : []));
         /**
          * Function used by the autocomplete to display the selected value
@@ -19849,6 +19854,7 @@ class TableBaseComponent {
         this.rowOptionsMap = input(...(ngDevMode ? [undefined, { debugName: "rowOptionsMap" }] : []));
         /** Whether to center the content of table cells */
         this.centerCells = input(false, ...(ngDevMode ? [{ debugName: "centerCells" }] : []));
+        this.enableRowClick = input(true, ...(ngDevMode ? [{ debugName: "enableRowClick" }] : []));
         /** Whether to apply rounded corners to the table */
         this.curvy = input(false, ...(ngDevMode ? [{ debugName: "curvy" }] : []));
         /** Whether to filter out duplicate rows */
@@ -19895,8 +19901,6 @@ class TableBaseComponent {
         this.showAdditionalColumns = input(false, ...(ngDevMode ? [{ debugName: "showAdditionalColumns" }] : []));
         /** Whether to show export functionality */
         this.showExport = input(false, ...(ngDevMode ? [{ debugName: "showExport" }] : []));
-        /** Whether to show pointer cursor on rows */
-        this.showRowPointer = input(false, ...(ngDevMode ? [{ debugName: "showRowPointer" }] : []));
         /** Whether to use smaller font sizes */
         this.smallerFonts = input(false, ...(ngDevMode ? [{ debugName: "smallerFonts" }] : []));
         /** Whether to apply striped styling to rows */
@@ -20185,7 +20189,7 @@ class TableBaseComponent {
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TableBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: TableBaseComponent, isStandalone: true, selector: "ng-component", inputs: { _rowOptions: { classPropertyName: "_rowOptions", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, curvy: { classPropertyName: "curvy", publicName: "curvy", isSignal: true, isRequired: false, transformFunction: null }, distinct: { classPropertyName: "distinct", publicName: "distinct", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabledFunc: { classPropertyName: "isDisabledFunc", publicName: "isDisabledFunc", isSignal: true, isRequired: false, transformFunction: null }, noItemTxt: { classPropertyName: "noItemTxt", publicName: "noItemTxt", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, customTemplates: { classPropertyName: "customTemplates", publicName: "customTemplates", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, placeSelectionAtRight: { classPropertyName: "placeSelectionAtRight", publicName: "placeSelectionAtRight", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showRowPointer: { classPropertyName: "showRowPointer", publicName: "showRowPointer", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, tableContainerClass: { classPropertyName: "tableContainerClass", publicName: "tableContainerClass", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, formSchemaToColumns: { classPropertyName: "formSchemaToColumns", publicName: "formSchemaToColumns", isSignal: true, isRequired: false, transformFunction: null }, uploadSchemaToColumns: { classPropertyName: "uploadSchemaToColumns", publicName: "uploadSchemaToColumns", isSignal: true, isRequired: false, transformFunction: null }, _displayedColumns: { classPropertyName: "_displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, useCustomLabels: { classPropertyName: "useCustomLabels", publicName: "useCustomLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedExpandRow: "clickedExpandRow", _rowClick: "rowClick", emitCheckbox: "emitCheckbox", selectionChanged: "selectionChanged", useCustomLabels: "useCustomLabelsChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: TableBaseComponent, isStandalone: true, selector: "ng-component", inputs: { _rowOptions: { classPropertyName: "_rowOptions", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, enableRowClick: { classPropertyName: "enableRowClick", publicName: "enableRowClick", isSignal: true, isRequired: false, transformFunction: null }, curvy: { classPropertyName: "curvy", publicName: "curvy", isSignal: true, isRequired: false, transformFunction: null }, distinct: { classPropertyName: "distinct", publicName: "distinct", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabledFunc: { classPropertyName: "isDisabledFunc", publicName: "isDisabledFunc", isSignal: true, isRequired: false, transformFunction: null }, noItemTxt: { classPropertyName: "noItemTxt", publicName: "noItemTxt", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, customTemplates: { classPropertyName: "customTemplates", publicName: "customTemplates", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, placeSelectionAtRight: { classPropertyName: "placeSelectionAtRight", publicName: "placeSelectionAtRight", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, tableContainerClass: { classPropertyName: "tableContainerClass", publicName: "tableContainerClass", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, formSchemaToColumns: { classPropertyName: "formSchemaToColumns", publicName: "formSchemaToColumns", isSignal: true, isRequired: false, transformFunction: null }, uploadSchemaToColumns: { classPropertyName: "uploadSchemaToColumns", publicName: "uploadSchemaToColumns", isSignal: true, isRequired: false, transformFunction: null }, _displayedColumns: { classPropertyName: "_displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, useCustomLabels: { classPropertyName: "useCustomLabels", publicName: "useCustomLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedExpandRow: "clickedExpandRow", _rowClick: "rowClick", emitCheckbox: "emitCheckbox", selectionChanged: "selectionChanged", useCustomLabels: "useCustomLabelsChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TableBaseComponent, decorators: [{
             type: Component,
@@ -20644,7 +20648,7 @@ class TableHttpsComponent extends TableBaseComponent {
         this.search();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TableHttpsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: TableHttpsComponent, isStandalone: true, selector: "table-https", inputs: { observableFunc: { classPropertyName: "observableFunc", publicName: "observableFunc", isSignal: true, isRequired: false, transformFunction: null }, pageNumber: { classPropertyName: "pageNumber", publicName: "pageNumber", isSignal: false, isRequired: false, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryData: "queryDataChange", dataFetched: "dataFetched" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-https\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  <!-- {{queryData()|json}} -->\n  <div class=\"\" [hidden]=\"!allowSearch()\">\n    <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n      <div class=\"ps-0\">\n        @if (startSectionTemplate()) {\n          <div class=\"{{ starterSectionClass() }}\">\n            <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n          </div>\n        }\n      </div>\n      <div class=\"pe-0\">\n        <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n          <div class=\"col-auto\">\n            @if (showExport()) {\n              <app-export-table\n                [disabled]=\"!resultsLength()\"\n                [label]=\"label()\"\n                [debug]=\"debug()\"\n                [searchQuery]=\"allQueryData() | toAny\"\n                [searchFunc]=\"observableFunc()\"\n                [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n            }\n          </div>\n          @if (showAdditionalColumns()) {\n            <div class=\"col-auto\">\n              <fields-to-display\n                [fields]=\"allTableColumns()\"\n                [currentColumns]=\"computedDisplayedColumns()\"\n                (fieldsChanged)=\"fieldsChanged($event)\" />\n            </div>\n          }\n          @if (showRefreshBtn()) {\n            <div class=\"col-auto\">\n              <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n      [ngClass]=\"{ border: distinct() }\">\n      <loader\n        [loading]=\"isLoadingResults()\"\n        [useStaticLoader]=\"useStaticLoader()\"\n        [height]=\"container?.scrollHeight + 400\">\n        <div #container>\n          <div class=\"table-responsive\">\n            <table\n              mat-table\n              [dataSource]=\"filteredAndPagedResults()\"\n              class=\"w-100 d-table table\"\n              [multiTemplateDataRows]=\"isExpandable()\"\n              [ngClass]=\"{\n                smallerFonts: smallerFonts(),\n                nowrap: nowrap(),\n                centerCells: centerCells(),\n                curvy: curvy(),\n                'table-striped': striped(),\n              }\"\n              matSort\n              matSortActive=\"{{ orderField() | toAny }}\"\n              matSortDisableClear\n              [matSortDirection]=\"orderDirection()\"\n              #table\n              (matSortChange)=\"resetPaging()\">\n              <!-- Checkbox Column -->\n              <ng-container\n                matColumnDef=\"mselect\"\n                [sticky]=\"!placeSelectionAtRight()\"\n                [stickyEnd]=\"placeSelectionAtRight()\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <mat-checkbox\n                    (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                    [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <mat-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(row) : null\"\n                    [checked]=\"selection.isSelected(row)\"\n                    [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n                </td>\n              </ng-container>\n              <!-- COLUMNS -->\n              @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n                @switch (col.type) {\n                  <!-- CHECKBOX -->\n                  @case ('checkbox') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                        <!-- Removing the empty space above checkboxes -->\n                        <app-input-ngmodel\n                          [showLabel]=\"false\"\n                          [stacked]=\"true\"\n                          type=\"checkbox\"\n                          [disabled]=\"col.disabled\"\n                          [checked]=\"col.checked\"\n                          [(model)]=\"row[col.f]\"\n                          (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- Sub Table -->\n                  @case ('table') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <app-btn\n                          [icon]=\"col.icon\"\n                          type=\"dark\"\n                          (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                          [help]=\"col.subTable | tableToString: row | async\"\n                          [showHelpIcon]=\"false\"\n                          [iconBtn]=\"true\"\n                          mclass=\"w-auto\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- COLOR -->\n                  @case ('color') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef>\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- Button -->\n                  @case ('button') {\n                    <ng-container [sticky]=\"col.stickyStart\" [stickyEnd]=\"col.stickyEnd||col.sticky\" matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                        <app-btn\n                          [icon]=\"col.icon || col.btn?.icon\"\n                          [type]=\"col.btn?.type\"\n                          (mclick)=\"\n                            col.action\n                              ? col.action(row, col.f, getActionStatusCallback(col), index)\n                              : null\n                          \"\n                          [help]=\"col.btn?.help\"\n                          [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                          [text]=\"col.btn?.label\"\n                          [mini]=\"col.btn?.mini\"\n                          [loading]=\"col.btn?.loading\"\n                          [iconBtn]=\"col.btn?.iconBtn\"\n                          mclass=\"w-auto\"\n                          [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- ACTION/BTNS COLUMNS -->\n                  @case ('btns') {\n                    <ng-container\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [stickyEnd]=\"true\"\n                      [sticky]=\"true\">\n                      <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                        <div class=\"d-flex col-md-auto col-sm-auto\">\n                          @for (button of col.buttons; track button.icon + button.label) {\n                            <div class=\"mx-2\">\n                              <app-btn\n                                [icon]=\"button.icon\"\n                                [text]=\"button.label\"\n                                [help]=\"button.help\"\n                                [showHelpIcon]=\"button.showHelpIcon\"\n                                [type]=\"button.type\"\n                                [group]=\"button.group\"\n                                [mini]=\"button.mini\"\n                                [iconBtn]=\"!button.label\"\n                                mclass=\"w-auto\"\n                                (mclick)=\"button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\"\n                                #btn />\n                            </div>\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- EDITABLE -->\n                  @case ('editable') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <a\n                          class=\"cell\"\n                          [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                          [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        <i\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- DEFAULT -->\n                  @default {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.stickyStart\" [stickyEnd]=\"col.stickyEnd||col.sticky\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td\n                        mat-cell\n                        *matCellDef=\"let row; let rowIndex = index\"\n                        [matTooltip]=\"\n                          col.hintFormatter\n                            ? (col.hintFormatter | functionCaller1: row | async)\n                            : null\n                        \">\n                        <ng-template #cellContent>\n                          @switch (true) {\n                            @case (!!col.routeFormatter) {\n                              @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                                <a\n                                  class=\"cell\"\n                                  [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                                  (click)=\"col.action ? col.action(row, col.f) : null\"\n                                  [queryParams]=\"cellRoute.queryParams\"\n                                  routerLink=\"{{ cellRoute.route }}\"\n                                  [innerHTML]=\"\n                                    row | getColFormatted: col | async | valueOrX: '-'\n                                  \"></a>\n                              }\n                            }\n                            @case (!!col.customTemplate) {\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  col.customTemplate;\n                                  context: { $implicit: { row, rowIndex } }\n                                \" />\n                            }\n                            @default {\n                              <span\n                                class=\"cell\"\n                                [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                                (click)=\"col.action ? col.action(row, col.f) : null\"\n                                [innerHTML]=\"\n                                  row | getColFormatted: col | async | valueOrX: '-'\n                                \"></span>\n                            }\n                          }\n                          @if (col.expandable) {\n                            <button\n                              matTooltip=\"Exapnd\"\n                              [matTooltipShowDelay]=\"1000\"\n                              mat-icon-button\n                              (click)=\"expandCell(row, col, expandModal)\"\n                              class=\"expandBtn\">\n                              <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                            </button>\n                          }\n                        </ng-template>\n\n                        @if (col._onHoverFunction) {\n                          <span\n                            class=\"\"\n                            [nelDebug]=\"debug()\"\n                            [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                            [nelDelay]=\"col._onHoverDelay\">\n                            <ng-container *ngTemplateOutlet=\"cellContent\" />\n                          </span>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"cellContent\" />\n                        }\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                }\n              }\n              <!--// -->\n              <!-- EXPANDABLE COLUMN-->\n              @if (isExpandable()) {\n                <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    <!-- {{expandedElement()|json}} -->\n                    <div class=\"d-flex justify-content-end\">\n                      <app-btn\n                        [iconBtn]=\"true\"\n                        type=\"clear\"\n                        [customIcon]=\"\n                          expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                        \"\n                        aria-label=\"expand row\"\n                        loggingValue=\"Expand Row Button {{ row | json }}\"\n                        (mclick)=\"\n                          expandedElement.set(expandedElement() === row ? null : row);\n                          clickedExpandRow.emit({ open: expandedElement() === row, row });\n                          $event?.stopPropagation()\n                        \" />\n                    </div>\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n              <!-- OPTIONS COLUMN -->\n              @if (hasRowOptions()) {\n                <ng-container matColumnDef=\"option\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef disableClear></th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    @if (rowOptionsMap()) {\n                      @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                        <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                          <i class=\"fa fa-ellipsis-v me-0\"></i>\n                        </button>\n                        <mat-menu #menu=\"matMenu\">\n                          @for (option of _rowoptions; track option.t) {\n                            <button\n                              mat-menu-item\n                              class=\"{{ option.itemClass }}\"\n                              (click)=\"option.action?.(row)\">\n                              @if (option.iconClass) {\n                                <i class=\"{{ option.iconClass }}\"></i>\n                              }\n                              {{ option.t | appTranslate | async }}\n                            </button>\n                          }\n                        </mat-menu>\n                      }\n                    } @else {\n                      <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                        <i class=\"fa fa-ellipsis-v me-0\"></i>\n                      </button>\n                      <mat-menu #menu=\"matMenu\">\n                        @for (option of rowOptions(); track option.t) {\n                          <button\n                            mat-menu-item\n                            class=\"{{ option.itemClass }}\"\n                            (click)=\"option.action?.(row)\">\n                            @if (option.iconClass) {\n                              <i class=\"{{ option.iconClass }}\"></i>\n                            }\n                            {{ option.t | appTranslate | async }}\n                          </button>\n                        }\n                      </mat-menu>\n                    }\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n\n              @if (rawColumns(); as dcols) {\n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (isExpandable()) {\n                  <ng-container matColumnDef=\"expandedDetail\">\n                    <td\n                      mat-cell\n                      *matCellDef=\"let row\"\n                      [attr.colspan]=\"dcols?.length || 1\"\n                      [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                      <div\n                        class=\"example-element-detail\"\n                        [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                        @if (row == expandedElement()) {\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              expandedRowTemplate();\n                              context: { $implicit: { row } }\n                            \"></ng-container>\n                        }\n                      </div>\n                    </td>\n                  </ng-container>\n                }\n                <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n                <tr\n                  mat-row\n                  *matRowDef=\"let row; columns: dcols\"\n                  [ngClass]=\"{\n                    pointer: showRowPointer(),\n                    disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n                  }\"\n                  [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n                  (click)=\"rowClick(row)\"></tr>\n                <tr class=\"mat-row\" *matNoDataRow>\n                  <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n                    {{ noItemTxt() | appTranslate | async }}\n                  </td>\n                </tr>\n                @if (isExpandable()) {\n                  <tr\n                    mat-row\n                    *matRowDef=\"let row; columns: ['expandedDetail']\"\n                    class=\"expanded-detail-row\"\n                    [style.height.px]=\"0\"></tr>\n                }\n              }\n            </table>\n          </div>\n          <mat-paginator\n            [length]=\"resultsLength()\"\n            [pageSizeOptions]=\"computedPageSizeOptions()\"\n            [pageSize]=\"pageSize()\"\n            showFirstLastButtons />\n        </div>\n      </loader>\n    </div>\n  </div>\n  @if (!allowSearch()) {\n    <div class=\"not-allowed-search\">{{ searchPromptText() | appTranslateNL | async }}</div>\n  }\n</div>\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.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: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: TableHttpsComponent, isStandalone: true, selector: "table-https", inputs: { observableFunc: { classPropertyName: "observableFunc", publicName: "observableFunc", isSignal: true, isRequired: false, transformFunction: null }, pageNumber: { classPropertyName: "pageNumber", publicName: "pageNumber", isSignal: false, isRequired: false, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryData: "queryDataChange", dataFetched: "dataFetched" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-https\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  <!-- {{queryData()|json}} -->\n  <div class=\"\" [hidden]=\"!allowSearch()\">\n    <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n      <div class=\"ps-0\">\n        @if (startSectionTemplate()) {\n          <div class=\"{{ starterSectionClass() }}\">\n            <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n          </div>\n        }\n      </div>\n      <div class=\"pe-0\">\n        <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n          <div class=\"col-auto\">\n            @if (showExport()) {\n              <app-export-table\n                [disabled]=\"!resultsLength()\"\n                [label]=\"label()\"\n                [debug]=\"debug()\"\n                [searchQuery]=\"allQueryData() | toAny\"\n                [searchFunc]=\"observableFunc()\"\n                [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n            }\n          </div>\n          @if (showAdditionalColumns()) {\n            <div class=\"col-auto\">\n              <fields-to-display\n                [fields]=\"allTableColumns()\"\n                [currentColumns]=\"computedDisplayedColumns()\"\n                (fieldsChanged)=\"fieldsChanged($event)\" />\n            </div>\n          }\n          @if (showRefreshBtn()) {\n            <div class=\"col-auto\">\n              <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n      [ngClass]=\"{ border: distinct() }\">\n      <loader\n        [loading]=\"isLoadingResults()\"\n        [useStaticLoader]=\"useStaticLoader()\"\n        [height]=\"container?.scrollHeight + 400\">\n        <div #container>\n          <div class=\"table-responsive\">\n            <table\n              mat-table\n              [dataSource]=\"filteredAndPagedResults()\"\n              class=\"w-100 d-table table\"\n              [multiTemplateDataRows]=\"isExpandable()\"\n              [ngClass]=\"{\n                smallerFonts: smallerFonts(),\n                nowrap: nowrap(),\n                centerCells: centerCells(),\n                curvy: curvy(),\n                'table-striped': striped(),\n              }\"\n              matSort\n              matSortActive=\"{{ orderField() | toAny }}\"\n              matSortDisableClear\n              [matSortDirection]=\"orderDirection()\"\n              #table\n              (matSortChange)=\"resetPaging()\">\n              <!-- Checkbox Column -->\n              <ng-container\n                matColumnDef=\"mselect\"\n                [sticky]=\"!placeSelectionAtRight()\"\n                [stickyEnd]=\"placeSelectionAtRight()\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <mat-checkbox\n                    (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                    [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <mat-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(row) : null\"\n                    [checked]=\"selection.isSelected(row)\"\n                    [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n                </td>\n              </ng-container>\n              <!-- COLUMNS -->\n              @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n                @switch (col.type) {\n                  <!-- CHECKBOX -->\n                  @case ('checkbox') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                        <!-- Removing the empty space above checkboxes -->\n                        <app-input-ngmodel\n                          [showLabel]=\"false\"\n                          [stacked]=\"true\"\n                          type=\"checkbox\"\n                          [disabled]=\"col.disabled\"\n                          [checked]=\"col.checked\"\n                          [(model)]=\"row[col.f]\"\n                          (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- Sub Table -->\n                  @case ('table') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <app-btn\n                          [icon]=\"col.icon\"\n                          type=\"dark\"\n                          (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                          [help]=\"col.subTable | tableToString: row | async\"\n                          [showHelpIcon]=\"false\"\n                          [iconBtn]=\"true\"\n                          mclass=\"w-auto\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- COLOR -->\n                  @case ('color') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef>\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- Button -->\n                  @case ('button') {\n                    <ng-container [sticky]=\"col.stickyStart\" [stickyEnd]=\"col.stickyEnd||col.sticky\" matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                        <app-btn\n                          [icon]=\"col.icon || col.btn?.icon\"\n                          [type]=\"col.btn?.type\"\n                          (mclick)=\"\n                            col.action\n                              ? col.action(row, col.f, getActionStatusCallback(col), index)\n                              : null\n                          \"\n                          [help]=\"col.btn?.help\"\n                          [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                          [text]=\"col.btn?.label\"\n                          [mini]=\"col.btn?.mini\"\n                          [loading]=\"col.btn?.loading\"\n                          [iconBtn]=\"col.btn?.iconBtn\"\n                          mclass=\"w-auto\"\n                          [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- ACTION/BTNS COLUMNS -->\n                  @case ('btns') {\n                    <ng-container\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [stickyEnd]=\"true\"\n                      [sticky]=\"true\">\n                      <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                        <div class=\"d-flex col-md-auto col-sm-auto\">\n                          @for (button of col.buttons; track button.icon + button.label) {\n                            <div class=\"mx-2\">\n                              <app-btn\n                                [icon]=\"button.icon\"\n                                [text]=\"button.label\"\n                                [help]=\"button.help\"\n                                [showHelpIcon]=\"button.showHelpIcon\"\n                                [type]=\"button.type\"\n                                [group]=\"button.group\"\n                                [mini]=\"button.mini\"\n                                [iconBtn]=\"!button.label\"\n                                mclass=\"w-auto\"\n                                (mclick)=\"button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\"\n                                #btn />\n                            </div>\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- EDITABLE -->\n                  @case ('editable') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <a\n                          class=\"cell\"\n                          [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                          [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        <i\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- DEFAULT -->\n                  @default {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.stickyStart\" [stickyEnd]=\"col.stickyEnd||col.sticky\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td\n                        mat-cell\n                        *matCellDef=\"let row; let rowIndex = index\"\n                        [matTooltip]=\"\n                          col.hintFormatter\n                            ? (col.hintFormatter | functionCaller1: row | async)\n                            : null\n                        \">\n                        <ng-template #cellContent>\n                          @switch (true) {\n                            @case (!!col.routeFormatter) {\n                              @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                                <a\n                                  class=\"cell\"\n                                  [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                                  (click)=\"col.action ? col.action(row, col.f) : null\"\n                                  [queryParams]=\"cellRoute.queryParams\"\n                                  routerLink=\"{{ cellRoute.route }}\"\n                                  [innerHTML]=\"\n                                    row | getColFormatted: col | async | valueOrX: '-'\n                                  \"></a>\n                              }\n                            }\n                            @case (!!col.customTemplate) {\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  col.customTemplate;\n                                  context: { $implicit: { row, rowIndex } }\n                                \" />\n                            }\n                            @default {\n                              <span\n                                class=\"cell\"\n                                [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                                (click)=\"col.action ? col.action(row, col.f) : null\"\n                                [innerHTML]=\"\n                                  row | getColFormatted: col | async | valueOrX: '-'\n                                \"></span>\n                            }\n                          }\n                          @if (col.expandable) {\n                            <button\n                              matTooltip=\"Exapnd\"\n                              [matTooltipShowDelay]=\"1000\"\n                              mat-icon-button\n                              (click)=\"expandCell(row, col, expandModal)\"\n                              class=\"expandBtn\">\n                              <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                            </button>\n                          }\n                        </ng-template>\n\n                        @if (col._onHoverFunction) {\n                          <span\n                            class=\"\"\n                            [nelDebug]=\"debug()\"\n                            [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                            [nelDelay]=\"col._onHoverDelay\">\n                            <ng-container *ngTemplateOutlet=\"cellContent\" />\n                          </span>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"cellContent\" />\n                        }\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                }\n              }\n              <!--// -->\n              <!-- EXPANDABLE COLUMN-->\n              @if (isExpandable()) {\n                <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    <!-- {{expandedElement()|json}} -->\n                    <div class=\"d-flex justify-content-end\">\n                      <app-btn\n                        [iconBtn]=\"true\"\n                        type=\"clear\"\n                        [customIcon]=\"\n                          expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                        \"\n                        aria-label=\"expand row\"\n                        loggingValue=\"Expand Row Button {{ row | json }}\"\n                        (mclick)=\"\n                          expandedElement.set(expandedElement() === row ? null : row);\n                          clickedExpandRow.emit({ open: expandedElement() === row, row });\n                          $event?.stopPropagation()\n                        \" />\n                    </div>\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n              <!-- OPTIONS COLUMN -->\n              @if (hasRowOptions()) {\n                <ng-container matColumnDef=\"option\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef disableClear></th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    @if (rowOptionsMap()) {\n                      @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                        <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                          <i class=\"fa fa-ellipsis-v me-0\"></i>\n                        </button>\n                        <mat-menu #menu=\"matMenu\">\n                          @for (option of _rowoptions; track option.t) {\n                            <button\n                              mat-menu-item\n                              class=\"{{ option.itemClass }}\"\n                              (click)=\"option.action?.(row)\">\n                              @if (option.iconClass) {\n                                <i class=\"{{ option.iconClass }}\"></i>\n                              }\n                              {{ option.t | appTranslate | async }}\n                            </button>\n                          }\n                        </mat-menu>\n                      }\n                    } @else {\n                      <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                        <i class=\"fa fa-ellipsis-v me-0\"></i>\n                      </button>\n                      <mat-menu #menu=\"matMenu\">\n                        @for (option of rowOptions(); track option.t) {\n                          <button\n                            mat-menu-item\n                            class=\"{{ option.itemClass }}\"\n                            (click)=\"option.action?.(row)\">\n                            @if (option.iconClass) {\n                              <i class=\"{{ option.iconClass }}\"></i>\n                            }\n                            {{ option.t | appTranslate | async }}\n                          </button>\n                        }\n                      </mat-menu>\n                    }\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n\n              @if (rawColumns(); as dcols) {\n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (isExpandable()) {\n                  <ng-container matColumnDef=\"expandedDetail\">\n                    <td\n                      mat-cell\n                      *matCellDef=\"let row\"\n                      [attr.colspan]=\"dcols?.length || 1\"\n                      [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                      <div\n                        class=\"example-element-detail\"\n                        [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                        @if (row == expandedElement()) {\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              expandedRowTemplate();\n                              context: { $implicit: { row } }\n                            \"></ng-container>\n                        }\n                      </div>\n                    </td>\n                  </ng-container>\n                }\n                <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n                <tr\n                  mat-row\n                  *matRowDef=\"let row; columns: dcols\"\n                  [ngClass]=\"{\n                    pointer: enableRowClick(),\n                    disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n                  }\"\n                  [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n                  (click)=\"rowClick(row)\"></tr>\n                <tr class=\"mat-row\" *matNoDataRow>\n                  <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n                    {{ noItemTxt() | appTranslate | async }}\n                  </td>\n                </tr>\n                @if (isExpandable()) {\n                  <tr\n                    mat-row\n                    *matRowDef=\"let row; columns: ['expandedDetail']\"\n                    class=\"expanded-detail-row\"\n                    [style.height.px]=\"0\"></tr>\n                }\n              }\n            </table>\n          </div>\n          <mat-paginator\n            [length]=\"resultsLength()\"\n            [pageSizeOptions]=\"computedPageSizeOptions()\"\n            [pageSize]=\"pageSize()\"\n            showFirstLastButtons />\n        </div>\n      </loader>\n    </div>\n  </div>\n  @if (!allowSearch()) {\n    <div class=\"not-allowed-search\">{{ searchPromptText() | appTranslateNL | async }}</div>\n  }\n</div>\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.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: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -20692,7 +20696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         FunctionCaller,
                         FunctionCaller1,
                         SDKTranslateNoLoaderPipe
-                    ], template: "<div class=\"table-https\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  <!-- {{queryData()|json}} -->\n  <div class=\"\" [hidden]=\"!allowSearch()\">\n    <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n      <div class=\"ps-0\">\n        @if (startSectionTemplate()) {\n          <div class=\"{{ starterSectionClass() }}\">\n            <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n          </div>\n        }\n      </div>\n      <div class=\"pe-0\">\n        <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n          <div class=\"col-auto\">\n            @if (showExport()) {\n              <app-export-table\n                [disabled]=\"!resultsLength()\"\n                [label]=\"label()\"\n                [debug]=\"debug()\"\n                [searchQuery]=\"allQueryData() | toAny\"\n                [searchFunc]=\"observableFunc()\"\n                [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n            }\n          </div>\n          @if (showAdditionalColumns()) {\n            <div class=\"col-auto\">\n              <fields-to-display\n                [fields]=\"allTableColumns()\"\n                [currentColumns]=\"computedDisplayedColumns()\"\n                (fieldsChanged)=\"fieldsChanged($event)\" />\n            </div>\n          }\n          @if (showRefreshBtn()) {\n            <div class=\"col-auto\">\n              <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n      [ngClass]=\"{ border: distinct() }\">\n      <loader\n        [loading]=\"isLoadingResults()\"\n        [useStaticLoader]=\"useStaticLoader()\"\n        [height]=\"container?.scrollHeight + 400\">\n        <div #container>\n          <div class=\"table-responsive\">\n            <table\n              mat-table\n              [dataSource]=\"filteredAndPagedResults()\"\n              class=\"w-100 d-table table\"\n              [multiTemplateDataRows]=\"isExpandable()\"\n              [ngClass]=\"{\n                smallerFonts: smallerFonts(),\n                nowrap: nowrap(),\n                centerCells: centerCells(),\n                curvy: curvy(),\n                'table-striped': striped(),\n              }\"\n              matSort\n              matSortActive=\"{{ orderField() | toAny }}\"\n              matSortDisableClear\n              [matSortDirection]=\"orderDirection()\"\n              #table\n              (matSortChange)=\"resetPaging()\">\n              <!-- Checkbox Column -->\n              <ng-container\n                matColumnDef=\"mselect\"\n                [sticky]=\"!placeSelectionAtRight()\"\n                [stickyEnd]=\"placeSelectionAtRight()\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <mat-checkbox\n                    (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                    [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <mat-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(row) : null\"\n                    [checked]=\"selection.isSelected(row)\"\n                    [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n                </td>\n              </ng-container>\n              <!-- COLUMNS -->\n              @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n                @switch (col.type) {\n                  <!-- CHECKBOX -->\n                  @case ('checkbox') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                        <!-- Removing the empty space above checkboxes -->\n                        <app-input-ngmodel\n                          [showLabel]=\"false\"\n                          [stacked]=\"true\"\n                          type=\"checkbox\"\n                          [disabled]=\"col.disabled\"\n                          [checked]=\"col.checked\"\n                          [(model)]=\"row[col.f]\"\n                          (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- Sub Table -->\n                  @case ('table') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <app-btn\n                          [icon]=\"col.icon\"\n                          type=\"dark\"\n                          (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                          [help]=\"col.subTable | tableToString: row | async\"\n                          [showHelpIcon]=\"false\"\n                          [iconBtn]=\"true\"\n                          mclass=\"w-auto\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- COLOR -->\n                  @case ('color') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef>\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- Button -->\n                  @case ('button') {\n                    <ng-container [sticky]=\"col.stickyStart\" [stickyEnd]=\"col.stickyEnd||col.sticky\" matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                        <app-btn\n                          [icon]=\"col.icon || col.btn?.icon\"\n                          [type]=\"col.btn?.type\"\n                          (mclick)=\"\n                            col.action\n                              ? col.action(row, col.f, getActionStatusCallback(col), index)\n                              : null\n                          \"\n                          [help]=\"col.btn?.help\"\n                          [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                          [text]=\"col.btn?.label\"\n                          [mini]=\"col.btn?.mini\"\n                          [loading]=\"col.btn?.loading\"\n                          [iconBtn]=\"col.btn?.iconBtn\"\n                          mclass=\"w-auto\"\n                          [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- ACTION/BTNS COLUMNS -->\n                  @case ('btns') {\n                    <ng-container\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [stickyEnd]=\"true\"\n                      [sticky]=\"true\">\n                      <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                        <div class=\"d-flex col-md-auto col-sm-auto\">\n                          @for (button of col.buttons; track button.icon + button.label) {\n                            <div class=\"mx-2\">\n                              <app-btn\n                                [icon]=\"button.icon\"\n                                [text]=\"button.label\"\n                                [help]=\"button.help\"\n                                [showHelpIcon]=\"button.showHelpIcon\"\n                                [type]=\"button.type\"\n                                [group]=\"button.group\"\n                                [mini]=\"button.mini\"\n                                [iconBtn]=\"!button.label\"\n                                mclass=\"w-auto\"\n                                (mclick)=\"button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\"\n                                #btn />\n                            </div>\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- EDITABLE -->\n                  @case ('editable') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <a\n                          class=\"cell\"\n                          [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                          [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        <i\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- DEFAULT -->\n                  @default {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.stickyStart\" [stickyEnd]=\"col.stickyEnd||col.sticky\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td\n                        mat-cell\n                        *matCellDef=\"let row; let rowIndex = index\"\n                        [matTooltip]=\"\n                          col.hintFormatter\n                            ? (col.hintFormatter | functionCaller1: row | async)\n                            : null\n                        \">\n                        <ng-template #cellContent>\n                          @switch (true) {\n                            @case (!!col.routeFormatter) {\n                              @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                                <a\n                                  class=\"cell\"\n                                  [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                                  (click)=\"col.action ? col.action(row, col.f) : null\"\n                                  [queryParams]=\"cellRoute.queryParams\"\n                                  routerLink=\"{{ cellRoute.route }}\"\n                                  [innerHTML]=\"\n                                    row | getColFormatted: col | async | valueOrX: '-'\n                                  \"></a>\n                              }\n                            }\n                            @case (!!col.customTemplate) {\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  col.customTemplate;\n                                  context: { $implicit: { row, rowIndex } }\n                                \" />\n                            }\n                            @default {\n                              <span\n                                class=\"cell\"\n                                [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                                (click)=\"col.action ? col.action(row, col.f) : null\"\n                                [innerHTML]=\"\n                                  row | getColFormatted: col | async | valueOrX: '-'\n                                \"></span>\n                            }\n                          }\n                          @if (col.expandable) {\n                            <button\n                              matTooltip=\"Exapnd\"\n                              [matTooltipShowDelay]=\"1000\"\n                              mat-icon-button\n                              (click)=\"expandCell(row, col, expandModal)\"\n                              class=\"expandBtn\">\n                              <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                            </button>\n                          }\n                        </ng-template>\n\n                        @if (col._onHoverFunction) {\n                          <span\n                            class=\"\"\n                            [nelDebug]=\"debug()\"\n                            [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                            [nelDelay]=\"col._onHoverDelay\">\n                            <ng-container *ngTemplateOutlet=\"cellContent\" />\n                          </span>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"cellContent\" />\n                        }\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                }\n              }\n              <!--// -->\n              <!-- EXPANDABLE COLUMN-->\n              @if (isExpandable()) {\n                <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    <!-- {{expandedElement()|json}} -->\n                    <div class=\"d-flex justify-content-end\">\n                      <app-btn\n                        [iconBtn]=\"true\"\n                        type=\"clear\"\n                        [customIcon]=\"\n                          expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                        \"\n                        aria-label=\"expand row\"\n                        loggingValue=\"Expand Row Button {{ row | json }}\"\n                        (mclick)=\"\n                          expandedElement.set(expandedElement() === row ? null : row);\n                          clickedExpandRow.emit({ open: expandedElement() === row, row });\n                          $event?.stopPropagation()\n                        \" />\n                    </div>\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n              <!-- OPTIONS COLUMN -->\n              @if (hasRowOptions()) {\n                <ng-container matColumnDef=\"option\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef disableClear></th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    @if (rowOptionsMap()) {\n                      @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                        <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                          <i class=\"fa fa-ellipsis-v me-0\"></i>\n                        </button>\n                        <mat-menu #menu=\"matMenu\">\n                          @for (option of _rowoptions; track option.t) {\n                            <button\n                              mat-menu-item\n                              class=\"{{ option.itemClass }}\"\n                              (click)=\"option.action?.(row)\">\n                              @if (option.iconClass) {\n                                <i class=\"{{ option.iconClass }}\"></i>\n                              }\n                              {{ option.t | appTranslate | async }}\n                            </button>\n                          }\n                        </mat-menu>\n                      }\n                    } @else {\n                      <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                        <i class=\"fa fa-ellipsis-v me-0\"></i>\n                      </button>\n                      <mat-menu #menu=\"matMenu\">\n                        @for (option of rowOptions(); track option.t) {\n                          <button\n                            mat-menu-item\n                            class=\"{{ option.itemClass }}\"\n                            (click)=\"option.action?.(row)\">\n                            @if (option.iconClass) {\n                              <i class=\"{{ option.iconClass }}\"></i>\n                            }\n                            {{ option.t | appTranslate | async }}\n                          </button>\n                        }\n                      </mat-menu>\n                    }\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n\n              @if (rawColumns(); as dcols) {\n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (isExpandable()) {\n                  <ng-container matColumnDef=\"expandedDetail\">\n                    <td\n                      mat-cell\n                      *matCellDef=\"let row\"\n                      [attr.colspan]=\"dcols?.length || 1\"\n                      [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                      <div\n                        class=\"example-element-detail\"\n                        [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                        @if (row == expandedElement()) {\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              expandedRowTemplate();\n                              context: { $implicit: { row } }\n                            \"></ng-container>\n                        }\n                      </div>\n                    </td>\n                  </ng-container>\n                }\n                <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n                <tr\n                  mat-row\n                  *matRowDef=\"let row; columns: dcols\"\n                  [ngClass]=\"{\n                    pointer: showRowPointer(),\n                    disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n                  }\"\n                  [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n                  (click)=\"rowClick(row)\"></tr>\n                <tr class=\"mat-row\" *matNoDataRow>\n                  <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n                    {{ noItemTxt() | appTranslate | async }}\n                  </td>\n                </tr>\n                @if (isExpandable()) {\n                  <tr\n                    mat-row\n                    *matRowDef=\"let row; columns: ['expandedDetail']\"\n                    class=\"expanded-detail-row\"\n                    [style.height.px]=\"0\"></tr>\n                }\n              }\n            </table>\n          </div>\n          <mat-paginator\n            [length]=\"resultsLength()\"\n            [pageSizeOptions]=\"computedPageSizeOptions()\"\n            [pageSize]=\"pageSize()\"\n            showFirstLastButtons />\n        </div>\n      </loader>\n    </div>\n  </div>\n  @if (!allowSearch()) {\n    <div class=\"not-allowed-search\">{{ searchPromptText() | appTranslateNL | async }}</div>\n  }\n</div>\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"] }]
+                    ], template: "<div class=\"table-https\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  <!-- {{queryData()|json}} -->\n  <div class=\"\" [hidden]=\"!allowSearch()\">\n    <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n      <div class=\"ps-0\">\n        @if (startSectionTemplate()) {\n          <div class=\"{{ starterSectionClass() }}\">\n            <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n          </div>\n        }\n      </div>\n      <div class=\"pe-0\">\n        <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n          <div class=\"col-auto\">\n            @if (showExport()) {\n              <app-export-table\n                [disabled]=\"!resultsLength()\"\n                [label]=\"label()\"\n                [debug]=\"debug()\"\n                [searchQuery]=\"allQueryData() | toAny\"\n                [searchFunc]=\"observableFunc()\"\n                [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n            }\n          </div>\n          @if (showAdditionalColumns()) {\n            <div class=\"col-auto\">\n              <fields-to-display\n                [fields]=\"allTableColumns()\"\n                [currentColumns]=\"computedDisplayedColumns()\"\n                (fieldsChanged)=\"fieldsChanged($event)\" />\n            </div>\n          }\n          @if (showRefreshBtn()) {\n            <div class=\"col-auto\">\n              <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n      [ngClass]=\"{ border: distinct() }\">\n      <loader\n        [loading]=\"isLoadingResults()\"\n        [useStaticLoader]=\"useStaticLoader()\"\n        [height]=\"container?.scrollHeight + 400\">\n        <div #container>\n          <div class=\"table-responsive\">\n            <table\n              mat-table\n              [dataSource]=\"filteredAndPagedResults()\"\n              class=\"w-100 d-table table\"\n              [multiTemplateDataRows]=\"isExpandable()\"\n              [ngClass]=\"{\n                smallerFonts: smallerFonts(),\n                nowrap: nowrap(),\n                centerCells: centerCells(),\n                curvy: curvy(),\n                'table-striped': striped(),\n              }\"\n              matSort\n              matSortActive=\"{{ orderField() | toAny }}\"\n              matSortDisableClear\n              [matSortDirection]=\"orderDirection()\"\n              #table\n              (matSortChange)=\"resetPaging()\">\n              <!-- Checkbox Column -->\n              <ng-container\n                matColumnDef=\"mselect\"\n                [sticky]=\"!placeSelectionAtRight()\"\n                [stickyEnd]=\"placeSelectionAtRight()\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <mat-checkbox\n                    (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                    [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <mat-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(row) : null\"\n                    [checked]=\"selection.isSelected(row)\"\n                    [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n                </td>\n              </ng-container>\n              <!-- COLUMNS -->\n              @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n                @switch (col.type) {\n                  <!-- CHECKBOX -->\n                  @case ('checkbox') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                        <!-- Removing the empty space above checkboxes -->\n                        <app-input-ngmodel\n                          [showLabel]=\"false\"\n                          [stacked]=\"true\"\n                          type=\"checkbox\"\n                          [disabled]=\"col.disabled\"\n                          [checked]=\"col.checked\"\n                          [(model)]=\"row[col.f]\"\n                          (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- Sub Table -->\n                  @case ('table') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <app-btn\n                          [icon]=\"col.icon\"\n                          type=\"dark\"\n                          (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                          [help]=\"col.subTable | tableToString: row | async\"\n                          [showHelpIcon]=\"false\"\n                          [iconBtn]=\"true\"\n                          mclass=\"w-auto\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- COLOR -->\n                  @case ('color') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef>\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- Button -->\n                  @case ('button') {\n                    <ng-container [sticky]=\"col.stickyStart\" [stickyEnd]=\"col.stickyEnd||col.sticky\" matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                        <app-btn\n                          [icon]=\"col.icon || col.btn?.icon\"\n                          [type]=\"col.btn?.type\"\n                          (mclick)=\"\n                            col.action\n                              ? col.action(row, col.f, getActionStatusCallback(col), index)\n                              : null\n                          \"\n                          [help]=\"col.btn?.help\"\n                          [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                          [text]=\"col.btn?.label\"\n                          [mini]=\"col.btn?.mini\"\n                          [loading]=\"col.btn?.loading\"\n                          [iconBtn]=\"col.btn?.iconBtn\"\n                          mclass=\"w-auto\"\n                          [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- ACTION/BTNS COLUMNS -->\n                  @case ('btns') {\n                    <ng-container\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [stickyEnd]=\"true\"\n                      [sticky]=\"true\">\n                      <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                        <app-info-icon [text]=\"col.hint\">\n                          {{ col.t | appTranslate | async }}\n                        </app-info-icon>\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                        <div class=\"d-flex col-md-auto col-sm-auto\">\n                          @for (button of col.buttons; track button.icon + button.label) {\n                            <div class=\"mx-2\">\n                              <app-btn\n                                [icon]=\"button.icon\"\n                                [text]=\"button.label\"\n                                [help]=\"button.help\"\n                                [showHelpIcon]=\"button.showHelpIcon\"\n                                [type]=\"button.type\"\n                                [group]=\"button.group\"\n                                [mini]=\"button.mini\"\n                                [iconBtn]=\"!button.label\"\n                                mclass=\"w-auto\"\n                                (mclick)=\"button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\"\n                                #btn />\n                            </div>\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- EDITABLE -->\n                  @case ('editable') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <a\n                          class=\"cell\"\n                          [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                          [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        <i\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- DEFAULT -->\n                  @default {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.stickyStart\" [stickyEnd]=\"col.stickyEnd||col.sticky\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td\n                        mat-cell\n                        *matCellDef=\"let row; let rowIndex = index\"\n                        [matTooltip]=\"\n                          col.hintFormatter\n                            ? (col.hintFormatter | functionCaller1: row | async)\n                            : null\n                        \">\n                        <ng-template #cellContent>\n                          @switch (true) {\n                            @case (!!col.routeFormatter) {\n                              @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                                <a\n                                  class=\"cell\"\n                                  [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                                  (click)=\"col.action ? col.action(row, col.f) : null\"\n                                  [queryParams]=\"cellRoute.queryParams\"\n                                  routerLink=\"{{ cellRoute.route }}\"\n                                  [innerHTML]=\"\n                                    row | getColFormatted: col | async | valueOrX: '-'\n                                  \"></a>\n                              }\n                            }\n                            @case (!!col.customTemplate) {\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  col.customTemplate;\n                                  context: { $implicit: { row, rowIndex } }\n                                \" />\n                            }\n                            @default {\n                              <span\n                                class=\"cell\"\n                                [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                                (click)=\"col.action ? col.action(row, col.f) : null\"\n                                [innerHTML]=\"\n                                  row | getColFormatted: col | async | valueOrX: '-'\n                                \"></span>\n                            }\n                          }\n                          @if (col.expandable) {\n                            <button\n                              matTooltip=\"Exapnd\"\n                              [matTooltipShowDelay]=\"1000\"\n                              mat-icon-button\n                              (click)=\"expandCell(row, col, expandModal)\"\n                              class=\"expandBtn\">\n                              <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                            </button>\n                          }\n                        </ng-template>\n\n                        @if (col._onHoverFunction) {\n                          <span\n                            class=\"\"\n                            [nelDebug]=\"debug()\"\n                            [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                            [nelDelay]=\"col._onHoverDelay\">\n                            <ng-container *ngTemplateOutlet=\"cellContent\" />\n                          </span>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"cellContent\" />\n                        }\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                }\n              }\n              <!--// -->\n              <!-- EXPANDABLE COLUMN-->\n              @if (isExpandable()) {\n                <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    <!-- {{expandedElement()|json}} -->\n                    <div class=\"d-flex justify-content-end\">\n                      <app-btn\n                        [iconBtn]=\"true\"\n                        type=\"clear\"\n                        [customIcon]=\"\n                          expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                        \"\n                        aria-label=\"expand row\"\n                        loggingValue=\"Expand Row Button {{ row | json }}\"\n                        (mclick)=\"\n                          expandedElement.set(expandedElement() === row ? null : row);\n                          clickedExpandRow.emit({ open: expandedElement() === row, row });\n                          $event?.stopPropagation()\n                        \" />\n                    </div>\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n              <!-- OPTIONS COLUMN -->\n              @if (hasRowOptions()) {\n                <ng-container matColumnDef=\"option\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef disableClear></th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    @if (rowOptionsMap()) {\n                      @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                        <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                          <i class=\"fa fa-ellipsis-v me-0\"></i>\n                        </button>\n                        <mat-menu #menu=\"matMenu\">\n                          @for (option of _rowoptions; track option.t) {\n                            <button\n                              mat-menu-item\n                              class=\"{{ option.itemClass }}\"\n                              (click)=\"option.action?.(row)\">\n                              @if (option.iconClass) {\n                                <i class=\"{{ option.iconClass }}\"></i>\n                              }\n                              {{ option.t | appTranslate | async }}\n                            </button>\n                          }\n                        </mat-menu>\n                      }\n                    } @else {\n                      <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                        <i class=\"fa fa-ellipsis-v me-0\"></i>\n                      </button>\n                      <mat-menu #menu=\"matMenu\">\n                        @for (option of rowOptions(); track option.t) {\n                          <button\n                            mat-menu-item\n                            class=\"{{ option.itemClass }}\"\n                            (click)=\"option.action?.(row)\">\n                            @if (option.iconClass) {\n                              <i class=\"{{ option.iconClass }}\"></i>\n                            }\n                            {{ option.t | appTranslate | async }}\n                          </button>\n                        }\n                      </mat-menu>\n                    }\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n\n              @if (rawColumns(); as dcols) {\n                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n                @if (isExpandable()) {\n                  <ng-container matColumnDef=\"expandedDetail\">\n                    <td\n                      mat-cell\n                      *matCellDef=\"let row\"\n                      [attr.colspan]=\"dcols?.length || 1\"\n                      [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                      <div\n                        class=\"example-element-detail\"\n                        [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                        @if (row == expandedElement()) {\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              expandedRowTemplate();\n                              context: { $implicit: { row } }\n                            \"></ng-container>\n                        }\n                      </div>\n                    </td>\n                  </ng-container>\n                }\n                <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n                <tr\n                  mat-row\n                  *matRowDef=\"let row; columns: dcols\"\n                  [ngClass]=\"{\n                    pointer: enableRowClick(),\n                    disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n                  }\"\n                  [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n                  (click)=\"rowClick(row)\"></tr>\n                <tr class=\"mat-row\" *matNoDataRow>\n                  <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n                    {{ noItemTxt() | appTranslate | async }}\n                  </td>\n                </tr>\n                @if (isExpandable()) {\n                  <tr\n                    mat-row\n                    *matRowDef=\"let row; columns: ['expandedDetail']\"\n                    class=\"expanded-detail-row\"\n                    [style.height.px]=\"0\"></tr>\n                }\n              }\n            </table>\n          </div>\n          <mat-paginator\n            [length]=\"resultsLength()\"\n            [pageSizeOptions]=\"computedPageSizeOptions()\"\n            [pageSize]=\"pageSize()\"\n            showFirstLastButtons />\n        </div>\n      </loader>\n    </div>\n  </div>\n  @if (!allowSearch()) {\n    <div class=\"not-allowed-search\">{{ searchPromptText() | appTranslateNL | async }}</div>\n  }\n</div>\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"] }]
         }], propDecorators: { pageNumber: [{
                 type: Input
             }] } });
@@ -21422,7 +21426,7 @@ class TablePlainComponent extends TableBaseComponent {
         this.filterChange.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TablePlainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, filterExactMatch: { classPropertyName: "filterExactMatch", publicName: "filterExactMatch", isSignal: true, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\n        <!-- Checkbox Column -->\n        <ng-container\n          matColumnDef=\"mselect\"\n          [sticky]=\"!placeSelectionAtRight()\"\n          [stickyEnd]=\"placeSelectionAtRight()\">\n          <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-ngmodel\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"checkbox\"\n                    [disabled]=\"col.disabled\"\n                    [checked]=\"col.checked\"\n                    [(model)]=\"row[col.f]\"\n                    (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\n                      col.action\n                        ? col.action(row, col.f, getActionStatusCallback(col), index)\n                        : null\n                    \"\n                    [help]=\"col.btn?.help\"\n                    [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                    [text]=\"col.btn?.label\"\n                    [loading]=\"col.btn?.loading\"\n                    [iconBtn]=\"col.btn?.iconBtn\"\n                    mclass=\"w-auto\"\n                    [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.icon + button.label) {\n                      <div class=\"mx-2\">\n                        <app-btn\n                          [icon]=\"button.icon\"\n                          [text]=\"button.label\"\n                          [help]=\"button.help\"\n                          [showHelpIcon]=\"button.showHelpIcon\"\n                          [type]=\"button.type\"\n                          [group]=\"button.group\"\n                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(\n                              row,\n                              i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n                              btn\n                            )\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\n                    (click)=\"col.action ? col.action(row, col.f) : null\"\n                    class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                </td>\n              </ng-container>\n            }\n\n            <!-- DEFAULT -->\n            @default {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\n                  <ng-template #cellContent>\n                    @switch (true) {\n                      @case (!!col.routeFormatter) {\n                        @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                          <a\n                            class=\"cell\"\n                            [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                            (click)=\"col.action ? col.action(row, col.f) : null\"\n                            [queryParams]=\"cellRoute.queryParams\"\n                            routerLink=\"{{ cellRoute.route }}\"\n                            [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        }\n                      }\n                      @case (!!col.customTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            col.customTemplate;\n                            context: { $implicit: { row, rowIndex } }\n                          \" />\n                      }\n                      @default {\n                        <span\n                          class=\"cell\"\n                          [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n                      }\n                    }\n                    @if (col.expandable) {\n                      <button\n                        matTooltip=\"Exapnd\"\n                        [matTooltipShowDelay]=\"1000\"\n                        mat-icon-button\n                        (click)=\"expandCell(row, col, expandModal)\"\n                        class=\"expandBtn\">\n                        <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                      </button>\n                    }\n                  </ng-template>\n\n                  @if (col._onHoverFunction) {\n                    <span\n                      class=\"\"\n                      [nelDebug]=\"debug()\"\n                      [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                      [nelDelay]=\"col._onHoverDelay\">\n                      <ng-container *ngTemplateOutlet=\"cellContent\" />\n                    </span>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent\" />\n                  }\n                </td>\n              </ng-container>\n            }\n\n            <!--// -->\n          }\n        }\n        <!-- EXPANDABLE COLUMN-->\n        @if (isExpandable()) {\n          <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"d-flex justify-content-end\">\n                <app-btn\n                  [iconBtn]=\"true\"\n                  type=\"clear\"\n                  [customIcon]=\"\n                    expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                  \"\n                  aria-label=\"expand row\"\n                  (mclick)=\"\n                    expandedElement.set(expandedElement() === row ? null : row);\n                    clickedExpandRow.emit({ open: expandedElement() === row, row });\n                    $event.stopPropagation()\n                  \" />\n              </div>\n            </td>\n          </ng-container>\n        }\n        <!--// -->\n        <!-- Options Column -->\n        @if (hasRowOptions()) {\n          <ng-container matColumnDef=\"option\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef disableClear></th>\n            <td mat-cell *matCellDef=\"let row\">\n              @if (rowOptionsMap()) {\n                @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                  <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                    <i class=\"fa fa-ellipsis-v me-0\"></i>\n                  </button>\n                  <mat-menu #menu=\"matMenu\">\n                    @for (option of _rowoptions; track option.t) {\n                      <button\n                        mat-menu-item\n                        class=\"{{ option.itemClass }}\"\n                        (click)=\"option.action?.(row)\">\n                        @if (option.iconClass) {\n                          <i class=\"{{ option.iconClass }}\"></i>\n                        }\n                        {{ option.t | appTranslate | async }}\n                      </button>\n                    }\n                  </mat-menu>\n                }\n              } @else {\n                <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                  <i class=\"fa fa-ellipsis-v me-0\"></i>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                  @for (option of rowOptions(); track option.t) {\n                    <button\n                      mat-menu-item\n                      class=\"{{ option.itemClass }}\"\n                      (click)=\"option.action?.(row)\">\n                      @if (option.iconClass) {\n                        <i class=\"{{ option.iconClass }}\"></i>\n                      }\n                      {{ option.t | appTranslate | async }}\n                    </button>\n                  }\n                </mat-menu>\n              }\n            </td>\n          </ng-container>\n        }\n\n        @if (rawColumns(); as dcols) {\n          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n          @if (isExpandable()) {\n            <ng-container matColumnDef=\"expandedDetail\">\n              <td\n                mat-cell\n                *matCellDef=\"let row\"\n                [attr.colspan]=\"dcols?.length || 1\"\n                [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                <div\n                  class=\"example-element-detail\"\n                  [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                  @if (row == expandedElement()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        expandedRowTemplate();\n                        context: { $implicit: { row } }\n                      \"></ng-container>\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{\n              pointer: showRowPointer(),\n              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"rowClick(row)\"></tr>\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n              {{ noItemTxt() | appTranslate | async }}\n            </td>\n          </tr>\n          @if (isExpandable()) {\n            <tr\n              mat-row\n              *matRowDef=\"let row; columns: ['expandedDetail']\"\n              class=\"expanded-detail-row\"\n              [style.height.px]=\"0\"></tr>\n          }\n        }\n      </table>\n    </div>\n    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.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: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, filterExactMatch: { classPropertyName: "filterExactMatch", publicName: "filterExactMatch", isSignal: true, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\n        <!-- Checkbox Column -->\n        <ng-container\n          matColumnDef=\"mselect\"\n          [sticky]=\"!placeSelectionAtRight()\"\n          [stickyEnd]=\"placeSelectionAtRight()\">\n          <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-ngmodel\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"checkbox\"\n                    [disabled]=\"col.disabled\"\n                    [checked]=\"col.checked\"\n                    [(model)]=\"row[col.f]\"\n                    (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\n                      col.action\n                        ? col.action(row, col.f, getActionStatusCallback(col), index)\n                        : null\n                    \"\n                    [help]=\"col.btn?.help\"\n                    [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                    [text]=\"col.btn?.label\"\n                    [loading]=\"col.btn?.loading\"\n                    [iconBtn]=\"col.btn?.iconBtn\"\n                    mclass=\"w-auto\"\n                    [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.icon + button.label) {\n                      <div class=\"mx-2\">\n                        <app-btn\n                          [icon]=\"button.icon\"\n                          [text]=\"button.label\"\n                          [help]=\"button.help\"\n                          [showHelpIcon]=\"button.showHelpIcon\"\n                          [type]=\"button.type\"\n                          [group]=\"button.group\"\n                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(\n                              row,\n                              i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n                              btn\n                            )\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\n                    (click)=\"col.action ? col.action(row, col.f) : null\"\n                    class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                </td>\n              </ng-container>\n            }\n\n            <!-- DEFAULT -->\n            @default {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\n                  <ng-template #cellContent>\n                    @switch (true) {\n                      @case (!!col.routeFormatter) {\n                        @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                          <a\n                            class=\"cell\"\n                            [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                            (click)=\"col.action ? col.action(row, col.f) : null\"\n                            [queryParams]=\"cellRoute.queryParams\"\n                            routerLink=\"{{ cellRoute.route }}\"\n                            [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        }\n                      }\n                      @case (!!col.customTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            col.customTemplate;\n                            context: { $implicit: { row, rowIndex } }\n                          \" />\n                      }\n                      @default {\n                        <span\n                          class=\"cell\"\n                          [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n                      }\n                    }\n                    @if (col.expandable) {\n                      <button\n                        matTooltip=\"Exapnd\"\n                        [matTooltipShowDelay]=\"1000\"\n                        mat-icon-button\n                        (click)=\"expandCell(row, col, expandModal)\"\n                        class=\"expandBtn\">\n                        <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                      </button>\n                    }\n                  </ng-template>\n\n                  @if (col._onHoverFunction) {\n                    <span\n                      class=\"\"\n                      [nelDebug]=\"debug()\"\n                      [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                      [nelDelay]=\"col._onHoverDelay\">\n                      <ng-container *ngTemplateOutlet=\"cellContent\" />\n                    </span>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent\" />\n                  }\n                </td>\n              </ng-container>\n            }\n\n            <!--// -->\n          }\n        }\n        <!-- EXPANDABLE COLUMN-->\n        @if (isExpandable()) {\n          <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"d-flex justify-content-end\">\n                <app-btn\n                  [iconBtn]=\"true\"\n                  type=\"clear\"\n                  [customIcon]=\"\n                    expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                  \"\n                  aria-label=\"expand row\"\n                  (mclick)=\"\n                    expandedElement.set(expandedElement() === row ? null : row);\n                    clickedExpandRow.emit({ open: expandedElement() === row, row });\n                    $event.stopPropagation()\n                  \" />\n              </div>\n            </td>\n          </ng-container>\n        }\n        <!--// -->\n        <!-- Options Column -->\n        @if (hasRowOptions()) {\n          <ng-container matColumnDef=\"option\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef disableClear></th>\n            <td mat-cell *matCellDef=\"let row\">\n              @if (rowOptionsMap()) {\n                @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                  <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                    <i class=\"fa fa-ellipsis-v me-0\"></i>\n                  </button>\n                  <mat-menu #menu=\"matMenu\">\n                    @for (option of _rowoptions; track option.t) {\n                      <button\n                        mat-menu-item\n                        class=\"{{ option.itemClass }}\"\n                        (click)=\"option.action?.(row)\">\n                        @if (option.iconClass) {\n                          <i class=\"{{ option.iconClass }}\"></i>\n                        }\n                        {{ option.t | appTranslate | async }}\n                      </button>\n                    }\n                  </mat-menu>\n                }\n              } @else {\n                <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                  <i class=\"fa fa-ellipsis-v me-0\"></i>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                  @for (option of rowOptions(); track option.t) {\n                    <button\n                      mat-menu-item\n                      class=\"{{ option.itemClass }}\"\n                      (click)=\"option.action?.(row)\">\n                      @if (option.iconClass) {\n                        <i class=\"{{ option.iconClass }}\"></i>\n                      }\n                      {{ option.t | appTranslate | async }}\n                    </button>\n                  }\n                </mat-menu>\n              }\n            </td>\n          </ng-container>\n        }\n\n        @if (rawColumns(); as dcols) {\n          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n          @if (isExpandable()) {\n            <ng-container matColumnDef=\"expandedDetail\">\n              <td\n                mat-cell\n                *matCellDef=\"let row\"\n                [attr.colspan]=\"dcols?.length || 1\"\n                [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                <div\n                  class=\"example-element-detail\"\n                  [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                  @if (row == expandedElement()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        expandedRowTemplate();\n                        context: { $implicit: { row } }\n                      \"></ng-container>\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{\n              pointer: enableRowClick(),\n              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"enableRowClick() ? rowClick(row) : null\"></tr>\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n              {{ noItemTxt() | appTranslate | async }}\n            </td>\n          </tr>\n          @if (isExpandable()) {\n            <tr\n              mat-row\n              *matRowDef=\"let row; columns: ['expandedDetail']\"\n              class=\"expanded-detail-row\"\n              [style.height.px]=\"0\"></tr>\n          }\n        }\n      </table>\n    </div>\n    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.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: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -21476,7 +21480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         ValidationMessageComponent,
                         ValueOrXPipe,
                         FunctionCaller,
-                    ], template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\n        <!-- Checkbox Column -->\n        <ng-container\n          matColumnDef=\"mselect\"\n          [sticky]=\"!placeSelectionAtRight()\"\n          [stickyEnd]=\"placeSelectionAtRight()\">\n          <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-ngmodel\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"checkbox\"\n                    [disabled]=\"col.disabled\"\n                    [checked]=\"col.checked\"\n                    [(model)]=\"row[col.f]\"\n                    (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\n                      col.action\n                        ? col.action(row, col.f, getActionStatusCallback(col), index)\n                        : null\n                    \"\n                    [help]=\"col.btn?.help\"\n                    [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                    [text]=\"col.btn?.label\"\n                    [loading]=\"col.btn?.loading\"\n                    [iconBtn]=\"col.btn?.iconBtn\"\n                    mclass=\"w-auto\"\n                    [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.icon + button.label) {\n                      <div class=\"mx-2\">\n                        <app-btn\n                          [icon]=\"button.icon\"\n                          [text]=\"button.label\"\n                          [help]=\"button.help\"\n                          [showHelpIcon]=\"button.showHelpIcon\"\n                          [type]=\"button.type\"\n                          [group]=\"button.group\"\n                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(\n                              row,\n                              i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n                              btn\n                            )\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\n                    (click)=\"col.action ? col.action(row, col.f) : null\"\n                    class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                </td>\n              </ng-container>\n            }\n\n            <!-- DEFAULT -->\n            @default {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\n                  <ng-template #cellContent>\n                    @switch (true) {\n                      @case (!!col.routeFormatter) {\n                        @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                          <a\n                            class=\"cell\"\n                            [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                            (click)=\"col.action ? col.action(row, col.f) : null\"\n                            [queryParams]=\"cellRoute.queryParams\"\n                            routerLink=\"{{ cellRoute.route }}\"\n                            [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        }\n                      }\n                      @case (!!col.customTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            col.customTemplate;\n                            context: { $implicit: { row, rowIndex } }\n                          \" />\n                      }\n                      @default {\n                        <span\n                          class=\"cell\"\n                          [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n                      }\n                    }\n                    @if (col.expandable) {\n                      <button\n                        matTooltip=\"Exapnd\"\n                        [matTooltipShowDelay]=\"1000\"\n                        mat-icon-button\n                        (click)=\"expandCell(row, col, expandModal)\"\n                        class=\"expandBtn\">\n                        <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                      </button>\n                    }\n                  </ng-template>\n\n                  @if (col._onHoverFunction) {\n                    <span\n                      class=\"\"\n                      [nelDebug]=\"debug()\"\n                      [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                      [nelDelay]=\"col._onHoverDelay\">\n                      <ng-container *ngTemplateOutlet=\"cellContent\" />\n                    </span>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent\" />\n                  }\n                </td>\n              </ng-container>\n            }\n\n            <!--// -->\n          }\n        }\n        <!-- EXPANDABLE COLUMN-->\n        @if (isExpandable()) {\n          <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"d-flex justify-content-end\">\n                <app-btn\n                  [iconBtn]=\"true\"\n                  type=\"clear\"\n                  [customIcon]=\"\n                    expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                  \"\n                  aria-label=\"expand row\"\n                  (mclick)=\"\n                    expandedElement.set(expandedElement() === row ? null : row);\n                    clickedExpandRow.emit({ open: expandedElement() === row, row });\n                    $event.stopPropagation()\n                  \" />\n              </div>\n            </td>\n          </ng-container>\n        }\n        <!--// -->\n        <!-- Options Column -->\n        @if (hasRowOptions()) {\n          <ng-container matColumnDef=\"option\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef disableClear></th>\n            <td mat-cell *matCellDef=\"let row\">\n              @if (rowOptionsMap()) {\n                @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                  <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                    <i class=\"fa fa-ellipsis-v me-0\"></i>\n                  </button>\n                  <mat-menu #menu=\"matMenu\">\n                    @for (option of _rowoptions; track option.t) {\n                      <button\n                        mat-menu-item\n                        class=\"{{ option.itemClass }}\"\n                        (click)=\"option.action?.(row)\">\n                        @if (option.iconClass) {\n                          <i class=\"{{ option.iconClass }}\"></i>\n                        }\n                        {{ option.t | appTranslate | async }}\n                      </button>\n                    }\n                  </mat-menu>\n                }\n              } @else {\n                <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                  <i class=\"fa fa-ellipsis-v me-0\"></i>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                  @for (option of rowOptions(); track option.t) {\n                    <button\n                      mat-menu-item\n                      class=\"{{ option.itemClass }}\"\n                      (click)=\"option.action?.(row)\">\n                      @if (option.iconClass) {\n                        <i class=\"{{ option.iconClass }}\"></i>\n                      }\n                      {{ option.t | appTranslate | async }}\n                    </button>\n                  }\n                </mat-menu>\n              }\n            </td>\n          </ng-container>\n        }\n\n        @if (rawColumns(); as dcols) {\n          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n          @if (isExpandable()) {\n            <ng-container matColumnDef=\"expandedDetail\">\n              <td\n                mat-cell\n                *matCellDef=\"let row\"\n                [attr.colspan]=\"dcols?.length || 1\"\n                [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                <div\n                  class=\"example-element-detail\"\n                  [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                  @if (row == expandedElement()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        expandedRowTemplate();\n                        context: { $implicit: { row } }\n                      \"></ng-container>\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{\n              pointer: showRowPointer(),\n              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"rowClick(row)\"></tr>\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n              {{ noItemTxt() | appTranslate | async }}\n            </td>\n          </tr>\n          @if (isExpandable()) {\n            <tr\n              mat-row\n              *matRowDef=\"let row; columns: ['expandedDetail']\"\n              class=\"expanded-detail-row\"\n              [style.height.px]=\"0\"></tr>\n          }\n        }\n      </table>\n    </div>\n    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"] }]
+                    ], template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\n        <!-- Checkbox Column -->\n        <ng-container\n          matColumnDef=\"mselect\"\n          [sticky]=\"!placeSelectionAtRight()\"\n          [stickyEnd]=\"placeSelectionAtRight()\">\n          <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-ngmodel\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"checkbox\"\n                    [disabled]=\"col.disabled\"\n                    [checked]=\"col.checked\"\n                    [(model)]=\"row[col.f]\"\n                    (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\n                      col.action\n                        ? col.action(row, col.f, getActionStatusCallback(col), index)\n                        : null\n                    \"\n                    [help]=\"col.btn?.help\"\n                    [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                    [text]=\"col.btn?.label\"\n                    [loading]=\"col.btn?.loading\"\n                    [iconBtn]=\"col.btn?.iconBtn\"\n                    mclass=\"w-auto\"\n                    [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.icon + button.label) {\n                      <div class=\"mx-2\">\n                        <app-btn\n                          [icon]=\"button.icon\"\n                          [text]=\"button.label\"\n                          [help]=\"button.help\"\n                          [showHelpIcon]=\"button.showHelpIcon\"\n                          [type]=\"button.type\"\n                          [group]=\"button.group\"\n                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(\n                              row,\n                              i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n                              btn\n                            )\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\n                    (click)=\"col.action ? col.action(row, col.f) : null\"\n                    class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                </td>\n              </ng-container>\n            }\n\n            <!-- DEFAULT -->\n            @default {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\n                  <ng-template #cellContent>\n                    @switch (true) {\n                      @case (!!col.routeFormatter) {\n                        @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                          <a\n                            class=\"cell\"\n                            [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                            (click)=\"col.action ? col.action(row, col.f) : null\"\n                            [queryParams]=\"cellRoute.queryParams\"\n                            routerLink=\"{{ cellRoute.route }}\"\n                            [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        }\n                      }\n                      @case (!!col.customTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            col.customTemplate;\n                            context: { $implicit: { row, rowIndex } }\n                          \" />\n                      }\n                      @default {\n                        <span\n                          class=\"cell\"\n                          [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n                      }\n                    }\n                    @if (col.expandable) {\n                      <button\n                        matTooltip=\"Exapnd\"\n                        [matTooltipShowDelay]=\"1000\"\n                        mat-icon-button\n                        (click)=\"expandCell(row, col, expandModal)\"\n                        class=\"expandBtn\">\n                        <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                      </button>\n                    }\n                  </ng-template>\n\n                  @if (col._onHoverFunction) {\n                    <span\n                      class=\"\"\n                      [nelDebug]=\"debug()\"\n                      [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                      [nelDelay]=\"col._onHoverDelay\">\n                      <ng-container *ngTemplateOutlet=\"cellContent\" />\n                    </span>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent\" />\n                  }\n                </td>\n              </ng-container>\n            }\n\n            <!--// -->\n          }\n        }\n        <!-- EXPANDABLE COLUMN-->\n        @if (isExpandable()) {\n          <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"d-flex justify-content-end\">\n                <app-btn\n                  [iconBtn]=\"true\"\n                  type=\"clear\"\n                  [customIcon]=\"\n                    expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                  \"\n                  aria-label=\"expand row\"\n                  (mclick)=\"\n                    expandedElement.set(expandedElement() === row ? null : row);\n                    clickedExpandRow.emit({ open: expandedElement() === row, row });\n                    $event.stopPropagation()\n                  \" />\n              </div>\n            </td>\n          </ng-container>\n        }\n        <!--// -->\n        <!-- Options Column -->\n        @if (hasRowOptions()) {\n          <ng-container matColumnDef=\"option\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef disableClear></th>\n            <td mat-cell *matCellDef=\"let row\">\n              @if (rowOptionsMap()) {\n                @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                  <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                    <i class=\"fa fa-ellipsis-v me-0\"></i>\n                  </button>\n                  <mat-menu #menu=\"matMenu\">\n                    @for (option of _rowoptions; track option.t) {\n                      <button\n                        mat-menu-item\n                        class=\"{{ option.itemClass }}\"\n                        (click)=\"option.action?.(row)\">\n                        @if (option.iconClass) {\n                          <i class=\"{{ option.iconClass }}\"></i>\n                        }\n                        {{ option.t | appTranslate | async }}\n                      </button>\n                    }\n                  </mat-menu>\n                }\n              } @else {\n                <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                  <i class=\"fa fa-ellipsis-v me-0\"></i>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                  @for (option of rowOptions(); track option.t) {\n                    <button\n                      mat-menu-item\n                      class=\"{{ option.itemClass }}\"\n                      (click)=\"option.action?.(row)\">\n                      @if (option.iconClass) {\n                        <i class=\"{{ option.iconClass }}\"></i>\n                      }\n                      {{ option.t | appTranslate | async }}\n                    </button>\n                  }\n                </mat-menu>\n              }\n            </td>\n          </ng-container>\n        }\n\n        @if (rawColumns(); as dcols) {\n          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n          @if (isExpandable()) {\n            <ng-container matColumnDef=\"expandedDetail\">\n              <td\n                mat-cell\n                *matCellDef=\"let row\"\n                [attr.colspan]=\"dcols?.length || 1\"\n                [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                <div\n                  class=\"example-element-detail\"\n                  [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                  @if (row == expandedElement()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        expandedRowTemplate();\n                        context: { $implicit: { row } }\n                      \"></ng-container>\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{\n              pointer: enableRowClick(),\n              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"enableRowClick() ? rowClick(row) : null\"></tr>\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n              {{ noItemTxt() | appTranslate | async }}\n            </td>\n          </tr>\n          @if (isExpandable()) {\n            <tr\n              mat-row\n              *matRowDef=\"let row; columns: ['expandedDetail']\"\n              class=\"expanded-detail-row\"\n              [style.height.px]=\"0\"></tr>\n          }\n        }\n      </table>\n    </div>\n    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disableSelectionByField: [{
                 type: Input
             }], _view: [{
@@ -24605,6 +24609,7 @@ class FindItemComponent extends BaseFormGenerator {
         this.id = input(location.href, ...(ngDevMode ? [{ debugName: "id" }] : []));
         /** Whether to automatically order form fields */
         this.autoOrder = input(true, ...(ngDevMode ? [{ debugName: "autoOrder" }] : []));
+        this.enableRowClick = input(true, ...(ngDevMode ? [{ debugName: "enableRowClick" }] : []));
         /** Text to display on the search button */
         this.searchButtonText = input('Search', ...(ngDevMode ? [{ debugName: "searchButtonText" }] : []));
         /** Icon to display on the search button */
@@ -25077,7 +25082,7 @@ class FindItemComponent extends BaseFormGenerator {
         this._loading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FindItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, autoOrder: { classPropertyName: "autoOrder", publicName: "autoOrder", isSignal: true, isRequired: false, transformFunction: null }, searchButtonText: { classPropertyName: "searchButtonText", publicName: "searchButtonText", isSignal: true, isRequired: false, transformFunction: null }, searchButtonIcon: { classPropertyName: "searchButtonIcon", publicName: "searchButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, _displayedColumns: { classPropertyName: "_displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, gridClass: { classPropertyName: "gridClass", publicName: "gridClass", isSignal: true, isRequired: false, transformFunction: null }, hideForm: { classPropertyName: "hideForm", publicName: "hideForm", isSignal: true, isRequired: false, transformFunction: null }, customTableCellTemplates: { classPropertyName: "customTableCellTemplates", publicName: "customTableCellTemplates", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showData: { classPropertyName: "showData", publicName: "showData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSearchBtn: { classPropertyName: "showSearchBtn", publicName: "showSearchBtn", isSignal: true, isRequired: false, transformFunction: null }, showClearBtn: { classPropertyName: "showClearBtn", publicName: "showClearBtn", isSignal: true, isRequired: false, transformFunction: null }, showFormError: { classPropertyName: "showFormError", publicName: "showFormError", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsg: { classPropertyName: "showValidationMsg", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, createBtnRoute: { classPropertyName: "createBtnRoute", publicName: "createBtnRoute", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, initialQuery: { classPropertyName: "initialQuery", publicName: "initialQuery", isSignal: true, isRequired: false, transformFunction: null }, createButton: { classPropertyName: "createButton", publicName: "createButton", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, searchObservableFunc: { classPropertyName: "searchObservableFunc", publicName: "searchObservableFunc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initialQuery: "initialQueryChange", _rowClick: "rowClick", clickedExpandRow: "clickedExpandRow", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "actionBtns", predicate: ["actionBtn"], descendants: true, isSignal: true }, { propertyName: "tableHTTPSREF", first: true, predicate: (TableHttpsComponent), descendants: true, isSignal: true }, { propertyName: "tablePlainRef", first: true, predicate: (TablePlainComponent), descendants: true, isSignal: true }, { propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }, { propertyName: "formErrorRef", first: true, predicate: FormErrorComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <span #actionBtn [id]=\"formField.name()\">\n                <app-btn\n                  [icon]=\"scheme.icon || 'show'\"\n                  [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                  actionType=\"submit\"\n                  [disabled]=\"!formField?.validSignal()\" />\n              </span>\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\n                <app-phone-number\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [name]=\"scheme.field\"\n                  [showLabel]=\"false\"\n                  [showValidation]=\"scheme.showValidation\"\n                  [showValidationIcon]=\"scheme.showValidationIcon\"\n                  [countryCode3]=\"scheme.countryCode3\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\n                <app-autocomplete\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [optionsFunc]=\"scheme.optionsFunc\"\n                  [name]=\"scheme.field\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [options]=\"scheme.options\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @default {\n                <app-input-basic\n                  #inputTag\n                  [name]=\"scheme.field\"\n                  [form]=\"scheme.form\"\n                  [type]=\"scheme.type\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [valueField]=\"scheme.valueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [checkedSignal]=\"scheme.checked\"\n                  [showValidation]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [noFormat]=\"true\"\n                  [labelField]=\"scheme.labelField\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [options]=\"scheme.options\"\n                  [decimalPoints]=\"scheme.decimalPoints\"\n                  [hint]=\"scheme.hint\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end gap-1 align-items-center d-flex\">\n        @if (showFormError()) {\n          <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        }\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n    @if (showFormError()) {\n      <ng-container *ngTemplateOutlet=\"formErrorRef().resultTemplateRef()\"></ng-container>\n    }\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          @if (searchIfNoQuery() || data()?.length || searched()) {\n            <table-plain\n              [distinct]=\"true\"\n              [showPager]=\"true\"\n              [pageSize]=\"pageSize()\"\n              [centerCells]=\"false\"\n              [startSectionTemplate]=\"startSectionTemplate()\"\n              [smallerFonts]=\"smallerFonts()\"\n              [nowrap]=\"nowrap()\"\n              [showFilter]=\"showFilter()\"\n              [showExport]=\"showExport()\"\n              [isExpandable]=\"isExpandable()\"\n              [customTemplates]=\"customTableCellTemplates()\"\n              [expandedRowTemplate]=\"expandedRowTemplate()\"\n              [label]=\"label()\"\n              [striped]=\"striped()\"\n              noItemTxt=\"No results found\"\n              (rowClick)=\"rowClick($event)\"\n              [orderField]=\"orderField()\"\n              [rowOptions]=\"options()\"\n              [debug]=\"debug()\"\n              [rowOptionsMap]=\"rowOptionsMap()\"\n              [showAdditionalColumns]=\"showAdditionalColumns()\"\n              [orderDirection]=\"orderDirection()\"\n              [displayedColumns]=\"displayedColumns()\"\n              (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n              [data]=\"data()\" />\n          } @else {\n            <div class=\"text-center p-3\">\n              {{ 'Please type a search query' | appTranslate | async }}\n            </div>\n          }\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: ModalFooterDirective, selector: "[modalFooter]" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleInputFormComponent, selector: "toggle-input-form", inputs: ["addToFormFunc", "defaultToggleAll", "readOnly", "hideSearchMenu", "hideGridMenu", "hideToggle", "deleteFromFormFunc", "gridNo", "labelField", "labelSeparator", "searchQuery", "showToggleAll", "valueField", "checkedChecker", "list"], outputs: ["gridNoChange", "searchQueryChange", "selected"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn", "useStaticLoader", "searchPromptText"], outputs: ["queryDataChange", "dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "filterExactMatch", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormErrorComponent, selector: "form-error", inputs: ["form", "customResult", "inline", "lgGridNo", "xxlGridNo"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: widthOffsetPipe, name: "widthOffsetPipe" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, autoOrder: { classPropertyName: "autoOrder", publicName: "autoOrder", isSignal: true, isRequired: false, transformFunction: null }, enableRowClick: { classPropertyName: "enableRowClick", publicName: "enableRowClick", isSignal: true, isRequired: false, transformFunction: null }, searchButtonText: { classPropertyName: "searchButtonText", publicName: "searchButtonText", isSignal: true, isRequired: false, transformFunction: null }, searchButtonIcon: { classPropertyName: "searchButtonIcon", publicName: "searchButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, _displayedColumns: { classPropertyName: "_displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, gridClass: { classPropertyName: "gridClass", publicName: "gridClass", isSignal: true, isRequired: false, transformFunction: null }, hideForm: { classPropertyName: "hideForm", publicName: "hideForm", isSignal: true, isRequired: false, transformFunction: null }, customTableCellTemplates: { classPropertyName: "customTableCellTemplates", publicName: "customTableCellTemplates", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showData: { classPropertyName: "showData", publicName: "showData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSearchBtn: { classPropertyName: "showSearchBtn", publicName: "showSearchBtn", isSignal: true, isRequired: false, transformFunction: null }, showClearBtn: { classPropertyName: "showClearBtn", publicName: "showClearBtn", isSignal: true, isRequired: false, transformFunction: null }, showFormError: { classPropertyName: "showFormError", publicName: "showFormError", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsg: { classPropertyName: "showValidationMsg", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, createBtnRoute: { classPropertyName: "createBtnRoute", publicName: "createBtnRoute", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, initialQuery: { classPropertyName: "initialQuery", publicName: "initialQuery", isSignal: true, isRequired: false, transformFunction: null }, createButton: { classPropertyName: "createButton", publicName: "createButton", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, searchObservableFunc: { classPropertyName: "searchObservableFunc", publicName: "searchObservableFunc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initialQuery: "initialQueryChange", _rowClick: "rowClick", clickedExpandRow: "clickedExpandRow", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "actionBtns", predicate: ["actionBtn"], descendants: true, isSignal: true }, { propertyName: "tableHTTPSREF", first: true, predicate: (TableHttpsComponent), descendants: true, isSignal: true }, { propertyName: "tablePlainRef", first: true, predicate: (TablePlainComponent), descendants: true, isSignal: true }, { propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }, { propertyName: "formErrorRef", first: true, predicate: FormErrorComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <span #actionBtn [id]=\"formField.name()\">\n                <app-btn\n                  [icon]=\"scheme.icon || 'show'\"\n                  [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                  actionType=\"submit\"\n                  [disabled]=\"!formField?.validSignal()\" />\n              </span>\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\n                <app-phone-number\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [name]=\"scheme.field\"\n                  [showLabel]=\"false\"\n                  [showValidation]=\"scheme.showValidation\"\n                  [showValidationIcon]=\"scheme.showValidationIcon\"\n                  [countryCode3]=\"scheme.countryCode3\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\n                <app-autocomplete\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [optionsFunc]=\"scheme.optionsFunc\"\n                  [name]=\"scheme.field\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [options]=\"scheme.options\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @default {\n                <app-input-basic\n                  #inputTag\n                  [name]=\"scheme.field\"\n                  [form]=\"scheme.form\"\n                  [type]=\"scheme.type\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [valueField]=\"scheme.valueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [checkedSignal]=\"scheme.checked\"\n                  [showValidation]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [noFormat]=\"true\"\n                  [labelField]=\"scheme.labelField\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [options]=\"scheme.options\"\n                  [decimalPoints]=\"scheme.decimalPoints\"\n                  [hint]=\"scheme.hint\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end gap-1 align-items-center d-flex\">\n        @if (showFormError()) {\n          <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        }\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n    @if (showFormError()) {\n      <ng-container *ngTemplateOutlet=\"formErrorRef().resultTemplateRef()\"></ng-container>\n    }\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [enableRowClick]=\"enableRowClick()\"\n            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          @if (searchIfNoQuery() || data()?.length || searched()) {\n            <table-plain\n              [distinct]=\"true\"\n              [showPager]=\"true\"\n              [pageSize]=\"pageSize()\"\n              [centerCells]=\"false\"\n              [startSectionTemplate]=\"startSectionTemplate()\"\n              [smallerFonts]=\"smallerFonts()\"\n              [nowrap]=\"nowrap()\"\n              [enableRowClick]=\"enableRowClick()\"\n              [showFilter]=\"showFilter()\"\n              [showExport]=\"showExport()\"\n              [isExpandable]=\"isExpandable()\"\n              [customTemplates]=\"customTableCellTemplates()\"\n              [expandedRowTemplate]=\"expandedRowTemplate()\"\n              [label]=\"label()\"\n              [striped]=\"striped()\"\n              noItemTxt=\"No results found\"\n              (rowClick)=\"rowClick($event)\"\n              [orderField]=\"orderField()\"\n              [rowOptions]=\"options()\"\n              [debug]=\"debug()\"\n              [rowOptionsMap]=\"rowOptionsMap()\"\n              [showAdditionalColumns]=\"showAdditionalColumns()\"\n              [orderDirection]=\"orderDirection()\"\n              [displayedColumns]=\"displayedColumns()\"\n              (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n              [data]=\"data()\" />\n          } @else {\n            <div class=\"text-center p-3\">\n              {{ 'Please type a search query' | appTranslate | async }}\n            </div>\n          }\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: ModalFooterDirective, selector: "[modalFooter]" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleInputFormComponent, selector: "toggle-input-form", inputs: ["addToFormFunc", "defaultToggleAll", "readOnly", "hideSearchMenu", "hideGridMenu", "hideToggle", "deleteFromFormFunc", "gridNo", "labelField", "labelSeparator", "searchQuery", "showToggleAll", "valueField", "checkedChecker", "list"], outputs: ["gridNoChange", "searchQueryChange", "selected"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn", "useStaticLoader", "searchPromptText"], outputs: ["queryDataChange", "dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "filterExactMatch", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormErrorComponent, selector: "form-error", inputs: ["form", "customResult", "inline", "lgGridNo", "xxlGridNo"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: widthOffsetPipe, name: "widthOffsetPipe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FindItemComponent, decorators: [{
             type: Component,
@@ -25105,7 +25110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         ToAnyPipe,
                         FormErrorComponent,
                         widthOffsetPipe,
-                    ], template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <span #actionBtn [id]=\"formField.name()\">\n                <app-btn\n                  [icon]=\"scheme.icon || 'show'\"\n                  [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                  actionType=\"submit\"\n                  [disabled]=\"!formField?.validSignal()\" />\n              </span>\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\n                <app-phone-number\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [name]=\"scheme.field\"\n                  [showLabel]=\"false\"\n                  [showValidation]=\"scheme.showValidation\"\n                  [showValidationIcon]=\"scheme.showValidationIcon\"\n                  [countryCode3]=\"scheme.countryCode3\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\n                <app-autocomplete\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [optionsFunc]=\"scheme.optionsFunc\"\n                  [name]=\"scheme.field\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [options]=\"scheme.options\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @default {\n                <app-input-basic\n                  #inputTag\n                  [name]=\"scheme.field\"\n                  [form]=\"scheme.form\"\n                  [type]=\"scheme.type\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [valueField]=\"scheme.valueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [checkedSignal]=\"scheme.checked\"\n                  [showValidation]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [noFormat]=\"true\"\n                  [labelField]=\"scheme.labelField\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [options]=\"scheme.options\"\n                  [decimalPoints]=\"scheme.decimalPoints\"\n                  [hint]=\"scheme.hint\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end gap-1 align-items-center d-flex\">\n        @if (showFormError()) {\n          <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        }\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n    @if (showFormError()) {\n      <ng-container *ngTemplateOutlet=\"formErrorRef().resultTemplateRef()\"></ng-container>\n    }\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          @if (searchIfNoQuery() || data()?.length || searched()) {\n            <table-plain\n              [distinct]=\"true\"\n              [showPager]=\"true\"\n              [pageSize]=\"pageSize()\"\n              [centerCells]=\"false\"\n              [startSectionTemplate]=\"startSectionTemplate()\"\n              [smallerFonts]=\"smallerFonts()\"\n              [nowrap]=\"nowrap()\"\n              [showFilter]=\"showFilter()\"\n              [showExport]=\"showExport()\"\n              [isExpandable]=\"isExpandable()\"\n              [customTemplates]=\"customTableCellTemplates()\"\n              [expandedRowTemplate]=\"expandedRowTemplate()\"\n              [label]=\"label()\"\n              [striped]=\"striped()\"\n              noItemTxt=\"No results found\"\n              (rowClick)=\"rowClick($event)\"\n              [orderField]=\"orderField()\"\n              [rowOptions]=\"options()\"\n              [debug]=\"debug()\"\n              [rowOptionsMap]=\"rowOptionsMap()\"\n              [showAdditionalColumns]=\"showAdditionalColumns()\"\n              [orderDirection]=\"orderDirection()\"\n              [displayedColumns]=\"displayedColumns()\"\n              (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n              [data]=\"data()\" />\n          } @else {\n            <div class=\"text-center p-3\">\n              {{ 'Please type a search query' | appTranslate | async }}\n            </div>\n          }\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"] }]
+                    ], template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <span #actionBtn [id]=\"formField.name()\">\n                <app-btn\n                  [icon]=\"scheme.icon || 'show'\"\n                  [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                  actionType=\"submit\"\n                  [disabled]=\"!formField?.validSignal()\" />\n              </span>\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\n                <app-phone-number\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [name]=\"scheme.field\"\n                  [showLabel]=\"false\"\n                  [showValidation]=\"scheme.showValidation\"\n                  [showValidationIcon]=\"scheme.showValidationIcon\"\n                  [countryCode3]=\"scheme.countryCode3\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\n                <app-autocomplete\n                  [form]=\"scheme.form\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [optionsFunc]=\"scheme.optionsFunc\"\n                  [name]=\"scheme.field\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [options]=\"scheme.options\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @default {\n                <app-input-basic\n                  #inputTag\n                  [name]=\"scheme.field\"\n                  [form]=\"scheme.form\"\n                  [type]=\"scheme.type\"\n                  [autoPickValueField]=\"scheme.autoPickValueField\"\n                  [valueField]=\"scheme.valueField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [checkedSignal]=\"scheme.checked\"\n                  [showValidation]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [noFormat]=\"true\"\n                  [labelField]=\"scheme.labelField\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [options]=\"scheme.options\"\n                  [decimalPoints]=\"scheme.decimalPoints\"\n                  [hint]=\"scheme.hint\"\n                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [style.width]=\"\n                    'calc(100% - ' +\n                    (fieldWidthOffsets()[inputTag.nameStrSignal()]?.nativeElement.offsetWidth\n                      | widthOffsetPipe) +\n                    'px )'\n                  \"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end gap-1 align-items-center d-flex\">\n        @if (showFormError()) {\n          <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        }\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n    @if (showFormError()) {\n      <ng-container *ngTemplateOutlet=\"formErrorRef().resultTemplateRef()\"></ng-container>\n    }\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [enableRowClick]=\"enableRowClick()\"\n            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          @if (searchIfNoQuery() || data()?.length || searched()) {\n            <table-plain\n              [distinct]=\"true\"\n              [showPager]=\"true\"\n              [pageSize]=\"pageSize()\"\n              [centerCells]=\"false\"\n              [startSectionTemplate]=\"startSectionTemplate()\"\n              [smallerFonts]=\"smallerFonts()\"\n              [nowrap]=\"nowrap()\"\n              [enableRowClick]=\"enableRowClick()\"\n              [showFilter]=\"showFilter()\"\n              [showExport]=\"showExport()\"\n              [isExpandable]=\"isExpandable()\"\n              [customTemplates]=\"customTableCellTemplates()\"\n              [expandedRowTemplate]=\"expandedRowTemplate()\"\n              [label]=\"label()\"\n              [striped]=\"striped()\"\n              noItemTxt=\"No results found\"\n              (rowClick)=\"rowClick($event)\"\n              [orderField]=\"orderField()\"\n              [rowOptions]=\"options()\"\n              [debug]=\"debug()\"\n              [rowOptionsMap]=\"rowOptionsMap()\"\n              [showAdditionalColumns]=\"showAdditionalColumns()\"\n              [orderDirection]=\"orderDirection()\"\n              [displayedColumns]=\"displayedColumns()\"\n              (clickedExpandRow)=\"clickedExpandRow.emit($event)\"\n              [data]=\"data()\" />\n          } @else {\n            <div class=\"text-center p-3\">\n              {{ 'Please type a search query' | appTranslate | async }}\n            </div>\n          }\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"] }]
         }], propDecorators: { _formSchema: [{
                 type: Input,
                 args: ['formSchema']