verben-ticketing-ui 0.6.0

package/fesm2022/verben-ticketing-ui-src-lib-components-ticketing.mjs

@@ -0,0 +1,1166 @@
+import * as i0 from '@angular/core';
+import { Injectable, signal, viewChildren, Component, Input, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { DEFAULT_PAGE_SIZE } from 'verben-ticketing-ui/src/lib/constants';
+import { SearchOperator, SearchPropertySign, ErrorResponse, TicketStatus, ObjectState, FilterTypes, SearchPropertyValueType, SortDirection } from 'verben-ticketing-ui/src/lib/models';
+import { Subject, debounceTime } from 'rxjs';
+import * as i6 from 'verben-ng-ui';
+import { ColumnDirective, DataFilterType, DataTableModule, SvgModule, VerbenPopUpModule, DataViewModule, VerbenaButtonModule, CardDataViewModule, DropDownModule, VerbenaSwitchModule, TableFilterModule, VisibleColumnModule, SortTableModule, DataExportModule, TooltipModule, VerbenDialogueModule, VerbenaInputModule, DataImportModule, DataXportModule } from 'verben-ng-ui';
+import * as i1 from 'verben-ticketing-ui/src/lib/services';
+import * as i3 from '@angular/router';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from 'verben-ticketing-ui/src/lib/components/add-ticket';
+import { AddTicketLibModule } from 'verben-ticketing-ui/src/lib/components/add-ticket';
+import * as i8 from 'verben-ticketing-ui/src/lib/pipes';
+import { AsyncLabelPipe, EllipseWordPipe, CompanyDatePipe } from 'verben-ticketing-ui/src/lib/pipes';
+
+const baseStyle = {
+    width: '100%',
+    fontFamily: '"Fraunces", serif',
+    fontSize: '125%',
+    whiteSpace: 'nowrap',
+    margin: '0',
+    // border: '1px solid #D4A007',
+    // borderRadius: '16px',
+    // borderCollapse: 'separate',
+    borderSpacing: '0',
+    // tableLayout: 'fixed',
+    overflow: 'hidden',
+    rows: {
+        // even: {
+        //   borderBottom: '1px solid #CCCCCC',
+        // },
+        // odd: {
+        //   borderBottom: '1px solid #CCCCCC',
+        // },
+        borderBottom: '1px solid #CCCCCC',
+        height: '68px',
+    },
+    cells: {
+        padding: '0.5rem 1rem',
+    },
+    header: {
+        // stickyTop: true,
+        // zIndex: 2,
+        borderBottom: '1px solid #CCCCCC',
+        borderTop: '1px solid #CCCCCC',
+        // backgroundColor: '#EFF2FB',
+        fontWeight: 'bold',
+        textAlign: 'left',
+        padding: '12px 16px',
+        height: '30px',
+    },
+    footer: {
+        // stickyBottom: true,
+        // zIndex: 2,
+        padding: '3px',
+    },
+    //   body: {
+    //     background: '#fff',
+    //     padding: '4px 5px',
+    //     textAlign: 'center',
+    //   },
+    // firstColumn: {
+    //   stickyLeft: true,
+    //   zIndex: 1,
+    // },
+    lastColumn: {
+    // stickyRight: true,
+    // zIndex: 1,
+    },
+};
+
+class TicketingService {
+    utilService;
+    server;
+    envSvc;
+    pageSize = DEFAULT_PAGE_SIZE;
+    constructor(utilService, server, envSvc) {
+        this.utilService = utilService;
+        this.server = server;
+        this.envSvc = envSvc;
+    }
+    get ticketColumns() {
+        return [
+            {
+                id: 'select',
+                header: '',
+                canExport: false,
+            },
+            {
+                id: 'createdAt',
+                header: 'DATE',
+                accessorKey: 'CreatedAt',
+            },
+            {
+                id: 'code',
+                header: 'CODE',
+                accessorKey: 'Code',
+            },
+            {
+                id: 'title',
+                header: 'TITLE',
+                accessorKey: 'Title',
+                importKey: 'Title',
+            },
+            {
+                id: 'description',
+                header: 'DESCRIPTION',
+                accessorKey: 'Description',
+                importKey: 'Description',
+            },
+            {
+                id: 'currentHandler',
+                header: 'CURRENT HANDLER',
+                accessorKey: 'CurrentHandler',
+            },
+            {
+                id: 'lastHandler',
+                header: 'LAST HANDLER',
+                accessorKey: 'LastHandler',
+            },
+            {
+                id: 'executionTime',
+                header: 'EXECUTION TIME',
+                accessorKey: 'ExecutionTime',
+            },
+            {
+                id: 'priority',
+                header: 'PRIORITY',
+                accessorKey: 'Priority',
+                importKey: 'Priority',
+            },
+            {
+                id: 'status',
+                header: 'STATUS',
+                accessorKey: 'Status',
+                importKey: 'Status',
+            },
+            {
+                id: 'actions',
+                header: 'ACTIONS',
+                accessorFn: (row) => {
+                    return row;
+                },
+                canExport: false,
+            },
+        ];
+    }
+    async getAllApps() {
+        const payload = [
+            {
+                PropertyName: 'TenantId',
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.NEQ,
+            },
+        ];
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`SearchApplications/0/0`, payload, this.envSvc.environment.AuthenticationAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return;
+        }
+        else {
+            var result = res.Result;
+            return result;
+        }
+    }
+    async getTenantsByApp(app) {
+        const payload = [
+            {
+                PropertyName: 'Application',
+                EntityValue: app,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            },
+            {
+                PropertyName: 'TenantId',
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.NEQ,
+            },
+        ];
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`SearchTenants/0/0`, payload, this.envSvc.environment.AuthenticationAPI);
+        const configs = await this.getTenantConfigsByApp(app);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return;
+        }
+        else {
+            var result = res.Result;
+            if (configs) {
+                result.forEach((x) => {
+                    const config = configs.find((y) => y.TenantId == x.Code);
+                    if (config) {
+                        x.LogoUrl = config.LogoUrl;
+                    }
+                });
+            }
+            return result;
+        }
+    }
+    async getPrioritiesForTenant(tenant) {
+        const payload = [
+            {
+                PropertyName: 'TenantId',
+                EntityValue: tenant,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            },
+        ];
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Ticket/SearchTenantPriority/0/${this.pageSize}`, payload, this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return;
+        }
+        else {
+            var result = res;
+            return result;
+        }
+    }
+    async getAllPrioritiesForTenant(tenant) {
+        const payload = [
+            {
+                PropertyName: 'TenantId',
+                EntityValue: tenant,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            },
+        ];
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Ticket/SearchTenantPriority/0/0`, payload, this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return;
+        }
+        else {
+            var result = res;
+            return result;
+        }
+    }
+    async getTenantConfigsByApp(app) {
+        this.utilService.sendBI(true);
+        const res = await this.server.get(`GetTenantConfigsWithParam/${app}/0/0`, this.envSvc.environment.AuthenticationAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return;
+        }
+        else {
+            var result = res.Result;
+            return result;
+        }
+    }
+    async getTicketsForTenant(tenant) {
+        const payload = [
+            {
+                PropertyName: 'TenantId',
+                EntityValue: tenant,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            },
+        ];
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Ticket/SearchTicket/0/${this.pageSize}`, payload, this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return;
+        }
+        else {
+            var result = res;
+            return result;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketingService, deps: [{ token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i1.EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.UtilService }, { type: i1.HttpWebRequestService }, { type: i1.EnvironmentService }] });
+
+var TicketPropertyName;
+(function (TicketPropertyName) {
+    TicketPropertyName["CreatedAt"] = "Created At";
+    TicketPropertyName["UpdatedAt"] = "Updated At";
+    TicketPropertyName["Title"] = "Title";
+    TicketPropertyName["Description"] = "Description";
+    TicketPropertyName["CurrentHandler"] = "Current Handler";
+    TicketPropertyName["Priority"] = "Priority";
+    TicketPropertyName["Status"] = "Status";
+})(TicketPropertyName || (TicketPropertyName = {}));
+var TicketPropertyMap;
+(function (TicketPropertyMap) {
+    TicketPropertyMap["CreatedAt"] = "CreatedAt";
+    TicketPropertyMap["UpdatedAt"] = "UpdatedAt";
+    TicketPropertyMap["Title"] = "Title";
+    TicketPropertyMap["Description"] = "Description";
+    TicketPropertyMap["CurrentHandler"] = "CurrentHandler";
+    TicketPropertyMap["Priority"] = "Priority";
+    TicketPropertyMap["Status"] = "Status";
+})(TicketPropertyMap || (TicketPropertyMap = {}));
+class TicketingComponent {
+    utilService;
+    server;
+    cdr;
+    service;
+    route;
+    importService;
+    envSvc;
+    permissionConfig = null;
+    styles = baseStyle;
+    // showAppForm: boolean = false;
+    // showTenantForm: boolean = false;
+    showTicketForm = false;
+    // selectedApp: Application | null = null;
+    // selectedTenant: Tenant | null = null;
+    selectedTicket = null;
+    activeApp = null;
+    activeTenant = null;
+    activeTicket = null;
+    apps = [];
+    detailPath = '';
+    tenants = [];
+    tickets = [];
+    ticketingAPI = ``;
+    defaultCompany = '';
+    baseUrl = ``;
+    pendingRef = TicketStatus.Pending;
+    visibleColumnDef = [];
+    exportColumnDef = [];
+    importedData = signal([]);
+    columnTemplates = viewChildren(ColumnDirective);
+    dataView;
+    tableView;
+    popUps;
+    pageSize = DEFAULT_PAGE_SIZE;
+    searchDebounceTime = 500;
+    pageState = null;
+    isOpen = false;
+    openDropdownId = null;
+    currentFilters = [];
+    currentSorts = [];
+    searchTerm$ = new Subject();
+    statusOptions = Object.keys(TicketStatus);
+    visibleColumns = [];
+    filterArray = [
+        {
+            name: TicketPropertyName.CreatedAt,
+            type: DataFilterType.Date,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.UpdatedAt,
+            type: DataFilterType.Date,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.Title,
+            type: DataFilterType.String,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.Description,
+            type: DataFilterType.String,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.CurrentHandler,
+            type: DataFilterType.String,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.Priority,
+            type: DataFilterType.String,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.Status,
+            type: DataFilterType.String,
+            checked: false,
+        },
+    ];
+    sortOptions = [
+        {
+            name: TicketPropertyName.CreatedAt,
+            type: DataFilterType.Date,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.UpdatedAt,
+            type: DataFilterType.Date,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.Title,
+            type: DataFilterType.String,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.Description,
+            type: DataFilterType.String,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.CurrentHandler,
+            type: DataFilterType.String,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.Priority,
+            type: DataFilterType.String,
+            checked: false,
+        },
+        {
+            name: TicketPropertyName.Status,
+            type: DataFilterType.String,
+            checked: false,
+        },
+    ];
+    currentSearchTerm = '';
+    constructor(utilService, server, cdr, service, route, importService, envSvc) {
+        this.utilService = utilService;
+        this.server = server;
+        this.cdr = cdr;
+        this.service = service;
+        this.route = route;
+        this.importService = importService;
+        this.envSvc = envSvc;
+    }
+    async ngOnInit() {
+        this.visibleColumnDef = this.service.ticketColumns.filter((x) => x.id != 'actions' || this.permissionConfig?.Actions['Create']);
+        this.exportColumnDef = this.service.ticketColumns.filter((x) => (x.id != 'actions' || this.permissionConfig?.Actions['Create']) &&
+            x.id != 'description');
+        console.log({ State: this.permissionConfig });
+        this.visibleColumns = this.service.ticketColumns
+            .filter((x) => x.id != 'actions' || this.permissionConfig?.Actions['Create'])
+            .map((col) => ({
+            checked: true,
+            name: typeof col.header === 'string' ? col.header : col.id,
+            type: DataFilterType.Bool,
+        }));
+        this.ticketingAPI = `${this.envSvc.environment.TicketingAPI}/Ticket`;
+        if (this.activeTenant) {
+            const tickets = await this.service.getTicketsForTenant(this.activeTenant);
+            if (tickets) {
+                this.pageState = tickets;
+                const results = tickets.Result;
+                this.tickets = results.map((x) => {
+                    return {
+                        ...x,
+                        Id: x.Code,
+                    };
+                });
+            }
+        }
+        this.searchTerm$
+            .pipe(debounceTime(this.searchDebounceTime)) // Adjust debounce time here (in ms)
+            .subscribe(async (searchTerm) => {
+            this.currentSearchTerm = searchTerm;
+            this.updateFiltersAndSorts(true);
+        });
+    }
+    async loadMore() {
+        if (!this.pageState) {
+            return;
+        }
+        this.utilService.sendBI(true);
+        const res = await this.loadMoreFiltersAndSorts();
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return;
+        }
+        else {
+            this.pageState = res;
+            var result = res.Result;
+            const mappedData = result.map((x) => {
+                return {
+                    ...x,
+                    Id: x.Code,
+                };
+            });
+            this.tickets = this.tickets.concat(mappedData);
+        }
+    }
+    async tableSaveTicket(form, callBack) {
+        if (form.Description.trim().length == 0) {
+            this.utilService.showInfo('Description cannot be empty');
+            return;
+        }
+        form.DataState =
+            form.DataState == ObjectState.New ? ObjectState.New : ObjectState.Changed;
+        form.Id = '';
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Ticket/SaveTicket`, [form], this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+        }
+        else {
+            this.utilService.showSuccess('Ticket saved successfully');
+            const result = res;
+            if (result.length > 0) {
+                var resultItem = result[0];
+                const itemIndex = this.tickets.findIndex((x) => x == form);
+                if (itemIndex > -1) {
+                    this.tickets[itemIndex].Code = resultItem.Code;
+                    this.tickets[itemIndex].Id = resultItem.Code;
+                    this.tickets[itemIndex].DataState = resultItem.DataState;
+                    this.tickets[itemIndex].TenantId = resultItem.TenantId;
+                    this.tickets[itemIndex].ServiceName = resultItem.ServiceName;
+                    this.tickets = this.tickets.map((x) => x);
+                    this.cacheItem(this.tickets[itemIndex]);
+                }
+                callBack();
+            }
+        }
+    }
+    updateTable() {
+        this.tickets = this.tickets.map((x) => x);
+    }
+    closePopUp() {
+        this.openDropdownId = null;
+        this.popUps.forEach((popUp) => {
+            if (popUp.dropdownOpen) {
+                popUp.toggleDropdown();
+            }
+        });
+    }
+    onViewChange(isGridView) { }
+    showTableView = true;
+    onSelectionChange(selectedRows) { }
+    onColumnsUpdated(updatedColumns) {
+        const updatedColumnDef = [];
+        updatedColumns.forEach((col) => {
+            const matchingCol = this.service.ticketColumns.find((column) => column.header === col.name || column.id === col.name);
+            if (matchingCol) {
+                updatedColumnDef.push(matchingCol);
+            }
+        });
+        this.visibleColumnDef = [...updatedColumnDef];
+    }
+    exportFiltersAndSorts = async (pageState) => {
+        var payload = this.currentFilters.map((x) => {
+            return {
+                PropertyName: TicketPropertyMap[x.name.split(' ').join('')],
+                EntityValue: x.value,
+                Operator: SearchOperator.And,
+                Sign: x.condition && Object.keys(FilterTypes).includes(x.condition)
+                    ? FilterTypes[x.condition]
+                    : SearchPropertySign.EQ,
+                Type: x.name == TicketPropertyName.CreatedAt ||
+                    x.name == TicketPropertyName.UpdatedAt
+                    ? SearchPropertyValueType.Date
+                    : SearchPropertyValueType.String,
+            };
+        });
+        // payload.push({
+        //   PropertyName: 'APIKey',
+        //   EntityValue: this.envSvc.environment.APIKey,
+        //   Operator: SearchOperator.And,
+        //   Sign: SearchPropertySign.EQ,
+        // });
+        for (let sort of this.currentSorts) {
+            payload.push({
+                PropertyName: TicketPropertyMap[sort.name.split(' ').join('')],
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+                Sort: sort.value.toLowerCase() == SortDirection.Asc.toLowerCase()
+                    ? SortDirection.Asc
+                    : sort.value.toLowerCase() == SortDirection.Desc.toLowerCase()
+                        ? SortDirection.Desc
+                        : SortDirection.None,
+            });
+        }
+        const searchPayload = [];
+        // if (this.activeApp) {
+        //   payload.push({
+        //     PropertyName: 'App',
+        //     EntityValue: this.activeApp.Code,
+        //     Operator: SearchOperator.And,
+        //     Sign: SearchPropertySign.EQ,
+        //   });
+        //   searchPayload.push({
+        //     PropertyName: 'App',
+        //     EntityValue: this.activeApp.Code,
+        //     Operator: SearchOperator.And,
+        //     Sign: SearchPropertySign.EQ,
+        //   });
+        // }
+        const searchTermExists = this.currentSearchTerm.trim().length > 0;
+        if (searchTermExists) {
+            Object.values(TicketPropertyMap).forEach((property) => {
+                searchPayload.push({
+                    PropertyName: property,
+                    EntityValue: this.currentSearchTerm.trim(),
+                    Operator: SearchOperator.Or,
+                    Sign: SearchPropertySign.LIKE,
+                });
+            });
+        }
+        if (this.activeTenant) {
+            payload.push({
+                PropertyName: 'TenantId',
+                EntityValue: this.activeTenant,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            });
+            searchPayload.push({
+                PropertyName: 'TenantId',
+                EntityValue: this.activeTenant,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            });
+        }
+        this.utilService.sendBI(true);
+        const res = searchTermExists
+            ? await this.server.post(`Ticket/SearchTicket/${pageState.skip}/${pageState.limit}`, searchPayload, this.envSvc.environment.TicketingAPI)
+            : payload.length == 0
+                ? await this.server.get(`Ticket/GetTicket/${pageState.skip}/${pageState.limit}`, this.envSvc.environment.TicketingAPI)
+                : await this.server.post(`Ticket/SearchTicket/${pageState.skip}/${pageState.limit}`, payload, this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return [];
+        }
+        else {
+            var result = res.Result;
+            return result;
+        }
+    };
+    async updateFiltersAndSorts(isSearch = false) {
+        if (!isSearch) {
+            this.dataView.onClearSearch();
+            this.currentSearchTerm = '';
+            this.cdr.detectChanges();
+            const clickEvent = new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            });
+            document.dispatchEvent(clickEvent);
+        }
+        var payload = this.currentFilters.map((x) => {
+            return {
+                PropertyName: TicketPropertyMap[x.name.split(' ').join('')],
+                EntityValue: x.value,
+                Operator: SearchOperator.And,
+                Sign: x.condition && Object.keys(FilterTypes).includes(x.condition)
+                    ? FilterTypes[x.condition]
+                    : SearchPropertySign.EQ,
+                Type: x.name == TicketPropertyName.CreatedAt ||
+                    x.name == TicketPropertyName.UpdatedAt
+                    ? SearchPropertyValueType.Date
+                    : SearchPropertyValueType.String,
+            };
+        });
+        // payload.push({
+        //   PropertyName: 'APIKey',
+        //   EntityValue: this.envSvc.environment.APIKey,
+        //   Operator: SearchOperator.And,
+        //   Sign: SearchPropertySign.EQ,
+        // });
+        for (let sort of this.currentSorts) {
+            payload.push({
+                PropertyName: TicketPropertyMap[sort.name.split(' ').join('')],
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+                Sort: sort.value.toLowerCase() == SortDirection.Asc.toLowerCase()
+                    ? SortDirection.Asc
+                    : sort.value.toLowerCase() == SortDirection.Desc.toLowerCase()
+                        ? SortDirection.Desc
+                        : SortDirection.None,
+            });
+        }
+        const searchPayload = [];
+        // if (this.activeApp) {
+        //   payload.push({
+        //     PropertyName: 'App',
+        //     EntityValue: this.activeApp.Code,
+        //     Operator: SearchOperator.And,
+        //     Sign: SearchPropertySign.EQ,
+        //   });
+        //   searchPayload.push({
+        //     PropertyName: 'App',
+        //     EntityValue: this.activeApp.Code,
+        //     Operator: SearchOperator.And,
+        //     Sign: SearchPropertySign.EQ,
+        //   });
+        // }
+        const searchTermExists = this.currentSearchTerm.trim().length > 0;
+        if (searchTermExists) {
+            Object.values(TicketPropertyMap).forEach((property) => {
+                searchPayload.push({
+                    PropertyName: property,
+                    EntityValue: this.currentSearchTerm.trim(),
+                    Operator: SearchOperator.Or,
+                    Sign: SearchPropertySign.LIKE,
+                });
+            });
+        }
+        if (this.activeTenant) {
+            payload.push({
+                PropertyName: 'TenantId',
+                EntityValue: this.activeTenant,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            });
+            searchPayload.push({
+                PropertyName: 'TenantId',
+                EntityValue: this.activeTenant,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            });
+        }
+        this.utilService.sendBI(true);
+        const res = searchTermExists
+            ? await this.server.post(`Ticket/SearchTicket/0/${this.pageSize}`, searchPayload, this.envSvc.environment.TicketingAPI)
+            : payload.length == 0
+                ? await this.server.get(`Ticket/GetTicket/0/${this.pageSize}`, this.envSvc.environment.TicketingAPI)
+                : await this.server.post(`Ticket/SearchTicket/0/${this.pageSize}`, payload, this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            this.currentFilters = [];
+            this.currentSorts = [];
+            return undefined;
+        }
+        else {
+            this.pageState = res;
+            var result = res.Result;
+            this.tickets = result.map((x) => {
+                return {
+                    ...x,
+                    Id: x.Code,
+                };
+            });
+        }
+    }
+    async loadMoreFiltersAndSorts() {
+        if (!this.pageState) {
+            return;
+        }
+        var payload = this.currentFilters.map((x) => {
+            return {
+                PropertyName: TicketPropertyMap[x.name.split(' ').join('')],
+                EntityValue: x.value,
+                Operator: SearchOperator.And,
+                Sign: x.condition && Object.keys(FilterTypes).includes(x.condition)
+                    ? FilterTypes[x.condition]
+                    : SearchPropertySign.EQ,
+                Type: x.name == TicketPropertyName.CreatedAt ||
+                    x.name == TicketPropertyName.UpdatedAt
+                    ? SearchPropertyValueType.Date
+                    : SearchPropertyValueType.String,
+            };
+        });
+        for (let sort of this.currentSorts) {
+            payload.push({
+                PropertyName: TicketPropertyMap[sort.name.split(' ').join('')],
+                EntityValue: '',
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+                Sort: sort.value.toLowerCase() == SortDirection.Asc.toLowerCase()
+                    ? SortDirection.Asc
+                    : sort.value.toLowerCase() == SortDirection.Desc.toLowerCase()
+                        ? SortDirection.Desc
+                        : SortDirection.None,
+            });
+        }
+        const searchPayload = [];
+        // if (this.activeApp) {
+        //   payload.push({
+        //     PropertyName: 'App',
+        //     EntityValue: this.activeApp.Code,
+        //     Operator: SearchOperator.And,
+        //     Sign: SearchPropertySign.EQ,
+        //   });
+        //   searchPayload.push({
+        //     PropertyName: 'App',
+        //     EntityValue: this.activeApp.Code,
+        //     Operator: SearchOperator.And,
+        //     Sign: SearchPropertySign.EQ,
+        //   });
+        // }
+        const searchTermExists = this.currentSearchTerm.trim().length > 0;
+        if (searchTermExists) {
+            Object.values(TicketPropertyMap).forEach((property) => {
+                searchPayload.push({
+                    PropertyName: property,
+                    EntityValue: this.currentSearchTerm.trim(),
+                    Operator: SearchOperator.Or,
+                    Sign: SearchPropertySign.LIKE,
+                });
+            });
+        }
+        if (this.activeTenant) {
+            payload.push({
+                PropertyName: 'TenantId',
+                EntityValue: this.activeTenant,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            });
+            searchPayload.push({
+                PropertyName: 'TenantId',
+                EntityValue: this.activeTenant,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            });
+        }
+        this.utilService.sendBI(true);
+        const res = searchTermExists
+            ? await this.server.post(`Ticket/SearchTicket/0/${this.pageSize}`, searchPayload, this.envSvc.environment.TicketingAPI)
+            : payload.length == 0
+                ? await this.server.get(`Ticket/GetTicket/${this.pageState.Skip}/${this.pageSize}`, this.envSvc.environment.TicketingAPI)
+                : await this.server.post(`Ticket/SearchTicket/${this.pageState.Skip}/${this.pageSize}`, payload, this.envSvc.environment.TicketingAPI);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        else {
+            var result = res;
+            return result;
+        }
+    }
+    onFilterUpdated(updatedFilters) {
+        // Ensure updatedFilters is an array
+        if (Array.isArray(updatedFilters)) {
+            this.currentFilters = updatedFilters;
+            this.updateFiltersAndSorts();
+        }
+    }
+    onSortUpdated(updatedSorts) {
+        this.currentSorts = updatedSorts;
+        this.updateFiltersAndSorts();
+    }
+    handleSearch(event) {
+        this.searchTerm$.next(event.value);
+    }
+    handleExport(exportedData) {
+        // console.log('Exported data:', exportedData);
+        this.downloadCSV(exportedData);
+    }
+    isFilteredState() {
+        return (this.currentSearchTerm.trim().length > 0 || this.currentFilters.length > 0);
+    }
+    downloadCSV(data) {
+        const headers = Object.keys(data[0]);
+        const csvContent = [
+            headers.join(','),
+            ...data.map((row) => headers.map((header) => row[header]).join(',')),
+        ].join('\n');
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        if (link.download !== undefined) {
+            const url = URL.createObjectURL(blob);
+            link.setAttribute('href', url);
+            link.setAttribute('download', 'export.csv');
+            link.style.visibility = 'hidden';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+    // get defaultCompany(): string {
+    //   const check = this.store.get(AppKey.USER);
+    //   if (!check) {
+    //     return '';
+    //   }
+    //   const user: User = (this.store.get(AppKey.USER) as { User: User }).User;
+    //   return user.DefaultCompany || '';
+    // }
+    onComplete(event) {
+        var defaultItem = {
+            Title: '',
+            Description: '',
+            App: this.activeApp ? this.activeApp : '',
+            Status: TicketStatus.Pending,
+            Company: this.defaultCompany,
+            Messages: [],
+            FileData: [],
+            FileUrls: [],
+            Id: this.tickets.length.toString(),
+            id: '',
+            Code: '',
+            TenantId: this.activeTenant ? this.activeTenant : '',
+            ServiceName: '',
+            CreatedAt: new Date(),
+            UpdatedAt: new Date(),
+            DataState: ObjectState.New,
+        };
+        this.importService.onComplete(event, defaultItem, 'Ticket/SaveTicket', this.envSvc.environment.TicketingAPI, 'Ticket', (items) => {
+            this.tickets = this.tickets.concat(items);
+        }, this.pageState);
+    }
+    tableCache = new Map();
+    cacheItem(item) {
+        const cacheKey = item.Id;
+        this.tableCache.set(cacheKey, JSON.parse(JSON.stringify(item)));
+    }
+    restoreCache(item) {
+        const cacheKey = item.Id;
+        const itemCache = this.tableCache.get(cacheKey);
+        if (itemCache) {
+            item.Description = itemCache.Description;
+            item.Priority = itemCache.Priority;
+            item.Status = itemCache.Status;
+        }
+        this.tableCache.delete(cacheKey);
+    }
+    // onAppSelected(app: Application | null) {
+    //   this.activeApp = app;
+    //   // if (app) {
+    //   //   const tenants = await this.service.getTenantsByApp(app.Code);
+    //   //   if (tenants) {
+    //   //     this.tenants = tenants;
+    //   //   }
+    //   // }
+    // }
+    onAppListUpdated(apps) {
+        this.apps = apps;
+    }
+    onTenantListUpdated(tenants) {
+        this.tenants = tenants;
+    }
+    getLogoUrl(url) {
+        return `${this.envSvc.environment.AuthenticationAPI}/${url}`;
+    }
+    addNewTicket() {
+        this.selectedTicket = null;
+        this.showTicketForm = true;
+    }
+    // editApp(app: Application) {
+    //   this.selectedApp = app;
+    //   this.showAppForm = true;
+    // }
+    // editTenant(tenant: Tenant) {
+    //   this.selectedTenant = tenant;
+    //   this.showTenantForm = true;
+    // }
+    editTicket(ticket) {
+        this.selectedTicket = ticket;
+        this.showTicketForm = true;
+    }
+    // onAppModalClose() {
+    //   this.showAppForm = false;
+    //   this.selectedApp = null;
+    // }
+    // onTenantModalClose() {
+    //   this.showTenantForm = false;
+    //   this.selectedTenant = null;
+    // }
+    onTicketModalClose() {
+        this.showTicketForm = false;
+        this.selectedTicket = null;
+    }
+    // onAppSave(app: Application) {
+    //   const idx = this.apps.findIndex((x) => x.Code == app.Code);
+    //   if (app.Code.trim().length > 0 && idx > -1) {
+    //     this.apps[idx].Name = app.Name;
+    //     this.apps[idx].Description = app.Description;
+    //     this.apps[idx].DataState = app.DataState;
+    //   } else {
+    //     this.apps.push(app);
+    //   }
+    // }
+    // onTenantSave(tenant: Tenant) {
+    //   const idx = this.tenants.findIndex((x) => x.Code == tenant.Code);
+    //   if (tenant.Code.trim().length > 0 && idx > -1) {
+    //     this.tenants[idx].Name = tenant.Name;
+    //     this.tenants[idx].Description = tenant.Description;
+    //     this.tenants[idx].DataState = tenant.DataState;
+    //   } else {
+    //     this.tenants.push(tenant);
+    //   }
+    // }
+    onTicketSave(ticket) {
+        const idx = this.tickets.findIndex((x) => x.Code == ticket.Code);
+        console.log({ Tickets: this.tickets, Ticket: ticket, idx: idx });
+        if (ticket.Code.trim().length > 0 && idx > -1) {
+            this.tickets[idx].Title = ticket.Title;
+            this.tickets[idx].Description = ticket.Description;
+            //   this.tickets[idx].CurrentHandler = ticket.CurrentHandler;
+            this.tickets[idx].Priority = ticket.Priority;
+            this.tickets[idx].Status = ticket.Status;
+            this.tickets[idx].FileUrls = ticket.FileUrls;
+            this.tickets[idx].DataState = ticket.DataState;
+        }
+        else {
+            this.tickets.unshift(ticket);
+        }
+        this.updateTable();
+    }
+    viewTicketDetails(ticket) {
+        this.utilService.goToPage(`${this.detailPath}`, ticket.Code);
+    }
+    cssColorToHex(color) {
+        const ctx = document.createElement('canvas').getContext('2d');
+        if (!ctx)
+            return null;
+        ctx.fillStyle = '#000'; // set a known color
+        ctx.fillStyle = color; // assign any CSS-valid color
+        const computed = ctx.fillStyle;
+        // If the browser does NOT understand the value, it won’t change from '#000'
+        if (computed.toLowerCase() === '#000000' &&
+            color.toLowerCase() !== 'black') {
+            return null; // invalid color name or unsupported value
+        }
+        return computed.toUpperCase(); // returns hex like #1E90FF
+    }
+    softenColor(hex, lightenPercent = 55, alphaPercent = 55) {
+        // Remove #
+        if (!hex.startsWith('#')) {
+            const converted = this.cssColorToHex(hex);
+            if (converted) {
+                hex = converted;
+            }
+        }
+        hex = hex.replace(/^#/, '');
+        if (hex.length === 3) {
+            // Convert shorthand (#abc → #aabbcc)
+            hex = hex
+                .split('')
+                .map((x) => x + x)
+                .join('');
+        }
+        const num = parseInt(hex, 16);
+        let r = (num >> 16) & 0xff;
+        let g = (num >> 8) & 0xff;
+        let b = num & 0xff;
+        // Lighten toward white by the given percentage
+        r = Math.min(255, Math.round(r + (255 - r) * (lightenPercent / 100)));
+        g = Math.min(255, Math.round(g + (255 - g) * (lightenPercent / 100)));
+        b = Math.min(255, Math.round(b + (255 - b) * (lightenPercent / 100)));
+        // Convert alpha percent to 2-digit hex
+        const alpha = Math.round((alphaPercent / 100) * 255);
+        const aHex = alpha.toString(16).padStart(2, '0').toUpperCase();
+        return `#${r.toString(16).padStart(2, '0').toUpperCase()}${g
+            .toString(16)
+            .padStart(2, '0')
+            .toUpperCase()}${b.toString(16).padStart(2, '0').toUpperCase()}${aHex}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketingComponent, deps: [{ token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: TicketingService }, { token: i3.ActivatedRoute }, { token: i1.ImportService }, { token: i1.EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TicketingComponent, selector: "app-ticketing", inputs: { permissionConfig: "permissionConfig", activeApp: "activeApp", activeTenant: "activeTenant", detailPath: "detailPath", defaultCompany: "defaultCompany", baseUrl: "baseUrl" }, viewQueries: [{ propertyName: "columnTemplates", predicate: ColumnDirective, descendants: true, isSignal: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex flex-col gap-4\">\n  <div class=\"flex flex-col gap-4\">\n    <!-- <app-tenant-selector\n      (onAppSelected)=\"this.onAppSelected($event)\"\n      (onTenantSelected)=\"onTenantSelected($event)\"\n      (onAppsUpdated)=\"this.onAppListUpdated($event)\"\n      (onTenantsUpdated)=\"this.onTenantListUpdated($event)\"\n    ></app-tenant-selector> -->\n\n    <div\n      class=\"tickets-section flex flex-col gap-2\"\n    >\n\n      <div class=\"ticket-table-container\">\n        <verben-data-view\n          #vdv\n          [viewState]=\"{\n            isSearch: true,\n            isColumn: true,\n            isFilter: true,\n            isSort: true,\n            isExport:!permissionConfig|| permissionConfig.Actions['Export'],\n            isSelect: true,\n            isCreate: false,\n            isToggle: false,\n            isImport:!permissionConfig|| permissionConfig.Actions['Import']\n          }\"\n          [buttonClass]=\"'my-custom-button-class'\"\n          [iconClass]=\"'my-icon-class'\"\n          [activeIconClass]=\"'my-active-icon-class'\"\n          [selectedColumnCount]=\"0\"\n          [selectedSortCount]=\"0\"\n          [selectedFilterTableCount]=\"0\"\n          (viewChange)=\"onViewChange($event)\"\n          (onSearchChange)=\"handleSearch($event)\"\n          [isTableView]=\"true\"\n        >\n          <div class=\"mt-2\" table-content>\n            <lib-data-table\n              [dataKey]=\"'Id'\"\n              class=\"form-table\"\n              #dt\n              [data]=\"tickets\"\n              [columns]=\"visibleColumnDef\"\n              [styleConfig]=\"styles\"\n              (selectionChange)=\"onSelectionChange($event)\"\n            >\n              <ng-container libColumn=\"select\">\n                <ng-template\n                  #cell\n                  let-isSelected=\"isSelected\"\n                  let-toggleRowSelection=\"toggleRowSelection\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isSelected\"\n                    (change)=\"toggleRowSelection()\"\n                  />\n                </ng-template>\n                <ng-template\n                  #header\n                  let-allRowsSelected=\"allRowsSelected\"\n                  let-someRowsSelected=\"someRowsSelected\"\n                  let-toggleAllRows=\"toggleAllRows\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"allRowsSelected()\"\n                    [indeterminate]=\"someRowsSelected()\"\n                    (change)=\"toggleAllRows()\"\n                  />\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"createdAt\">\n                <ng-template #cell let-value>\n                  {{ value | companyDate }}\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"updatedAt\">\n                <ng-template #cell let-value>\n                  {{ value | companyDate }}\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"title\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  {{ row.Title }}\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-row=\"row\"\n                  let-updateData=\"updateData\"\n                  let-value\n                >\n                  <div class=\"width-max\">\n                    <verbena-input [(ngModel)]=\"row.Title\"></verbena-input>\n                  </div>\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"description\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  {{ row.Description | ellipseWord }}\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-row=\"row\"\n                  let-updateData=\"updateData\"\n                  let-value\n                >\n                  <div class=\"width-max\">\n                    <verbena-input\n                      [(ngModel)]=\"row.Description\"\n                    ></verbena-input>\n                  </div>\n                  <!-- <div class=\"width-max\">\n                    <verbena-textarea [(ngModel)]=\"row.Description\">\n                    </verbena-textarea>\n                  </div> -->\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"currentHandler\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  {{ row.CurrentHandler }}\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"lastHandler\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  {{ row.LastHandler }}\n                </ng-template>\n              </ng-container>\n\n              <ng-container libColumn=\"priority\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  <div\n                    *ngIf=\"\n                      row.Priority && row.Priority\n                        | asyncLabel : 'TenantPriority' : 'Color' : ticketingAPI\n                        | async as color\n                    \"\n                    class=\"enum-val rounded-[8px] flex gap-2 items-center justify-center\"\n                   [style.backgroundColor]=\"color ? softenColor(color) : null\"\n\n                  >\n                    <span\n                      [style.backgroundColor]=\"color\"\n                      class=\"enum-dot\"\n                    ></span>\n                    <span>{{\n                      row.Priority\n                        | asyncLabel : \"TenantPriority\" : \"Name\" : ticketingAPI\n                        | async\n                    }}</span>\n                  </div>\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-row=\"row\"\n                  let-updateData=\"updateData\"\n                  let-value\n                >\n                  <div class=\"width-max\">\n                    <verbena-input [(ngModel)]=\"row.Priority\"></verbena-input>\n                  </div>\n                </ng-template>\n              </ng-container>\n\n              <ng-container libColumn=\"status\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  <div\n                    *ngIf=\"row.Status\"\n                    class=\"enum-val rounded-[8px] flex gap-2 items-center justify-center {{\n                      row.Status\n                    }}\"\n                  >\n                    <span class=\"enum-dot\"></span>\n                    <span>{{ row.Status }}</span>\n                  </div>\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-row=\"row\"\n                  let-updateData=\"updateData\"\n                  let-value\n                >\n                  <verben-drop-down\n                    width=\"100%\"\n                    placeholder=\"Select Status\"\n                    [options]=\"statusOptions\"\n                    [(ngModel)]=\"row.Status\"\n                  >\n                  </verben-drop-down>\n                </ng-template>\n              </ng-container>\n\n   \n\n              <ng-container libColumn=\"actions\">\n                <ng-template\n                  #cell\n                  let-isEditing=\"isEditing\"\n                  let-toggleRowEdit=\"toggleRowEdit\"\n                  let-row=\"row\"\n                  let-value\n                >\n                  <verben-pop-Up\n                    #popup\n                    [customStyles]=\"{ 'z-index': '99' }\"\n                    [enableMouseLeave]=\"false\"\n                  > \n                    <verben-svg\n                      class=\"cursor-pointer actions-icon\"\n                      dropdown-trigger\n                      icon=\"list\"\n                    ></verben-svg>\n                    <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                      <div\n                        *ngIf=\"!permissionConfig|| permissionConfig.Actions['Create']\"\n                        (click)=\"editTicket(value); closePopUp()\"\n                        class=\"pop-up-value cursor-pointer\"\n                      >\n                        Edit\n                      </div>\n                      <div\n                        (click)=\"viewTicketDetails(value); closePopUp()\"\n                        class=\"pop-up-value cursor-pointer\"\n                      >\n                        View Details\n                      </div>\n                    </div>\n                  </verben-pop-Up>\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-isEditing=\"isEditing\"\n                  let-toggleRowEdit=\"toggleRowEdit\"\n                  let-row=\"row\"\n                  let-value\n                >\n                  <div class=\"flex gap-2 items-center\">\n                    <verben-svg\n                      icon=\"tick\"\n                      [width]=\"15\"\n                      [height]=\"15\"\n                      (click)=\"tableSaveTicket(value, toggleRowEdit)\"\n                    ></verben-svg>\n                    <verben-svg\n                      (click)=\"restoreCache(value); toggleRowEdit()\"\n                      icon=\"close-no-circle\"\n                      [width]=\"15\"\n                      [height]=\"15\"\n                    ></verben-svg>\n                    <!-- <verben-svg (click)=\"toggleRowEdit()\" icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n                  </div>\n                </ng-template>\n              </ng-container>\n            </lib-data-table>\n          </div>\n          <div column-content>\n            <verben-visible-column\n              (columnsUpdated)=\"onColumnsUpdated($event)\"\n              [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n              borderRadius=\"10px\"\n              boxShadow=\"2px 2px 2px 0px silver\"\n              bgColor=\"white\"\n              width=\"400px\"\n              textColor=\"black\"\n              pd=\"1rem\"\n              primaryColor=\"#FFE681\"\n              secondaryColor=\"#3479E9\"\n              [columns]=\"visibleColumns\"\n              [displayedColumns]=\"5\"\n            ></verben-visible-column>\n          </div>\n          <div filter-content>\n            <verben-table-filter\n              (filtersApplied)=\"onFilterUpdated($event)\"\n              [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n              borderRadius=\"10px\"\n              boxShadow=\"2px 2px 2px 0px silver\"\n              bgColor=\"white\"\n              width=\"420px\"\n              textColor=\"black\"\n              pd=\"1rem\"\n              primaryColor=\"#FFE681\"\n              secondaryColor=\"#3479E9\"\n              tertiaryColor=\"#404040\"\n              [filterOptions]=\"filterArray\"\n              [maxFilterLength]=\"3\"\n            ></verben-table-filter>\n          </div>\n          <div sort-content>\n            <verben-sort-table\n              (selectedOptions)=\"onSortUpdated($event)\"\n              [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n              borderRadius=\"10px\"\n              boxShadow=\"2px 2px 2px 0px silver\"\n              bgColor=\"white\"\n              width=\"400px\"\n              textColor=\"black\"\n              pd=\"1rem\"\n              primaryColor=\"#FFE681\"\n              secondaryColor=\"#3479E9\"\n              tertiaryColor=\"#404040\"\n              [enableDragAndDrop]=\"true\"\n              [sortOptions]=\"sortOptions\"\n            ></verben-sort-table>\n          </div>\n          <div import-content>\n            <lib-data-import\n              [previewColumns]=\"visibleColumnDef\"\n              title=\"vendor-group\"\n              (importEventData)=\"onComplete($event)\"\n              [columnTemplates]=\"columnTemplates()\"\n            >\n            </lib-data-import>\n          </div>\n          <div export-content>\n            <lib-data-xport\n              [useImportKey]=\"true\"\n              [columns]=\"visibleColumnDef\"\n              [dataQueryFunction]=\"exportFiltersAndSorts\"\n              [data]=\"tickets\"\n            >\n            </lib-data-xport>\n          </div>\n          <div children>\n            <verbena-button\n              width=\"100%\"\n              [useIcon]=\"true\"\n              [icon]=\"'add'\"\n              class=\"verben-primary-button\"\n              [text]=\"'Add New Ticket'\"\n              (click)=\"addNewTicket()\"\n            >\n            </verbena-button>\n          </div>\n        </verben-data-view>\n      </div>\n      <div\n        *ngIf=\"tickets.length > 0\"\n        class=\"flex justify-end items-center gap-5\"\n      >\n        <span class=\"paginator-text\">{{ tickets.length }} records loaded</span>\n        <button (click)=\"loadMore()\" class=\"load-more view-links\">\n          Load more\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"\n      this.apps.length == 0 ||\n      (this.activeApp && this.tenants.length == 0) ||\n      (this.activeTenant && this.tickets.length == 0 && !isFilteredState())\n    \"\n    class=\"create-container flex-1 rounded-[20px] flex items-center justify-center\"\n  >\n\n  </div>\n</div>\n\n<!-- <app-add-app\n  [isVisible]=\"showAppForm\"\n  [selectedApp]=\"selectedApp\"\n  (onClose)=\"onAppModalClose()\"\n  (onSave)=\"onAppSave($event)\"\n></app-add-app>\n\n<app-add-tenant\n  [isVisible]=\"showTenantForm\"\n  [activeApp]=\"activeApp\"\n  [selectedTenant]=\"selectedTenant\"\n  (onClose)=\"onTenantModalClose()\"\n  (onSave)=\"onTenantSave($event)\"\n></app-add-tenant> -->\n\n<app-add-ticket\n  [isVisible]=\"showTicketForm\"\n  [activeApp]=\"activeApp\"\n  [activeTenant]=\"activeTenant\"\n  [selectedTicket]=\"selectedTicket\"\n  (onClose)=\"onTicketModalClose()\"\n  (onSave)=\"onTicketSave($event)\"\n></app-add-ticket>\n", styles: [".app-card-container{overflow-x:auto;padding:5px}.app-card{border:1.5px solid #0000001a;flex:1 1 250px;aspect-ratio:9/5;max-width:250px;box-shadow:0 0 12px transparent}.app-card.active{border:1.5px solid #6f2290;box-shadow:0 0 12px #b48ef766}.tenants-container{overflow-x:auto}.tenant{border:1.5px solid #0000001a;min-width:max-content}.tenant.active{border:1.5px solid #6f2290}.create-container{border:1.5px solid #0000001a}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i6.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i6.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i6.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i6.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i6.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "component", type: i6.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "closeColumn"], outputs: ["columnsUpdated", "resetFilter"] }, { kind: "component", type: i6.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions", "resetSortData"] }, { kind: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i6.DataImportComponent, selector: "lib-data-import", inputs: ["previewColumns", "formGroupConfig", "fields", "title", "columnTemplates", "parser", "previewData", "onImportComplete"], outputs: ["exportTemplateEvent", "importEvent", "importEventData", "rowSave"] }, { kind: "component", type: i6.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "component", type: i7.AddTicketComponent, selector: "app-add-ticket", inputs: ["activeApp", "activeTenant", "selectedTicket", "isVisible", "defaultCompany"], outputs: ["onOpen", "onClose", "onSave"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.AsyncLabelPipe, name: "asyncLabel" }, { kind: "pipe", type: i8.EllipseWordPipe, name: "ellipseWord" }, { kind: "pipe", type: i8.CompanyDatePipe, name: "companyDate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ticketing', template: "<div class=\"h-full flex flex-col gap-4\">\n  <div class=\"flex flex-col gap-4\">\n    <!-- <app-tenant-selector\n      (onAppSelected)=\"this.onAppSelected($event)\"\n      (onTenantSelected)=\"onTenantSelected($event)\"\n      (onAppsUpdated)=\"this.onAppListUpdated($event)\"\n      (onTenantsUpdated)=\"this.onTenantListUpdated($event)\"\n    ></app-tenant-selector> -->\n\n    <div\n      class=\"tickets-section flex flex-col gap-2\"\n    >\n\n      <div class=\"ticket-table-container\">\n        <verben-data-view\n          #vdv\n          [viewState]=\"{\n            isSearch: true,\n            isColumn: true,\n            isFilter: true,\n            isSort: true,\n            isExport:!permissionConfig|| permissionConfig.Actions['Export'],\n            isSelect: true,\n            isCreate: false,\n            isToggle: false,\n            isImport:!permissionConfig|| permissionConfig.Actions['Import']\n          }\"\n          [buttonClass]=\"'my-custom-button-class'\"\n          [iconClass]=\"'my-icon-class'\"\n          [activeIconClass]=\"'my-active-icon-class'\"\n          [selectedColumnCount]=\"0\"\n          [selectedSortCount]=\"0\"\n          [selectedFilterTableCount]=\"0\"\n          (viewChange)=\"onViewChange($event)\"\n          (onSearchChange)=\"handleSearch($event)\"\n          [isTableView]=\"true\"\n        >\n          <div class=\"mt-2\" table-content>\n            <lib-data-table\n              [dataKey]=\"'Id'\"\n              class=\"form-table\"\n              #dt\n              [data]=\"tickets\"\n              [columns]=\"visibleColumnDef\"\n              [styleConfig]=\"styles\"\n              (selectionChange)=\"onSelectionChange($event)\"\n            >\n              <ng-container libColumn=\"select\">\n                <ng-template\n                  #cell\n                  let-isSelected=\"isSelected\"\n                  let-toggleRowSelection=\"toggleRowSelection\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isSelected\"\n                    (change)=\"toggleRowSelection()\"\n                  />\n                </ng-template>\n                <ng-template\n                  #header\n                  let-allRowsSelected=\"allRowsSelected\"\n                  let-someRowsSelected=\"someRowsSelected\"\n                  let-toggleAllRows=\"toggleAllRows\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"allRowsSelected()\"\n                    [indeterminate]=\"someRowsSelected()\"\n                    (change)=\"toggleAllRows()\"\n                  />\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"createdAt\">\n                <ng-template #cell let-value>\n                  {{ value | companyDate }}\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"updatedAt\">\n                <ng-template #cell let-value>\n                  {{ value | companyDate }}\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"title\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  {{ row.Title }}\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-row=\"row\"\n                  let-updateData=\"updateData\"\n                  let-value\n                >\n                  <div class=\"width-max\">\n                    <verbena-input [(ngModel)]=\"row.Title\"></verbena-input>\n                  </div>\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"description\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  {{ row.Description | ellipseWord }}\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-row=\"row\"\n                  let-updateData=\"updateData\"\n                  let-value\n                >\n                  <div class=\"width-max\">\n                    <verbena-input\n                      [(ngModel)]=\"row.Description\"\n                    ></verbena-input>\n                  </div>\n                  <!-- <div class=\"width-max\">\n                    <verbena-textarea [(ngModel)]=\"row.Description\">\n                    </verbena-textarea>\n                  </div> -->\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"currentHandler\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  {{ row.CurrentHandler }}\n                </ng-template>\n              </ng-container>\n              <ng-container libColumn=\"lastHandler\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  {{ row.LastHandler }}\n                </ng-template>\n              </ng-container>\n\n              <ng-container libColumn=\"priority\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  <div\n                    *ngIf=\"\n                      row.Priority && row.Priority\n                        | asyncLabel : 'TenantPriority' : 'Color' : ticketingAPI\n                        | async as color\n                    \"\n                    class=\"enum-val rounded-[8px] flex gap-2 items-center justify-center\"\n                   [style.backgroundColor]=\"color ? softenColor(color) : null\"\n\n                  >\n                    <span\n                      [style.backgroundColor]=\"color\"\n                      class=\"enum-dot\"\n                    ></span>\n                    <span>{{\n                      row.Priority\n                        | asyncLabel : \"TenantPriority\" : \"Name\" : ticketingAPI\n                        | async\n                    }}</span>\n                  </div>\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-row=\"row\"\n                  let-updateData=\"updateData\"\n                  let-value\n                >\n                  <div class=\"width-max\">\n                    <verbena-input [(ngModel)]=\"row.Priority\"></verbena-input>\n                  </div>\n                </ng-template>\n              </ng-container>\n\n              <ng-container libColumn=\"status\">\n                <ng-template #cell let-row=\"row\" let-value>\n                  <div\n                    *ngIf=\"row.Status\"\n                    class=\"enum-val rounded-[8px] flex gap-2 items-center justify-center {{\n                      row.Status\n                    }}\"\n                  >\n                    <span class=\"enum-dot\"></span>\n                    <span>{{ row.Status }}</span>\n                  </div>\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-row=\"row\"\n                  let-updateData=\"updateData\"\n                  let-value\n                >\n                  <verben-drop-down\n                    width=\"100%\"\n                    placeholder=\"Select Status\"\n                    [options]=\"statusOptions\"\n                    [(ngModel)]=\"row.Status\"\n                  >\n                  </verben-drop-down>\n                </ng-template>\n              </ng-container>\n\n   \n\n              <ng-container libColumn=\"actions\">\n                <ng-template\n                  #cell\n                  let-isEditing=\"isEditing\"\n                  let-toggleRowEdit=\"toggleRowEdit\"\n                  let-row=\"row\"\n                  let-value\n                >\n                  <verben-pop-Up\n                    #popup\n                    [customStyles]=\"{ 'z-index': '99' }\"\n                    [enableMouseLeave]=\"false\"\n                  > \n                    <verben-svg\n                      class=\"cursor-pointer actions-icon\"\n                      dropdown-trigger\n                      icon=\"list\"\n                    ></verben-svg>\n                    <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                      <div\n                        *ngIf=\"!permissionConfig|| permissionConfig.Actions['Create']\"\n                        (click)=\"editTicket(value); closePopUp()\"\n                        class=\"pop-up-value cursor-pointer\"\n                      >\n                        Edit\n                      </div>\n                      <div\n                        (click)=\"viewTicketDetails(value); closePopUp()\"\n                        class=\"pop-up-value cursor-pointer\"\n                      >\n                        View Details\n                      </div>\n                    </div>\n                  </verben-pop-Up>\n                </ng-template>\n                <ng-template\n                  #cellEdit\n                  let-isEditing=\"isEditing\"\n                  let-toggleRowEdit=\"toggleRowEdit\"\n                  let-row=\"row\"\n                  let-value\n                >\n                  <div class=\"flex gap-2 items-center\">\n                    <verben-svg\n                      icon=\"tick\"\n                      [width]=\"15\"\n                      [height]=\"15\"\n                      (click)=\"tableSaveTicket(value, toggleRowEdit)\"\n                    ></verben-svg>\n                    <verben-svg\n                      (click)=\"restoreCache(value); toggleRowEdit()\"\n                      icon=\"close-no-circle\"\n                      [width]=\"15\"\n                      [height]=\"15\"\n                    ></verben-svg>\n                    <!-- <verben-svg (click)=\"toggleRowEdit()\" icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n                  </div>\n                </ng-template>\n              </ng-container>\n            </lib-data-table>\n          </div>\n          <div column-content>\n            <verben-visible-column\n              (columnsUpdated)=\"onColumnsUpdated($event)\"\n              [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n              borderRadius=\"10px\"\n              boxShadow=\"2px 2px 2px 0px silver\"\n              bgColor=\"white\"\n              width=\"400px\"\n              textColor=\"black\"\n              pd=\"1rem\"\n              primaryColor=\"#FFE681\"\n              secondaryColor=\"#3479E9\"\n              [columns]=\"visibleColumns\"\n              [displayedColumns]=\"5\"\n            ></verben-visible-column>\n          </div>\n          <div filter-content>\n            <verben-table-filter\n              (filtersApplied)=\"onFilterUpdated($event)\"\n              [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n              borderRadius=\"10px\"\n              boxShadow=\"2px 2px 2px 0px silver\"\n              bgColor=\"white\"\n              width=\"420px\"\n              textColor=\"black\"\n              pd=\"1rem\"\n              primaryColor=\"#FFE681\"\n              secondaryColor=\"#3479E9\"\n              tertiaryColor=\"#404040\"\n              [filterOptions]=\"filterArray\"\n              [maxFilterLength]=\"3\"\n            ></verben-table-filter>\n          </div>\n          <div sort-content>\n            <verben-sort-table\n              (selectedOptions)=\"onSortUpdated($event)\"\n              [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n              borderRadius=\"10px\"\n              boxShadow=\"2px 2px 2px 0px silver\"\n              bgColor=\"white\"\n              width=\"400px\"\n              textColor=\"black\"\n              pd=\"1rem\"\n              primaryColor=\"#FFE681\"\n              secondaryColor=\"#3479E9\"\n              tertiaryColor=\"#404040\"\n              [enableDragAndDrop]=\"true\"\n              [sortOptions]=\"sortOptions\"\n            ></verben-sort-table>\n          </div>\n          <div import-content>\n            <lib-data-import\n              [previewColumns]=\"visibleColumnDef\"\n              title=\"vendor-group\"\n              (importEventData)=\"onComplete($event)\"\n              [columnTemplates]=\"columnTemplates()\"\n            >\n            </lib-data-import>\n          </div>\n          <div export-content>\n            <lib-data-xport\n              [useImportKey]=\"true\"\n              [columns]=\"visibleColumnDef\"\n              [dataQueryFunction]=\"exportFiltersAndSorts\"\n              [data]=\"tickets\"\n            >\n            </lib-data-xport>\n          </div>\n          <div children>\n            <verbena-button\n              width=\"100%\"\n              [useIcon]=\"true\"\n              [icon]=\"'add'\"\n              class=\"verben-primary-button\"\n              [text]=\"'Add New Ticket'\"\n              (click)=\"addNewTicket()\"\n            >\n            </verbena-button>\n          </div>\n        </verben-data-view>\n      </div>\n      <div\n        *ngIf=\"tickets.length > 0\"\n        class=\"flex justify-end items-center gap-5\"\n      >\n        <span class=\"paginator-text\">{{ tickets.length }} records loaded</span>\n        <button (click)=\"loadMore()\" class=\"load-more view-links\">\n          Load more\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"\n      this.apps.length == 0 ||\n      (this.activeApp && this.tenants.length == 0) ||\n      (this.activeTenant && this.tickets.length == 0 && !isFilteredState())\n    \"\n    class=\"create-container flex-1 rounded-[20px] flex items-center justify-center\"\n  >\n\n  </div>\n</div>\n\n<!-- <app-add-app\n  [isVisible]=\"showAppForm\"\n  [selectedApp]=\"selectedApp\"\n  (onClose)=\"onAppModalClose()\"\n  (onSave)=\"onAppSave($event)\"\n></app-add-app>\n\n<app-add-tenant\n  [isVisible]=\"showTenantForm\"\n  [activeApp]=\"activeApp\"\n  [selectedTenant]=\"selectedTenant\"\n  (onClose)=\"onTenantModalClose()\"\n  (onSave)=\"onTenantSave($event)\"\n></app-add-tenant> -->\n\n<app-add-ticket\n  [isVisible]=\"showTicketForm\"\n  [activeApp]=\"activeApp\"\n  [activeTenant]=\"activeTenant\"\n  [selectedTicket]=\"selectedTicket\"\n  (onClose)=\"onTicketModalClose()\"\n  (onSave)=\"onTicketSave($event)\"\n></app-add-ticket>\n", styles: [".app-card-container{overflow-x:auto;padding:5px}.app-card{border:1.5px solid #0000001a;flex:1 1 250px;aspect-ratio:9/5;max-width:250px;box-shadow:0 0 12px transparent}.app-card.active{border:1.5px solid #6f2290;box-shadow:0 0 12px #b48ef766}.tenants-container{overflow-x:auto}.tenant{border:1.5px solid #0000001a;min-width:max-content}.tenant.active{border:1.5px solid #6f2290}.create-container{border:1.5px solid #0000001a}\n"] }]
+        }], ctorParameters: () => [{ type: i1.UtilService }, { type: i1.HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: TicketingService }, { type: i3.ActivatedRoute }, { type: i1.ImportService }, { type: i1.EnvironmentService }], propDecorators: { permissionConfig: [{
+                type: Input
+            }], activeApp: [{
+                type: Input
+            }], activeTenant: [{
+                type: Input
+            }], detailPath: [{
+                type: Input
+            }], defaultCompany: [{
+                type: Input
+            }], baseUrl: [{
+                type: Input
+            }], dataView: [{
+                type: ViewChild,
+                args: ['vdv']
+            }], tableView: [{
+                type: ViewChild,
+                args: ['dt']
+            }], popUps: [{
+                type: ViewChildren,
+                args: ['popup']
+            }] } });
+
+class TicketLibModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TicketLibModule, declarations: [TicketingComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DataTableModule,
+            SvgModule,
+            VerbenPopUpModule,
+            DataViewModule,
+            VerbenaButtonModule,
+            CardDataViewModule,
+            DropDownModule,
+            VerbenaSwitchModule,
+            TableFilterModule,
+            VisibleColumnModule,
+            AsyncLabelPipe,
+            SortTableModule,
+            DataExportModule,
+            TooltipModule,
+            VerbenDialogueModule,
+            VerbenaInputModule,
+            DataImportModule,
+            DataExportModule,
+            DataXportModule,
+            EllipseWordPipe,
+            CompanyDatePipe,
+            AddTicketLibModule], exports: [TicketingComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketLibModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            DataTableModule,
+            SvgModule,
+            VerbenPopUpModule,
+            DataViewModule,
+            VerbenaButtonModule,
+            CardDataViewModule,
+            DropDownModule,
+            VerbenaSwitchModule,
+            TableFilterModule,
+            VisibleColumnModule,
+            SortTableModule,
+            DataExportModule,
+            TooltipModule,
+            VerbenDialogueModule,
+            VerbenaInputModule,
+            DataImportModule,
+            DataExportModule,
+            DataXportModule,
+            AddTicketLibModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TicketLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TicketingComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        DataTableModule,
+                        SvgModule,
+                        VerbenPopUpModule,
+                        DataViewModule,
+                        VerbenaButtonModule,
+                        CardDataViewModule,
+                        DropDownModule,
+                        VerbenaSwitchModule,
+                        TableFilterModule,
+                        VisibleColumnModule,
+                        AsyncLabelPipe,
+                        SortTableModule,
+                        DataExportModule,
+                        TooltipModule,
+                        VerbenDialogueModule,
+                        VerbenaInputModule,
+                        DataImportModule,
+                        DataExportModule,
+                        DataXportModule,
+                        EllipseWordPipe,
+                        CompanyDatePipe,
+                        AddTicketLibModule,
+                    ],
+                    exports: [TicketingComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TicketLibModule, TicketingComponent, TicketingService };
+//# sourceMappingURL=verben-ticketing-ui-src-lib-components-ticketing.mjs.map